自己开发若依管理系统10——好极!流程平台来了

• 先睹为快

经过几周的摸索，终于把流程平台整进来了，这个页面就是业务单的监控，上半部分是业务单列表（当然我这里只有请假单了），下边的列表是流程运行过程中经过的各个环节。

• 设计思路：

我使用的流程引擎是camunda7.16.0，算是比较新的了。前端绘制流程图用的是bpmn-js17.9.0。

bpm_process_package：流程模型表，一条记录对应一个流程模型，一条记录对应多个流程定义，但是只有一个流程定义是当前生效的（部署到camunda的）

bpm_process_def：流程定义表，可能随着业务的变化流程也会变，所以用这个表控制版本，设计好流程后发布该流程。

bpm_user_assignee：用于存储人工环节（camunda里也叫用户任务）的执行人配置。这个数据得在流程运行前提前配置好，流程启动时会根据这里的配置为人工环节设置执行人。

bpm_order：对应流程实例的业务单表，发起一个流程后就会有一个流程实例，对应到这里就是一条记录。也就是第一张图的上半部分。其中所属业务字段表示不同的业务，我这里目前只有请假业务（LEAVE）。

bpm_work_order：对应环节实例的业务运行记录表，流程运行中各个环节都会产生一条记录。也就是第一张图的下半部分。

bpm_leave：举例用的请假单表。如果有其他业务比如出差，可以建一个出差表。最终都要与bpm_order的所属业务对应起来。

• 前端整进来流程设计器

有了总体的设计思路，要想实现也不是一件容易的事，第一件事就是在我们自己的vue项目中如何把bpmn整合进来画流程图，这一步花了我不少时间，回头看看倒是没那么难，只是从来没搞过而已。

安装包如下，照着来吧：

"@bpmn-io/properties-panel": "^3.13.0",
"bpmn-js": "^17.9.0",
"bpmn-js-properties-panel": "^5.6.1",
"camunda-bpmn-moddle": "^7.0.1",

最重要的初始化设计器方法长这个样子，还要引入一些东西。代码太长了不好粘贴，有兴趣直接去git仓库看。

const initBpmnModeler = (diagram) => {
  bpmnModeler = new BpmnModeler({
    container: '#canvas',
    propertiesPanel: {
      parent: '#properties'
    },
    additionalModules: [
      BpmnPropertiesPanelModule,
      BpmnPropertiesProviderModule,
      CamundaPlatformPropertiesProviderModule,
      customTranslateModule
    ],
    moddleExtensions: {
      camunda: CamundaBpmnModdle
    }
  })
  bpmnModeler.importXML(diagram);
}

效果

发布流程、环节回单等其他内容下一篇说。