bpmn.js 基础引用（Vue）

bpmn.js 基础引用

新建vue-cli项目

1. 准备cli环境： npm install -g @vue/cli
2. 创建项目： vue create 项目名
3. 引入bpmn.js：npm install bpmn-js

创建bpmn

1. 创建一个div供给bpmn创建建模器（ref=“canvas”）

    <div class="sketch">
        <div class="sketch-canvas" ref="canvas"></div>
    </div>

2. 创建建模器

	<script>
	// 引入bpmn.js
	import BpmnModeler from "bpmn-js/lib/Modeler";
	// 引入bpmn样式
	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'
	export default {
	    name: 'bpmnTest',
	    data() {
	        return {
	            // 创建的bpmn对象
	            bpmnModeler: null,
	            // 画布 element
	            canvas: null,
	        }
 	   	},
 	   
	    mounted() {
	        this.init();
 	   	},
	
  	  	methods: {
    		/**
        	 * 初始化
        	 * @returns {undefined}
        	 */
        	init() {
        	    // 获取画布
        	    this.canvas = this.$refs.canvas;
        	    // 创建Bpmn对象
        	    this.bpmnModeler = new BpmnModeler({
        	        container: this.canvas
        	    });
        	    // 初始化建模器内容
        	    this.bpmnModeler.createDiagram();
        	}
   		 }
	}
	</script>
	
	<style lang="scss" scoped>
	.sketch {
 	   height: 100%;
 	   width: 100%;
	
  	  .sketch-canvas {
    	    height: 100%;
       	    width: 100%;
    	}
	}
	</style>

3. 使用xml模板

		/**
         * 导入xml
         * @param { string } xml 流程图xml字符串
         * @returns {undefined}
         */
        async createNewDiagram(xml) {
            try {
                await this.bpmnModeler.importXML(xml)
            } catch (err) {
                console.log(err);
            }
        },

导入的xml

let xmlStr = `<?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="9.3.2">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1y45yut" name="start">
      <outgoing>SequenceFlow_0h21x7r</outgoing>
    </startEvent>
    <task id="Task_1hcentk" name="">
      <incoming>SequenceFlow_0h21x7r</incoming>
      <outgoing>SequenceFlow_0wnb4ke</outgoing>
    </task>
    <sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
    <EndEvent id="ExclusiveGateway_15hu1pt" name="finish">
      <incoming>SequenceFlow_0wnb4ke</incoming>
    </EndEvent>
    <sequenceFlow id="SequenceFlow_0wnb4ke" sourceRef="Task_1hcentk" targetRef="ExclusiveGateway_15hu1pt" />
  </process>
  <bpmndi:BPMNDiagram id="BpmnDiagram_1">
    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNEdge id="SequenceFlow_0wnb4ke_di" bpmnElement="SequenceFlow_0wnb4ke">
        <omgdi:waypoint x="340" y="120" />
        <omgdi:waypoint x="395" y="120" />
      </bpmndi:BPMNEdge>
      <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:BPMNShape id="ExclusiveGateway_15hu1pt_di" bpmnElement="ExclusiveGateway_15hu1pt" isMarkerVisible="true">
        <omgdc:Bounds x="395" y="100" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="388" y="152" width="65" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>
`
export default xmlStr

导入效果

注： 可能出现高度不满100%情况，详细解决办法请跳转：
Vue vue-cli新建项目 页面高度设置height:100%无效问题