vue项目中绘制bpmn流程图

最近有个需求：在项目中绘制bpmn流程图，使用的插件是：bpmn-js
实现的效果如下图所示

image.png

安装 bpmn-js

npm install bpmn-js

安装节点属性面板

npm install bpmn-js-properties-panel

新建vue单文件

下面是html部分，注意楼主使用了element-ui的按钮组件，没有用element-ui的童鞋自行修改

在script中引入bpmn流程图和节点属性面板

// 引入流程图
import Modeler from "bpmn-js/lib/Modeler";
// 引入节点属性面板
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";

在mounted时创建bpmn实例，创建后新增流程定义，定义的方法写在methods里

在style中引入bpmn的样式文件

楼主在项目中也加上了导入本地bpmn文件功能，下面方法写在methods中

    // 打开本地文件，调用input的click事件
    openDiagram() {
      this.$refs.fileInput.click();
    },
    // 打开本地文件
    getFile(e) {
      this.fileList = e.target.files || [];
      if (this.fileList.length === 0) {
        return false;
      } else {
        let file = this.fileList[0];
        // FileReader对象读取选择的本地文件
        let reader = new FileReader();
        let _this = this;
        reader.onload = function(e) {
          let xml = e.target.result;
          // 在bpmn实例中导入该本地文件
          _this.modeler.importXML(xml, function(err) {
            if(err) {
              console.error(err);
            }
          })
        }
        reader.readAsText(file);
      }
    },

同时楼主在项目中也加上了下载bpmn文件和svg图片的功能，下面方法写在methods中

    // 下载
    setEncoded(name, data) {
      // 将xml或svg作为 URI 组件进行编码
      let encodedData = encodeURIComponent(data);
      // 创建a链接进行下载
      if (data) {
        let a = document.createElement("a");
        a.download = name;
        a.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
        a.click();
      }
    },
    // 下载bpmn
    saveDiagram() {
      const _this = this;
      this.modeler.saveXML({ format: true }, function(err, xml) {
        _this.setEncoded("diagram.bpmn", err ? null : xml);
      });
    },
    // 下载svg
    saveSvg() {
      const _this = this;
      this.modeler.saveSVG(function(err, svg) {
        _this.setEncoded("diagram.svg", err ? null : svg);
      });
    }