vue3+bpmn.js基本使用实例详解
作者：VarYa
这篇文章主要介绍了vue3+bpmn.js基本使用的相关资料,通过实例讲解了如何使用BPMN.js库创建一个流程图编辑器,从创建容器、引入左侧工具栏和右侧属性栏到汉化、导出XML和SVG以及导入XML文件的功能实现,每个步骤都附有效果图,需要的朋友可以参考下
一、案例使用依赖
// 必填
"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 || {};
// Translate
template = translations[template] || template;
// Replace
return 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 = url
line.download = fileName
line.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 = url
line.download = fileName
line.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")
}
})
}
}
}
总结
到此这篇关于vue3+bpmn.js基本使用的文章就介绍到这了,更多相关vue3+bpmn.js使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！