0.1 保存表单对象及渲染表单

保存表单对象

实现思路：

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

完整代码如下所示：

<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>

渲染表单

实现思路：

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. 完工。

完整代码如下所示：

<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>