vue3弹框使用【bpmn.js 使用总结】预览流程图

<template>
  <div class="addPop">
    <el-dialog :modelValue="modelValue" title="流程查看" top="15vh" width="50%" :close-on-click-modal="false"
      :before-close="close">
      <div class="formContent process-viewer">
        <div class="canvas" ref="waitCanvas"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" >
import { defineComponent, ref, reactive, onMounted, watch, watchEffect } from "vue";
import { client } from "bettem-micro-utils";
import { apiFund, uploadFiles, apiPro } from "@/api";
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 bpmnViewer from "bpmn-js/lib/Viewer"
import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
import { useRoute } from "vue-router";

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    let bpmnModelerA = ref<any>(null)
    const bpmnXML = ref(``)
    const waitCanvas = ref(null)
    let nodeInfo: any = ref({})
    const route = useRoute() // 参数


    // 获取流程图XML
    const getXMLData = async () => {
      let params = {
        processDefinitionId: route.query.processDefinitionId
      }
      let res = await client.get(api..., params)
      console.log('流程图XML-----------------', res)
      if (res.code == 1) {
        bpmnXML.value = res.data
        initBPMN()
        getNodeHightLight()
      }
    }

    // 初始化bpmn流程图
    const initBPMN = () => {
      bpmnModelerA = new bpmnViewer({
        additionalModules: [  //添加查看时的移动功能
          MoveCanvasModule, // 移动整个画布
          ZoomScrollModule // 
        ],
        container: waitCanvas.value
      })
      createNewDiagram()
    }

    const createNewDiagram = async () => {
      try {
        const result = await bpmnModelerA.importXML(bpmnXML.value)
        const { warnings } = result
        // 调整在正中间
        bpmnModelerA.get('canvas').zoom('fit-viewport', 'auto')
      } catch (err: any) {
        console.log(err.message, err.warnings)
      }
    }

    // 获取流程图节点高亮
    const getNodeHightLight = async () => {
      let params = {
        processInstanceId: route.query.processInstanceId
      }
      let res = await client.get(api..., params)
      if (res.code == 1) {
        nodeInfo.value = res.data
        setProcessStatus()
      }
    }

    const setProcessStatus = () => {
      let { finishedSequenceFlowSet, finishedTaskSet, unfinishedTaskSet } = nodeInfo.value
      const canvas = bpmnModelerA.get('canvas')
      const elementRegistry = bpmnModelerA.get('elementRegistry')
      if (Array.isArray(finishedSequenceFlowSet)) {
        finishedSequenceFlowSet.forEach((item: any) => {
          console.log(item)
          if (item != null) {
            canvas.addMarker(item, 'success')
            let element = elementRegistry.get(item);
            const conditionExpression = element.businessObject.conditionExpression;
            if (conditionExpression) {
              canvas.addMarker(item, 'condition-expression');
            }
          }
        })
      }
      if (Array.isArray(finishedTaskSet)) {
        finishedTaskSet.forEach((item: any) => {
          if (item != null) canvas.addMarker(item, 'success');
        });
      }
      if (Array.isArray(unfinishedTaskSet)) {
        unfinishedTaskSet.forEach((item: any) => {
          if (item != null) canvas.addMarker(item, 'current');
        });
      }
    }

    const close = () => {
      emit("update:modelValue", false)
    }
    watch(() => props.modelValue, (newVal) => {
      if (newVal) {
        getXMLData()
      }
    })
    return {
      close, getXMLData, initBPMN, createNewDiagram, bpmnModelerA, nodeInfo, setProcessStatus, getNodeHightLight, waitCanvas
    }
  }

})
</script>

<style lang="scss" >
.addPop {
  .formContent {
    // padding: 0 20px;
    width: 100%;
    height: calc(100vh - 450px);
    position: relative;

    .canvas {
      // width: 100%;
      padding: 0 20px 0 0;
      height: 100%;
    }
  }

}

</style>