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

2021-01-19 17:09

EAWorld

关注

isRequired用于配制表单校验，标识该项是否为必填项；

valueProvider是一个非常重要的配置，也相对复杂，他是一个JSON串，对于下拉框这种需要发送请求向服务端获取下拉框所需要的选项的表单项至关重要，同时也关系到表单联动的实现，其中的url代表向服务端发送请求所所使用的url是什么；

valueField表示获取到的展示数据用哪一项来作为id；

labelField表示哪一项来作为label展示给用户，multiSelect代表下拉框是否可以多选；

eventName表示当这一项的值发生改变后，会触发前端某个写好的事件做相应的处理，eventName的值就是事件名，而事件的定义由前端来实现。

表单联动主要有两种方式：

第一种是当用户修改表单中某一选项时，表单显示的内容有所变化，如图显示，当用户选择不同的介质策略时，显示的表单项也是不同的。

针对这一功能，我们目前采用的解决方案是，当表单项改变时，触发通过eventName设置的处理事件，当数据项发生改变时，针对不同的数据情况显示或隐藏表单项，这一功能需要前端事先写好处理事件然后将事件名告知后端，后端将事件名设置到需要的表单项上去。

第二种是数据联动，表单中包含代码库和branch／tag／commitId两个输入项，显然后者的显示内容取决于用户选择了哪个代码库，此处就需要前端检测用户对代码库的选择，然后将选定后的数据作为参数向后端发送请求查询branch／tag／commitId项的列表，为了解决这一问题，要求在配置动态表单的数据获取url时将需要的参数以冒号加对应表单项的字段名形式配置，示例：／repo／commit？repoId＝：repoId。前端会将表单解析为一个完整的数据对象，其中每一个属性代表一个表单项，属性名采用attrId，解析后的数据对象如图所示，动态表单会将数据对象完整的传递给每一个表单项，当repoId发生改变时，branchId的对应的表单项会监听到数据对象的变化，并对其属性进行遍历，如果有其url属性所需的属性时会重写branchId的url属性并且向服务端发送新的请求获取数据源。

前面说过isRequired属性用于设置是否为必填，前端也是仅在表单项上加上了required（VUE框架下）的配置而已，并没有做更多的复杂校验。

二、问题和新需求

随着DevOps市场需求升级，我们收到了一个足以引起DevOps动态表单彻头彻尾改变的需求——工作项动态表单化配置，项目管理是DevOps的重要功能之一，6．1GA版本前的任务项管理所有的属性表单都是固定的，不支持用户做任何自定义修改，但是，这无法满足市场的需求，不同的应用场景对任务管理的要求是不一样的，比如原有的工作项仅支持故事、任务、Bug三种类型的工作项管理，每种类型的属性也是固定的，这样的用户体验较差，某些场景下用户可能需要更多类型的工作项，用户更喜欢将“故事”叫做“需求”，等等这一系列的需求，经过讨论分析，我们决定使用动态表单来实现这一功能。而原有的动态表单设置，虽然能满足CICD的任务配置，但它如果用于工作项管理配置，其缺点也是不可忽视的。因此我们决定重新制作一款更强大更灵活的动态表单。