保存表单对象

实现思路:

  1. 配置v-form-designer的customToolButtons插槽,新增一个“保存”按钮;
  2. 新增一个saveFormJson()方法,通过ref调用getFormJson()方法获取表单json对象,并提交给后台接口;
  3. 点击“保存”按钮时,调用上述saveFormJson()方法;
  4. 收工。

完整代码如下所示:

  1. <template>
  2. <div id="app">
  3. <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
  4. :designer-config="designerConfig">
  5. <!-- 自定义按钮插槽演示 -->
  6. <template #customToolButtons>
  7. <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
  8. </template>
  9. </v-form-designer>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name: 'App',
  15. data() {
  16. return {
  17. fieldListApi: {
  18. URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
  19. labelKey: 'fieldLabel',
  20. nameKey: 'fieldName'
  21. },
  22. testBanned: [
  23. //'sub-form',
  24. //'alert',
  25. ],
  26. designerConfig: {
  27. languageMenu: true,
  28. //externalLink: false,
  29. //formTemplates: false,
  30. //eventCollapse: false,
  31. //clearDesignerButton: false,
  32. //previewFormButton: false,
  33. //presetCssCode: '.abc { font-size: 16px; }',
  34. }
  35. }
  36. },
  37. methods: {
  38. saveFormJson() {
  39. let formJson = this.$refs.vfDesigner.getFormJson()
  40. //TODO: 将formJson提交给后端保存接口,需自行实现!!
  41. this.$message.success('表单已保存!')
  42. },
  43. }
  44. }
  45. </script>
  46. <style lang="scss">
  47. #app {
  48. height: 100%;
  49. }
  50. </style>

渲染表单

实现思路:

  1. 如表单中有保存于后端的选项数据(对应radio、check、select、cascader四类组件),从后端接口获取后赋值给v-form-render的option-data属性(可参见选项数据加载);
  2. 如表单需要显示后端已保存的数据对象,从后端接口获取后赋值给v-form-render的form-data属性,如只需显示空白表单,则form-data属性可传入空对象{};
  3. 从后端接口获取表单json对象fjson,调用v-form-render对象的setFormJson(fjson)方法加载表单;
  4. 上述3步,应在mounted事件钩子中完成。如表单在对话框中显示,则以上3步,应在对话框显示之前完成;
  5. 完工。

完整代码如下所示:

  1. <template>
  2. <div>
  3. <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
  4. </v-form-render>
  5. <el-button type="primary" @click="submitForm">提交表单</el-button>
  6. </div>
  7. </template>
  8. <script>
  9. import axios from 'axios'
  10. export default {
  11. data() {
  12. return {
  13. 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":""}},
  14. formData: {},
  15. optionData: {}
  16. }
  17. },
  18. mounted() {
  19. //从后端接口获取表单的选项数据(如表单中无选项类型字段、则跳过此步骤),并赋值给optionData变量,需自行实现!!
  20. axios.get(SERVER_URL + '/get-option-data').then(res => {
  21. if (res.code == 200) {
  22. this.optionData = res.data
  23. }
  24. //从后端接口获取已保存的数据对象(如只显示空白表单、则跳过此步骤),并赋值给formData变量,需自行实现!!
  25. axios.get(SERVER_URL + '/get-form-data').then(res => {
  26. let newFormData = null
  27. if (res.code == 200) {
  28. newFormData = res.data
  29. }
  30. //从后端接口获取表单json对象,然后调用v-form-render对象的setFormJson(xxx)加载表单,需自行实现!!
  31. axios.get(SERVER_URL + '/get-form-json').then(res => {
  32. if (res.code == 200) {
  33. this.$refs.vFormRef.setFormJson(res.data)
  34. this.$nextTick(() => {
  35. this.$refs.vFormRef.setFormData(newFormData)
  36. })
  37. }
  38. }).catch(err => {
  39. //
  40. })
  41. }).catch(err => {
  42. //
  43. })
  44. }).catch(err => {
  45. //
  46. })
  47. },
  48. methods: {
  49. submitForm() {
  50. this.$refs.vFormRef.getFormData().then(formData => {
  51. // Form Validation OK
  52. alert( JSON.stringify(formData) )
  53. }).catch(error => {
  54. // Form Validation failed
  55. this.$message.error(error)
  56. })
  57. }
  58. }
  59. }
  60. </script>
  61. <style scoped>
  62. </style>