images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2025-11-04 10:31:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Vue 3版本初次提交，继续测试中。

Browse Source
This commit is contained in:
vdpAdmin
2021-12-25 19:36:55 +08:00
commit d3c60c5b8a
294 changed files with 22068 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/form-render/container-item/container-item-wrapper.vue Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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>

71
src/components/form-render/container-item/table-cell-item.vue Normal file
View File

@@ -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
View 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
View 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
View 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']
},
}
}