动态表单设计与实现_民生银行数据中心服务平台流程表单动态化探索与实践

请点击上方“民生运维人” 添加订阅！

01 背景

数据中心服务平台是基于我行TESLA框架自研的新一代IT服务平台，作为数据中心日常运维工作流程管理的重要支撑系统，以灵活响应流程变化和提供优质用户体验为出发点，以持续提升数据中心管理水平为目标，力求打通各类专业运维工具及管理类系统，全面实现运维工作流程化、规范化、自助化。

02 现状和挑战

平台的流程管理模块主要包括申请子模块、处理子模块(评估/审批/处理/实施等)、已处理查询子模块、历史查询子模块等交互子模块。在静态开发模式下，开发人员需要针对不同的流程需求开发不同的交互表单和页面。由于不同的流程表单中有很多相同的元素，静态开发模式存在代码冗余较多、需求响应周期长的问题，整体效率低下。

随着数据中心管理精细化水平的提升和各专业自动化建设的推进，流程需求变动的频率越来越快，对需求响应的及时性要求也越来越高，流程建设面临挑战，主要有以下四个方面：

1. 统一流程表单解决方案，以高可用、高性能、高扩展性为目标，避免重复建设。

2. 制定一套标准表单描述协议，提升表单开发效率。

3. 建设统一表单渲染引擎，生态表单组件无缝接入，提供自定义组件机制及接入能力。

4. 不断完善表单开发周边工具生态，降低表单开发门槛。

03 应对思路和设计原理

动态化

面对挑战，我们要跳出传统的开发模式，转变思维。既然不同的流程需求存在共通之处，那么我们可以抽象出共通的部分，实现各个交互子模块的配置化，采用动态表单模式进行渲染，从而更快速高效的管理交互页面。

奥卡姆剃刀

在设计过程中，我们遵循了奥卡姆剃刀原理的设计准则：

如无必要，勿增实体。

奥卡姆剃刀的核心在于“剔除”：剔除不确定的，不重要的，不必理会的，而去为真实的、核心的、当下的问题做直接简单解答。基于这一准则，我们既可以专注于动态表单最核心的部分，也可以减少繁复无用的开发工作量。

动态表单核心是表单描述，表单描述具备高度可抽象的能力。表单标准描述协议，旨在通过对表单领域描述进行抽象，提供一份标准描述协议，以满足协议驱动以及动态渲染表单需求，降低表单开发成本，同时为未来自动化、智能化奠定协议基础。表单核心要素包含两个部分：数据 + UI，在前期大量实践及调研的基础上，通过 JSON Schema 官方标准 + UI Schema描述，实现对表单、表单项、嵌套、循环、校验、联动、异步、组件扩展进行配置及布局等能力。

04 逻辑架构

逻辑架构包括管理层、控制层和表现层三个层次。表现层可以生成组件模板，便于管理。如下图4-1所示：

图4-1(逻辑架构图)

• Manage：绘制表单，产出描述数据

• Control/DB：处理描述数据并存储

• Show：消费表单，产生模版

05 建设方案

表单配置管理

表单配置管理模块提供表单绘制功能，可以根据需求绘制表单，支持对表单进行修改和应用，主要包含以下几个方面。

• 可调节性布局。可以增删表单tab和组件集，可以对元素组件进行排布设定，也可以使用预定义模板。如下图5-1所示：

图5-1(表单配置页面)

• 提供大量标准化组件。如单行文本框、多行文本框、下拉框等常用组件。同时也支持自定义的个性化组件。如下图5-2和5-3所示：

图5-2(自定义组件配置页面)

图5-3(自定义组件显示页面)

• 组件之间支持嵌套。可以实现字段之间的联动。此处以变更流程表单为例，其中是否补单字段涉及联动，当是否补单的值为是时，则联动出补单请求人和基础环境负责人字段；当是否补单的值为否时，则无联动。如下图5-4和5-5所示：

图5-4(是否补单组件显示页面)

图5-5(是否补单组件配置页面)

• 灵活的校验。在配置页面的具体组件时，可设置在流程不同环节的可编辑性、显示隐藏和必填性。在用户的填写界面有多种形式的必填校验提示。以计划开始时间为例，如下图5-6和5-7所示：

图5-6(计划开始时间配置页面)

图5-7(必填提示页面)

• 灵活的版本管理。通过版本状态与版本号相结合的方式进行版本管理。版本对应五个状态：草稿、应用、发布、停用、历史。

  • 草稿：新建后，没有发布和应用的表单；

  • 发布：可配置导航菜单入口权限的表单；

  • 应用：被使用但不配置入口权限的表单；

  • 停用：停用的表单；

  • 历史：被新版本替代的表单。

图5-8(不同状态显示页面)

正在使用的表单可以修改，保存后会生成新版本的同类表单。只有再次发布或应用时，修改的新版表单才会被使用。对于停用、草稿状态的表单，修改表单认为对当前版本修改，不会产生新的版本。

表单权限管理

实现动态、实时的入口权限管理。可快速选择权限的分配组，实时生效。如下图5-9所示：

图5-9(权限管理配置页面)

表单生成工厂

根据配置信息，自动生成流程中不同环节的页面。对于流程平台重要的页面有以下几个：

• 申请页面。可在表单页面预览生成的申请页面。如下图5-10所示：

图5-10(申请页面)

• 评估和审批页面。可在表单页面预览生成的评估和审批页面。如下图5-11所示：

图5-11(评估页面)

• 已办页面。如下图5-12所示：

图5-12(已办页面)

• 历史查询页面，可如下图5-13所示：

图5-13(历史查询页面)

06 总结和规划

目前已经实现了前端的动态化，并且已经应用到多个流程中，包括审计问题跟踪流程、IP自动化服务流程、变更流程等。与传统的开发模式相比，应用动态表单减少大部分页面的开发，平均每个流程可节省1人月工作量。

在已有的基础上，我们计划继续开展前端优秀组件的集成，优化描述协议，增强配置的体验。同时计划实现后端的动态化，自动生成数据库表，实现统一的提交服务、流转服务和查询服务，从而实现流程的动态化。

参与人员介绍

编辑：民生运维文化建设组