用实例分析DevOps项目中动态表单的发展史

2021-01-19 17:09

三、动态表单进阶

为了简化用户操作，我们使用了可拖拽的页面配置形式，用户可以拖拽需要的控件或布局器到区域进行表单布局设计，还提供了可以手动配置每一个控件或布局器的属性、数据源、样式、事件（支持简单代码输入）功能。

布局方面我们支持用户以布局器（网格式）布局、标签页、折叠快、分割线四种形式，利用它们基本可以实现所有的表单布局。布局器是最基础的布局组件，支持按照纵向列的形式来配置表单布局，配置好每列数并将所需的表单项拖进对应列即可。布局器是可以嵌套的，这样一来，用户可以自行配置各种形式的页面布局。此外的标签页、折叠块、分割线都是一些辅助的展示手段，这里不在多加说明。

关于表单项类型，新的动态表单除支持全部的基础控件类型外，还支持将配置好的表单项导出为自定义控件以便复用。

剩下的问题就是表单校验自定义和表单联动自定义了，新的动态表单不再仅仅支持必填校验，还支持用户手动输入正则表达式校验，同时我们抽象了一些常用的正则表达式为默认选项供用户选择。自定义表单联动上我们沿用了初版动态表单的思路，通过事件和数据模型监听实现，在此基础上做了更加规范的处理，使用户可手动修改配置。

完成配置后，就是对动态表单配置的解析，面对如此多的表单项类型，大量的if else代码显然是不合理的，我们改用配置文件的形式，将表单类型和对应控件一个个登记在表单项字典里，然后在渲染时通过component（VUE框架下）直接渲染。对于校验规则，我们选择在渲染表单前对动态表单配置进行遍历，提取所有的校验规则，在最层统一添加校验，不再单独的表单项上做校验处理。此外还有下拉框等数据源需要向服务端发送请求的特殊控件，我们也封装了基类去对用户配置的url、参数等作统一规范化的处理，受篇幅限制这里不做详细描述。

以上是普元DevOps6．1GA版本在动态表单方面做的完善，除动态表单，我们还增加了工作项状态流转自定义配置、工作项类型自定义、工作项增删改表单自定义等一些列功能，保证用户在工作项管理上实现完完全全的自定义，让用户真正的可以按照实际应用场景自定义工作项的管理方案。

关于作者：夏夏，前端工程师，参与普元DevOps产品开发，以及微服务、容器云等产品开发，负责前端页面设计、架构搭建等工作。善于架构搭建、组件封装及相关算法设计。

<上一页 1 2 3