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创建 建模器。

创建建模器我们要使用到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模板了。

步骤三：添加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用来给工具栏显示

然后导入相关文件

// 工具栏相关
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上面，有需要可以自行查阅。