vue3.0 bpmn-js + TS 簡単チュートリアル

序文

bpmn.js は BPMN2.0 レンダリング ツールキットおよび Web モデラーであり、フローチャートを描画する機能をフロントエンドで完了できるようにします。
ここでは主に bpmn の開発プロセスを記録します。LinDaiDai_林很很のドキュメント
を参照してください。大友

戦闘

• bpmnをインストールする

npm install --save bpmn-js

• HTML

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

• JS

<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>

• CSS

<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>

• styleCss.scss これは私が書いたスタイルファイルです

.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;
}

上記は vue3.0 bpmn-js + TS の簡単なチュートリアルです。読んでいただきありがとうございます。
他の問題が発生した場合は、プライベートで私と話し合って勉強することができます。
役に立った場合は、点赞ブックマークしてください。ありがとうございます~ ！
お気に入りのブロガーに注目して、更新を続けます...