Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit c3037dfc by Mr. Lan
Options

添加自表单。

parent 6f497aac
Inline Side-by-side
Showing with 128 additions and 13 deletions
src/components/VueFormMaking/components/WidgetForm.vue
...@@ -62,6 +62,61 @@ ...@@ -62,6 +62,61 @@
</div> </div>
</el-row> </el-row>
</template> </template>
<!-- 子表单 -->
<template v-if="element.type == 'subform'">
<el-form-item
v-if="element && 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.type==='divider' || element.options.labelWidthStatus?'':element.name"
@click.native="handleSelectWidget(index)"
>
<div
type="flex"
:class="{active: selectWidget.key == element.key}"
:gutter="element.options.gutter ? element.options.gutter : 0"
:justify="element.options.justify"
:align="element.options.align"
@click.native="handleSelectWidget(index)"
>
<draggable
v-model="element.columns.list"
class="widget-col widget-view"
:no-transition-on-drag="true"
v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
@end="handleMoveEnd"
@add="handleSubformWidgetColAdd($event, element)"
>
<transition-group name="fade" tag="div" class="widget-col-list" style="min-height: 100px">
<template v-for="(el, i) in element.columns.list">
<widget-form-item
v-if="el.key"
:key="el.key"
:element="el"
:select.sync="selectWidget"
:index="i"
:data="element.columns"
:data-config="data"
/>
</template>
</transition-group>
</draggable>
<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>
</el-form-item>
</template>
<template v-else> <template v-else>
<widget-form-item <widget-form-item
v-if="element && element.key" v-if="element && element.key"
...@@ -161,6 +216,49 @@ export default { ...@@ -161,6 +216,49 @@ export default {
this.selectWidget = this.data.list[newIndex] this.selectWidget = this.data.list[newIndex]
}, },
handleSubformWidgetColAdd($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
...@@ -169,40 +267,40 @@ export default { ...@@ -169,40 +267,40 @@ export default {
// 防止布局元素的嵌套拖拽 // 防止布局元素的嵌套拖拽
if (item.className.indexOf('data-grid') >= 0) { if (item.className.indexOf('data-grid') >= 0) {
// 如果是列表中拖拽的元素需要还原到原来位置 // 如果是列表中拖拽的元素需要还原到原来位置
item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, row.columns[colIndex].list[newIndex]) item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, row.columns.list[newIndex])
row.columns[colIndex].list.splice(newIndex, 1) row.columns.list.splice(newIndex, 1)
return false return false
} }
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999) const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
this.$set(row.columns[colIndex].list, newIndex, { this.$set(row.columns.list, newIndex, {
...row.columns[colIndex].list[newIndex], ...row.columns.list[newIndex],
options: { options: {
...row.columns[colIndex].list[newIndex].options, ...row.columns.list[newIndex].options,
remoteFunc: 'func_' + key remoteFunc: 'func_' + key
}, },
key, key,
// 绑定键值 // 绑定键值
model: row.columns[colIndex].list[newIndex].type + '_' + key, model: row.columns.list[newIndex].type + '_' + key,
rules: [] rules: []
}) })
if (row.columns[colIndex].list[newIndex].type === 'radio' || row.columns[colIndex].list[newIndex].type === 'checkbox' || row.columns[colIndex].list[newIndex].type === 'select') { if (row.columns.list[newIndex].type === 'radio' || row.columns.list[newIndex].type === 'checkbox' || row.columns.list[newIndex].type === 'select') {
this.$set(row.columns[colIndex].list, newIndex, { this.$set(row.columns.list, newIndex, {
...row.columns[colIndex].list[newIndex], ...row.columns.list[newIndex],
options: { options: {
...row.columns[colIndex].list[newIndex].options, ...row.columns.list[newIndex].options,
options: row.columns[colIndex].list[newIndex].options.options.map(item => ({ options: row.columns.list[newIndex].options.options.map(item => ({
...item ...item
})) }))
} }
}) })
} }
this.selectWidget = row.columns[colIndex].list[newIndex] this.selectWidget = row.columns.list[newIndex]
}, },
handleWidgetDelete(index) { handleWidgetDelete(index) {
if (this.data.list.length - 1 === index) { if (this.data.list.length - 1 === index) {
......
src/components/VueFormMaking/components/componentsConfig.js
...@@ -338,6 +338,22 @@ export const advanceComponents = [ ...@@ -338,6 +338,22 @@ export const advanceComponents = [
labelWidthDisabled: false, labelWidthDisabled: false,
labelWidthStatus: false labelWidthStatus: false
} }
},
{
type: 'subform',
icon: 'icon-table',
columns: {
span: 24,
list: []
},
options: {
gutter: 0,
justify: 'start',
align: 'top',
labelWidth: 100,
labelWidthDisabled: false,
labelWidthStatus: false
}
} }
] ]
......
src/components/VueFormMaking/lang/zh-CN.js
...@@ -21,6 +21,7 @@ export default { ...@@ -21,6 +21,7 @@ export default {
editor: '编辑器', editor: '编辑器',
cascader: '级联选择器', cascader: '级联选择器',
table: '子表单', table: '子表单',
subform: '子表单',
grid: '栅格布局', grid: '栅格布局',
tabs: '标签页', tabs: '标签页',
divider: '分割线' divider: '分割线'
......
src/views/process/admin/template-manager.vue
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
upload upload
generate-code generate-code
generate-json generate-json
:advance-fields="['editor', 'cascader']" :advance-fields="['editor', 'cascader', 'subform']"
> >
<template slot="action" /> <template slot="action" />
</fm-making-form> </fm-making-form>
......
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