数据为搭建审批页面的前置条件
审批模板页面需要显示相关审批数据,并且需要基于已有的审批数据进行审批等相关操作。有了基本的数据,才能驱动页面的搭建,完成后续的审批相关的审批业务操作。
例如,显示当前审批的基本信息,需要获取流程实例详情,要构建流程记录是需要依赖流程批办过程数据,针对当前审批进行审批同意拒绝等操作,也是需要知道当前是操作的哪个流程实例,当前审批任务的 ID,这里要依赖流程实例详情。
因此审批流程相关数据获取尤为重要。
获取流程数据请求依赖的参数
审批详情页需要知道要请求哪一条审批数据,并且需要知道当前的页面类型是待办还是已完成。所以审批详情页面模板预置了两个页面参数:flowTaskId 流程任务 ID、pageType 页面类型。
在发起流程之后,以及流程列表里单击标题之后,链接会携带这两个 URL 参数。后续可以在这个页面中拿到这两个参数进行业务操作。
执行流程数据请求
生命周期内接收页面参数
微搭平台针对每个页面提供了一个生命周期,在生命周期中的 onPageLoad 方法中,可以获取页面 URL 参数,并利用获取到的参数进行数据请求。
针对这个 onPageLoad 的参数进行解构,可以得到 flowTaskId 和 pageType 这两个参数。拿到这两个参数后就可以进行数据请求了。这里面还针对这两个参数进行了一个校验。说明:
这个校验在编辑器中就会生效。因为编辑器中即为运行环境。所以在编辑器中看到错误提示属正常现象。可忽略。
执行 initApprovalPage 请求
在校验通过之后,会执行 initApprovalPage 这样的一个方法。在这个方法中会主要有以下逻辑。
首先进行流程元数据请求,这里的元数据包含流程实例详情、审批页面详情、流程画布详情、流程批办过程。这一系列操作封装在了一个叫做 getProcessMetaData 的方法中,里面包含对以上四项数据的请求。拿到以上四项数据主要用于:
流程实例详情:构建审批页面中的基本信息模块,从中获取各个审批操作依赖的参数。
审批页面详情:构建审批页面中的流程操作模块,审批表单赋值。
流程画布详情:构建审批页面中的流程图示模块。
流程批办过程:构建审批页面中的流程记录模块。
因为审批页面详情中包含变量信息,需要体现到表单中,所以需要根据审批页面详情数据给审批页面中的审批表单赋值。具体操作逻辑在 setFormValue 这个方法中。
审批表单针对不同场景有不同的状态,具体设置的逻辑在 setFormType 这个方法中。
拿到元数据之后,对一些变量进行赋值。详见下方涉及到的变量列表。
涉及到的方法
方法 | 描述 |
initApprovalPage | 用于初始化审批页面的数据。 |
getProcessMetaData | 获取流程元数据。 |
setFormValue | 将流程中的业务数据回显到审批表单中。 |
setFormType | 设置表单场景。 |
涉及到的变量
变量 | 描述 |
taskHasEnd | 当前审批任务是否结束,将用于审批操作按钮条件展示判断中,避免出现任务已结束,但进入 pageType=TODO 的链接时还能操作的情况。 赋值逻辑:
|
processInstance | 流程实例详情。数据来源于 getProcessMetaData 中返回的 processInstance。用于显示流程基本信息,以及利用其中的 InstanceId 作为参数进行流程操作 |
approvalPageDetail | 审批详情信息变量。数据来源于 getProcessMetaData 中返回的 approvalPageDetail。其中包含流程变量信息,将会用于审批表单的回显。另外还包含一些控制按钮的显隐控制字段,例如是否抄送,是否加签等。 |
elementInfos | 批办过程数据。数据来源于 getProcessMetaData 中返回的 elementInfos。用于渲染流程记录。 |
processCanvasInfo | 流程画布数据。数据来源于 getProcessMetaData 中返回的 processCanvasInfo。用于绘制流程图。 |
internalPageType | 审批页面类型。来源于 initApprovalPage 入参。 TODO:待办 DONE:已办 CREATE:创建 CC:抄送 |
internalFlowTaskId | 流程任务 ID。来源于 initApprovalPage 入参。 |
getProcessMetaData 方法中使用到的请求
可以看到 initApprovalPage 内执行了一些关于 UI 渲染的变量赋值操作。有了这些变量,就可以进行 UI 的绘制以及后续的流程操作了。