背景和业务痛点
架构设计和模块拆解
2.1 整体设计
流程开放平台面对的用户主要分为两类：配置表单用户、使用表单用户。
1）配置表单的用户主要是产品运营或职能岗位的用户。表单的配置信息可以由用户在流程开放平台的表单设计器中编辑产生，也可以由第三方业务系统根据流程开放平台的协议自动化的构建出来。
2）填写表单的用户可以在集成了表单渲染器的页面中填写、提交、查看表单数据，并查看表单相应的审批流程信息。
2.2 表单设计器
表单设计器可以从零开始，或者在已有的 JSON Schema 基础上，编辑 JSON Schema 的内容，最后输出 Schema。表单设计器的功能可以用下图表示：
2.3 表单渲染器
<template><el-row class="render-content"><el-colv-for="item in formConfig":key="item.name"class="render-content-item-box":span="Number(item.attributes.width)"><component :is="`${item.type}Form`" ref="formItem" :detail-index="index" :item="item" /></el-col></el-row></template>
Schema 协议的设计
Schema协议的JSON格式由来
本平台设计的 JSON 格式整体上成树型结构，每一个节点是一个对象，每个节点的属性或功能被标记在对象的字段中，节点的共有属性放在树顶层的节点中，特殊属性 visibileProps、contentProps 来描述联动关系。而由于是树型结构，通过 children 字段属性指定子节点，所以理解起来也非常简单。以一个请假申请单为例：
[{"name": "applicantName","type": "ApplicantName","label": "申请人","value": "",}, {"name": "applicantDept","type": "ApplicantDept","label": "申请人部门","value": "",}, {"name": "applicantJobNum","type": "ApplicantNum","label": "申请人工号","value": "",}, {"type": "Detail","label": "明细","name": "AsZJ1634892182751","value": "","children": [{"type": "SingleSelect","label": "请加类型","value": "",}, {"type": "DateTimeRange","label": "日期区间","name": "nPiG1634892209750","value": "",}],}, {"type": "MultiLine","label": "请假原因","name": "NnDD1634892259871","value": "",}, {"name": "KBTA1615274618115","label": "请假期间联系方式","type": "SingleLine","value": "",}]
设计节点基础信息
{"type": "SingleSelect","label": "请加类型","title": "单选","name": "cnQu1634892188818","showDeleteIcon": false,"value": "","props": {"width": "12","optionsWarn": false,"placeholder": "请选择","helpUrl": "https://pan.58corp.com/oashare/1610166607390700","radioType": "0","options": [{"value": "Yuyr1634883484964","label": "选项一","repeatKey": false}],"url": "https://xxx","token": "请输入token","key": "","required": true,"encrypt": false,"emptyError": false,"canChangeUrl": false,"print": true},"key": "cXrV1634892188818"}
设计节点联动信息
{"type": "SingleSelect","label": "请加类型","title": "单选","name": "cnQu1634892188818","showDeleteIcon": false,"value": "","props": {"width": "12","optionsWarn": false,"placeholder": "请选择","helpUrl": "https://pan.58corp.com/oashare/1610166607390700","radioType": "0","options": [{"value": "Yuyr1634883484964","label": "选项一","repeatKey": false}],"url": "https://xxx","token": "请输入token","key": "","required": true,"encrypt": false,"emptyError": false,"canChangeUrl": false,"print": true},"visibileProps": [[{"labelName": {"value": "nPiG1634892209750","label": "时长","type": "DateTimeRange",},"condition": "==","labelValue": "10"}]],"contentProps": {"watchTools": [{"label": "日期区间","value": "nPiG1634892209750","disabled": false}],"url": "https://test.com","token": "kkkktestsssss"},"key": "cXrV1634892188818",}
阶段成果
本文分享自微信公众号 - 58技术（architects_58）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
{{o.name}}
{{m.name}}