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

EAWorld
关注

三、动态表单进阶

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

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

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

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

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

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

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

声明: 本文由入驻OFweek维科号的作者撰写,观点仅代表作者本人,不代表OFweek立场。如有侵权或其他问题,请联系举报。
侵权投诉

下载OFweek,一手掌握高科技全行业资讯

还不是OFweek会员,马上注册
打开app,查看更多精彩资讯 >
  • 长按识别二维码
  • 进入OFweek阅读全文
长按图片进行保存