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

相关推荐
给月亮点灯|1 分钟前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊3 分钟前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
@CLoudbays_Martin1135 分钟前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式
东北南西3 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱3 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
quan26314 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js