mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2025-06-22 09:59:56 +08:00
Vue 3版本初次提交，继续测试中。
This commit is contained in:
vdpAdmin
@ -0,0 +1,34 @@
|
||||
<!--
|
||||
/**
|
||||
* author: vformAdmin
|
||||
* email: vdpadmin@163.com
|
||||
* website: https://www.vform666.com
|
||||
* date: 2021.08.18
|
||||
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
|
||||
*/
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="container-wrapper" :class="[customClass]">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "container-item-wrapper",
|
||||
props: {
|
||||
widget: Object,
|
||||
},
|
||||
computed: {
|
||||
customClass() {
|
||||
return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
141
src/components/form-render/container-item/containerItemMixin.js
Normal file
141
src/components/form-render/container-item/containerItemMixin.js
Normal file
@ -0,0 +1,141 @@
|
||||
import {generateId} from "@/utils/util";
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
customClass() {
|
||||
return this.widget.options.customClass || ''
|
||||
},
|
||||
|
||||
formModel: {
|
||||
cache: false,
|
||||
get() {
|
||||
return this.globalModel.formModel
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
unregisterFromRefList() { //销毁容器组件时注销组件ref
|
||||
if ((this.refList !== null) && !!this.widget.options.name) {
|
||||
let oldRefName = this.widget.options.name
|
||||
delete this.refList[oldRefName]
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
|
||||
/* 提示：用户可自行扩充这些方法！！！ */
|
||||
|
||||
setHidden(flag) {
|
||||
this.widget.options.hidden = flag
|
||||
},
|
||||
|
||||
activeTab(tabIndex) { //tabIndex从0计数
|
||||
if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
|
||||
this.widget.tabs.forEach((tp, idx) => {
|
||||
tp.options.active = idx === tabIndex
|
||||
if (idx === tabIndex) {
|
||||
this.activeTabName = tp.options.name
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
disableTab(tabIndex) {
|
||||
if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
|
||||
this.widget.tabs[tabIndex].options.disabled = true
|
||||
}
|
||||
},
|
||||
|
||||
enableTab(tabIndex) {
|
||||
if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
|
||||
this.widget.tabs[tabIndex].options.disabled = false
|
||||
}
|
||||
},
|
||||
|
||||
hideTab(tabIndex) {
|
||||
if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
|
||||
this.widget.tabs[tabIndex].options.hidden = true
|
||||
}
|
||||
},
|
||||
|
||||
showTab(tabIndex) {
|
||||
if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
|
||||
this.widget.tabs[tabIndex].options.hidden = false
|
||||
}
|
||||
},
|
||||
|
||||
disableSubFormRow(rowIndex) {
|
||||
this.widget.widgetList.forEach(subWidget => {
|
||||
let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
|
||||
let foundSW = this.getWidgetRef(swRefName)
|
||||
if (!!foundSW) {
|
||||
foundSW.setDisabled(true)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
enableSubFormRow(rowIndex) {
|
||||
this.widget.widgetList.forEach(subWidget => {
|
||||
let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
|
||||
let foundSW = this.getWidgetRef(swRefName)
|
||||
if (!!foundSW) {
|
||||
foundSW.setDisabled(false)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
disableSubForm() {
|
||||
if (this.rowIdData.length > 0) {
|
||||
this.rowIdData.forEach((dataRow, rIdx) => {
|
||||
this.disableSubFormRow(rIdx)
|
||||
})
|
||||
}
|
||||
|
||||
//禁用3个操作按钮
|
||||
this.actionDisabled = true
|
||||
},
|
||||
|
||||
enableSubForm() {
|
||||
if (this.rowIdData.length > 0) {
|
||||
this.rowIdData.forEach((dataRow, rIdx) => {
|
||||
this.enableSubFormRow(rIdx)
|
||||
})
|
||||
}
|
||||
|
||||
//启用3个操作按钮
|
||||
this.actionDisabled = false
|
||||
},
|
||||
|
||||
resetSubForm() { //重置subForm数据为空
|
||||
if (this.widget.type === 'sub-form') {
|
||||
let subFormModel = this.formModel[this.widget.options.name]
|
||||
if (!!subFormModel) {
|
||||
subFormModel.splice(0, subFormModel.length)
|
||||
this.rowIdData.splice(0, this.rowIdData.length)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getSubFormValues(needValidation = true) {
|
||||
if (this.widget.type === 'sub-form') {
|
||||
//TODO: 逐行校验子表单！！
|
||||
return this.formModel[this.widget.options.name]
|
||||
} else {
|
||||
this.$message.error(this.i18nt('render.hint.nonSubFormType'))
|
||||
}
|
||||
},
|
||||
|
||||
// validateField(fieldName) { //逐行校验子表单字段
|
||||
// //TODO:
|
||||
// },
|
||||
//
|
||||
// validateSubForm() { //逐行校验子表单全部字段
|
||||
// //TODO:
|
||||
// },
|
||||
|
||||
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
125
src/components/form-render/container-item/grid-col-item.vue
Normal file
125
src/components/form-render/container-item/grid-col-item.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<el-col class="grid-cell" :class="[customClass]" v-bind="layoutProps" :style="colHeightStyle"
|
||||
:key="widget.id" v-show="!widget.options.hidden">
|
||||
<template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
|
||||
<template v-for="(subWidget, swIdx) in widget.widgetList">
|
||||
<template v-if="'container' === subWidget.category">
|
||||
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-col>
|
||||
<div class="blank-cell"><span class="invisible-content">{{i18nt('render.hint.blankCellContent')}}</span></div>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "../../../utils/i18n"
|
||||
import refMixin from "../../../components/form-render/refMixin"
|
||||
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
||||
|
||||
export default {
|
||||
name: "GridColItem",
|
||||
componentName: 'ContainerItem',
|
||||
mixins: [i18n, refMixin],
|
||||
components: {
|
||||
...FieldComponents,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
parentWidget: Object,
|
||||
parentList: Array,
|
||||
indexOfParentList: Number,
|
||||
|
||||
colHeight: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
|
||||
},
|
||||
inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
|
||||
data() {
|
||||
return {
|
||||
layoutProps: {
|
||||
span: this.widget.options.span,
|
||||
md: this.widget.options.md || 12,
|
||||
sm: this.widget.options.sm || 12,
|
||||
xs: this.widget.options.xs || 12,
|
||||
offset: this.widget.options.offset || 0,
|
||||
push: this.widget.options.push || 0,
|
||||
pull: this.widget.options.pull || 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
customClass() {
|
||||
return this.widget.options.customClass || ''
|
||||
},
|
||||
|
||||
colHeightStyle() {
|
||||
return !!this.colHeight ? {height: this.colHeight + 'px'} : {}
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.initLayoutProps()
|
||||
this.initRefList()
|
||||
},
|
||||
methods: {
|
||||
initLayoutProps() {
|
||||
if (!!this.widget.options.responsive) {
|
||||
if (!!this.previewState) {
|
||||
this.layoutProps.md = undefined
|
||||
this.layoutProps.sm = undefined
|
||||
this.layoutProps.xs = undefined
|
||||
|
||||
let lyType = this.formConfig.layoutType
|
||||
if (lyType === 'H5') {
|
||||
this.layoutProps.span = this.widget.options.xs || 12
|
||||
} else if (lyType === 'Pad') {
|
||||
this.layoutProps.span = this.widget.options.sm || 12
|
||||
} else {
|
||||
this.layoutProps.span = this.widget.options.md || 12
|
||||
}
|
||||
} else {
|
||||
this.layoutProps.span = undefined
|
||||
}
|
||||
} else {
|
||||
this.layoutProps.md = undefined
|
||||
this.layoutProps.sm = undefined
|
||||
this.layoutProps.xs = undefined
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.blank-cell {
|
||||
font-style: italic;
|
||||
color: #cccccc;
|
||||
|
||||
span.invisible-content {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/components/form-render/container-item/grid-item.vue
Normal file
59
src/components/form-render/container-item/grid-item.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<container-item-wrapper :widget="widget">
|
||||
|
||||
<el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
|
||||
:class="[customClass]"
|
||||
:ref="widget.id" v-show="!widget.options.hidden">
|
||||
<template v-for="(colWidget, colIdx) in widget.cols" :key="colIdx">
|
||||
<grid-col-item :widget="colWidget" :parent-list="widget.cols"
|
||||
:index-of-parent-list="colIdx" :parent-widget="widget"
|
||||
:col-height="widget.options.colHeight">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</grid-col-item>
|
||||
</template>
|
||||
</el-row>
|
||||
|
||||
</container-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n from "../../../utils/i18n"
|
||||
import refMixin from "../../../components/form-render/refMixin"
|
||||
import ContainerItemWrapper from './container-item-wrapper'
|
||||
import GridColItem from './grid-col-item'
|
||||
import containerItemMixin from "./containerItemMixin"
|
||||
|
||||
export default {
|
||||
name: "grid-item",
|
||||
componentName: 'ContainerItem',
|
||||
mixins: [emitter, i18n, refMixin, containerItemMixin],
|
||||
components: {
|
||||
ContainerItemWrapper,
|
||||
GridColItem,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
},
|
||||
inject: ['refList', 'sfRefList', 'globalModel'],
|
||||
created() {
|
||||
this.initRefList()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
11
src/components/form-render/container-item/index.js
Normal file
11
src/components/form-render/container-item/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
|
||||
const modules = import.meta.globEager('./*.vue')
|
||||
|
||||
export default {
|
||||
install(app) {
|
||||
for (const path in modules) {
|
||||
let cname = modules[path].default.name
|
||||
app.component(cname, modules[path].default)
|
||||
}
|
||||
}
|
||||
}
|
||||
408
src/components/form-render/container-item/sub-form-item.vue
Normal file
408
src/components/form-render/container-item/sub-form-item.vue
Normal file
@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<container-item-wrapper :widget="widget">
|
||||
|
||||
<div :key="widget.id" class="sub-form-container"
|
||||
v-show="!widget.options.hidden">
|
||||
<el-row class="header-row">
|
||||
<div class="action-header-column">
|
||||
<span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
|
||||
<el-button :disabled="actionDisabled" round type="primary" size="mini" class="action-button" @click="addSubFormRow"
|
||||
:title="i18nt('render.hint.subFormAddActionHint')">
|
||||
{{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button>
|
||||
</div>
|
||||
<template v-for="(subWidget) in widget.widgetList" :key="subWidget.id + 'thc'">
|
||||
<div class="field-header-column"
|
||||
:class="[getLabelAlign(widget, subWidget), !!subWidget.options.required ? 'is-required' : '']"
|
||||
:style="{width: subWidget.options.columnWidth}">
|
||||
<span v-if="!!subWidget.options.labelIconClass" class="custom-label">
|
||||
<template v-if="subWidget.options.labelIconPosition === 'front'">
|
||||
<template v-if="!!subWidget.options.labelTooltip">
|
||||
<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
|
||||
<i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template>
|
||||
<template v-else>
|
||||
<i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
|
||||
</template>
|
||||
<template v-else-if="subWidget.options.labelIconPosition === 'rear'">
|
||||
<template v-if="!!subWidget.options.labelTooltip">
|
||||
{{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
|
||||
<i :class="subWidget.options.labelIconClass"></i></el-tooltip></template>
|
||||
<template v-else>
|
||||
{{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>
|
||||
</template>
|
||||
</span>
|
||||
<template v-else>
|
||||
<span :title="subWidget.options.labelTooltip">{{subWidget.options.label}}</span></template>
|
||||
</div>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row v-for="(subFormRowId, sfrIdx) in rowIdData" class="sub-form-row" :key="subFormRowId">
|
||||
<div class="sub-form-action-column hide-label">
|
||||
<div class="action-button-column">
|
||||
<el-button :disabled="actionDisabled" circle type="" icon="el-icon-circle-plus-outline" @click="insertSubFormRow(sfrIdx)"
|
||||
:title="i18nt('render.hint.insertSubFormRow')"></el-button>
|
||||
<el-button :disabled="actionDisabled" circle type="" icon="el-icon-delete" @click="deleteSubFormRow(sfrIdx)"
|
||||
:title="i18nt('render.hint.deleteSubFormRow')"></el-button>
|
||||
<span v-if="widget.options.showRowNumber" class="row-number-span">#{{sfrIdx+1}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="(subWidget, swIdx) in widget.widgetList" :key="subWidget.id + 'tc' + subFormRowId">
|
||||
<div class="sub-form-table-column hide-label" :style="{width: subWidget.options.columnWidth}">
|
||||
<component :is="subWidget.type + '-widget'" :field="fieldSchemaData[sfrIdx][swIdx]"
|
||||
:key="fieldSchemaData[sfrIdx][swIdx].id" :parent-list="widget.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget"
|
||||
:sub-form-row-id="subFormRowId"
|
||||
:sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx">
|
||||
<!-- 子表单暂不支持插槽！！！ -->
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</container-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n from "../../../utils/i18n"
|
||||
import {deepClone, generateId} from "../../../utils/util"
|
||||
import refMixin from "../../../components/form-render/refMixin"
|
||||
import ContainerItemWrapper from './container-item-wrapper'
|
||||
import containerItemMixin from "./containerItemMixin"
|
||||
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
||||
import eventBus from "@/utils/event-bus"
|
||||
|
||||
export default {
|
||||
name: "sub-form-item",
|
||||
componentName: 'ContainerItem',
|
||||
mixins: [emitter, i18n, refMixin, containerItemMixin],
|
||||
components: {
|
||||
ContainerItemWrapper,
|
||||
...FieldComponents,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
},
|
||||
inject: ['refList', 'sfRefList', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
rowIdData: [],
|
||||
fieldSchemaData: [],
|
||||
actionDisabled: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initRefList()
|
||||
this.registerSubFormToRefList()
|
||||
this.initRowIdData(true)
|
||||
this.initFieldSchemaData()
|
||||
this.initEventHandler()
|
||||
},
|
||||
mounted() {
|
||||
this.handleSubFormFirstRowAdd() //默认添加首行后，主动触发相关事件！！
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
methods: {
|
||||
getLabelAlign(widget, subWidget) {
|
||||
return subWidget.options.labelAlign || widget.options.labelAlign
|
||||
},
|
||||
|
||||
registerSubFormToRefList() {
|
||||
if (this.widget.type === 'sub-form') {
|
||||
this.sfRefList[this.widget.options.name] = this
|
||||
}
|
||||
},
|
||||
|
||||
initRowIdData(initFlag) {
|
||||
if (this.widget.type === 'sub-form') {
|
||||
this.rowIdData.splice(0, this.rowIdData.length) //清除数组必须用splice，length=0不会响应式更新！！
|
||||
let subFormModel = this.formModel[this.widget.options.name]
|
||||
if (!!subFormModel && (subFormModel.length > 0)) {
|
||||
subFormModel.forEach(() => {
|
||||
this.rowIdData.push('r' + generateId())
|
||||
})
|
||||
|
||||
if (!!initFlag) {
|
||||
//注意：事件触发需延期执行，SumFormDataChange事件处理代码中可能存在尚未创建完成的组件！！
|
||||
setTimeout(() => {
|
||||
this.handleSubFormRowChange(subFormModel)
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addToRowIdData() {
|
||||
this.rowIdData.push('rowId' + generateId())
|
||||
},
|
||||
|
||||
insertToRowIdData(rowIndex) {
|
||||
this.rowIdData.splice(rowIndex, 0, 'rowId' + generateId())
|
||||
},
|
||||
|
||||
deleteFromRowIdData(rowIndex) {
|
||||
this.rowIdData.splice(rowIndex, 1)
|
||||
},
|
||||
|
||||
initFieldSchemaData() { //初始化fieldSchemaData！！！
|
||||
if (this.widget.type !== 'sub-form') {
|
||||
return
|
||||
}
|
||||
|
||||
let rowLength = this.rowIdData.length
|
||||
this.fieldSchemaData.splice(0, this.fieldSchemaData.length) //清除数组必须用splice，length=0不会响应式更新！！
|
||||
if (rowLength > 0) {
|
||||
for (let i = 0; i < rowLength; i++) {
|
||||
let fieldSchemas = []
|
||||
this.widget.widgetList.forEach(swItem => {
|
||||
fieldSchemas.push( this.cloneFieldSchema(swItem) )
|
||||
})
|
||||
this.fieldSchemaData.push(fieldSchemas)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addToFieldSchemaData(rowIndex) {
|
||||
let fieldSchemas = []
|
||||
this.widget.widgetList.forEach(swItem => {
|
||||
fieldSchemas.push( this.cloneFieldSchema(swItem) )
|
||||
})
|
||||
|
||||
if (rowIndex === undefined) {
|
||||
this.fieldSchemaData.push(fieldSchemas)
|
||||
} else {
|
||||
this.fieldSchemaData.splice(rowIndex, 0, fieldSchemas)
|
||||
}
|
||||
},
|
||||
|
||||
deleteFromFieldSchemaData(rowIndex) {
|
||||
this.fieldSchemaData.splice(rowIndex, 1)
|
||||
},
|
||||
|
||||
cloneFieldSchema(fieldWidget) {
|
||||
let newFieldSchema = deepClone(fieldWidget)
|
||||
newFieldSchema.id = fieldWidget.type + generateId()
|
||||
return newFieldSchema
|
||||
},
|
||||
|
||||
initEventHandler() {
|
||||
if (this.widget.type !== 'sub-form') {
|
||||
return
|
||||
}
|
||||
|
||||
eventBus.$on('setFormData', function (newFormData) {
|
||||
this.initRowIdData(false)
|
||||
this.initFieldSchemaData()
|
||||
|
||||
let subFormData = newFormData[this.widget.options.name] || []
|
||||
setTimeout(() => { //延时触发SubFormRowChange事件, 便于更新计算字段！！
|
||||
this.handleSubFormRowChange(subFormData)
|
||||
}, 800)
|
||||
})
|
||||
},
|
||||
|
||||
handleSubFormFirstRowAdd() {
|
||||
if (this.widget.type !== 'sub-form') {
|
||||
return
|
||||
}
|
||||
|
||||
if (!!this.widget.options.showBlankRow && (this.rowIdData.length === 1)) {
|
||||
let oldSubFormData = this.formModel[this.widget.options.name] || []
|
||||
this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[0])
|
||||
this.handleSubFormRowChange(oldSubFormData)
|
||||
}
|
||||
},
|
||||
|
||||
addSubFormRow() {
|
||||
let newSubFormDataRow = {}
|
||||
this.widget.widgetList.forEach(subFormItem => {
|
||||
if (!!subFormItem.formItemFlag) {
|
||||
newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
|
||||
}
|
||||
})
|
||||
|
||||
let oldSubFormData = this.formModel[this.widget.options.name] || []
|
||||
oldSubFormData.push(newSubFormDataRow)
|
||||
this.addToRowIdData()
|
||||
this.addToFieldSchemaData()
|
||||
|
||||
this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[oldSubFormData.length - 1])
|
||||
this.handleSubFormRowChange(oldSubFormData)
|
||||
},
|
||||
|
||||
insertSubFormRow(beforeFormRowIndex) {
|
||||
let newSubFormDataRow = {}
|
||||
this.widget.widgetList.forEach(subFormItem => {
|
||||
if (!!subFormItem.formItemFlag) {
|
||||
newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
|
||||
}
|
||||
})
|
||||
|
||||
let oldSubFormData = this.formModel[this.widget.options.name] || []
|
||||
oldSubFormData.splice(beforeFormRowIndex, 0, newSubFormDataRow)
|
||||
this.insertToRowIdData(beforeFormRowIndex)
|
||||
this.addToFieldSchemaData(beforeFormRowIndex)
|
||||
|
||||
this.handleSubFormRowInsert(oldSubFormData, this.rowIdData[beforeFormRowIndex])
|
||||
this.handleSubFormRowChange(oldSubFormData)
|
||||
},
|
||||
|
||||
deleteSubFormRow(formRowIndex) {
|
||||
this.$confirm(this.i18nt('render.hint.deleteSubFormRow') + '?', this.i18nt('render.hint.prompt'), {
|
||||
confirmButtonText: this.i18nt('render.hint.confirm'),
|
||||
cancelButtonText: this.i18nt('render.hint.cancel')
|
||||
}).then(() => {
|
||||
let oldSubFormData = this.formModel[this.widget.options.name] || []
|
||||
let deletedDataRow = deepClone(oldSubFormData[formRowIndex])
|
||||
oldSubFormData.splice(formRowIndex, 1)
|
||||
this.deleteFromRowIdData(formRowIndex)
|
||||
this.deleteFromFieldSchemaData(formRowIndex)
|
||||
|
||||
this.handelSubFormRowDelete(oldSubFormData, deletedDataRow)
|
||||
this.handleSubFormRowChange(oldSubFormData)
|
||||
}).catch(() => {
|
||||
//
|
||||
})
|
||||
},
|
||||
|
||||
handleSubFormRowChange(subFormData) {
|
||||
if (!!this.widget.options.onSubFormRowChange) {
|
||||
let customFunc = new Function('subFormData', this.widget.options.onSubFormRowChange)
|
||||
customFunc.call(this, subFormData)
|
||||
}
|
||||
},
|
||||
|
||||
handleSubFormRowAdd(subFormData, newRowId) {
|
||||
if (!!this.widget.options.onSubFormRowAdd) {
|
||||
let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowAdd)
|
||||
customFunc.call(this, subFormData, newRowId)
|
||||
}
|
||||
},
|
||||
|
||||
handleSubFormRowInsert(subFormData, newRowId) {
|
||||
if (!!this.widget.options.onSubFormRowInsert) {
|
||||
let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowInsert)
|
||||
customFunc.call(this, subFormData, newRowId)
|
||||
}
|
||||
},
|
||||
|
||||
handelSubFormRowDelete(subFormData, deletedDataRow) {
|
||||
if (!!this.widget.options.onSubFormRowDelete) {
|
||||
let customFunc = new Function('subFormData', 'deletedDataRow', this.widget.options.onSubFormRowDelete)
|
||||
customFunc.call(this, subFormData, deletedDataRow)
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sub-form-container {
|
||||
margin-bottom: 8px;
|
||||
text-align: left; //IE浏览器强制居左对齐
|
||||
|
||||
:deep(.el-row.header-row) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-row.sub-form-row) {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
|
||||
.row-number-span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.action-header-column {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
|
||||
.action-label {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
div.field-header-column {
|
||||
display: inline-block;
|
||||
//overflow: hidden;
|
||||
//white-space: nowrap; //文字超出长度不自动换行
|
||||
//text-overflow: ellipsis; //文字超出长度显示省略号
|
||||
|
||||
span.custom-label i {
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
div.field-header-column.is-required:before {
|
||||
content: '*';
|
||||
color: #F56C6C;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
div.label-center-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.label-center-align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.label-right-align {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.sub-form-action-column {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
background: #DCDFE6;
|
||||
border: 4px solid #DCDFE6;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.sub-form-action-column.hide-label {
|
||||
:deep(.el-form-item__label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.sub-form-table-column {
|
||||
display: inline-block;
|
||||
//width: 200px;
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
div.sub-form-table-column.hide-label {
|
||||
:deep(.el-form-item__label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
99
src/components/form-render/container-item/tab-item.vue
Normal file
99
src/components/form-render/container-item/tab-item.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<container-item-wrapper :widget="widget">
|
||||
|
||||
<div :key="widget.id" class="tab-container"
|
||||
v-show="!widget.options.hidden">
|
||||
<el-tabs v-model="activeTabName" :type="widget.displayType" :ref="widget.id" :class="[customClass]">
|
||||
<el-tab-pane v-for="(tab, index) in visibleTabs" :key="index" :label="tab.options.label"
|
||||
:disabled="tab.options.disabled" :name="tab.options.name">
|
||||
<template v-for="(subWidget, swIdx) in tab.widgetList">
|
||||
<template v-if="'container' === subWidget.category">
|
||||
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="tab.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</container-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n from "../../../utils/i18n"
|
||||
import refMixin from "../../../components/form-render/refMixin"
|
||||
import ContainerItemWrapper from './container-item-wrapper'
|
||||
import containerItemMixin from "./containerItemMixin";
|
||||
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
||||
|
||||
export default {
|
||||
name: "tab-item",
|
||||
componentName: 'ContainerItem',
|
||||
mixins: [emitter, i18n, refMixin, containerItemMixin],
|
||||
components: {
|
||||
ContainerItemWrapper,
|
||||
...FieldComponents,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
},
|
||||
inject: ['refList', 'sfRefList', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
activeTabName: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visibleTabs() {
|
||||
return this.widget.tabs.filter(tp => {
|
||||
return !tp.options.hidden
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.initRefList()
|
||||
},
|
||||
mounted() {
|
||||
this.initActiveTab()
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
methods: {
|
||||
initActiveTab() {
|
||||
if ((this.widget.type === 'tab') && (this.widget.tabs.length > 0)) {
|
||||
let activePanes = this.widget.tabs.filter((tp) => {
|
||||
return tp.options.active === true
|
||||
})
|
||||
if (activePanes.length > 0) {
|
||||
this.activeTabName = activePanes[0].options.name
|
||||
} else {
|
||||
this.activeTabName = this.widget.tabs[0].options.name
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<td class="table-cell" :class="[customClass]"
|
||||
:colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
|
||||
:style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
|
||||
<template v-for="(subWidget, swIdx) in widget.widgetList">
|
||||
<template v-if="'container' === subWidget.category">
|
||||
<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
|
||||
:index-of-parent-list="swIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from "../../../utils/i18n"
|
||||
import refMixin from "../../../components/form-render/refMixin"
|
||||
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
||||
|
||||
export default {
|
||||
name: "TableCellItem",
|
||||
componentName: "ContainerItem",
|
||||
mixins: [i18n, refMixin],
|
||||
components: {
|
||||
...FieldComponents,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
|
||||
rowIndex: Number,
|
||||
colIndex: Number,
|
||||
},
|
||||
inject: ['refList', 'globalModel'],
|
||||
computed: {
|
||||
customClass() {
|
||||
return this.widget.options.customClass || ''
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
/* tableCell不生成组件引用，故无须调用initRefList！！ */
|
||||
//this.initRefList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
td.table-cell {
|
||||
display: table-cell;
|
||||
height: 36px;
|
||||
//border: 1px dashed #336699;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
</style>
|
||||
70
src/components/form-render/container-item/table-item.vue
Normal file
70
src/components/form-render/container-item/table-item.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<container-item-wrapper :widget="widget">
|
||||
|
||||
<div :key="widget.id" class="table-container"
|
||||
v-show="!widget.options.hidden">
|
||||
<table :ref="widget.id" class="table-layout" :class="[customClass]">
|
||||
<tbody>
|
||||
<tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
|
||||
<template v-for="(colWidget, colIdx) in row.cols">
|
||||
<table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
|
||||
:row-index="rowIdx" :col-index="colIdx" :parent-widget="widget">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</table-cell-item>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</container-item-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emitter from '@/utils/emitter'
|
||||
import i18n from "../../../utils/i18n"
|
||||
import refMixin from "../../../components/form-render/refMixin"
|
||||
import ContainerItemWrapper from './container-item-wrapper'
|
||||
import TableCellItem from './table-cell-item'
|
||||
import containerItemMixin from "./containerItemMixin";
|
||||
|
||||
export default {
|
||||
name: "table-item",
|
||||
componentName: 'ContainerItem',
|
||||
mixins: [emitter, i18n, refMixin, containerItemMixin],
|
||||
components: {
|
||||
ContainerItemWrapper,
|
||||
TableCellItem,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
},
|
||||
inject: ['refList', 'sfRefList', 'globalModel'],
|
||||
created() {
|
||||
this.initRefList()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.table-container {
|
||||
table.table-layout {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
571
src/components/form-render/index.vue
Normal file
571
src/components/form-render/index.vue
Normal file
@ -0,0 +1,571 @@
|
||||
<!--
|
||||
/**
|
||||
* author: vformAdmin
|
||||
* email: vdpadmin@163.com
|
||||
* website: https://www.vform666.com
|
||||
* date: 2021.08.18
|
||||
* remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
|
||||
*/
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-form :label-position="labelPosition" :size="size" :class="[customClass]" class="render-form"
|
||||
:label-width="labelWidth" :validate-on-rule-change="false"
|
||||
:model="formDataModel" ref="renderForm"
|
||||
@submit.prevent>
|
||||
<template v-for="(widget, index) in widgetList">
|
||||
<template v-if="'container' === widget.category">
|
||||
<component :is="getContainerWidgetName(widget)" :widget="widget" :key="widget.id" :parent-list="widgetList"
|
||||
:index-of-parent-list="index" :parent-widget="null">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component :is="getWidgetName(widget)" :field="widget" :form-model="formDataModel" :designer="null" :key="widget.id" :parent-list="widgetList"
|
||||
:index-of-parent-list="index" :parent-widget="null">
|
||||
<!-- 递归传递插槽！！！ -->
|
||||
<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
|
||||
<slot :name="slot" v-bind="scope"/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//import ElForm from 'element-ui/packages/form/src/form.vue' /* 用于源码调试Element UI */
|
||||
import emitter from '@/utils/emitter'
|
||||
import './container-item/index'
|
||||
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
||||
import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "@/utils/util"
|
||||
import i18n, { changeLocale } from "@/utils/i18n"
|
||||
import eventBus from "@/utils/event-bus"
|
||||
|
||||
export default {
|
||||
name: "VFormRender",
|
||||
componentName: 'VFormRender',
|
||||
mixins: [emitter, i18n],
|
||||
components: {
|
||||
//ElForm,
|
||||
|
||||
...FieldComponents,
|
||||
},
|
||||
props: {
|
||||
formJson: Object, //prop传入的表单JSON配置
|
||||
formData: { //prop传入的表单数据
|
||||
Object,
|
||||
default: () => {}
|
||||
},
|
||||
optionData: { //prop传入的选项数据
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
previewState: { //是否表单预览状态
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
refList: this.widgetRefList,
|
||||
sfRefList: this.subFormRefList, //收集SubForm引用
|
||||
formConfig: this.formConfig,
|
||||
globalOptionData: this.optionData,
|
||||
getOptionData: () => this.optionData, /* 该方法用于在异步更新option-data之后重新获取到最新值 */
|
||||
globalModel: {
|
||||
formModel: this.formDataModel,
|
||||
},
|
||||
previewState: this.previewState,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formJsonObj: this.formJson,
|
||||
|
||||
formDataModel: {
|
||||
//
|
||||
},
|
||||
widgetRefList: {},
|
||||
subFormRefList: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return this.formJsonObj.formConfig
|
||||
},
|
||||
|
||||
widgetList() {
|
||||
return this.formJsonObj.widgetList
|
||||
},
|
||||
|
||||
labelPosition() {
|
||||
if (!!this.formConfig && !!this.formConfig.labelPosition) {
|
||||
return this.formConfig.labelPosition
|
||||
}
|
||||
|
||||
return 'left'
|
||||
},
|
||||
|
||||
labelWidth() {
|
||||
if (!!this.formConfig && !!this.formConfig.labelWidth) {
|
||||
return this.formConfig.labelWidth + 'px'
|
||||
}
|
||||
|
||||
return '80px'
|
||||
},
|
||||
|
||||
size() {
|
||||
if (!!this.formConfig && !!this.formConfig.size) {
|
||||
return this.formConfig.size
|
||||
}
|
||||
|
||||
return 'medium'
|
||||
},
|
||||
|
||||
customClass() {
|
||||
return !!this.formConfig && !!this.formConfig.customClass ? this.formConfig.customClass : ''
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
//
|
||||
},
|
||||
created() {
|
||||
this.buildFormModel(!this.formJsonObj ? null : this.formJsonObj.widgetList)
|
||||
this.initFormObject()
|
||||
},
|
||||
mounted() {
|
||||
this.initLocale()
|
||||
this.handleOnMounted()
|
||||
},
|
||||
methods: {
|
||||
initFormObject() {
|
||||
this.insertCustomStyleAndScriptNode()
|
||||
this.addFieldChangeEventHandler()
|
||||
this.addFieldValidateEventHandler()
|
||||
this.registerFormToRefList()
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
getContainerWidgetName(widget) {
|
||||
return widget.type + '-item'
|
||||
},
|
||||
|
||||
getWidgetName(widget) {
|
||||
return widget.type + '-widget'
|
||||
},
|
||||
|
||||
initLocale() {
|
||||
let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN'
|
||||
this.changeLanguage(curLocale)
|
||||
},
|
||||
|
||||
insertCustomStyleAndScriptNode() {
|
||||
if (!!this.formConfig && !!this.formConfig.cssCode) {
|
||||
insertCustomCssToHead(this.formConfig.cssCode)
|
||||
}
|
||||
|
||||
if (!!this.formConfig && !!this.formConfig.functions) {
|
||||
insertGlobalFunctionsToHtml(this.formConfig.functions)
|
||||
}
|
||||
},
|
||||
|
||||
buildFormModel(widgetList) {
|
||||
if (!!widgetList && (widgetList.length > 0)) {
|
||||
widgetList.forEach((wItem) => {
|
||||
this.buildDataFromWidget(wItem)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
buildDataFromWidget(wItem) {
|
||||
if (wItem.category === 'container') {
|
||||
if (wItem.type === 'grid') {
|
||||
if (!!wItem.cols && (wItem.cols.length > 0)) {
|
||||
wItem.cols.forEach((childItem) => {
|
||||
this.buildDataFromWidget(childItem)
|
||||
})
|
||||
}
|
||||
} else if (wItem.type === 'table') {
|
||||
if (!!wItem.rows && (wItem.rows.length > 0)) {
|
||||
wItem.rows.forEach((rowItem) => {
|
||||
if (!!rowItem.cols && (rowItem.cols.length > 0)) {
|
||||
rowItem.cols.forEach((colItem) => {
|
||||
this.buildDataFromWidget(colItem)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (wItem.type === 'tab') {
|
||||
if (!!wItem.tabs && (wItem.tabs.length > 0)) {
|
||||
wItem.tabs.forEach((tabItem) => {
|
||||
if (!!tabItem.widgetList && (tabItem.widgetList.length > 0)) {
|
||||
tabItem.widgetList.forEach((childItem) => {
|
||||
this.buildDataFromWidget(childItem)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (wItem.type === 'sub-form') {
|
||||
let subFormName = wItem.options.name
|
||||
if (!this.formData.hasOwnProperty(subFormName)) {
|
||||
let subFormDataRow = {}
|
||||
if (wItem.options.showBlankRow) {
|
||||
wItem.widgetList.forEach(subFormItem => {
|
||||
if (!!subFormItem.formItemFlag) {
|
||||
subFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
|
||||
}
|
||||
})
|
||||
|
||||
//this.$set(this.formDataModel, subFormName, [subFormDataRow]) //
|
||||
this.formDataModel[subFormName] = [subFormDataRow]
|
||||
} else {
|
||||
//this.$set(this.formDataModel, subFormName, []) //
|
||||
this.formDataModel[subFormName] = []
|
||||
}
|
||||
} else {
|
||||
let initialValue = this.formData[subFormName]
|
||||
//this.$set(this.formDataModel, subFormName, deepClone(initialValue))
|
||||
this.formDataModel[subFormName] = deepClone(initialValue)
|
||||
}
|
||||
} else if ((wItem.type === 'grid-col') || (wItem.type === 'table-cell')) {
|
||||
if (!!wItem.widgetList && (wItem.widgetList.length > 0)) {
|
||||
wItem.widgetList.forEach((childItem) => {
|
||||
this.buildDataFromWidget(childItem)
|
||||
})
|
||||
}
|
||||
} else { //自定义容器组件
|
||||
if (!!wItem.widgetList && (wItem.widgetList.length > 0)) {
|
||||
wItem.widgetList.forEach((childItem) => {
|
||||
this.buildDataFromWidget(childItem)
|
||||
})
|
||||
}
|
||||
}
|
||||
} else if (!!wItem.formItemFlag) {
|
||||
if (!this.formData.hasOwnProperty(wItem.options.name)) {
|
||||
//this.formDataModel[wItem.options.name] = '' //这种写法不支持对象属性响应式更新，必须用$set方法！！
|
||||
//this.$set(this.formDataModel, wItem.options.name, wItem.options.defaultValue) //设置字段默认值
|
||||
this.formDataModel[wItem.options.name] = wItem.options.defaultValue
|
||||
} else {
|
||||
let initialValue = this.formData[wItem.options.name]
|
||||
//this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue))
|
||||
this.formDataModel[wItem.options.name] = deepClone(initialValue)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addFieldChangeEventHandler() {
|
||||
eventBus.$off('fieldChange') //移除原有事件监听
|
||||
eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
|
||||
this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
|
||||
this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
|
||||
})
|
||||
},
|
||||
|
||||
addFieldValidateEventHandler() {
|
||||
eventBus.$off('fieldValidation') //移除原有事件监听
|
||||
eventBus.$on('fieldValidation', (fieldName) => {
|
||||
this.$refs.renderForm.validateField(fieldName)
|
||||
})
|
||||
},
|
||||
|
||||
registerFormToRefList() {
|
||||
this.widgetRefList['v_form_ref'] = this
|
||||
},
|
||||
|
||||
handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex) {
|
||||
if (!!this.formConfig && !!this.formConfig.onFormDataChange) {
|
||||
let customFunc = new Function('fieldName', 'newValue', 'oldValue', 'formModel', 'subFormName', 'subFormRowIndex',
|
||||
this.formConfig.onFormDataChange)
|
||||
customFunc.call(this, fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
|
||||
}
|
||||
},
|
||||
|
||||
handleOnCreated() {
|
||||
if (!!this.formConfig && !!this.formConfig.onFormCreated) {
|
||||
let customFunc = new Function(this.formConfig.onFormCreated)
|
||||
customFunc.call(this)
|
||||
}
|
||||
},
|
||||
|
||||
handleOnMounted() {
|
||||
if (!!this.formConfig && !!this.formConfig.onFormMounted) {
|
||||
let customFunc = new Function(this.formConfig.onFormMounted)
|
||||
customFunc.call(this)
|
||||
}
|
||||
},
|
||||
|
||||
findWidgetAndSetDisabled(widgetName, disabledFlag) {
|
||||
let foundW = this.getWidgetRef(widgetName)
|
||||
if (!!foundW) {
|
||||
foundW.setDisabled(disabledFlag)
|
||||
}
|
||||
},
|
||||
|
||||
findWidgetAndSetHidden(widgetName, hiddenFlag) {
|
||||
let foundW = this.getWidgetRef(widgetName)
|
||||
if (!!foundW) {
|
||||
foundW.setHidden(hiddenFlag)
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
|
||||
/* 提示：用户可自行扩充这些方法！！！ */
|
||||
|
||||
changeLanguage(langName) {
|
||||
changeLocale(langName)
|
||||
},
|
||||
|
||||
getNativeForm() { //获取原生form引用
|
||||
return this.$refs['renderForm']
|
||||
},
|
||||
|
||||
getWidgetRef(widgetName, showError = false) {
|
||||
let foundRef = this.widgetRefList[widgetName]
|
||||
if (!foundRef && !!showError) {
|
||||
this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
|
||||
}
|
||||
return foundRef
|
||||
},
|
||||
|
||||
clearFormDataModel() {
|
||||
for (let pkey in this.formDataModel) {
|
||||
delete this.formDataModel[pkey]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 动态加载表单JSON
|
||||
* @param newFormJson
|
||||
*/
|
||||
setFormJson(newFormJson) {
|
||||
if (!!newFormJson) {
|
||||
if ((typeof newFormJson === 'string') || (newFormJson.constructor === Object)) {
|
||||
let newFormJsonObj = null
|
||||
if (typeof newFormJson === 'string') {
|
||||
newFormJsonObj = JSON.parse(newFormJson)
|
||||
} else {
|
||||
newFormJsonObj = newFormJson
|
||||
}
|
||||
|
||||
if (!newFormJsonObj.formConfig || !newFormJsonObj.widgetList) {
|
||||
this.$message.error('Invalid format of form json.')
|
||||
return
|
||||
}
|
||||
|
||||
/* formDataModel必须在widgetList赋值完成初始化，因为widgetList赋值意味着子组件开始创建！！！ */
|
||||
//this.formDataModel = {} //清空表单数据对象（有bug，会导致表单校验失败！！）
|
||||
this.clearFormDataModel() //上行代码有问题，会导致表单校验失败，故保留原对象引用只清空对象属性！！
|
||||
this.buildFormModel(newFormJsonObj.widgetList)
|
||||
|
||||
//this.$set(this.formJsonObj, 'formConfig', newFormJsonObj.formConfig)
|
||||
this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
|
||||
this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
|
||||
//this.$set(this.formJsonObj, 'widgetList', newFormJsonObj.widgetList)
|
||||
this.formJsonObj['widgetList'] = newFormJsonObj.widgetList
|
||||
|
||||
this.initFormObject()
|
||||
this.handleOnMounted()
|
||||
} else {
|
||||
this.$message.error('Set form json failed.')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 重新加载选项数据
|
||||
* @param widgetNames 指定重新加载的组件名称或组件名数组，不传则重新加载所有选项字段
|
||||
*/
|
||||
reloadOptionData(widgetNames) {
|
||||
let eventParams = []
|
||||
if (!!widgetNames && (typeof widgetNames === 'string')) {
|
||||
eventParams = [widgetNames]
|
||||
} else if (!!widgetNames && Array.isArray(widgetNames)) {
|
||||
eventParams = [...widgetNames]
|
||||
}
|
||||
this.broadcast('FieldWidget', 'reloadOptionItems', [eventParams])
|
||||
},
|
||||
|
||||
getFormData(needValidation = true) {
|
||||
if (!needValidation) {
|
||||
return this.formDataModel
|
||||
}
|
||||
|
||||
let callback = function nullFunc() {}
|
||||
let promise = new window.Promise(function (resolve, reject) {
|
||||
callback = function(formData, error) {
|
||||
!error ? resolve(formData) : reject(error);
|
||||
};
|
||||
});
|
||||
|
||||
this.$refs['renderForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
callback(this.formDataModel)
|
||||
} else {
|
||||
callback(this.formDataModel, this.i18nt('render.hint.validationFailed'))
|
||||
}
|
||||
})
|
||||
|
||||
return promise
|
||||
},
|
||||
|
||||
setFormData(formData) { //设置表单数据
|
||||
Object.keys(this.formDataModel).forEach(propName => {
|
||||
if (!!formData && formData.hasOwnProperty(propName)) {
|
||||
this.formDataModel[propName] = deepClone( formData[propName] )
|
||||
}
|
||||
})
|
||||
|
||||
// 通知SubForm组件：表单数据更新事件！！
|
||||
this.broadcast('ContainerItem', 'setFormData', this.formDataModel)
|
||||
|
||||
// 通知FieldWidget组件：表单数据更新事件！！
|
||||
this.broadcast('FieldWidget', 'setFormData', this.formDataModel)
|
||||
},
|
||||
|
||||
getFieldValue(fieldName) { //单个字段获取值
|
||||
let fieldRef = this.getWidgetRef(fieldName)
|
||||
if (!!fieldRef && !!fieldRef.getValue) {
|
||||
fieldRef.getValue()
|
||||
}
|
||||
},
|
||||
|
||||
setFieldValue(fieldName, fieldValue) { //单个更新字段值
|
||||
let fieldRef = this.getWidgetRef(fieldName)
|
||||
if (!!fieldRef && !!fieldRef.setValue) {
|
||||
fieldRef.setValue(fieldValue)
|
||||
}
|
||||
},
|
||||
|
||||
getSubFormValues(subFormName, needValidation = true) {
|
||||
let foundSFRef = this.subFormRefList[subFormName]
|
||||
// if (!foundSFRef) {
|
||||
// return this.formDataModel[subFormName]
|
||||
// }
|
||||
return foundSFRef.getSubFormValues(needValidation)
|
||||
},
|
||||
|
||||
disableForm() {
|
||||
let wNameList = Object.keys(this.widgetRefList)
|
||||
wNameList.forEach(wName => {
|
||||
let foundW = this.getWidgetRef(wName)
|
||||
if (!!foundW) {
|
||||
if (!!foundW.widget && (foundW.widget.type === 'sub-form')) {
|
||||
foundW.disableSubForm()
|
||||
} else {
|
||||
!!foundW.setDisabled && foundW.setDisabled(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
enableForm() {
|
||||
let wNameList = Object.keys(this.widgetRefList)
|
||||
wNameList.forEach(wName => {
|
||||
let foundW = this.getWidgetRef(wName)
|
||||
if (!!foundW) {
|
||||
if (!!foundW.widget && (foundW.widget.type === 'sub-form')) {
|
||||
foundW.enableSubForm()
|
||||
} else {
|
||||
!!foundW.setDisabled && foundW.setDisabled(false)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
resetForm() { //重置表单
|
||||
let subFormNames = Object.keys(this.subFormRefList)
|
||||
subFormNames.forEach(sfName => {
|
||||
if (!!this.subFormRefList[sfName].resetSubForm) {
|
||||
this.subFormRefList[sfName].resetSubForm()
|
||||
}
|
||||
})
|
||||
|
||||
let wNameList = Object.keys(this.widgetRefList)
|
||||
wNameList.forEach(wName => {
|
||||
let foundW = this.getWidgetRef(wName)
|
||||
if (!!foundW && !!foundW.resetField) {
|
||||
foundW.resetField()
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.clearValidate() /* 清除resetField方法触发的校验错误提示 */
|
||||
})
|
||||
},
|
||||
|
||||
clearValidate(props) {
|
||||
this.$refs.renderForm.clearValidate(props)
|
||||
},
|
||||
|
||||
validateForm() {
|
||||
//
|
||||
},
|
||||
|
||||
validateFields() {
|
||||
//
|
||||
},
|
||||
|
||||
disableWidgets(widgetNames) {
|
||||
if (!!widgetNames) {
|
||||
if (typeof widgetNames === 'string') {
|
||||
this.findWidgetAndSetDisabled(widgetNames, true)
|
||||
} else if (Array.isArray(widgetNames)) {
|
||||
widgetNames.forEach(wn => {
|
||||
this.findWidgetAndSetDisabled(wn, true)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
enableWidgets(widgetNames) {
|
||||
if (!!widgetNames) {
|
||||
if (typeof widgetNames === 'string') {
|
||||
this.findWidgetAndSetDisabled(widgetNames, false)
|
||||
} else if (Array.isArray(widgetNames)) {
|
||||
widgetNames.forEach(wn => {
|
||||
this.findWidgetAndSetDisabled(wn, false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hideWidgets(widgetNames) {
|
||||
if (!!widgetNames) {
|
||||
if (typeof widgetNames === 'string') {
|
||||
this.findWidgetAndSetHidden(widgetNames, true)
|
||||
} else if (Array.isArray(widgetNames)) {
|
||||
widgetNames.forEach(wn => {
|
||||
this.findWidgetAndSetHidden(wn, true)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showWidgets(widgetNames) {
|
||||
if (!!widgetNames) {
|
||||
if (typeof widgetNames === 'string') {
|
||||
this.findWidgetAndSetHidden(widgetNames, false)
|
||||
} else if (Array.isArray(widgetNames)) {
|
||||
widgetNames.forEach(wn => {
|
||||
this.findWidgetAndSetHidden(wn, false)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-form :deep(.el-row) {
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
22
src/components/form-render/refMixin.js
Normal file
22
src/components/form-render/refMixin.js
Normal file
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
methods: {
|
||||
initRefList() {
|
||||
if ((this.refList !== null) && !!this.widget.options.name) {
|
||||
this.refList[this.widget.options.name] = this
|
||||
}
|
||||
},
|
||||
|
||||
getWidgetRef(widgetName, showError) {
|
||||
let foundRef = this.refList[widgetName]
|
||||
if (!foundRef && !!showError) {
|
||||
this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
|
||||
}
|
||||
return foundRef
|
||||
},
|
||||
|
||||
getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */
|
||||
return this.refList['v_form_ref']
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user