Vue2.0 & Element-UI驱动的自定义表单2.0：设计与父子表结构解析

自定义表单2.0是一个基于Vue2.0与Element-UI开发的表单设计工具，它简化了前端和后端之间的交互流程。在表单设计过程中，开发者首先在FormMaking UI设计器中创建所需的表单结构，包括支持子表功能，但当前限制在两级关系，即一个父表对应多个子表（一父多子）。设计时需要注意的是，form-making中的某些组件可能需要处理不同的数据类型，以确保兼容性和准确性。 在设计流程中，前端需要定义相关的事件，通过调用form-making内置API获取界面对应的JSON数据，并将其传递给后端API。后端API解析这些JSON，提取组件信息并按照约定的规则生成相应的数据库表。这个规则包括： 1. 主表命名约定：采用“bo_”加上应用ID和表单编码的MD5哈希值，如"bo_ab53fd4a403be816d09edf36f68593f5"。 2. 子表命名：主表名加上子表标识符，例如"bo_ab53fd4a403be816d09edf36f68593f5_sub_XXX"。 3. 表单配置数据存储在'app_form'表中，其中的关键字段有'form_design_json'用于存储前端传来的JSON，以及'table_relation_ship'记录父子表之间的关系。 在数据上报阶段，特别是涉及附件组件时，文件会先上传，得到预览地址，然后与表单其他数据一起存储到业务表中。表单数据的处理涉及到服务实现，如VueFormJsonResolverServicePlus类，负责JSON解析，以及表单组件类型与数据库表之间的映射关系管理。 设计实现中，开发者需要熟悉如何使用VueFormJsonResolverServicePlus服务来解析JSON数据，并根据组件类型正确地将前端设计映射到实际的数据库表结构上。这包括了前端与后端的协调工作，以及对数据存储规则的遵循，确保表单数据的完整性和一致性。