动态表单

1 动态表单介绍

在低开实体模型的应用场景中，经常会遇到某些字段的绑定组件配置需要在多个表单中重复使用。为了减轻这种重复配置带来的繁琐工作，我们采取了一种动态创建实体模型字段组件绑定数据的方法。具体来说，在模型容器构建包中，我们根据预定义的规则或配置信息，动态地生成字段与组件的绑定关系。当业务表单需要加载时，这些动态创建的模型数据会被检索出来，并通过模型容器进行解析。通过这种方式，我们可以实现实体模型字段绑定组件的动态复用，从而大大提高了开发效率和代码的可维护性。

2 动态表单使用

2.1 动态表单构建包下载

动态表单功能内容均使用低开表单开发，使用前需要下载模型容器构建包与所使用到的业务字典文件； 点击下方下载链接下载构建包

🔗模型容器构建包下载

点击下方下载链接下载业务字典

🔗业务字典下载

2.2 动态表单模型创建

将下载后的模型容器构建包导入IDE中，打开实体编辑器，并生成表。AFCenter平台上导入业务字典文件。

打开模型容器页面-模型容器视图-新增数据弹窗

输入动态编码，注意编码不可重复；在实体名称选择框中选择需要生成动态表单的实体模型。

选择完实体后在下方子表格中新增行添加字段与绑定组件相关设置，目前只提供部分组件与组件对应配置，如需其他配置可自行扩展。

字段绑定完下拉选择组件后需要编辑当前数据打开弹窗，编辑下拉选择组件的数据来源，目前仅支持字典与数据实体两种模式。

2.3 动态表单模型渲染

创建完成后，即可在业务表单中使用模型容器渲染该动态表单模型。表单中创建内部变量并为模型容器组件默认值中绑定该变量。

表单加载前事件中调用通用接口，使用刚刚创建的唯一的动态编码做条件查询出动态表单模型数据，并赋值给内部变量即可。

预览当前表单时，可以看到动态表单模型字段对应组件成功渲染

3 动态表单实现说明

在构建动态表单模型的过程中，通过表单界面输入的数据会被整合成一个结构化的JSON字符串，将生成的JSON字符串进行持久化处理，在需要展示的表单中，根据预设的编码检索出对应的JSON字符串。解析JSON字符串还原为JavaScript对象数据结构。将格式化后的数据对象传递给模型容器进行渲染。

在表单提交前事件中对动态表单模型数据进行组装，在表单内部变量中创建了表单模型变量this.v_model与组件模型变量this.v_input、this.v_textarea等，变量中默认值为其对应的初始模型数据，表单提交前根据表单中子表格中字段配置进行内部变量替换，最终合并到变量this.v_model中赋值给表单的content字段保存进数据库中。

在表单提交前，设计了一个结构化的数据组装流程，以构建动态表单的模型数据。首先，定义了多个内部变量，包括this.v_model作为表单模型的根容器，以及this.v_input、this.v_textarea等组件模型变量，这些变量初始时均被赋予了对应的初始模型数据。 在表单提交前，根据表单中子表格的字段配置，对内部变量进行动态更新和替换。这个过程涉及到遍历表单的所有字段，检查字段值的变化，并更新对应的组件模型变量。

最后，将更新后的组件模型变量中的数据合并到this.v_model中。将合并后的this.v_model赋值给表单的content字段，并将其作为表单数据的一部分保存进数据库中。