动态表单的数据存储

动态表单的数据存储

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

为了有效管理动态表单的数据和是否展示的处理，我们在业务表单的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数据信息的。

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

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

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

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

/// 

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

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