vue項目中繪制bpmn流程圖

最近有個需求：在項目中繪制bpmn流程圖，使用的插件是：bpmn-js
實現(xiàn)的效果如下圖所示

image.png

安裝 bpmn-js

npm install bpmn-js

安裝節(jié)點屬性面板

npm install bpmn-js-properties-panel

新建vue單文件

下面是html部分，注意樓主使用了element-ui的按鈕組件髓削，沒有用element-ui的童鞋自行修改

<template>
  <div class="work-flow-container">
    <div class="work-flow-canvas" id="workFlowCanvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
    <div class="buttons">
      <input type="file" ref="fileInput" v-show="false" accept=".bpmn" @change="getFile">
      <el-button icon="el-icon-folder-opened" type="primary" plain @click="openDiagram">打開bpmn文件</el-button>
      <el-button icon="el-icon-download" type="primary" plain @click="saveDiagram">BPMN diagram</el-button>
      <el-button icon="el-icon-picture" type="primary" plain @click="saveSvg">SVG圖片</el-button>
    </div>
  </div>
</template>

在script中引入bpmn流程圖和節(jié)點屬性面板

// 引入流程圖
import Modeler from "bpmn-js/lib/Modeler";
// 引入節(jié)點屬性面板
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";

在mounted時創(chuàng)建bpmn實例，創(chuàng)建后新增流程定義奕筐，定義的方法寫在methods里

<script>
// 引入流程圖
import Modeler from "bpmn-js/lib/Modeler";
// 引入節(jié)點屬性面板
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";

export default {
  data() {
    return {
      modeler: null
    };
  },
  methods: {
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 新增流程定義
    createNewDiagram() {
      // 自定義的xml模板讯柔，可以自己修改
      const diagramXML = `
            <?xml version="1.0" encoding="UTF-8"?>
            <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="6.5.1">
            <process id="Process_1" name="流程" isExecutable="false">
                <startEvent id="StartEvent_1y45yut" name="開始">
                <outgoing>SequenceFlow_0h21x7r</outgoing>
                </startEvent>
                <task id="Task_1hcentk">
                <incoming>SequenceFlow_0h21x7r</incoming>
                </task>
                <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
            </process>
            <bpmndi:BPMNDiagram id="BpmnDiagram_1">
                <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
                <bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
                    <omgdi:waypoint x="188" y="120" />
                    <omgdi:waypoint x="240" y="120" />
                </bpmndi:BPMNEdge>
                <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
                    <omgdc:Bounds x="152" y="102" width="36" height="36" />
                    <bpmndi:BPMNLabel>
                    <omgdc:Bounds x="134" y="145" width="73" height="14" />
                    </bpmndi:BPMNLabel>
                </bpmndi:BPMNShape>
                <bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
                    <omgdc:Bounds x="240" y="80" width="100" height="80" />
                </bpmndi:BPMNShape>
                </bpmndi:BPMNPlane>
            </bpmndi:BPMNDiagram>
            </definitions>
        `;
      // 在實例中導(dǎo)入xml
      this.modeler.importXML(diagramXML, function(err) {
        if (err) {
          console.error(err);
        }
      });
    }
//
//
//
//
  },
  mounted() {
    // 生成實例
    this.modeler = new Modeler({
      container: "#workFlowCanvas",
      propertiesPanel: {
        parent: "#js-properties-panel"
      },
      additionalModules: [propertiesPanelModule, propertiesProviderModule]
    });
    // 新增流程定義
    this.createNewDiagram();
  }
};
</script>

在style中引入bpmn的樣式文件

<style>
/*左邊工具欄以及編輯節(jié)點的樣式*/
@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";
@import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
.work-flow-container {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.work-flow-canvas {
  width: 100%;
  height: 100%;
}
.bjs-powered-by {
  display: none;
}
.buttons {
  position: fixed;
  bottom: 20px;
  left: 20px;

  padding: 0;
  margin: 0;
  list-style: none;
}

.buttons > li {
  display: inline-block;
  margin-right: 10px;
}
.buttons > li > a {
  background: #ddd;
  border: solid 1px #666;
  display: inline-block;
  padding: 5px;
}

.buttons a {
  opacity: 0.3;
}

.buttons a.active {
  opacity: 1;
}
.properties-panel-parent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 260px;
  z-index: 10;
  border-left: 1px solid #ccc;
  overflow: auto;
}

.properties-panel-parent:empty {
  display: none;
}
.properties-panel-parent > .djs-properties-panel {
  padding-bottom: 70px;
  min-height: 100%;
}
</style>

樓主在項目中也加上了導(dǎo)入本地bpmn文件功能藕畔，下面方法寫在methods中

    // 打開本地文件蝎困，調(diào)用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實例中導(dǎo)入該本地文件
          _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);
      // 創(chuàng)建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);
      });
    }