vue3.0 bpmn-js + TS 简易教程

npm install --save bpmn-js

<template>
  <div class="designer-container">
    <div id="container" class="containerBox"></div> // 画布
    <div id="js-properties-panel" class="panel"></div> // 右边面板
  </div>
</template>

<script setup name="useProTableDetail">
import { markRaw, onMounted, ref } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
  // CamundaPlatformPropertiesProviderModule // 右边多余的属性
} from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
let containerEl = ref(null);
let bpmnModeler = ref(null);
onMounted(async () => {
  init();
});
/**
 * 初始化流程图
 */
let init = () => {
  containerEl.value = document.getElementById("container");
  // 加markRaw去除双向绑定作用域
  bpmnModeler.value = markRaw(
    new BpmnModeler({
      container: containerEl.value,
      //添加控制板
      propertiesPanel: {
        parent: "#js-properties-panel"
      },
      additionalModules: [
        // 右边的属性栏
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    })
  );
  bpmnModeler.value.createDiagram(() => { // 自适应大小
    bpmnModeler.value.get("canvas").zoom("fit-viewport");
  });
};
</script>

<style lang="scss">
@import "./styleCss.scss";
@import "bpmn-js/dist/assets/diagram-js.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
@import "bpmn-js-properties-panel/dist/assets/properties-panel.css"; // 右边工具栏样式
</style>

.processDrawBody {
  height: 100%;
  text-align: left;
}
.containerBox {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
}
.containerBox #container {
  height: 100%;
  border: 1px solid rgb(121, 121, 121);
}
.bpp-properties-panel [type="text"] {
  box-sizing: border-box;
}
.panel {
  width: 400px;
  position: absolute;
  top: 1px;
  right: 1px;
  height: 100%;
  overflow: auto;
}
/* 右下角logo */
.bjs-powered-by {
  display: none;
}
.designer-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}