VFormRender新增setFormJson方法，可用于动态加载表单。
vdpAdmin
parent
ad44e4bee1
commit
1414bce040
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "variant-form",
|
||||
"version": "2.1.4",
|
||||
"version": "2.1.5",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --open src/main.js",
|
||||
|
|
|
|||
|
|
@ -5,15 +5,24 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="renderer" content="webkit">
|
||||
<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">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
|
||||
<div id="app"></div>
|
||||
<!-- 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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<static-content-wrapper :designer="designer" :field="field" :design-state="designState"
|
||||
: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">
|
||||
<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"
|
||||
:circle="field.options.circle" :icon="field.options.icon"
|
||||
:disabled="field.options.disabled"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<template>
|
||||
<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"
|
||||
@submit.native.prevent>
|
||||
<template v-for="(widget, index) in widgetList">
|
||||
|
|
@ -67,6 +67,8 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
formJsonObj: this.formJson,
|
||||
|
||||
formDataModel: {
|
||||
//
|
||||
},
|
||||
|
|
@ -76,11 +78,11 @@
|
|||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return this.formJson.formConfig
|
||||
return this.formJsonObj.formConfig
|
||||
},
|
||||
|
||||
widgetList() {
|
||||
return this.formJson.widgetList
|
||||
return this.formJsonObj.widgetList
|
||||
},
|
||||
|
||||
labelPosition() {
|
||||
|
|
@ -91,6 +93,14 @@
|
|||
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
|
||||
|
|
@ -100,7 +110,7 @@
|
|||
},
|
||||
|
||||
customClass() {
|
||||
return this.formConfig.customClass || ''
|
||||
return !!this.formConfig && !!this.formConfig.customClass ? this.formConfig.customClass : ''
|
||||
},
|
||||
|
||||
},
|
||||
|
|
@ -108,17 +118,21 @@
|
|||
//
|
||||
},
|
||||
created() {
|
||||
this.insertCustomStyleAndScriptNode()
|
||||
this.buildFormModel()
|
||||
this.addFieldChangeEventHandler()
|
||||
this.registerFormToRefList()
|
||||
this.handleOnCreated()
|
||||
this.initFormObject()
|
||||
},
|
||||
mounted() {
|
||||
this.initLocale()
|
||||
this.handleOnMounted()
|
||||
},
|
||||
methods: {
|
||||
initFormObject() {
|
||||
this.insertCustomStyleAndScriptNode()
|
||||
this.buildFormModel()
|
||||
this.addFieldChangeEventHandler()
|
||||
this.registerFormToRefList()
|
||||
this.handleOnCreated()
|
||||
},
|
||||
|
||||
getContainerWidgetName(widget) {
|
||||
return widget.type + '-item'
|
||||
},
|
||||
|
|
@ -143,6 +157,10 @@
|
|||
},
|
||||
|
||||
buildFormModel() {
|
||||
if (!this.formJsonObj || !this.widgetList) {
|
||||
return
|
||||
}
|
||||
|
||||
this.widgetList.forEach((wItem) => {
|
||||
this.buildDataFromWidget(wItem, null)
|
||||
})
|
||||
|
|
@ -220,6 +238,8 @@
|
|||
},
|
||||
|
||||
addFieldChangeEventHandler() {
|
||||
this.$off('fieldChange') //移除原有事件监听
|
||||
|
||||
this.$on('fieldChange', function (fieldName, newValue, oldValue, subFormName, subFormRowIndex) {
|
||||
this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
|
||||
this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
|
||||
|
|
@ -231,7 +251,7 @@
|
|||
},
|
||||
|
||||
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',
|
||||
this.formConfig.onFormDataChange)
|
||||
customFunc.call(this, fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
|
||||
|
|
@ -239,14 +259,14 @@
|
|||
},
|
||||
|
||||
handleOnCreated() {
|
||||
if (!!this.formConfig.onFormCreated) {
|
||||
if (!!this.formConfig && !!this.formConfig.onFormCreated) {
|
||||
let customFunc = new Function(this.formConfig.onFormCreated)
|
||||
customFunc.call(this)
|
||||
}
|
||||
},
|
||||
|
||||
handleOnMounted() {
|
||||
if (!!this.formConfig.onFormMounted) {
|
||||
if (!!this.formConfig && !!this.formConfig.onFormMounted) {
|
||||
let customFunc = new Function(this.formConfig.onFormMounted)
|
||||
customFunc.call(this)
|
||||
}
|
||||
|
|
@ -285,6 +305,37 @@
|
|||
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) {
|
||||
if (!needValidation) {
|
||||
return this.formDataModel
|
||||
|
|
|
|||
|
|
@ -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/'
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ export const generateId = function() {
|
|||
};
|
||||
|
||||
export const deepClone = function (origin) {
|
||||
if (origin === undefined) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
return JSON.parse(JSON.stringify(origin))
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue