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 53 additions and 83 deletions
package.json
......@@ -41,15 +41,15 @@
"@antv/util": "1.3.1",
"@riophae/vue-treeselect": "0.4.0",
"ace-builds": "^1.4.12",
"axios": "0.18.1",
"clipboard": "2.0.4",
"codemirror": "5.45.0",
"axios": "^0.20.0",
"clipboard": "^2.0.6",
"codemirror": "^5.58.1",
"core-js": "^2.6.11",
"driver.js": "0.9.5",
"dropzone": "5.5.1",
"e-icon-picker": "^1.0.7",
"echarts": "^4.8.0",
"element-ui": "2.11.1",
"element-ui": "^2.13.2",
"file-saver": "2.0.1",
"form-making": "^1.2.8",
"fuse.js": "3.4.4",
......@@ -69,18 +69,20 @@
"sortablejs": "1.8.4",
"tui-editor": "1.3.3",
"viewerjs": "^1.6.1",
"vue": "2.6.10",
"vue": "^2.6.12",
"vue-codemirror": "^4.0.6",
"vue-codemirror-lite": "^1.0.4",
"vue-count-to": "1.0.13",
"vue-cropper": "^0.5.0",
"vue-i18n": "^5.0.3",
"vue-loader": "^15.9.3",
"vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6",
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",
"vue2-editor": "^2.10.2",
"vuedraggable": "2.20.0",
"vueify": "^9.4.1",
"vuex": "3.1.0",
"xlsx": "0.14.1"
},
......@@ -116,7 +118,7 @@
"serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0",
"vue-template-compiler": "2.6.10"
"vue-template-compiler": "^2.6.12"
},
"engines": {
"node": ">=8.9",
......
src/components/VueFormMaking/components/GenerateForm.vue
......@@ -55,27 +55,30 @@
:prop="item.model"
>
<el-table
:data="tableData"
:data="models[item.model]"
border
style="width: 100%"
>
<el-table-column
fixed
width="50"
>
<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 slot-scope="scope">
<i style="font-size: 25px; color: red" class="el-icon-remove" @click="delCol(item, scope.$index)" />
</template>
</el-table-column>
<template v-for="(c, i) in item.columns">
<div :key="i">
<el-table-column
v-for="v in item.columns.list"
v-for="v in c.list"
:key="v.key"
:prop="v.key"
:prop="v.modal"
:label="v.name"
width="250"
min-width="250"
>
<template>
<genetate-form-item
......@@ -91,6 +94,8 @@
/>
</template>
</el-table-column>
</div>
</template>
</el-table>
</el-form-item>
</template>
......@@ -128,7 +133,8 @@ export default {
return {
tableData: [],
models: {},
rules: {}
rules: {},
subformFields: {}
}
},
watch: {
......@@ -152,9 +158,16 @@ export default {
},
methods: {
addCol(item) {
var j = {}
j["id"] = this.tableData.length + 1
this.tableData.push(j)
var subformFields = {}
for (var c of item.columns) {
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) {
for (let i = 0; i < genList.length; i++) {
......@@ -162,14 +175,14 @@ export default {
genList[i].columns.forEach(item => {
this.generateModle(item.list)
})
} else if (genList[i].type === 'subform') {
// this.generateModle(genList[i].columns.list)
} else {
if (this.value && Object.keys(this.value).indexOf(genList[i].model) >= 0) {
this.models[genList[i].model] = this.value[genList[i].model]
} else {
if (genList[i].type === 'blank') {
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 {
this.models[genList[i].model] = genList[i].options.defaultValue
}
......
src/components/VueFormMaking/components/WidgetForm.vue
......@@ -64,9 +64,11 @@
</template>
<!-- 子表单 -->
<template v-else-if="element.type == 'subform'">
<el-form-item
<el-row
v-if="element && element.key"
:key="element.key"
>
<el-form-item
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}"
......@@ -80,13 +82,13 @@
:justify="element.options.justify"
:align="element.options.align"
>
<el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
<draggable
v-model="element.columns.list"
v-model="col.list"
:no-transition-on-drag="true"
v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
@end="handleMoveEnd"
@add="handleSubformWidgetAdd($event, element)"
@add="handleWidgetColAdd($event, element, colIndex)"
>
<transition-group
name="fade"
......@@ -94,26 +96,28 @@
class="widget-col-list"
style="min-height: 131px;overflow-x: auto; white-space: nowrap;"
>
<template v-for="(el, i) in element.columns.list">
<template v-for="(el, i) in col.list">
<div
v-if="el && el.key"
:key="el.key"
@click.native="handleSelectWidget(i)"
@click="handleSelectWidget(i)"
>
<widget-form-item
:element="el"
:select.sync="selectWidget"
:index="i"
:data="element.columns"
:data="col"
:data-config="data"
:is-label="true"
:is-table="true"
/>
</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>
......@@ -122,6 +126,7 @@
</div>
</div>
</el-form-item>
</el-row>
</template>
<template v-else>
<widget-form-item
......@@ -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.data.list[newIndex],
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]
},
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) {
const newIndex = $event.newIndex
const oldIndex = $event.oldIndex
......
src/components/VueFormMaking/components/componentsConfig.js
......@@ -363,10 +363,13 @@ export const advanceComponents = [
{
type: 'subform',
icon: 'icon-table',
columns: {
span: 24,
columns: [{
span: 12,
list: []
},
}, {
span: 12,
list: []
}],
options: {
gutter: 0,
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