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使其不可见。

相关推荐
前端付豪27 分钟前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮28 分钟前
js符号(Symbol)
前端·javascript
大怪v1 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ3 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊4 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮4 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort4 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手4 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码4 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js