工作流开发基石（二）：流程设计器bpmn-js集成(vue版本)-一一网

前言

在上一章节中我们为后端SpringCloud集成了Activiti，使其拥有了流程处理的能力，那么我们该如何在线绘制流程图呢？我们可以用Activiti自带的设计器 activiti-modeler，它长这个样子：

这个activiti-modeler比较丑而且上面的东西也比较晦涩难懂，于是就想到了还有没有其他更好的开源设计器可供使用，那就是bpmn-js :

它的设计器比上面的稍微好看了一些，但是还不够，我们可以通过修改代码DIY达到我们想要的效果：

由于这两个都是国外团队的作品，资料比较少且难啃，存在一定上手难度。在明确需求后，就开始着手使用吧！

集成步骤

1. 引用依赖

可以使用npm安装依赖：

npm i bpmn-js --save  // bpmn-js核心依赖，包括设计器的画布、样式和左侧工具栏
npm i bpmn-js-properties-panel --save  // bpmn-js右侧属性栏插件
复制代码

也可以在package.json中添加引用后再执行npm install安装

 "dependencies": {
     ...,
    "bpmn-js": "7.5.0",
    "bpmn-js-properties-panel": "0.37.6"
 }
复制代码

2. 使用

依赖引用完成后，就可以引入到页面开始使用了，创建一个空页面，按照如下代码实现样例

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
/* bpmn-js 主体依赖 */
import BpmnModeler from 'bpmn-js/lib/Modeler' // Bpmn-Modeler
/* bpmn-js 左侧工具栏 */
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
/* bpmn-js 右侧属性栏 */
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
/* 要渲染的bpmn文件内容（实质为xml） */
import xml from './plugins/defalutXml' // 样例直接预置xml，实际应该从后台获得

export default {
  name: '',
  components: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init()
  },
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  methods: {
    init() {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模
      this.bpmnModeler = new BpmnModeler({
        // 基础画布
        container: canvas,
        // 控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        // 插件
        additionalModules: [
          propertiesPanelModule,
          propertiesProviderModule,  // 右侧属性栏
        ],
      })
      this.createNewDiagram()
    },
    createNewDiagram() {
      console.log('xml', xml)
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(xml, (err) => {
        if (err) {
          // console.error(err)
        } else {
          // 这里是成功之后的回调, 可以在这里做一系列事情
          this.success()
        }
      })
    },
    success() {
      // console.log('创建成功!')
    }
  }
}
</script>

<style scoped>
.containers{
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas{
  width: 100%;
  height: 100%;
}
.panel{
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>

复制代码

附件：defalutXml.js

export default
 `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
  xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
  id="sample-diagram"
  targetNamespace="http://activiti.org/bpmn">
  <bpmn2:process id="default-process-id" name="default" isExecutable="true">
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="DefaultProcessId">
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>`


复制代码

完成后效果图，bpmn-js引用成功：