1、先下载依赖，下面是我下载的版本
"@bpmn-io/properties-panel": "^3.23.0",
"bpmn-js": "^17.9.1",
"bpmn-js-properties-panel": "^5.6.1",
"camunda-bpmn-moddle": "^7.0.1",2、创建一个文件夹，里面放两个文件
index.scss
// 最外层包裹
.designer-container {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
// 主要内容
#container {
width: 100%;
flex: 1;
overflow: hidden;
display: flex;
height: 100%;
}
/* 隐藏右下角logo */
.bjs-powered-by {
display: none;
}
// 按钮区域样式
.panel {
width: 400px;
position: absolute;
top: 1px;
right: 1px;
height: 100%;
overflow: auto;
.el-button {
margin: 0 10px 10px 0 !important;
}
}index.vue
<template>
<div class="designer-container">
<div id="container"></div>
<div id="js-properties-panel" class="panel">
<div class="custom-properties-panel">
<div style="height: 400px">
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary" @click="downloadXml">点击下载xml</el-button>
<el-button type="success" @click="creteXml">导入文件</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'commFlowchart'
})
</script>
<script setup lang="ts">
import { markRaw, onMounted, ref } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler";
import translate from "@/utils/translate/translate";//引入汉化工具
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "bpmn-js-properties-panel/dist/assets/properties-panel.css"; // 右边工具栏样式
import EventBus from "diagram-js/lib/core/EventBus";
let customTranslateModule = {
translate: ["value", translate]
};
const bpmnModeler = ref<any>({});
onMounted(() => {
bpmnModeler.value = markRaw(
new BpmnModeler({
container: "#container",
// 添加控制板
propertiesPanel: {
parent: "#js-properties-panel"
},
additionalModules: [customTranslateModule]
})
);
bpmnModeler.value.createDiagram();
// 注册事件监听
registerEventBus();
});
const registerEventBus = () => {
// 获取bpmn.js的EventBus。通过打印eventBus可以查看支持的所有EventBus： console.log(eventBus);
const eventBus: EventBus = bpmnModeler.value.get("eventBus");
// 注册节点事件，eventTypes中可以写多个事件，需要哪些写那些
const eventTypes = ["element.click"];
eventTypes.forEach(eventType => {
eventBus.on(eventType, (e: { element: any }) => {
const { element } = e;
if (!element.parent) return;
if (!e || element.type === "bpmn:Process") {
return false;
} else {
if (eventType === "element.click") {
// TODO 节点点击后想要做的处理
console.log("点击的节点数据", element);
}
}
});
});
};
// 下载文件
const downloadFile = (fileName: string, data: any, type: string) => {
const a = document.createElement('a');
const url = window.URL.createObjectURL(new Blob([data], { type: type }));
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
// 下载流程图
const downloadXml = () => {
//下载xml
bpmnModeler.value.saveXML({ format: true }).then((res: any) => {
console.log("画出的xml数据为", res);
downloadFile(`测试.xml`, res.xml, 'application/xml');
});
// 下载SVG
// bpmnModeler.value.saveSVG({ format: true }).then((res: any) => {
// console.log("画出的svg数据为", res);
// downloadFile(`测试.svg`, res.svg, 'image/svg+xml');
// });
};
const creteXml = () => {
bpmnModeler.value.importXML(``);
};
</script>
<style lang="scss" scope>
@import "./index.scss";
</style>
3、页面引用
<template>
<div class="workflow-view">
<commFlowchart />
</div>
</template>
<script setup lang="ts">
import commFlowchart from "@/components/commFlowchart/index.vue";
</script>
<style lang="scss" scoped>
.workflow-view{
height: calc(100vh - 152px);
}
</style>
4、汉化（创建一个文件夹，里面放两个文件translate.ts和zh.ts）
translate.ts
import { zh } from "./zh";
export default function customTranslate(template: string, replacements: any) {
replacements = replacements || {};
template = zh[template] || template;
return template.replace(/{([^}]+)}/g, function (_, key) {
return replacements[key] || "{" + key + "}";
});
}
zh.ts
export const zh:any = {
"Activate global connect tool": "激活全局连接工具",
"Append {type}": "添加 {type}",
"Add lane above": "在上面添加道",
"Divide into two lanes": "分割成两个道",
"Divide into three lanes": "分割成三个道",
"Add lane below": "在下面添加道",
"Append compensation activity": "追加补偿活动",
"Change type": "修改类型",
"Connect using association": "使用关联连接",
"Connect using sequence/message flow or association": "使用顺序/消息流或者关联连接",
"Connect using data input association": "使用数据输入关联连接",
"Connect to other element": "连接到其他元素",
"Add text annotation": "添加文本注释",
"Delete": "删除",
"Collection": "收藏",
"Align elements": "对齐元素",
"Change element": "修改类型",
Remove: "移除",
"Activate hand tool": "激活抓手工具",
"Activate lasso tool": "激活套索工具",
"Activate create/remove space tool": "激活创建/删除空间工具",
"Create expanded sub-process": "创建扩展子过程",
"Create intermediate/boundary event": "创建中间抛出事件/边界事件",
"Create pool/participant": "创建池/参与者",
"Parallel multi-instance": "并行多重事件",
"Sequential multi-instance": "时序多重事件",
"Data object reference": "数据对象参考",
"Data store reference": "数据存储参考",
Loop: "循环",
"Ad-hoc": "即席",
"Create {type}": "创建 {type}",
Task: "任务",
"Send task": "发送任务",
"Receive task": "接收任务",
"User task": "用户任务",
"Manual task": "手工任务",
"Business rule task": "业务规则任务",
"Service task": "服务任务",
"Script task": "脚本任务",
"Call activity": "调用活动",
"Sub-process (collapsed)": "子流程（折叠的）",
"Sub-process (expanded)": "子流程（展开的）",
"Start event": "开始事件",
StartEvent: "开始事件",
"Intermediate throw event": "中间事件",
"End event": "结束事件",
endEvent: "结束事件",
"Create gateway": "创建网关",
"Message start event": "消息开始事件",
"Timer start event": "定时开始事件",
"Conditional start event": "条件开始事件",
"Signal start event": "信号开始事件",
"Error start event": "错误开始事件",
"Escalation start event": "升级开始事件",
"Compensation start event": "补偿开始事件",
"Message Start event (non-interrupting)": "消息开始事件（非中断）",
"Timer Start event (non-interrupting)": "定时开始事件（非中断）",
"Conditional start event (non-interrupting)": "条件开始事件（非中断）",
"Signal Start event (non-interrupting)": "信号开始事件（非中断）",
"Escalation start event (non-interrupting)": "升级开始事件（非中断）",
"Message intermediate catch event": "消息中间捕获事件",
"Message intermediate throw event": "消息中间抛出事件",
"Timer intermediate catch event": "定时中间捕获事件",
"Escalation untermediate throw event": "升级中间抛出事件",
"Conditional intermediate catch event": "条件中间捕获事件",
"Link intermediate catch event": "链接中间捕获事件",
"Link intermediate throw event": "链接中间抛出事件",
"Compensation intermediate throw event": "补偿中间抛出事件",
"Signal intermediate catch event": "信号中间捕获事件",
"Signal intermediate throw event": "信号中间抛出事件",
"Message end event": "消息结束事件",
"Escalation end event": "定时结束事件",
"Error end event": "错误结束事件",
"Cancel end event": "取消结束事件",
"Compensation end event": "补偿结束事件",
"Signal end event": "信号结束事件",
"Terminate end event": "终止结束事件",
"Message boundary event": "消息边界事件",
"Message boundary event (non-interrupting)": "消息边界事件（非中断）",
"Timer boundary event": "定时边界事件",
"Timer boundary event (non-interrupting)": "定时边界事件（非中断）",
"Escalation boundary event": "升级边界事件",
"Escalation boundary event (non-interrupting)": "升级边界事件（非中断）",
"Conditional boundary event": "条件边界事件",
"Conditional boundary event (non-interrupting)": "条件边界事件（非中断）",
"Error boundary event": "错误边界事件",
"Cancel boundary event": "取消边界事件",
"Signal boundary event": "信号边界事件",
"Signal boundary event (non-interrupting)": "信号边界事件（非中断）",
"Compensation boundary event": "补偿边界事件",
"Exclusive gateway": "互斥网关",
"Parallel gateway": "并行网关",
"Inclusive gateway": "相容网关",
"Complex gateway": "复杂网关",
"Event based gateway": "事件网关",
Transaction: "转运",
"Sub process": "子流程",
"Event Sub process": "事件子流程",
"Collapsed Pool": "折叠池",
"Expanded Pool": "展开池",
"no parent for {element} in {parent}": "在{parent}里，{element}没有父类",
"no shape type specified": "没有指定的形状类型",
"flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
"out of bounds release": "out of bounds release",
"more than {count} child lanes": "子道大于{count} ",
"element required": "元素不能为空",
"diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
"no diagram to display": "没有可展示的流程图",
"no process or collaboration to display": "没有可展示的流程/协作",
"element {element} referenced by {referenced}#{property} not yet drawn": "由{referenced}#{property}引用的{element}元素仍未绘制",
"already rendered {element}": "{element} 已被渲染",
"failed to import {element}": "导入{element}失败",
Id: "编号",
Name: "名称",
General: "常规",
Details: "详情",
"Message Name": "消息名称",
Message: "消息",
Initiator: "创建者",
"Asynchronous Continuations": "持续异步",
"Asynchronous Before": "异步前",
"Asynchronous After": "异步后",
"Job Configuration": "工作配置",
Exclusive: "排除",
"Job Priority": "工作优先级",
"Retry Time Cycle": "重试时间周期",
Documentation: "文档",
"Element Documentation": "元素文档",
"History Configuration": "历史配置",
"History Time To Live": "历史的生存时间",
Forms: "表单",
"Form Key": "表单key",
"Form Fields": "表单字段",
"Business Key": "业务key",
"Form Field": "表单字段",
ID: "编号",
Type: "类型",
Label: "名称",
"Default Value": "默认值",
Validation: "校验",
"Add Constraint": "添加约束",
Config: "配置",
Properties: "属性",
"Add Property": "添加属性",
Value: "值",
Listeners: "监听器",
"Execution Listener": "执行监听",
"Event Type": "事件类型",
"Listener Type": "监听器类型",
"Java Class": "Java类",
Expression: "表达式",
"Must provide a value": "必须提供一个值",
"Delegate Expression": "代理表达式",
Script: "脚本",
"Script Format": "脚本格式",
"Script Type": "脚本类型",
"Inline Script": "内联脚本",
"External Script": "外部脚本",
Resource: "资源",
"Field Injection": "字段注入",
Extensions: "扩展",
"Input/Output": "输入/输出",
"Input Parameters": "输入参数",
"Output Parameters": "输出参数",
Parameters: "参数",
"Output Parameter": "输出参数",
"Timer Definition Type": "定时器定义类型",
"Timer Definition": "定时器定义",
Date: "日期",
Duration: "持续",
Cycle: "循环",
Signal: "信号",
"Signal Name": "信号名称",
Escalation: "升级",
Error: "错误",
"Link Name": "链接名称",
Condition: "条件名称",
"Variable Name": "变量名称",
"Variable event": "变量事件",
"Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
"Wait for Completion": "等待完成",
"Activity Ref": "活动参考",
"Version Tag": "版本标签",
Executable: "可执行文件",
"External Task Configuration": "扩展任务配置",
"Task Priority": "任务优先级",
External: "外部",
Connector: "连接器",
"Must configure Connector": "必须配置连接器",
"Connector Id": "连接器编号",
Implementation: "实现方式",
"Field injections": "字段注入",
Fields: "字段",
"Result variable": "结果变量",
Topic: "主题",
"Configure connector": "配置连接器",
"Input parameter": "输入参数",
Assignee: "代理人",
"Candidate Users": "候选用户",
"Candidate Groups": "候选组",
"Due Date": "到期时间",
"Follow Up Date": "跟踪日期",
"Specify more than one group as a comma separated list.": "多个用户使用逗号隔开",
Priority: "优先级",
// eslint-disable-next-line no-template-curly-in-string
"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",
// eslint-disable-next-line no-template-curly-in-string
"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",
Variables: "变量",
"Candidate Starter Users": "选择启动候选人",
"Candidate Starter Configuration": "候选人启动器配置",
"Candidate Starter Groups": "候选人启动组",
"This maps to the process definition key.": "编号将映射到流程主键.",
save: "保存",
Tools: "工具",
"flow gateway": "流程网关",
"Process control": "流程节点",
"Create start event": "开始节点",
"Create end event": "结束节点",
"Create exclusive gateway": "互斥网关",
"Create parallel gateway": "并行网关",
"Create task": "任务节点",
"Create user task": "用户任务节点",
"Condition Type": "条件类型",
"Create group": "创建组",
"Create data object reference": "创建数据对象引用",
"Create data store reference": "创建数据存储引用",
"Append task": "添加任务",
"Append end event": "追加结束事件节点",
"Append gateway": "追加网关节点",
"Append user task": "追加用户任务节点",
"Append intermediate/boundary event": "追加中间或边界事件",
"Append text annotation": "追加文本批注" // 此句要有效，必须在CustomContexPadProvide给此节点增加一个translate('Append TextAnnotation')
};
简单的例子完成啦
