动态表单的数据存储

动态表单的数据存储

这里根据上面的动态表单设计的界面，整合并存储对应界面控件的值，从而实现了动态表单和动态表单数据的整合显示了。

为了有效管理动态表单的数据和是否展示的处理，我们在业务表单的data属性集合中增加了两个变量，如下所示。

  hasDynamicForm: false, // 是否有动态表单
  dynamicFormJson: '', // 动态表单的JSON数据

这样我们在业务表单列表界面呈现的时候，也同时获取对应的动态界面结构JSON，如下代码所示。

created() {
    this.getlist() // 获取并显示列表

    // 处理动态表单
    var param = { name: 'testuser' }
    dynamicForm.FindByName(param).then(data => {
      var result = data.result
      if (result && !this.isEmpty(result.content)) {
        this.dynamicFormJson = result.content // 表单数据
        this.hasDynamicForm = true // 是否有
      }
    })
  },

这些属性，可以在查看、编辑、新增界面中使用，为了独立性考虑，我们添加一个选项卡用来显示动态表单的设计，如果对应的记录中存在了动态表单结构，就显示，否则不显示即可。

界面代码如下所示。

其中动态表单数据主要存储在extensionData字段里面的。

其中的generateform 组件，是我们自定义整合fm-generate-form 组件的，完整的自定义组件generateform代码如下所示。

主要就是定义了两个prop属性，一个是json，用来存储结构数据，一个是edit，用来存储界面组件的JSON数据信息的。

<template>
  <div class="app-container">
    <div class="fm-container">
      <fm-generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueEditor from 'vue2-editor'
Vue.use(VueEditor)
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)

export default {
  props: {
    json: {
      type: String,
      default: ''
    },
    edit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      jsonData: {},
      editData: {},
      remoteFuncs: {}
    }
  },
  created() {
    this.show(this.json, this.edit)
  },
  methods: {
    clear() {
      this.$nextTick(() => {
        this.$refs.generateForm.reset()
      })
    },
    show(json, edit) { // 显示窗口并加载数据
      // console.log(json)
      // console.log(edit)

      if (!this.isEmpty(json)) { // 表单结构
        this.jsonData = JSON.parse(json)
      }
      if (!this.isEmpty(edit)) { // 表单结构
        this.editData = JSON.parse(edit)
      }
    },
    getData() { // 获取动态表单数据并转换JSON
      return this.$refs.generateForm.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container,.fm-container{
    height: calc(100vh - 84px);
  }
</style>

<style>
  #app .app-container {
      padding: 0 !important;
    }
</style>

3、后端ABP框架的扩展数据处理

前面说到的显示动态表单及其数据的内容，其中动态表单数据主要存储在extensionData字段里面的。

这个需要我们后端提供数据存储的处理，在设计表中增加一个ntext类型的字段ExtensionData，如下所示。

那样ABP后端的Entity实体，和DTO数据对象里面，都添加这个字段信息了

/// <summary>
/// 扩展JSON数据
/// </summary>
public string ExtensionData { get; set; }

这样ABP就可以通过不同的前端实现数据的存储处理了。