@alanwang-merit/meritdata-platform-skill-package 1.0.9 → 1.0.10

package/skills/meritdata-platform-bpm/references/module-design.md

@@ -0,0 +1,342 @@
+## 适配说明
+
+历史截图已移除。文件路径、示例服务名、流程 ID 和表单链接只用于说明结构；部署前从目标项目确认模块布局、网关路由和流程设计器配置。
+
+## 1.背景
+流程模块业务为应用开发平台核心模块，业务性强 ，为了便于同事快速了解此块业务，编写文档帮助同事理解设计思路和业务逻辑。
+## 2.工作流相关介绍
+​	工作流原理：简单来说就是通过数据库维护一定数量的表来记录工作流转的信息。
+​	工作流框架：Activity  Camunda等。 我们使用Camunda
+​	工作流引擎：负责生成流程运行时的各种实例及数据、监控和管理流程的运行。
+​	工作流生命周期：定义-发布-执行-完成。
+​	工作流规范： BPMN2.0。
+​	相关概念：流程定义对象，流程实例对象，任务。
+​	涉及组件： 流程设计器  一般是一个绘图工具，通过提供的组件设计出需要的流程，可以转化为XML文件。 
+​					    流程引擎  解析XML文件，将流程启动和运行，维护整个过程的数据。
+​	
+## 3.应用开发平台流程包含模块
+ 1.流程设计器模块
+ 2.流程业务维护模块
+ 3.流程基础组件模块
+ 4.流程样例模块
+## 4.流程功能模块介绍
+###  4.1 流程设计器模块
+主要功能是来设计流程图
+流程设计器前端代码位于目标项目的 BPM 前端模块中，基于 bpmn-js；不要使用历史工程路径定位源码。
+流程三大核心流对象：Activities 活动   Gateway 网关   Event 事件
+流程设计器相关概念：任务 ，网关 ，事件
+左侧为流程设计组件--也是基于规范提供的组件。
+事件：开始节点 结束节点
+任务：用户任务(UserTask) 、子流程(CallActivtiy) 、服务任务(ServiceTask)、后续可继续扩展
+用户任务：需要人员参与的节点。
+子流程：可以配置另一个流程。有具体子流程的参考文档。
+服务任务：自动执行，可以配置监听类完成业务逻辑。
+网关：分支网关 合并网关 包含网关   控制流程的流转。
+分支网关：按条件分支流转，只能有一个分支流转。
+合并网关：多个分支合并为一个分支。
+包含网关：与分支网关类似但可以多个分支流转。
+监听类：流程引擎支持配置监听类来实现触发事件执行实现类中的方法。
+监听表达式为：delegateExpression   类型    ${lineListener}     括号中的为监听类
+监听类需要实现camunda中的接口才可以触发 ，我们分别给线和用户任务内置了两个监听类，完成一些操作。
+例如上面的lineListener，就需要定义类实现JavaDelegate接口重写execute方法
+用户任务上配置的监听类定义就需要实现TaskListener 重写notify方法
+以上组件都基于原生的流程设计组件
+我们通过给组件添加了配置表单来配置我们的业务数据
+配置完成后需要将流程设计转换为xxx.bpmn20.xml格式的流程通用文件，其中为了存储我们自己表单中配置的信息，我们扩展了一些xml标签.
+截取一部分供了解xxx.bpmn20.xml结构
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_02dbze3" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.7.1">
+  <bpmn:process id="Process_Demo1" name="出差单" isExecutable="true">
+    <bpmn:documentation>{"formLink":"/bpm/example/index.html#/form?id=businessId","appModuleName":"dd","appModuleId":"dd","appSystemName":"BPM系统","appSystemId":"BPM"}</bpmn:documentation>
+    <bpmn:startEvent id="Event_0esv7me" name="开始">
+      <bpmn:outgoing>Flow_1uhgeou</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:userTask id="Activity_0hwkbjn" name="起草 " camunda:assignee="${Activity_0hwkbjn_onlyApprove}">
+      <bpmn:extensionElements>
+        <camunda:meritdata>
+          <camunda:editStatus type="1" />
+          <camunda:isretprenode type="" />
+          <camunda:isretfirnode type="" />
+          <camunda:regainStatus type="" />
+          <camunda:retRandomNodeStatus type="" />
+          <camunda:formLink name="起草 " sort="0">
+            <camunda:link>/<frontend-base>/example/index.html#/formEdit?id=businessId</camunda:link>
+          </camunda:formLink>
+          <camunda:formVars />
+          <camunda:actors>
+            <camunda:actor type="1" ids="drafterCode" name="起草人" />
+          </camunda:actors>
+          <camunda:sendRead>
+            <camunda:issendread type="0" />
+          </camunda:sendRead>
+          <camunda:approve type="onlyApprove" />
+          <camunda:route type="1" operName="发送" returnName="" returnValue="" operImgPath="" />
+          <camunda:seluserwin display="yes@@@@@【本环节需要选人】" noseluser="no@@@@@【本环节不需要自动选人】" />
+          <camunda:opinion display="" type="1" must="" isOpiDisplay="" isOpiMust="" regionName="" regionSort="0" opinionField="" opinionYesNo="" opinionDeptStatus="" opinionUserImgStatus="" autoOpinion="" autoOpiContent="" routeName="" routeValue="" routeOpiMust="" routeCommentMust="" />
+        </camunda:meritdata>
+        <camunda:taskListener delegateExpression="${userTaskListener}" event="create" />
+        <camunda:taskListener delegateExpression="${userTaskListener}" event="complete" />      
+        <camunda:taskListener delegateExpression="${userTaskListener}" event="delete" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_1uhgeou</bpmn:incoming>
+      <bpmn:outgoing>Flow_0902i1k</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:userTask id="Activity_1yq15ws" name="用户任务" camunda:assignee="${Activity_1yq15ws_onlyApprove}">
+      <bpmn:extensionElements>
+        <camunda:meritdata>
+          <camunda:editStatus type="1" />
+          <camunda:isretprenode type="" />
+          <camunda:isretfirnode type="" />
+          <camunda:regainStatus type="" />
+          <camunda:retRandomNodeStatus type="" />
+          <camunda:formLink name="用户任务" sort="0">
+            <camunda:link>/<frontend-base>/example/index.html#/formRead?id=businessId</camunda:link>
+          </camunda:formLink>
+          <camunda:formVars />
+          <camunda:actors>
+            <camunda:actor type="2" ids="1fc3e895f1ea43268144af73e29fb005" names="zs" codes="zs" />
+          </camunda:actors>
+          <camunda:sendRead>
+            <camunda:issendread type="0" />
+          </camunda:sendRead>
+          <camunda:approve type="onlyApprove" />
+          <camunda:route type="1" operName="发送" returnName="" returnValue="" operImgPath="" />
+          <camunda:seluserwin display="yes@@@@@【本环节需要选人】" noseluser="no@@@@@【本环节不需要自动选人】" />
+          <camunda:opinion display="" type="1" must="" isOpiDisplay="" isOpiMust="" regionName="" regionSort="0" opinionField="" opinionYesNo="" opinionDeptStatus="" opinionUserImgStatus="" autoOpinion="" autoOpiContent="" routeName="" routeValue="" routeOpiMust="" routeCommentMust="" />
+        </camunda:meritdata>
+        <camunda:taskListener delegateExpression="${userTaskListener}" event="create" />     
+        <camunda:taskListener delegateExpression="${userTaskListener}" event="complete" />
+        <camunda:taskListener delegateExpression="${userTaskListener}" event="delete" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_0902i1k</bpmn:incoming>
+      <bpmn:outgoing>Flow_01mc0vx</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:endEvent id="Event_16yttqg" name="结束">
+      <bpmn:incoming>Flow_0cbz45i</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="Flow_1uhgeou" sourceRef="Event_0esv7me" targetRef="Activity_0hwkbjn">
+      <bpmn:extensionElements>
+        <camunda:executionListener delegateExpression="${lineListener}" event="take" />
+      </bpmn:extensionElements>
+    </bpmn:sequenceFlow>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BpmnDiagram_1">
+    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_Demo1">
+      <bpmndi:BPMNEdge id="Flow_0cbz45i_di" bpmnElement="Flow_0cbz45i">
+        <di:waypoint x="1184" y="261" />
+        <di:waypoint x="1198" y="261" />
+        <di:waypoint x="1198" y="280" />
+        <di:waypoint x="1211" y="280" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Event_16yttqg_di" bpmnElement="Event_16yttqg">
+        <dc:Bounds x="1211" y="261" width="38" height="38" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="1219" y="302" width="22" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0awjt76_di" bpmnElement="Activity_0awjt76">
+        <dc:Bounds x="1016" y="233" width="168" height="55" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>
+
+```
+以上的流程涉及到：表单到xml的转化及xml到表单的回显逻辑。
+流程设计器的主要代码及组件
+activiti.json  --定义的是XML中的标签及属性。
+contextPadConfig.json -- 定义画板，组件配置。
+dialog.json -- 定义各组件弹框大小。
+paletteConfig.json --  定义组件类型。
+rendererConfig.js -- 渲染器配置。
+具体扩展有参考文档。《流程设计器使用说明v2.doc》
+components 文件夹下基本都是弹框，表单组件。
+### 4.2 程业务维护模块
+此分类主要涉及的是流程的周边功能，如下
+流程设计--顾名思义就是上面提到的流程设计模块
+流程监控--为发起启动流程后流程实例的列表
+流程项管理--主要为流程的权限配置
+意见管理--意见模板的维护
+外出代理-顾名思义就是人员外出代理的配置
+流程服务--主要为流程设计器中监听配置表达式的维护
+配置权限的介绍：
+1.配置流程的管理员权限
+配置完成后 
+拥有管理员权限的用户就具有以下功能：
+1）个人样例中的删除按钮权限
+2) 拥有查看所有流程实例的权限
+3）若是流程中某个节点的处理人时，会显示特送，管理特送按钮
+2.流程实例查看权限
+部门查看权限 -- 可以查看本部门人的起草的流程
+部门参与权限 -- 可以查看本部门人参与的流程
+公司查看权限 -- 可以查看本公司（机构）人参与的所有流程
+流程追踪查看页面
+前端代码位置
+### 4.3 流程基础组件模块
+作为平台，我们提供了流程中的一些基本组件包含:流程操作的按钮，一些弹框，实例的选择按钮等。
+实例的选择按钮
+流程操作按钮
+按钮中主要调用的方法都封装在merit-bpm.js中
+前端代码主要在cloud-module-bpm工程中
+点击按钮后的操作流程说明，以发送按钮为例：
+点击发送按钮---》@click="BPMEventBus('doSend', bpmBtn)" 触发 merit-bpm.js中定义的MeritBPM.doSend方法---》
+判断按钮类型 ----》若为发送按钮---》运行规则引擎方法获取节点候选人，候选人不为空---》是否需要填写意见---》若需要，弹出意见框---
+点击保存意见触发保存意见及意见保存后方法---》意见保存方法中判断按钮类型---》---若需要选人 ---》 弹出选人框 ---》点击确定--》
+》触发merit-bpm.js中MeritBPM.bpmUserSelectSave方法--》调用完成任务方法--》流程完成流转
+### 4.4 流程样例模块
+此模块为样例模块，主要为其他项目提供开发模板及开发自测流程样例
+现有样例流程ID固定为 Process_Demo1
+前端代码在<business-service>   后端在 <business-service>
+## 5.流程后端设计
+### 5.1 核心Java类
+RuleEngine ： 是实体类 ，包含了我们自己封装后的所有属性。
+包含 ：流程key, 操作按钮，当前任务节点信息，节点候选人等。
+BpmEngine：API接口类，我们通过feign对外提供的自定后的流程相关的API接口。提供了启动流程，规则引擎初始化 ，运行规则引擎，完成任务等接口。
+核心接口：运行规则引擎      返回结果  RuleEngine
+BpmEngineManager：实现业务逻辑的核心类。启动流程，完成任务的具体业务逻辑。
+RuleEngineManager：规则引擎类，主要是实现将XML文件中的信息转换为RuleEngine对象。
+DealerComputerService：计算人员类，将XML中的配置人员信息转换为前端显示人员。
+MainFormController：MainForm数据的接口。
+LineListener： 线监听类  完成节点处理人设置。
+UserTaskListener：用户任务监听类  主要完成我们Undo数据的产生和更新。
+### 5.2 流程流转调用接口顺序
+新发起流程时: 规则引擎初始化 ，启动流程
+起草人完成节点时：完成当前任务
+下一个节点人员打开时：运作规则引擎，获取当前节点数据
+完成任务时：完成任务接口
+每次打开表单时都会调用运行规则引擎接口，获取RuleEngine对象，操作按钮显示，节点候选人都来自运行规则引擎返回的RuleEngine 的信息。
+### 5.3 具体的接口逻辑
+串行审批模式
+首先用户任务的当前节点处理人为camunda:assignee 中配置的值 可以配置用户也可以配置变量，我们这边选择配置变量，根据业务给变量赋不同的候选人。
+我们从发起流程开始：
+首先调用的就是发起流程接口：/{procDefKey}/startprocess 
+重要的就是以上框中代码：1. 设置起草人变量   2. 启动一个流程   3.variable 就是全局变量
+当启动一个流程之后流程就要完成第一个线流转就会触发配置的线监听类LineListener，就会执行重写的execute方法
+这里完成的就是获取到当前的流转节点即第一个用户任务节点，但此时还没有设置处理人，要完成给Activity_04eqjz8_onlyApprove变量设置。
+下面就是完成设置变量值的过程,及给起草人节点设置了候选人值，当前节点就变为运行时节点，处理人为起草人。
+当起草人点击发送按钮，选择下一个节点处理人后，要流转到下一个节点，首先会调用完成任务接口/task/{taskId}/complete 
+完成起草人接口后又会触发线监听
+后面就进行同样的步骤，若流程后面没有节点则流程就结束了。
+对于退回上一节点，退回拟稿人操作就相当于把流程的运行节点改为对应的节点，和对应的处理人。
+以退回上一节点操作为例：首先调用退回上一节点接口：/process/retprenode/{businessId}
+退回上一节点，退回拟稿人，特送都会调用到此方法，具体的跳转到那个节点是由下面框中原生接口完成。
+UserTaskListener 的业务介绍：
+首先我们可以看到有事件的定义，以及主要操作的是undo数据。
+对于create事件的意思就是新进入用户任务之前，我们主要来给这个节点的处理人创建待办数据。
+我们在产生待办的同时也给接收人发送了系统消息：
+对于complete，和delete事件 主要用来更新待办数据
+### 5.4 几种审批模式的介绍
+单人审批： 一个人审批即可    XML中为 camunda:assignee 属性
+多人审批：
+​     任意一人  并行审批 多个候选人其中一个审批即可完成当前节点  XML中为 camunda:candidateUsers   意思为候选人
+​	 多人审批  并行多个人审批  所有候选人审批完 流入下一个节点   XML中为 camunda:assignee   审批类型为  <camunda:approve type="parApproveList" />
+​    串行审批   多个人按选择的顺序审批 所有候选人依次审批完流入下一个节点  XML中为 camunda:assignee="${seqApprove}" 审批类型为  <camunda:approve type="seqApproveList" />
+代码中的设置位置：
+### 5.5 bpm模块相关表介绍
+ACT开头：这些都是camunda引擎创建的表。
+下面对表做一个简单介绍：
+ACT_RE_*: 表示repository，这个前缀表包含了流程定义和流程静态资源 。
+ACT_RU_*: 表示runtime，这个前缀表示流程运行时的表，包含流程实例，任务，变量等数据。 只在流程实例运行的时候保存这些数据，在流程结束后就会删除这些记录。
+ACT_ID_*:表示identity ，这些表包含身份信息，比如用户等。
+ACT_HI_*: 表示history 这些表包含历史数据，比如历史流程，变量，任务等待。
+ACT_GE_*: 通用数据 用于存放资源。
+几个常用到比较重要的表：
+1：资源库流程规则表
+​    act_re_deployment 部署信息表
+​    act_re_model  流程设计模型部署表
+​	act_re_procdef  流程定义数据表
+2：运行时数据库表
+​    act_ru_execution 运行 时流程执行实例表
+​	act_ru_identitylink 运行时流程人员表，主要存储任务节点与参与者相关信息
+​    act_ru_task 运行时任务节点表
+​	act_ru_variable 运行时流程变量表
+3：历史数据表
+​	act_hi_actinst 历史节点表
+​	act_hi_procinst 历史流程实例表
+​	act_hi_taskinst 历史任务实例表
+​	act_hi_varinst 历史变量实例表
+4：通用数据表
+​		act_ge_bytearray 二进制数据表
+​		act_ge_property 属性数据表
+pf_bpm开头：我们自己维护的相关表
+pf_bpm_mainform ：流程实例表  主要记录了流程流转过程中的信息。流程启动时产生数据。
+pf_bpm_undo：待办表  流程流转到下一个节点时插入的下一个节点人处理信息。
+pf_bpm_proctrack： 流程处理过程中，流程的追踪信息。
+pf_bpm_procopinion：流程处理过程中填写的意见表。
+pf_bpm_procservice_item: 监听表达式维护表
+pf_bpm_procdefbyte：流程的维护类
+意见管理：
+个人意见和公共意见：为维护的意见模板。在流程流转过程中填写意见可以快速选取。
+流程意见：为流程流转过程中填写的意见。
+代码位置：ProcOpinionController.java
+流程追踪: 
+为方便用户直观地了解流程当前的处理节点设计的可视化展示。
+代码位置：TrackController.java
+待办管理：
+待办数据是在每完成一个任务节点会触发监听器方法，方法中会给Undo表中插入数据。
+## 6.流程前端设计
+demo 工程主要提供业务表单页面及引入操作按钮组件，组成流程操作页面
+bpm-form-tools   主要为按钮组件
+bpm-grid-buttons 为查询pf_bpm_mainform表数据提供的按钮
+### 6.1 核心文件
+bpm-grid-buttons.vue 负责查询分类按钮，新增，删除按钮的控制
+bpm-form-tools.vue 按钮组件负责按钮的显示及弹框的引入
+merit-bpm.js  前端封装的方法类复制调用接口
+### 6.2 调用逻辑梳理
+打开流程处理表单页面的处理过程,以待办列表中点开为例，其他与之类似：
+第一步：点击操作按钮时触发点击操作事件
+第二步触发MeritBPM.open()方法：
+第三步触发window.open()方法打开页面：
+由于页面引入了操作按钮组件，则会先执行组件中的方法
+第四步若businessId不存在则直接回调，若有通过businessId查询表单数据，再进行回调
+第五步调用运行规则引擎方法,获取操作按钮
+第六步完成表单页面渲染
+merit.js 中定义了流程操作中的按钮点击事件，方法最终还是调用后台接口。
+### 6.3 cloud-module-bpm中文件修改，调试方式
+由于cloud-module-bpm是基础依赖文件，若在代码中验证需要每次推到仓库，这样增加了风险也增加了操作量，所以提供了一个examples的页面来调试代码。
+页面中提供了流程打开后调用的组件，使用时放开注释就好。
+调试时需要修改这些参数为你实际上页面的参数
+效果如下：
+## 7.二次开发 
+基于应用开发平台提供的这套东西有比较多的限制，因为所有接口封装都依赖于Rule Engine对象中定义的一套内容。
+但遵守上面的一些限制，则可以更快地开发业务。
+基于应用开发平台提供的流程引擎开发方式：
+  1.方式一 ：引入前端按钮组件
+​     优势：可以不用自己调用后端流程的API接口  
+​	 缺点：按钮无法更改
+​	 采用项目组:tempo, 数据资产，7103
+ 2.方式二：自己开发前端样式按钮等
+​    优势：前端按钮样式可自定义
+​    缺点：需自己整理业务逻辑调用后端的API接口
+​    采用项目组：希子图鉴
+以上两种都有提供相关参考文档。
+《二次开发--流程API接口》
+《二次开发--工作流流程应用开发》
+## 8.个人样例流程的配置
+###    8.1 配置个人样例菜单和授权
+​	系统管理员账号登录系统，进入资源管理，资源维护 在流程管理下配置新增资源
+配置文本：配置流程(个人样例)菜单：
+【路由地址】
+/<frontend-base>/example/index
+【实际菜单地址】
+/<frontend-base>/example/index.html
+【所属应用名】
+cloud-system-bpm
+授权完成后，登录有权限的用户就可以看到菜单
+### 8.2 用户侧新建样例流程
+流程设计下新建分类，分类下新建个人样例流程
+### 8.3 设计流程
+按表单上的内容配置信息，表单链接地址第一个节点配置为：/<frontend-base>/example/index.html#/formEdit?id=businessId
+后面节点配置为：/<frontend-base>/example/index.html#/formRead?id=businessId
+### 8.4 设计完成后发布流程
+### 8.5 发起流程
+方式一
+方式二
+### 8.6 处理流程
+操作入口
+入口一
+入口二
+入口三
+入口四--消息中
+操作页面：

package/skills/meritdata-platform-bpm/references/process-track.md

@@ -0,0 +1,172 @@
+## 适配与安全
+
+先从目标 BPM 版本确认追踪页面路由、`BpmEngine` 方法和访问控制。嵌入页面必须沿用当前用户会话或受认证的后端代理，不能把内部追踪地址暴露为匿名 iframe。
+
+## 流程追踪嵌入表单开发
+对于需要把现有查看追踪页面的页面拆分开嵌入进自己的表单页面的需求。
+## 1. 开发步骤：
+### 1.1 更新流程的包到最新版本。
+### 1.2 自己表单页面嵌入页面的具体步骤。
+#### 1.2.1 获取需要的下面几个参数
+port：端口
+procDefId：流程定义Id
+procInstId：流程实例id
+showtitle：是否展示标题   值为 true （展示上面页面的切换文字）或 false （不展示上面页面的切换文字），此种业务场景下拼接false
+showtabkey：展示的页面  值有 grid(文字追踪页面)   track（追踪图表页面） apply （审批意见页面）
+IsShielding：是否展示标题中的文字追踪和流程意见标题   此种业务场景不用在url中拼接
+通过以上拼接出页面的URL。
+示例：`https://<bpm-host>>/<track-path>>?procInstId=<proc-inst-id>>&procDefId=<proc-def-id>>&showtitle=false&showtabkey=grid#/`
+#### 1.2.2 自己编写接口调用应用开发平台提供的接口获取port和procDefId，procInstId
+获取port：
+示例：
+```java
+@RequestMapping(value = "/port", method = RequestMethod.POST)
+    public @ResponseBody
+    ResultBody<String> getPort(){
+        ResultBody<String> result = bpmEngine.getPort();
+        return ResultBody.success(result.getData());
+    }
+```
+当首次打开表单没有没有businessId时，要查询procDefId显示流程追踪图，调用下面接口
+```java
+@Autowired
+    BpmEngine bpmEngine;
+
+    @ApiOperation(value = "获取流程最新定义ID", notes = "根据流程定义Key查询最新的流程定义ID")
+    @RequestMapping(value = "/get/{procDefKey}", method = RequestMethod.POST)
+    public @ResponseBody ResultBody<String> getLatestProcDefId(@PathVariable("procDefKey") String procDefKey) {
+
+        // 调用查询流程实例
+        ResultBody<String> procDefId = bpmEngine.getLatestProcDefId(procDefKey);
+        return procDefId;
+    }
+```
+当有了businessId时获取procDefId，procInstId，通过查询mainFormDTO对象
+示例：
+```java
+@RequestMapping(value = "/mainform", method = RequestMethod.POST)
+    public @ResponseBody
+    ResultBody<MainFormDTO> getMainForm(@RequestParam String businessId){
+        ResultBody<MainFormDTO> result = bpmEngine.queryMainFormsByBusinessId(businessId);
+        return ResultBody.success(result.getData());
+    }
+```
+接口调用方式参考《二次开发--流程API接口》文档
+#### 1.2.3 前端开发
+使用element-ui组件  Collapse 
+```vue
+bel-collapse v-model="activeNames"> 
+bel-collapse-item title="文字追踪" name="1">
+      bdiv class="track-div">
+        biframe
+          allowfullscreen="true"
+          :src="url1"
+          width="100%"
+          style="border:0px;height: calc(100% - 1px)"
+        >b/iframe>
+      b/div>
+    b/el-collapse-item>
+    bel-collapse-item title="图表追踪" name="2">
+      bdiv class="track-div">
+        biframe
+          allowfullscreen="true"
+          :src="url2"
+          width="100%"
+          style="border:0px;height: calc(100% - 1px)"
+        >b/iframe>
+      b/div>
+    b/el-collapse-item>
+    bel-collapse-item title="审批意见" name="3">
+      bdiv class="track-div">
+        biframe
+          allowfullscreen="true"
+          :src="url3"
+          width="100%"
+          style="border:0px;height: calc(100% - 1px)"
+        >b/iframe>
+      b/div>
+    b/el-collapse-item>
+  b/el-collapse>
+```
+获取拼接所需参数，拼接url
+备注所有参数名自己定义。
+data中定义三个url:
+```vue
+data() {
+    return {
+	 url1: '',
+     url2: '',
+     url3: '',
+    }
+}
+```
+方法写在created中：
+调用自己的工程接口获取procDefId，procInstId
+// 若businessId为空则不用请求了，procDefId，procInstId都赋值为空字符串。追踪页面将会显示空白
+示例：
+```vue
+var procDefId = '';
+var procInstId = '';
+this.axios['cloud-system-bpm-travel']
+      .post(this.HOST + '/mainform', {
+        businessId: '3f28830b7b32fef7017b3310c8de0004'
+      })
+      .then(function(res) {
+		// 获取procDefId和procInstId
+        procDefId = res.data.procDefId;
+        procInstId = res.data.procInstId;
+		
+		// 这个方法是获取port，拼接url
+        _this.setUrl(procDefId, procInstId);
+      });
+```
+方法写在methods中：
+```vue
+setUrl(procDefId, procInstId) {
+      let _this = this;
+      let port = '';
+      var url1 = '';
+      var url2 = '';
+      var url3 = '';
+      var shielding = false;
+      // 获取端口
+      this.axios['cloud-system-bpm-travel']
+        .post(this.HOST + '/port')
+        .then(function(res) {
+          port = res.data;
+          url1 = _this.appendUrl('grid', port, procInstId, procDefId);
+          url2 = _this.appendUrl('track', port, procInstId, procDefId);
+          url3 = _this.appendUrl('apply', port, procInstId, procDefId);
+          _this.url1 = url1;
+          _this.url2 = url2;
+          _this.url3 = url3;
+        });
+    },
+appendUrl(key, port, procInstId, procDefId) {
+      let url = '';
+      if (port == '80') {
+        url =
+          'http://' +
+          window.location.hostname +
+          '/bpm/proctrack/index.html?procInstId=' +
+          procInstId +
+          '&procDefId=' +
+          procDefId +
+          '&showtitle=false&showtabkey=' +
+          key;
+      } else {
+        url =
+          'http://' +
+          window.location.hostname +
+          ':' +
+          port +
+          '/bpm/proctrack/index.html?procInstId=' +
+          procInstId +
+          '&procDefId=' +
+          procDefId +
+          '&showtitle=false&showtabkey=' +
+          key;
+      }
+      return url;
+    }
+```