1.vue需要引入BPMN的包
npm install bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle --save
2.BPMN的项目创建，网上有个比较详细的教程
https://juejin.im/post/5def372af265da33c84a4818
3.BPMN的XML的数据结构
image.png
主要分为process和bpmnid两大类
- bpmnid主要是页面渲染，与业务逻辑无关
- process主要的节点
1.开始 startEvent
2.线 sequenceFlow
3.任务(方块) task
4.判断节点,网关(菱形) exclusiveGateway
5.结束 endEvent
跟多的规范介绍 - 每个都包含id,name属性,name就是现实在上面的文字
- 任务,判断 节点包含 incoming,outgoing子节点
- 线 只有 起点-sourceRef,指向-targetRef 属性
- 起点只有 outgoing 节点,结束 只有 incoming 节点
我们只要通过这些数据就能记录某次操作去向何方,并且通过时间可以得知当前运行时的流程 当前执行到哪里已经过去所有的操作过程
BPMN的扩展属性
image.png
后台业务设计想法
1.Workflow的基础类，前端的XML数据直接存入数据库中，在需要使用的时候解析XML，并可以可以扩展多个前端工作流框架
image.png
2.创建component类，所有的事件（Start，End），Task和网关都集成component，在基类中添加每个component的进入组件和输出组件
image.png
3.在每一个继承Component的组件中，可以重写针对与改组件FindNext的方法，判断如何找到下一个组件，例如可以再网关类中，根据定义的表达式来findnext。
image.png
4.用BpmnWorkflow继承Workflow，实现Load方法对XML的每个元素进行解析，得到一个工作流中所有的组件
image.png
