vue3+ts加载camunda定义文件实现预览效果

引言

在业务开发中，需要将BPMN加载到页面实现预览效果。此文记录。
请先阅读vue3+ts集成bpmn-js

代码

<template>
     <BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="50%">
        <div class="bpmn-viewer-container">
            <div id="bpmnCanvas" style="width:100%;height:400px;margin: 0 auto;"></div>
        </div>  
     </BasicModal>
</template>

<script setup lang="ts">
  import { watch, ref, onMounted, toRef,reactive, toRaw, onUnmounted} from 'vue';
  import {BasicModal, useModalInner} from '/@/components/Modal';
  import { getBpmXml} from '../Test.api';
  import BpmnViewer from 'bpmn-js'
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'

  const emit = defineEmits(['register','success']);
  //设置标题
  const title = ref("流程预览")
  //模型key
  const modelKey = ref("")
  //bpmn对象
  let bpmnViewer = null


  //表单赋值
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        modelKey.value = data.record.modelKey;
        console.log(modelKey.value);
         initPage()
  });

  //关闭页面清空缓存
  onUnmounted(()=>{
     bpmnViewer && bpmnViewer.destroy()
  })

  const initPage = ()=>{
    bpmnViewer && bpmnViewer.destroy()
    bpmnViewer = new BpmnViewer({
        container: '#bpmnCanvas',
        width: '100%',
        additionalModules: [
            MoveCanvasModule 
        ]
    })
    let len = document.getElementsByTagName('svg').length
    document.getElementsByTagName('svg')[len-2].setAttribute('display', 'none')

    loadData(modelKey.value);
  }

  const loadData = (id:string )=>{
      var params = {"id": id}
      getBpmXml(params).then(res=>{
          if (bpmnViewer) {
            importXml(res)
        }
      })
  }

  const importXml = (xml:string) =>{
     bpmnViewer.importXML(xml, (err) => {
        if (err) {
            console.error(err, 1111)
        } else {
              // 使流程图自适应屏幕
            let canvas = bpmnViewer.get('canvas')
            canvas.zoom('fit-viewport', 'auto')
        }
    })
  }


</script>

<style>


</style>