vue引用bpmn.js封装使用

封装bpmn.js，页面直接传参调用即可实现流程图渲染，避免每个页面都需初始化一遍bpmn的引入。
前提需安装bpmn.js相关的插件

npm install --save bpmn-js
npm install --save bpmn-js-properties-panel

新建utils目录，创建bpmn.js

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

import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";


function initBpmn(...rest) { // 通过rest参数获取入参
    // 左边工具栏以及编辑节点的样式
    if (rest[0].isShowTool) {
      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");
    }
    // 右边属性栏样式
    if (rest[0].isShowPanel) {
        import("bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css");
    }
    // 建模
    var bpmnModeler = new BpmnModeler({
      container: rest[0].canvas, // this.$refs.canvas
      //添加控制板
      propertiesPanel: {
        parent: rest[0].isShowPanel ? rest[0].panel : '',  // #js-properties-panel"
      },
      additionalModules: rest[0].isShowPanel ? [
        // 左边工具栏以及节点
        propertiesProviderModule,
        // 右边的工具栏
        propertiesPanelModule,
      ] : '',
    });
    bpmnModeler.importXML(rest[0].bpmnXml, (err) => {
        if (err) {
          console.error('faild:');
        } else {
          console.log('success')
        }
        // 让图能自适应屏幕
        // 让图能自适应屏幕
        if (rest[0].bpmnRef) {
            bpmnModeler.get(rest[0].bpmnRef).zoom("fit-viewport");
        }
      });
  }

  export {initBpmn}

bpmn.vue页面引用

<template>
  <div class="containers">
    <div class="canvas" id="canvas"></div>
    <!-- <div class="canvas" ref="canvas"></div> -->
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
import { xmlStr } from "../mock/xmlStr";
import { initBpmn } from "../utils/bpmn";

export default {
  name: "",
  components: {},
  created() {},
  mounted() {
    this.init();
  },
  data() {
    return {
      xmlUrl: "",
    };
  },
  // 方法集合
  methods: {
    async init() {
      this.$nextTick(() => {
        let obj = {
          canvas: document.getElementById("canvas"), // container容器（id写法）
          //   canvas: this.$refs.canvas, // container容器（ref写法）
          bpmnXml: xmlStr, // bpmn文件字符串
          panel: "#js-properties-panel", // 右侧属性框id
          bpmnRef: "canvas", // ref或id值，让图能自适应屏幕（默认不居中）
          isShowTool: true, // 是否显示左侧工具栏（默认不显示）
          isShowPanel: true, // 是否显示右侧属性栏（默认不显示）
        };
        initBpmn(obj);
      });
    },
  },
  // 计算属性
  computed: {},
};
</script>

<style scoped>
/* bpmn容器大小 */
.containers {
  background-color: #ffffff;
  width: 100%;
  height: calc(100vh - 52px);
}
.canvas {
  width: 100%;
  height: 100%;
}
/* 右侧属性框位置 */
.panel {
  position: absolute;
  right: 0;
  top: 50px;
  width: 300px;
}
</style>

效果图如下

image.png