当前位置：首页 > article >正文

bpmn.js显示流程图

article 2024/11/22 6:31:07

目标：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"); // 给节点标记样式

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