Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit fa929d85 by Mr. Lan
Options

fix bug.

parent 87d83e4e
Inline Side-by-side
Showing with 78 additions and 18 deletions
src/components/VueFormMaking/components/GenerateForm.vue
...@@ -46,6 +46,56 @@ ...@@ -46,6 +46,56 @@
<slot :name="item.model" :model="models" /> <slot :name="item.model" :model="models" />
</el-form-item> </el-form-item>
</template> </template>
<!-- 子表单 -->
<template v-if="item.type === 'subform'">
<el-form-item
:key="item.key"
:label-width="!item.options.labelWidthStatus?'0px': item.options.labelWidth + 'px'"
:label="!item.options.labelWidthStatus?'':item.name"
:prop="item.model"
>
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
width="50"
align="center"
header-align="center"
>
<template slot="header">
<i style="font-size: 25px; color: #409EFF;cursor:pointer;" class="el-icon-circle-plus" @click="addCol(item)" />
</template>
<template>
<i style="font-size: 25px; color: red" class="el-icon-remove" />
</template>
</el-table-column>
<el-table-column
v-for="v in item.columns.list"
:key="v.key"
:prop="v.key"
:label="v.name"
width="250"
>
<template>
<genetate-form-item
:preview="preview"
:models.sync="models"
:rules="rules"
:widget="v"
:remote="remote"
:data="data"
:disabled="disabled"
:is-label="false"
@input-change="onInputChange"
/>
</template>
</el-table-column>
</el-table>
</el-form-item>
</template>
<template v-else> <template v-else>
<genetate-form-item <genetate-form-item
...@@ -78,6 +128,7 @@ export default { ...@@ -78,6 +128,7 @@ export default {
props: ['data', 'remote', 'value', 'insite', 'disabled', 'preview'], props: ['data', 'remote', 'value', 'insite', 'disabled', 'preview'],
data() { data() {
return { return {
tableData: [],
models: {}, models: {},
rules: {} rules: {}
} }
...@@ -102,12 +153,19 @@ export default { ...@@ -102,12 +153,19 @@ export default {
mounted() { mounted() {
}, },
methods: { methods: {
addCol(item) {
var j = {}
j["id"] = this.tableData.length + 1
this.tableData.push(j)
},
generateModle(genList) { generateModle(genList) {
for (let i = 0; i < genList.length; i++) { for (let i = 0; i < genList.length; i++) {
if (genList[i].type === 'grid') { if (genList[i].type === 'grid') {
genList[i].columns.forEach(item => { genList[i].columns.forEach(item => {
this.generateModle(item.list) this.generateModle(item.list)
}) })
} else if (genList[i].type === 'subform') {
this.generateModle(genList[i].columns.list)
} else { } else {
if (this.value && Object.keys(this.value).indexOf(genList[i].model) >= 0) { if (this.value && Object.keys(this.value).indexOf(genList[i].model) >= 0) {
this.models[genList[i].model] = this.value[genList[i].model] this.models[genList[i].model] = this.value[genList[i].model]
......
src/components/VueFormMaking/components/GenerateFormItem.vue
<template> <template>
<el-form-item <el-form-item
:label-width="widget.options.labelWidthStatus?widgetLabelWidth + 'px': '0px'" :label-width="isLabel===false||!widget.options.labelWidthStatus?'0px': widgetLabelWidth + 'px'"
:label="widget.type==='divider' || !widget.options.labelWidthStatus?'':widget.name" :label="isLabel===false||widget.type==='divider' || !widget.options.labelWidthStatus?'':widget.name"
:prop="widget.model" :prop="widget.model"
> >
<template v-if="preview"> <template v-if="preview">
<template v-if="widget.type == 'color'"> <template v-if="widget.type === 'color'">
<div style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px" :style="{'background-color': dataModel}" /> <div style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px" :style="{'background-color': dataModel}" />
</template> </template>
<template v-else-if="widget.type=='switch'"> <template v-else-if="widget.type=='switch'">
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
:disabled="true" :disabled="true"
/> />
</template> </template>
<template v-else-if="widget.type == 'editor'"> <template v-else-if="widget.type === 'editor'">
<div class="previewEditorDiv" v-html="dataModel" /> <div class="previewEditorDiv" v-html="dataModel" />
</template> </template>
<template v-else-if="widget.type=='imgupload'"> <template v-else-if="widget.type=='imgupload'">
...@@ -50,9 +50,9 @@ ...@@ -50,9 +50,9 @@
</template> </template>
</template> </template>
<template v-else> <template v-else>
<template v-if="widget.type == 'input'"> <template v-if="widget.type === 'input'">
<el-input <el-input
v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'" v-if="widget.options.dataType === 'number' || widget.options.dataType === 'integer' || widget.options.dataType === 'float'"
v-model.number="dataModel" v-model.number="dataModel"
:type="widget.options.dataType" :type="widget.options.dataType"
:placeholder="widget.options.placeholder" :placeholder="widget.options.placeholder"
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
/> />
</template> </template>
<template v-if="widget.type == 'textarea'"> <template v-if="widget.type === 'textarea'">
<el-input <el-input
v-model="dataModel" v-model="dataModel"
type="textarea" type="textarea"
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
/> />
</template> </template>
<template v-if="widget.type == 'number'"> <template v-if="widget.type === 'number'">
<el-input-number <el-input-number
v-model="dataModel" v-model="dataModel"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
/> />
</template> </template>
<template v-if="widget.type == 'radio'"> <template v-if="widget.type === 'radio'">
<el-radio-group <el-radio-group
v-model="dataModel" v-model="dataModel"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
</el-radio-group> </el-radio-group>
</template> </template>
<template v-if="widget.type == 'checkbox'"> <template v-if="widget.type === 'checkbox'">
<el-checkbox-group <el-checkbox-group
v-model="dataModel" v-model="dataModel"
:style="{width: widget.options.width}" :style="{width: widget.options.width}"
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
</el-checkbox-group> </el-checkbox-group>
</template> </template>
<template v-if="widget.type == 'time'"> <template v-if="widget.type === 'time'">
<el-time-picker <el-time-picker
v-model="dataModel" v-model="dataModel"
:is-range="widget.options.isRange" :is-range="widget.options.isRange"
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
/> />
</template> </template>
<template v-if="widget.type == 'color'"> <template v-if="widget.type === 'color'">
<el-color-picker <el-color-picker
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
/> />
</template> </template>
<template v-if="widget.type == 'select'"> <template v-if="widget.type === 'select'">
<el-select <el-select
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
/> />
</template> </template>
<template v-if="widget.type == 'editor'"> <template v-if="widget.type === 'editor'">
<vue-editor <vue-editor
v-model="dataModel" v-model="dataModel"
:disabled="widget.options.disabled" :disabled="widget.options.disabled"
...@@ -289,15 +289,17 @@ ...@@ -289,15 +289,17 @@
import FmUpload from './Upload' import FmUpload from './Upload'
export default { export default {
name: 'GenetateFormItem',
components: { components: {
FmUpload FmUpload
}, },
/* eslint-disable */ /* eslint-disable */
props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled', 'preview'], props: ['widget', 'models', 'rules', 'remote', 'data', 'disabled', 'preview', 'isLabel'],
data() { data() {
return { return {
widgetLabelWidth: '', widgetLabelWidth: '',
dataModel: this.models[this.widget.model] dataModel: this.models[this.widget.model],
tableData: []
} }
}, },
watch: { watch: {
......
src/components/VueFormMaking/components/WidgetConfig.vue
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
v-if="Object.keys(data.options).indexOf('labelWidthStatus')>=0 && v-if="Object.keys(data.options).indexOf('labelWidthStatus')>=0 &&
data.type!=='grid' && data.type!=='grid' &&
data.type !== 'divider'" data.type !== 'divider'"
label="隐藏标签" label="显示标签"
> >
<el-switch <el-switch
v-model="data.options.labelWidthStatus" v-model="data.options.labelWidthStatus"
......
src/components/VueFormMaking/components/WidgetForm.vue
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
<div <div
v-if="el && el.key" v-if="el && el.key"
:key="el.key" :key="el.key"
:style="{minWidth: el.width ? `${el.width}px`: '33.3%', width: el.width ? `${el.width}px`: '33.3%', 'display': 'inline-block', 'vertical-align': 'top'}" :style="{width: '249px', 'display': 'inline-block', 'vertical-align': 'top'}"
@click.native="handleSelectWidget(i)" @click.native="handleSelectWidget(i)"
> >
<widget-form-item <widget-form-item
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment