bpmn.js显示流程图

embedded/2024/11/24 2:15:47/

目标：vue2 + 接口返回xml - 弹窗显示流程图 - 根据需求高亮节点

一、安装依赖

npm i bpmn-js 添加上的版本是 "bpmn-js": "^11.5.0"

二、只读显示流程图

<div ref="canvas" style="width:100%;height: calc(100vh - 85px);"></div>

import BpmnViewer from "bpmn-js/lib/Viewer";

  data() {return {bpmnViewer: null,loading: false,};},methods: {// el-dialog的@open方法 调用接口获取xml - 成功返回则初始化流程图handleOpen() {this.loading = true;processXML(this.bizKey).then(({ code, message, result }) => {if (code == 200) {if (result.bpmnXml) {this.init(result.bpmnXml);} else {return Promise.reject(new Error("未获取到流程图实例"));}} else {return Promise.reject(new Error(message));}}).catch((error) => {this.$message.error(error.message);this.loading = false;});},// 初始化流程图实例async init(bpmn20Xml) {this.bpmnViewer = new BpmnViewer({ container: this.$refs.canvas });try {const result = await this.bpmnViewer.importXML(bpmn20Xml);let canvas = this.bpmnViewer.get("canvas");canvas.zoom("fit-viewport");/** 高亮节点写在这里 */// const { warnings } = result;  console.log(warnings);} catch (err) {this.$message.error(err.message, err.warnings);console.log(err.message, err.warnings);} finally {this.loading = false;}},// el-dialog的@close方法 销毁流程图实例handleClose() {this.$emit("handleClose");if (this.bpmnViewer) {this.bpmnViewer.destroy();this.bpmnViewer = null;}},},

三、高亮节点

   const elementRegister = this.bpmnViewer.get("elementRegistry");const point = elementRegister.get(this.nodeId); // 根据节点id获取canvas.addMarker(point, "highlight"); // 给节点标记样式

javascript">  // 如果有scoped,就要加上层级选择器 才能添加上自定义样式.highlight .djs-visual > :nth-child(1) {stroke: green !important;stroke-width: 2.5px !important;fill: rgba(0, 80, 0, 0.4) !important;}