bpmn.js显示流程图

目标: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;
  }
四、删除水印

找到node_modules/bpmn-js/lib/BaseViewer.js文件,将linkMarkup的样式改为visibility:'hidden'

不同版本文件可能写法不同,但方法相同:通过样式修改linkMarkup使其不可见。

相关推荐
Dajiaonew13 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
kakacc:14 小时前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot
勤奋菲菲16 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
10年前端老司机16 小时前
面试官爱问的 Object.defineProperty,90%的人倒在这些细节上!
前端·javascript
徐小夕17 小时前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
用户479492835691518 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
bubiyoushang88818 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia18 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia19 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
paopaokaka_luck19 小时前
基于SpringBoot+Vue的少儿编程培训机构管理系(WebSocket及时通讯、协同过滤算法、Echarts图形化分析)
java·vue.js·spring boot·后端·spring