vue3+bpmn.js基本使用

一、案例使用依赖

   	// 必填"bpmn-js": "^7.3.1", "bpmn-js-properties-panel": "^0.37.2","bpmn-moddle":"^7.1.3","camunda-bpmn-moddle": "^7.0.1",// 可选"@element-plus/icons-vue": "2.0.10","element-plus": "2.2.27","vue": "3.2.45",

二、创建容器

1 、创建xmlStr.js文件

export var xmlStr = `
<?xml version="1.0" encoding="UTF-8"?><bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"id="sample-diagram"targetNamespace="http://bpmn.io/schema/bpmn"xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"><bpmn2:process id="Process_1" isExecutable="false"><bpmn2:startEvent id="StartEvent_1" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"><bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"><dc:Bounds x="192" y="82" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram>
</bpmn2:definitions>`

2 、 创建index.vue文件，建立流程图容器并引入strXml.js 文件

<template><div class="container"><div class="canvas" ref="canvas"></div></div>
</template>
<script>
// 引入相关依赖
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "./utils/xmlStr.js"; // 直接引用 xml格式 内容为一个圆形节点
export default {data() {return {bpmnModeler: null,container: null,canvas: null,};},created() {},mounted() {this.init();},methods: {init() {// 获取canvas的dom节点const canvas = this.$refs.canvas;// 建模this.bpmnModeler = new BpmnModeler({container: canvas,});//将xmlStr中的内容显示在容器中this.bpmnModeler.importXML(xmlStr, (err) => {if (err) {console.error(err);} else {// 这里是成功之后的回调, 可以在这里做一系列事情console.log("success");}});},},
};
</script>
<style scoped>
.container {width: 100%;height: 1000px;position: relative;
}
.canvas {width: 100%;height: 100%;background: white;
}</style>

3 、效果图

三、引入左侧工具栏

1、在main.js中引入以下样式文件

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"
// 注意 ：引入文件后并不需要修改vue文件中的代码，工具栏就可以显示出来了。

2、效果图

四、引入右侧属性栏

1、在main.js中引入以下样式文件

 import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' 

2、在vue文件中添加代码

① 添加html结构和样式

// 添加在container节点下
<div id="js-properties-panel" class="panel"></div>
//样式
.panel {position: absolute;top: 0;right: 0;width: 300px;
}

② 导入所需依赖

import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

③ 在 bpmnModeler对象中添加内容

this.bpmnModeler = new BpmnModeler({propertiesPanel: {parent: "#js-properties-panel", // 对应div添加的id},additionalModules: [// 右边的属性栏propertiesProviderModule,propertiesPanelModule,],moddleExtensions: {camunda: camundaModdleDescriptor,},});

3 、效果图

五、汉化

1、创建translations.js文件

/***参考 https://github.com/bpmn-io/bpmn-js-i18n*/const translations = {"Name":"名称","Value":"值","ID":"唯一标识(ID)","General":"基础属性","Activate the create/remove space tool": "启动创建/删除空间工具","Activate the global connect tool": "启动全局连接工具","Activate the hand tool": "启动手动工具","Activate the lasso tool": "启动套索工具","Ad-hoc": "Ad-hoc子流程","Add Lane above": "添加到通道之上","Add Lane below": "添加到通道之下","Append ConditionIntermediateCatchEvent": "添加中间条件捕获事件","Append element": "添加元素","Append EndEvent": "添加结束事件","Append Gateway": "添加网关","Append Intermediate/Boundary Event": "添加中间/边界事件","Append MessageIntermediateCatchEvent": "添加消息中间捕获事件","Append ReceiveTask": "添加接收任务","Append SignalIntermediateCatchEvent": "添加信号中间捕获事件","Append Task": "添加任务","Append TimerIntermediateCatchEvent": "添加定时器中间捕获事件","Append compensation activity": "追加补偿活动","Append {type}": "追加 {type}","Boundary Event": "边界事件","Business Rule Task": "规则任务","Call Activity": "引用流程","Cancel Boundary Event": "取消边界事件","Cancel End Event": "取消结束事件","Change type": "更改类型","Collapsed Pool": "折叠池","Collection": "集合","Compensation Boundary Event": "补偿边界事件","Compensation End Event": "结束补偿事件","Compensation Intermediate Throw Event": "中间补偿抛出事件","Compensation Start Event": "补偿启动事件","Complex Gateway": "复杂网关","Conditional Boundary Event": "条件边界事件","Conditional Boundary Event (non-interrupting)": "条件边界事件 (非中断)","Conditional Flow": "条件流","Conditional Intermediate Catch Event": "中间条件捕获事件","Conditional Start Event": "条件启动事件","Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)","Connect using Association": "文本关联","Connect using DataInputAssociation": "数据关联","Connect using Sequence/MessageFlow or Association": "消息关联","Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出/边界事件","Create DataObjectReference": "创建数据对象引用","Create DataStoreReference": "创建数据存储引用","Create element": "创建元素","Create EndEvent": "创建结束事件","Create Gateway": "创建网关","Create Group": "创建组","Create Intermediate/Boundary Event": "创建中间/边界事件","Create Pool/Participant": "创建池/参与者","Create StartEvent": "创建开始事件","Create Task": "创建任务","Create expanded SubProcess": "创建可折叠子流程","Create {type}": "创建 {type}","Data": "数据","Data Object Reference": "数据对象引用","Data Store Reference": "数据存储引用","Default Flow": "默认流","Divide into three Lanes": "分成三条通道","Divide into two Lanes": "分成两条通道","Empty Pool": "空泳道","Empty Pool (removes content)": "清空泳道（删除内容）","End Event": "结束事件","Error Boundary Event": "错误边界事件","Error End Event": "结束错误事件","Error Start Event": "错误启动事件","Escalation Boundary Event": "升级边界事件","Escalation Boundary Event (non-interrupting)": "升级边界事件 (非中断)","Escalation End Event": "结束升级事件","Escalation Intermediate Throw Event": "中间升级抛出事件","Escalation Start Event": "升级启动事件","Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)","Events": "事件","Event Sub Process": "事件子流程","Event based Gateway": "事件网关","Exclusive Gateway": "独占网关","Expanded Pool": "展开泳道","Gateways": "网关","Inclusive Gateway": "包容网关","Intermediate Throw Event": "中间抛出事件","Link Intermediate Catch Event": "中间链接捕获事件","Link Intermediate Throw Event": "中间链接抛出事件","Loop": "循环","Manual Task": "手动任务","Message Boundary Event": "消息边界事件","Message Boundary Event (non-interrupting)": "消息边界事件 (非中断)","Message End Event": "结束消息事件","Message Intermediate Catch Event": "中间消息捕获事件","Message Intermediate Throw Event": "中间消息抛出事件","Message Start Event": "消息启动事件","Message Start Event (non-interrupting)": "消息启动事件 (非中断)","Parallel Gateway": "并行网关","Parallel Multi Instance": "并行多实例","Participants": "参与者","Participant Multiplicity": "参与者多重性","Receive Task": "接受任务","Remove": "移除","Script Task": "脚本任务","Send Task": "发送任务","Sequence Flow": "顺序流","Sequential Multi Instance": "串行多实例","Service Task": "服务任务","Signal Boundary Event": "信号边界事件","Signal Boundary Event (non-interrupting)": "信号边界事件 (非中断)","Signal End Event": "结束信号事件","Signal Intermediate Catch Event": "中间信号捕获事件","Signal Intermediate Throw Event": "中间信号抛出事件","Signal Start Event": "信号启动事件","Signal Start Event (non-interrupting)": "信号启动事件 (非中断)","Start Event": "开始事件","Sub Process": "子流程","Sub Processes": "子流程","Sub Process (collapsed)": "可折叠子流程","Sub Process (expanded)": "可展开子流程","Task": "任务","Tasks": "任务","Terminate End Event": "终止边界事件","Timer Boundary Event": "定时边界事件","Timer Boundary Event (non-interrupting)": "定时边界事件 (非中断)","Timer Intermediate Catch Event": "中间定时捕获事件","Timer Start Event": "定时启动事件","Timer Start Event (non-interrupting)": "定时启动事件 (非中断)","Transaction": "事务","User Task": "用户任务","already rendered {element}": "{element} 已呈现","diagram not part of bpmn:Definitions": "图表不是 bpmn:Definitions 的一部分","element required": "需要元素","correcting missing bpmnElement on {plane} to {rootElement}": "在 {plane} 上更正缺失的 bpmnElement 为 {rootElement}","element {element} referenced by {referenced}#{property} not yet drawn": "元素 {element} 的引用 {referenced}#{property} 尚未绘制","failed to import {element}": "{element} 导入失败","flow elements must be children of pools/participants": "元素必须是池/参与者的子级","more than {count} child lanes": "超过 {count} 条通道","missing {semantic}#attachedToRef": "在 {element} 中缺少 {semantic}#attachedToRef","multiple DI elements defined for {element}": "为 {element} 定义了多个 DI 元素","no bpmnElement referenced in {element}": "{element} 中没有引用 bpmnElement","no diagram to display": "没有要显示的图表","no shape type specified": "未指定形状类型","no parent for {element} in {parent}": "在 {element} 中没有父元素 {parent}","no process or collaboration to display": "没有可显示的流程或协作","out of bounds release": "越界释放","Version tag":"版本标记","Change element":"改变元素","Documentation":"文档","PROCESS":"流程","Element documentation":"元素文档说明","User assignment":"分配用户","History cleanup":"历史记录清理","Time to live":"历史记录生存时间","Tasklist":"任务列表","Candidate starter":"候选启动器","Candidate starter groups":"候选启动组","Specify more than one group as a comma separated list.":"多个组用','分隔.","Candidate starter users":"候选发起人","Specify more than one user as a comma separated list.":"多个用户用','分隔.","External task":"外部任务","Startable":"可启动(Startable)","Executable":"可直接执行","Job execution":"作业执行","Priority":"优先级","Forms":"表单","Execution listeners":"执行侦听器","Extension properties":"扩展属性","Event type":"事件类型","Listener type":"侦听器类型","Field injection":"字段注入","Start initiator":"开始发起人","Initiator":"发起人","Asynchronous continuations":"异步延续","Before":"之前","After":"之后","Inputs":"输入","Outputs":"输出","Local variable name":"局部变量名称","Assignment type":"分配类型","Format":"格式","Type":"类型","Expression":"表达式(Expression)","Script":"脚本(Script)","Delegate expression":"委托表达式(Delegate expression)","Java class":"Java类(Java class)","start":"开始(start)","end":"结束(end)","Start typing \"${}\" to create an expression.":"开始键入\"${}\"以创建表达式.","Process variable name":"过程变量名称","List values":"列表值","Map entries":"映射条目","Key":"键","Values":"值","Form reference":"引用表单ID","Binding":"结合","Version":"版本","Form fields":"表单字段","Form key":"表单ID","Embedded or External Task Forms":"拓展表单","Camunda Forms":"标准表单","Generated Task Forms":"内置表单","Refers to the process variable name":"指的是(引用)过程变量名称","Label":"标签","Default value":"默认值","Constraints":"限制","Properties":"属性","Config":"配置","Implementation":"实施","Field injections":"字段注入","Task listeners":"任务侦听器","Listener ID":"侦听器ID","Message":"消息","Global message reference":"引用全局消息ID","Result variable":"结果变量","Resource":"资源","External resource":"外部资源","Inline script":"内联脚本","Process variables":"过程变量","Global signal reference":"引用全局信号ID","Signal":"信号","Called element":"被调用元素","In mapping propagation":"在映射传播中","Propagate all variables":"传播所有变量","Out mapping propagation":"向外映射传播","In mappings":"在映射中","Source":"来源","Target":"目标","Local":"局部的(Local)","Out mappings":"输出映射","Link":"链接","Timer":"定时器","Retry time cycle":"重试时间周期","Variable name":"变量名称","Condition Expression":"条件表达式","Condition":"条件","Process documentation":"流程文档","Assignee":"委托人","Candidate groups":"候选组","Candidate users":"候选用户","Due date":"期限","The due date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"到期日期为EL表达式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)","Follow up date":"跟进日期","The follow up date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"作为EL表达式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)的跟进日期","Connector ID":"连接器ID","Connector inputs":"连接器输入","Connector outputs":"连接器输出","Topic":"主题","Errors":"错误","Global error reference":"引用全局错误ID","Throw expression":"Throw表达式","Decision reference":"引用决策ID","Tenant ID":"租户ID","Multi-instance":"多实例","Loop cardinality":"循环基数","Completion condition":"完成条件","Element variable":"元素变量","Asynchronous before":"异步之前","Asynchronous after":"异步之后",};export const customTranslate = (template, replacements) =>{replacements = replacements || {};// Translatetemplate = translations[template] || template;// Replacereturn template.replace(/{([^}]+)}/g, (_, key)=> {return replacements[key] || '{' + key + '}';});}

2、将js文件引入vue文件中

// 汉化
import { customTranslate } from "./utils/translations.js";

3、在 bpmnModeler对象中additionalModules数组添加内容

this.bpmnModeler = new BpmnModeler({additionalModules: [// 汉化{translate: ["value", customTranslate],},]});

4、效果图

六、导出xml 功能实现

 <!-- 添加在container节点下 --> 
<div class="btm"><el-button type="primary" @click="exportXML()">导出XML</el-button></div><!-- 样式 --> 
.btm{position: absolute;left:100px;top:0;
}<!-- 在methods中添加方法--> 
methods:{
exportXML(){this.bpmnModeler.saveXML(({format:true}),(err,xml)=>{this.exportFile(xml,"bpmn.xml")})},exportFile(data,fileName){var url = window.URL.createObjectURL(new Blob([data]))var line = document.createElement("a")line.href = urlline.download = fileNameline.click()}
}

七、导出svg 功能实现

 <!-- 添加在container节点下 --> 
<div class="btm"><el-button type="primary" @click="exportSVG()">导出SVG</el-button></div><!-- 样式 --> 
.btm{position: absolute;left:100px;top:0;
}<!-- 在methods中添加方法--> 
methods:{
exportSVG(){this.bpmnModeler.saveSVG(({format:true}),(err,xml)=>{this.exportFile(xml,"bpmn.svg")})},exportFile(data,fileName){var url = window.URL.createObjectURL(new Blob([data]))var line = document.createElement("a")line.href = urlline.download = fileNameline.click()}
}

八、导入xml文件功能实现

 <!-- 添加在container节点下 --> 
<div class="btm"><el-button type="primary" @click="importXML()">导入XML</el-button></div><!-- 样式 --> 
.btm{position: absolute;left:100px;top:0;
}<!-- 在methods中添加方法--> 
methods:{importXML(){var file=document.getElementById("file")file.click()},getFiles(files){var file = files.target.files[0]// 创建文件对象var fileReader = new FileReader()fileReader.readAsText(file,"UTF-8")fileReader.onload=(row)=>{// 将xml文件中的内容赋值给容器this.bpmnModeler.importXML(row.target.result,(err)=>{if(err){}else{console.log("success")}})}}  
}