保存表单对象
实现思路:
- 配置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">保存</el-button>
</template>
</v-form-designer>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const vfDesigner = ref(null)
const fieldListApi = reactive({
URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
labelKey: 'fieldLabel',
nameKey: 'fieldName'
})
const testBanned = ref([
//'sub-form',
//'alert',
])
const designerConfig = reactive({
languageMenu: true,
//externalLink: false,
//formTemplates: false,
//eventCollapse: false,
//clearDesignerButton: false,
//previewFormButton: false,
//presetCssCode: '.abc { font-size: 16px; }',
})
const saveFormJson = () => {
let formJson = vfDesigner.value.getFormJson()
//TODO: 将formJson提交给后端保存接口,需自行实现!!
ElMessage.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 setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const vFormRef = ref(null)
const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion": 3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
const formData = reactive({})
const optionData = reactive({})
const submitForm = () => {
vFormRef.value.getFormData().then(formData => {
// Form Validation OK
alert( JSON.stringify(formData) )
}).catch(error => {
// Form Validation failed
ElMessage.error(error)
})
}
onMounted(() => {
//从后端接口获取表单的选项数据(如表单中无选项类型字段、则跳过此步骤),并赋值给optionData变量,需自行实现!!
axios.get(SERVER_URL + '/get-option-data').then(res => {
if (res.code == 200) {
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) {
vFormRef.value.setFormJson(res.data)
this.$nextTick(() => {
vFormRef.value.setFormData(newFormData)
})
}
}).catch(err => {
//
})
}).catch(err => {
//
})
}).catch(err => {
//
})
})
</script>
<style lang="scss" scoped>
</style>