Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 7a77a982 by Mr. Lan
Options

feat: 添加子表单功能。

parent 6ecb796f
Inline Side-by-side
Showing with 114 additions and 144 deletions
package.json
...@@ -41,15 +41,15 @@ ...@@ -41,15 +41,15 @@
"@antv/util": "1.3.1", "@antv/util": "1.3.1",
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"axios": "0.18.1", "axios": "^0.20.0",
"clipboard": "2.0.4", "clipboard": "^2.0.6",
"codemirror": "5.45.0", "codemirror": "^5.58.1",
"core-js": "^2.6.11", "core-js": "^2.6.11",
"driver.js": "0.9.5", "driver.js": "0.9.5",
"dropzone": "5.5.1", "dropzone": "5.5.1",
"e-icon-picker": "^1.0.7", "e-icon-picker": "^1.0.7",
"echarts": "^4.8.0", "echarts": "^4.8.0",
"element-ui": "2.11.1", "element-ui": "^2.13.2",
"file-saver": "2.0.1", "file-saver": "2.0.1",
"form-making": "^1.2.8", "form-making": "^1.2.8",
"fuse.js": "3.4.4", "fuse.js": "3.4.4",
...@@ -69,18 +69,20 @@ ...@@ -69,18 +69,20 @@
"sortablejs": "1.8.4", "sortablejs": "1.8.4",
"tui-editor": "1.3.3", "tui-editor": "1.3.3",
"viewerjs": "^1.6.1", "viewerjs": "^1.6.1",
"vue": "2.6.10", "vue": "^2.6.12",
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-codemirror-lite": "^1.0.4", "vue-codemirror-lite": "^1.0.4",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "^0.5.0", "vue-cropper": "^0.5.0",
"vue-i18n": "^5.0.3", "vue-i18n": "^5.0.3",
"vue-loader": "^15.9.3",
"vue-particles": "^1.0.9", "vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "3.0.2", "vue-router": "3.0.2",
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",
"vue2-editor": "^2.10.2", "vue2-editor": "^2.10.2",
"vuedraggable": "2.20.0", "vuedraggable": "2.20.0",
"vueify": "^9.4.1",
"vuex": "3.1.0", "vuex": "3.1.0",
"xlsx": "0.14.1" "xlsx": "0.14.1"
}, },
...@@ -116,7 +118,7 @@ ...@@ -116,7 +118,7 @@
"serve-static": "^1.13.2", "serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3", "svg-sprite-loader": "4.1.3",
"svgo": "1.2.0", "svgo": "1.2.0",
"vue-template-compiler": "2.6.10" "vue-template-compiler": "^2.6.12"
}, },
"engines": { "engines": {
"node": ">=8.9", "node": ">=8.9",
......
src/components/VueFormMaking/components/GenerateForm.vue
...@@ -55,42 +55,47 @@ ...@@ -55,42 +55,47 @@
:prop="item.model" :prop="item.model"
> >
<el-table <el-table
:data="tableData" :data="models[item.model]"
border border
style="width: 100%" style="width: 100%"
> >
<el-table-column <el-table-column
fixed
width="50" width="50"
> >
<template slot="header"> <template slot="header">
<i style="font-size: 25px; color: #409EFF;cursor:pointer;" class="el-icon-circle-plus" @click="addCol(item)" /> <i style="font-size: 25px; color: #409EFF;cursor:pointer;" class="el-icon-circle-plus" @click="addCol(item)" />
</template> </template>
<template> <template slot-scope="scope">
<i style="font-size: 25px; color: red" class="el-icon-remove" /> <i style="font-size: 25px; color: red" class="el-icon-remove" @click="delCol(item, scope.$index)" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <template v-for="(c, i) in item.columns">
v-for="v in item.columns.list" <div :key="i">
:key="v.key" <el-table-column
:prop="v.key" v-for="v in c.list"
:label="v.name" :key="v.key"
width="250" :prop="v.modal"
> :label="v.name"
<template> min-width="250"
<genetate-form-item >
:preview="preview" <template>
:models.sync="models" <genetate-form-item
:rules="rules" :preview="preview"
:widget="v" :models.sync="models"
:remote="remote" :rules="rules"
:data="data" :widget="v"
:disabled="disabled" :remote="remote"
:is-label="false" :data="data"
@input-change="onSubformInputChange" :disabled="disabled"
/> :is-label="false"
</template> @input-change="onSubformInputChange"
</el-table-column> />
</template>
</el-table-column>
</div>
</template>
</el-table> </el-table>
</el-form-item> </el-form-item>
</template> </template>
...@@ -128,7 +133,8 @@ export default { ...@@ -128,7 +133,8 @@ export default {
return { return {
tableData: [], tableData: [],
models: {}, models: {},
rules: {} rules: {},
subformFields: {}
} }
}, },
watch: { watch: {
...@@ -152,9 +158,16 @@ export default { ...@@ -152,9 +158,16 @@ export default {
}, },
methods: { methods: {
addCol(item) { addCol(item) {
var j = {} var subformFields = {}
j["id"] = this.tableData.length + 1 for (var c of item.columns) {
this.tableData.push(j) for (var l of c.list) {
subformFields[l.model] = ""
}
}
this.models[item.model].push(subformFields)
},
delCol(item, index) {
this.models[item.model].splice(index, 1)
}, },
generateModle(genList) { generateModle(genList) {
for (let i = 0; i < genList.length; i++) { for (let i = 0; i < genList.length; i++) {
...@@ -162,14 +175,14 @@ export default { ...@@ -162,14 +175,14 @@ export default {
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]
} else { } else {
if (genList[i].type === 'blank') { if (genList[i].type === 'blank') {
this.$set(this.models, genList[i].model, genList[i].options.defaultType === 'String' ? '' : (genList[i].options.defaultType === 'Object' ? {} : [])) this.$set(this.models, genList[i].model, genList[i].options.defaultType === 'String' ? '' : (genList[i].options.defaultType === 'Object' ? {} : []))
} if (genList[i].type === 'subform') {
this.$set(this.models, genList[i].model, [])
} else { } else {
this.models[genList[i].model] = genList[i].options.defaultValue this.models[genList[i].model] = genList[i].options.defaultValue
} }
......
src/components/VueFormMaking/components/WidgetForm.vue
...@@ -64,64 +64,69 @@ ...@@ -64,64 +64,69 @@
</template> </template>
<!-- 子表单 --> <!-- 子表单 -->
<template v-else-if="element.type == 'subform'"> <template v-else-if="element.type == 'subform'">
<el-form-item <el-row
v-if="element && element.key" v-if="element && element.key"
:key="element.key" :key="element.key"
class="widget-col widget-view"
:label-width="element.options.labelWidthStatus?data.config.labelWidth + 'px': '0px'"
:class="{active: selectWidget.key === element.key, 'is_req': element.options.required}"
:label="element.options.labelWidthStatus?element.name:''"
@click.native="handleSelectWidget(index)"
> >
<div <el-form-item
type="flex" class="widget-col widget-view"
:class="{active: selectWidget.key == element.key}" :label-width="element.options.labelWidthStatus?data.config.labelWidth + 'px': '0px'"
:gutter="element.options.gutter ? element.options.gutter : 0" :class="{active: selectWidget.key === element.key, 'is_req': element.options.required}"
:justify="element.options.justify" :label="element.options.labelWidthStatus?element.name:''"
:align="element.options.align" @click.native="handleSelectWidget(index)"
> >
<div
<draggable type="flex"
v-model="element.columns.list" :class="{active: selectWidget.key == element.key}"
:no-transition-on-drag="true" :gutter="element.options.gutter ? element.options.gutter : 0"
v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}" :justify="element.options.justify"
@end="handleMoveEnd" :align="element.options.align"
@add="handleSubformWidgetAdd($event, element)"
> >
<transition-group <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
name="fade" <draggable
tag="div" v-model="col.list"
class="widget-col-list" :no-transition-on-drag="true"
style="min-height: 131px;overflow-x: auto; white-space: nowrap;" v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
> @end="handleMoveEnd"
<template v-for="(el, i) in element.columns.list"> @add="handleWidgetColAdd($event, element, colIndex)"
<div >
v-if="el && el.key" <transition-group
:key="el.key" name="fade"
@click.native="handleSelectWidget(i)" tag="div"
class="widget-col-list"
style="min-height: 131px;overflow-x: auto; white-space: nowrap;"
> >
<widget-form-item <template v-for="(el, i) in col.list">
:element="el" <div
:select.sync="selectWidget" v-if="el && el.key"
:index="i" :key="el.key"
:data="element.columns" @click="handleSelectWidget(i)"
:data-config="data" >
/> <widget-form-item
</div> :element="el"
</template> :select.sync="selectWidget"
</transition-group> :index="i"
</draggable> :data="col"
:data-config="data"
<div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action"> :is-label="true"
:is-table="true"
<i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" /> />
</div>
</template>
</transition-group>
</draggable>
</el-col>
<div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action">
<i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
</div>
<div v-if="selectWidget.key == element.key" class="widget-view-drag widget-col-drag">
<i class="iconfont icon-drag drag-widget" />
</div>
</div> </div>
</el-form-item>
<div v-if="selectWidget.key == element.key" class="widget-view-drag widget-col-drag"> </el-row>
<i class="iconfont icon-drag drag-widget" />
</div>
</div>
</el-form-item>
</template> </template>
<template v-else> <template v-else>
<widget-form-item <widget-form-item
...@@ -213,68 +218,15 @@ export default { ...@@ -213,68 +218,15 @@ export default {
}) })
} }
if (this.data.list[newIndex].type === 'grid') { if (this.data.list[newIndex].type === 'grid' || this.data.list[newIndex].type === 'subform') {
this.$set(this.data.list, newIndex, { this.$set(this.data.list, newIndex, {
...this.data.list[newIndex], ...this.data.list[newIndex],
columns: this.data.list[newIndex].columns.map(item => ({ ...item })) columns: this.data.list[newIndex].columns.map(item => ({ ...item }))
}) })
} }
if (this.data.list[newIndex].type === 'subform') {
this.$set(this.data.list, newIndex, {
...this.data.list[newIndex],
columns: this.data.list[newIndex].columns = {
span: 24,
list: []
}
})
}
this.selectWidget = this.data.list[newIndex] this.selectWidget = this.data.list[newIndex]
}, },
handleSubformWidgetAdd($event, row) {
const newIndex = $event.newIndex
const oldIndex = $event.oldIndex
const item = $event.item
// 防止布局元素的嵌套拖拽
if (item.className.indexOf('data-grid') >= 0) {
// 如果是列表中拖拽的元素需要还原到原来位置
item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, row.columns.list[newIndex])
row.columns.list.splice(newIndex, 1)
return false
}
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
this.$set(row.columns.list, newIndex, {
...row.columns.list[newIndex],
options: {
...row.columns.list[newIndex].options,
remoteFunc: 'func_' + key
},
key,
// 绑定键值
model: row.columns.list[newIndex].type + '_' + key,
rules: []
})
if (row.columns.list[newIndex].type === 'radio' || row.columns.list[newIndex].type === 'checkbox' || row.columns.list[newIndex].type === 'select') {
this.$set(row.columns.list, newIndex, {
...row.columns.list[newIndex],
options: {
...row.columns.list[newIndex].options,
options: row.columns.list[newIndex].options.options.map(item => ({
...item
}))
}
})
}
this.selectWidget = row.columns.list[newIndex]
},
handleWidgetColAdd($event, row, colIndex) { handleWidgetColAdd($event, row, colIndex) {
const newIndex = $event.newIndex const newIndex = $event.newIndex
const oldIndex = $event.oldIndex const oldIndex = $event.oldIndex
......
src/components/VueFormMaking/components/componentsConfig.js
...@@ -363,10 +363,13 @@ export const advanceComponents = [ ...@@ -363,10 +363,13 @@ export const advanceComponents = [
{ {
type: 'subform', type: 'subform',
icon: 'icon-table', icon: 'icon-table',
columns: { columns: [{
span: 24, span: 12,
list: [] list: []
}, }, {
span: 12,
list: []
}],
options: { options: {
gutter: 0, gutter: 0,
justify: 'start', justify: 'start',
......
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