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