vue3+ts集成camunda流程在线设计

引言

在业务后台中，需要我们提供流程在线设计。来完成流程的定义和入库操作。这篇文章以常用的camunda工作流为例。总结一下vue集成camunda在线设计器的方案。 如果你是学习使用。 直接使用
BpmnModeler在线设计网站
JeecgFLow

环境说明

 "vue": "^3.2.45",
 "vite": "^4.1.0",
 "vue-tsc": "^1.0.24"

项目采用最新vue3+ts+vite进行构建

• 安装后的效果, 在package.json文件中看到如下依赖即可

Main.ts配置

• 在main.ts文件中全局，引入所需的css文件

MyCamunda.vue

定义一个camunda文件。用于完成代码的整合

<template>
    <div>
        <div class="containers" style="display: flex;width:100%;height: 96vh">
            <div class="canvas" style="width: 100%" id="canvas"></div>
            <div id="properties">
            </div>
        </div>
        <div style="display:flex;justify-content: flex-end;">
            <el-button @click="downloadXML" type="primary" :icon="Download" style="width:104px">下载</el-button>
        </div>
    </div>
</template>

<script setup lang="ts"> 
import {onMounted} from 'vue';

import BpmnModeler from 'bpmn-js/lib/Modeler';
import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel';

import camundaModdleDescriptors from 'camunda-bpmn-moddle/resources/camunda';

let bpmnModeler;
onMounted(() => {
    // 建模
    bpmnModeler = new BpmnModeler({
        container: '#canvas', propertiesPanel: {
            parent: '#properties'
        },
        additionalModules: [
            BpmnPropertiesPanelModule,
            BpmnPropertiesProviderModule,
            CamundaPlatformPropertiesProviderModule
            // CamundaExtensionModule
        ],
        moddleExtensions: {
            camunda: camundaModdleDescriptors
        }
    })
    bpmnModeler.createDiagram();
})

const downloadXML = () =>{
    bpmnModeler.saveXML({format: true}, (err, xml) => {
        if (!err) {
            console.log(xml);
            // 获取文件名
            const name = getFileName(xml);
            // 把输就转换为URI，下载要用到的
            const encodedData = encodeURIComponent(xml);
            const downloadLink = document.createElement('a');
            if (xml) {
                // 将数据给到链接
                downloadLink.href =
                    "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
                // 设置文件名
                downloadLink.download = name;
                // 触发点击事件开始下载
                downloadLink.click();
            }
        }
    })
}
const getFileName = (xml) =>{
    let split = xml.split('process id="');
    return split[1].split('" ')[0]+".bpmn20.xml";
}

</script>


<style scoped>

</style>

异常分析

在加载bpmn文件之后会出现如下异常情况。

Error: Passing callbacks to importXML is deprecated and will be removed in a future major release. Please switch to promises: https://bpmn.io/l/moving-to-promises.html
    at Viewer.importXML (chunk-CNF6DI4Q.js?v=30ff7c0e:824:20)
    at importXml (ModelView.vue:62:17)
    at ModelView.vue:56:13

官方提供的解决方案

//修改前
  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')
        }
       })
  }

//修改后的写法
 const importXml = async (xml:string) =>{
      try {
        const result = await bpmnViewer.importXML(xml);
        const { warnings } = result;
        console.log(warnings);
        //使流程图自适应屏幕
        let canvas = bpmnViewer.get('canvas')
        canvas.zoom('fit-viewport', 'auto')
      } catch (err) {
        console.log(err.message, err.warnings);
      }
  }
  
//主要将方法改成了Promis格式， 问题解决了!!!!  

演示效果

演示地址