github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

VFormRender新增setFormJson方法，可用于动态加载表单。

master
vdpAdmin 2021-11-10 11:54:42 +08:00
parent ad44e4bee1
commit 1414bce040
6 changed files with 80 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "variant-form", "name": "variant-form",
"version": "2.1.4", "version": "2.1.5",
"private": false, "private": false,
"scripts": { "scripts": {
"serve": "vue-cli-service serve --open src/main.js", "serve": "vue-cli-service serve --open src/main.js",

11
public/index.html
View File

@ -5,15 +5,24 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 禁止浏览器缓存index.html begin -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<!-- 禁止浏览器缓存index.html end -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body> </body>
</html> </html>

2
src/components/form-designer/form-widget/field-widget/button-widget.vue
View File

@ -2,7 +2,7 @@
<static-content-wrapper :designer="designer" :field="field" :design-state="designState" <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId"> :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-button ref="fieldEditor" :type="field.options.type" <el-button ref="fieldEditor" :type="field.options.type" :size="field.options.size"
:plain="field.options.plain" :round="field.options.round" :plain="field.options.plain" :round="field.options.round"
:circle="field.options.circle" :icon="field.options.icon" :circle="field.options.circle" :icon="field.options.icon"
:disabled="field.options.disabled" :disabled="field.options.disabled"

75
src/components/form-render/index.vue
View File

@ -10,7 +10,7 @@
<template> <template>
<el-form :label-position="labelPosition" :size="size" :class="[customClass]" class="render-form" <el-form :label-position="labelPosition" :size="size" :class="[customClass]" class="render-form"
:label-width="formConfig.labelWidth + 'px'" :validate-on-rule-change="false" :label-width="labelWidth" :validate-on-rule-change="false"
:model="formDataModel" ref="renderForm" :model="formDataModel" ref="renderForm"
@submit.native.prevent> @submit.native.prevent>
<template v-for="(widget, index) in widgetList"> <template v-for="(widget, index) in widgetList">
@ -67,6 +67,8 @@
}, },
data() { data() {
return { return {
formJsonObj: this.formJson,
formDataModel: { formDataModel: {
// //
}, },
@ -76,11 +78,11 @@
}, },
computed: { computed: {
formConfig() { formConfig() {
return this.formJson.formConfig return this.formJsonObj.formConfig
}, },
widgetList() { widgetList() {
return this.formJson.widgetList return this.formJsonObj.widgetList
}, },
labelPosition() { labelPosition() {
@ -91,6 +93,14 @@
return 'left' return 'left'
}, },
labelWidth() {
if (!!this.formConfig && !!this.formConfig.labelWidth) {
return this.formConfig.labelWidth + 'px'
}
return '80px'
},
size() { size() {
if (!!this.formConfig && !!this.formConfig.size) { if (!!this.formConfig && !!this.formConfig.size) {
return this.formConfig.size return this.formConfig.size
@ -100,7 +110,7 @@
}, },
customClass() { customClass() {
return this.formConfig.customClass || '' return !!this.formConfig && !!this.formConfig.customClass ? this.formConfig.customClass : ''
}, },
}, },
@ -108,17 +118,21 @@
// //
}, },
created() { created() {
this.insertCustomStyleAndScriptNode() this.initFormObject()
this.buildFormModel()
this.addFieldChangeEventHandler()
this.registerFormToRefList()
this.handleOnCreated()
}, },
mounted() { mounted() {
this.initLocale() this.initLocale()
this.handleOnMounted() this.handleOnMounted()
}, },
methods: { methods: {
initFormObject() {
this.insertCustomStyleAndScriptNode()
this.buildFormModel()
this.addFieldChangeEventHandler()
this.registerFormToRefList()
this.handleOnCreated()
},
getContainerWidgetName(widget) { getContainerWidgetName(widget) {
return widget.type + '-item' return widget.type + '-item'
}, },
@ -143,6 +157,10 @@
}, },
buildFormModel() { buildFormModel() {
if (!this.formJsonObj || !this.widgetList) {
return
}
this.widgetList.forEach((wItem) => { this.widgetList.forEach((wItem) => {
this.buildDataFromWidget(wItem, null) this.buildDataFromWidget(wItem, null)
}) })
@ -220,6 +238,8 @@
}, },
addFieldChangeEventHandler() { addFieldChangeEventHandler() {
this.$off('fieldChange') //移除原有事件监听
this.$on('fieldChange', function (fieldName, newValue, oldValue, subFormName, subFormRowIndex) { this.$on('fieldChange', function (fieldName, newValue, oldValue, subFormName, subFormRowIndex) {
this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex) this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex) this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
@ -231,7 +251,7 @@
}, },
handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex) { handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex) {
if (!!this.formConfig.onFormDataChange) { if (!!this.formConfig && !!this.formConfig.onFormDataChange) {
let customFunc = new Function('fieldName', 'newValue', 'oldValue', 'formModel', 'subFormName', 'subFormRowIndex', let customFunc = new Function('fieldName', 'newValue', 'oldValue', 'formModel', 'subFormName', 'subFormRowIndex',
this.formConfig.onFormDataChange) this.formConfig.onFormDataChange)
customFunc.call(this, fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex) customFunc.call(this, fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
@ -239,14 +259,14 @@
}, },
handleOnCreated() { handleOnCreated() {
if (!!this.formConfig.onFormCreated) { if (!!this.formConfig && !!this.formConfig.onFormCreated) {
let customFunc = new Function(this.formConfig.onFormCreated) let customFunc = new Function(this.formConfig.onFormCreated)
customFunc.call(this) customFunc.call(this)
} }
}, },
handleOnMounted() { handleOnMounted() {
if (!!this.formConfig.onFormMounted) { if (!!this.formConfig && !!this.formConfig.onFormMounted) {
let customFunc = new Function(this.formConfig.onFormMounted) let customFunc = new Function(this.formConfig.onFormMounted)
customFunc.call(this) customFunc.call(this)
} }
@ -285,6 +305,37 @@
return foundRef return foundRef
}, },
/**
* 动态加载表单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('Set form json failed.')
return
}
this.$set(this.formJsonObj, 'formConfig', newFormJsonObj.formConfig)
this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
this.$set(this.formJsonObj, 'widgetList', newFormJsonObj.widgetList)
this.initFormObject()
this.handleOnMounted()
} else {
this.$message.error('Set form json failed.')
}
}
},
getFormData(needValidation = true) { getFormData(needValidation = true) {
if (!needValidation) { if (!needValidation) {
return this.formDataModel return this.formDataModel

2
src/utils/config.js
View File

@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
} }
export const VARIANT_FORM_VERSION = '2.1.4' export const VARIANT_FORM_VERSION = '2.1.5'
export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/' export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'

4
src/utils/util.js
View File

@ -18,6 +18,10 @@ export const generateId = function() {
}; };
export const deepClone = function (origin) { export const deepClone = function (origin) {
if (origin === undefined) {
return undefined
}
return JSON.parse(JSON.stringify(origin)) return JSON.parse(JSON.stringify(origin))
} }