保存表单对象
实现思路:
- 配置v-form-designer的customToolButtons插槽,新增一个“保存”按钮;
- 新增一个saveFormJson()方法,通过ref调用getFormJson()方法获取表单json对象,并提交给后台接口;
- 点击“保存”按钮时,调用上述saveFormJson()方法;
- 收工。
完整代码如下所示:
<template>
<div id="app">
<v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
:designer-config="designerConfig">
<!-- 自定义按钮插槽演示 -->
<template #customToolButtons>
<el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
</template>
</v-form-designer>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
fieldListApi: {
URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
labelKey: 'fieldLabel',
nameKey: 'fieldName'
},
testBanned: [
//'sub-form',
//'alert',
],
designerConfig: {
languageMenu: true,
//externalLink: false,
//formTemplates: false,
//eventCollapse: false,
//clearDesignerButton: false,
//previewFormButton: false,
//presetCssCode: '.abc { font-size: 16px; }',
}
}
},
methods: {
saveFormJson() {
let formJson = this.$refs.vfDesigner.getFormJson()
//TODO: 将formJson提交给后端保存接口,需自行实现!!
this.$message.success('表单已保存!')
},
}
}
</script>
<style lang="scss">
#app {
height: 100%;
}
</style>
渲染表单
实现思路:
- 如表单中有保存于后端的选项数据(对应radio、check、select、cascader四类组件),从后端接口获取后赋值给v-form-render的option-data属性(可参见选项数据加载);
- 如表单需要显示后端已保存的数据对象,从后端接口获取后赋值给v-form-render的form-data属性,如只需显示空白表单,则form-data属性可传入空对象{};
- 从后端接口获取表单json对象fjson,调用v-form-render对象的setFormJson(fjson)方法加载表单;
- 上述3步,应在mounted事件钩子中完成。如表单在对话框中显示,则以上3步,应在对话框显示之前完成;
- 完工。
完整代码如下所示:
<template>
<div>
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
</v-form-render>
<el-button type="primary" @click="submitForm">提交表单</el-button>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
formData: {},
optionData: {}
}
},
mounted() {
//从后端接口获取表单的选项数据(如表单中无选项类型字段、则跳过此步骤),并赋值给optionData变量,需自行实现!!
axios.get(SERVER_URL + '/get-option-data').then(res => {
if (res.code == 200) {
this.optionData = res.data
}
//从后端接口获取已保存的数据对象(如只显示空白表单、则跳过此步骤),并赋值给formData变量,需自行实现!!
axios.get(SERVER_URL + '/get-form-data').then(res => {
let newFormData = null
if (res.code == 200) {
newFormData = res.data
}
//从后端接口获取表单json对象,然后调用v-form-render对象的setFormJson(xxx)加载表单,需自行实现!!
axios.get(SERVER_URL + '/get-form-json').then(res => {
if (res.code == 200) {
this.$refs.vFormRef.setFormJson(res.data)
this.$nextTick(() => {
this.$refs.vFormRef.setFormData(newFormData)
})
}
}).catch(err => {
//
})
}).catch(err => {
//
})
}).catch(err => {
//
})
},
methods: {
submitForm() {
this.$refs.vFormRef.getFormData().then(formData => {
// Form Validation OK
alert( JSON.stringify(formData) )
}).catch(error => {
// Form Validation failed
this.$message.error(error)
})
}
}
}
</script>
<style scoped>
</style>