vue整合bpmn.js适配Activiti

最近项目需求需要用到Activiti以及Bpmn.js，我就去查阅资料学习了一下，现在项目已经到了收尾阶段，回头整理记录一下我整合bpmn.js的步骤及操作。

步骤一：创建项目

// 创建一个Vue项目
vue create bpmn-demo 
// 安装一下项目依赖
yarn
// 或者使用npm
npm install

项目创建完成以后我们要安装一下bpmn.js的依赖然后进行整合。

// yarn 安装
yarn add bpmn-js

// npm安装
npm install bpmn-js

接下来打开项目的main.js文件，导入一下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建模器

Bpmn-js的建模器是通过Canvas来实现的，我们在template中创建一个div供给Bpmn创建 建模器。

<template>
    <div id="app">
        <div class="container">
            <!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的，并设置ref让vue获取到element -->
            <div class="bpmn-canvas" ref="canvas"></div>
        </div>
    </div>
</template>

创建建模器我们要使用到BpmnModeler这个对象，主要通过创建这个对象创建建模器。

import BpmnModeler from "bpmn-js/lib/Modeler";

export default {
    data() {
        return {
            bpmnModeler: null,
            canvas: null,
            //流程图初始模板代码
            bpmnTemplate:…… 
        };
    },
    methods: {
        bpmninit() {
            // 获取画布 element
            this.canvas = this.$refs.canvas;
            // 创建Bpmn对象
            this.bpmnModeler = new BpmnModeler({
                // 设置bpmn的绘图容器为上门获取的画布 element
                container: this.canvas
            });

            // 初始化建模器内容
            this.initDiagram(this.bpmnTemplate);
        },
        initDiagram(bpmn) {
            // 将xml导入Bpmn-js建模器
            this.bpmnModeler.importXML(bpmn, err => {
                if (err) {
                    this.$Message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
                }
            });
        }
    },
    // 生命周期钩子，在组件加载完成后调用init函数进行创建初始化Bpmn-js建模器
    mounted() {
        this.bpmninit();
    }
};

完成以上步骤我们就能看到下面的页面了。

 这部分xml代码就是上面bpmnTemplate定义的流程图初始模板代码，可以按照自己需要的创建或者修改模板。可以在Bpmn-js建模器中来创建一个自己想要的模型，然后导出xml或者bpmn文件再把文件里面的代码复制出来使用就好。

以下模板就是符合Activiti使用的Xml模板了。

<?xml version="1.0" encoding="UTF-8"?>
<definitions 
  xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" 
  xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" 
  xmlns:camunda="http://camunda.org/schema/1.0/bpmn" 
  xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
  xmlns:activiti="http://activiti.org/bpmn" 
  id="m1577635100724" 
  name="" 
  targetNamespace="http://www.activiti.org/testm1577635100724"
>
  <process id="process" processType="None" isClosed="false" isExecutable="true">
    <extensionElements>
      <camunda:properties>
        <camunda:property name="a" value="1" />
      </camunda:properties>
    </extensionElements>
    <startEvent id="_2" name="start" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_leave">
    <bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="leave">
      <bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
        <omgdc:Bounds x="144" y="368" width="32" height="32" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="149" y="400" width="23" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>

步骤三：添加bpmn-js-properties-panel面板插件

// yarn 安装
yarn add bpmn-js-properties-panel
yarn add camunda-bpmn-moddle

// npm 安装
npm install bpmn-js-properties-panel
npm install camunda-bpmn-moddle

安装好后要在main.js中引入一下bpmn-js-properties-panel的样式要不然工具栏不会显示。

// 右边工具栏以及编辑节点的样式
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'

创建一个div用来给工具栏显示

<div class="bpmn-js-properties-panel" id="js-properties-panel"></div>

然后导入相关文件

// 工具栏相关
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import propertiesPanelModule from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

修改后的bpmninit函数

bpmninit () {
  // 获取画布 element
  this.canvas = this.$refs.canvas;

  // 创建Bpmn对象
  this.bpmnModeler = new BpmnModeler({
    // 设置bpmn的绘图容器为上门获取的画布 element
    container: this.canvas,

    // 加入工具栏支持
    propertiesPanel: {
      parent: "#js-properties-panel"
    },
    additionalModules: [propertiesProviderModule, propertiesPanelModule],
    moddleExtensions: {
      camunda: camundaModdleDescriptor
    }
  });

  this. initDiagram (this.bpmnTemplate);
}

整个效果

 适配activiti

Bpmn-js原本是不支持Activities那些自定义值的设置的，需要额外引入插件进行整合,当然网上还有很多适配方法，在这里我只说一下我觉得好用的。

//下载一个插件
npm i houtaroy-bpmn-js-properties-panel-activiti

这是网上一个大佬写的适配activiti插件，我也是拿来用一下。

//引入
import propertiesProviderModule from 'houtaroy-bpmn-js-properties-panel-activiti/lib/provider/activiti';

后面还有很多步骤，包括导入，导出，下载流程图片，以及自定义bpmn-js-properties-panel在这里就不写了，等我把代码整理好，会上传到git上面，有需要可以自行查阅。