bpmn.js + vue + vuex的业务实现-与后端交互

最新推荐文章于 2025-10-16 16:08:27 发布

原创最新推荐文章于 2025-10-16 16:08:27 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

前言

这一章节主要讲解的是关于bpmn.js如何与后端交互，实现特定的线用特定的颜色

接口返回的数据

我们可以与后端协商，给每一个节点赋予一个id，我们就可以和id匹配赋予不同的class。

//customRenderer.less

.djs-connection {
    .Activities.djs-visual {
      path {
        display: block !important;
        stroke: #fdb039 !important;
        stroke-dasharray: 8 !important; //间隔多少像素绘制一次  虚线
        marker-end: url(#sequenceflow-arrow-activities) !important;
      }
    }
    .unActivities.djs-visual {
      path {
        display: block !important;
        stroke: #cccccc !important;
        stroke-dasharray: 8 !important;
        marker-end: url(#sequenceflow-arrow-normal) !important;
      }
    }
  }

在http请求篇中，拿到的数据如下：

我们再看看赋予了id后会变成什么样？

我们可以看到在节点上多了个data-element-id，那么问题来了，该如何获取到每个节点的id与得到的数组匹配呢？

jQuery

用jquery简单粗暴的获取指定id的节点

//customRenderer.vue

changeColor() {
      console.log($);
      this.highLightedActivitiesIds.map(item => {
        console.log($(`g[data-element-id=${item}] g`));
        $(`g[data-element-id=${item}] g`)
          .removeClass('unActivities')
          .removeClass('running')
          .addClass('Activities');
      });
      this.runningActivitiesIds.map(item => {
        $(`g[data-element-id=${item}] g`)
          .removeClass('unActivities')
          .removeClass('Activities')
          .addClass('running');
      });
    },

需要注意的是这个方法需要在流程图importXML完成之后再使用

自定义drawConnection

但我这个是vue项目，虽然说用jQuery也可以，但有些不太妥。所以我又看了亿点点的bpmn.js源码，发现它x在绘制线条使用的是drawConnection函数，我们可以在这地方做文章。

//CustomRenderer.js/CustomRenderer

drawConnection(parentNode, element) {
    const line = this.bpmnRenderer.drawConnection(parentNode, element);
    // 给节点添加class以更改样式
    let className = this.highLightedActivitiesIds.includes(element.id)
      ? 'djs-visual Activities'
      : this.runningActivitiesIds.includes(element.id)
      ? 'djs-visual running'
      : 'djs-visual unActivities';
    console.log(className);
    svgAttr(parentNode, 'class', className);

    return line;
  }

接口数据引入

但是问题又来了，highLightedActivitiesIds和runningActivitiesIds这两个数组该怎么引入到CustomRenderer类里呢？

从一个组件传数据到另一个js文件里的方法有很多，诸如本地缓存、路由传参、vuex等等。

路由传参，http请求？（舍弃）

因为是customRenderer.vue引用CustomRenderer.js里的类，所以是在同一个页面，进行http请求传的参也是通过路由传参的，所以能不能在CustomRenderer.js中获取到请求参数直接进行http请求？事实证明是可以得到highLightedActivitiesIds和runningActivitiesIds这两个数组的，但是在这里http请求只会发生一次，并不符合需求。

vuex

在customRenderer.vue请求得到的highLightedActivitiesIds和runningActivitiesIds这两个数组通过vuex传递到CustomRenderer.js里。

//CustomRenderer.js

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
  select as svgSelect,
  selectAll as svgSelectAll,
  clone as svgClone,
  clear as svgClear,
  remove as svgRemove,
} from 'tiny-svg';
import store from '@/store';
import { customConfig, createArr } from '../utils/util';
import { is } from 'bpmn-js/lib/util/ModelUtil';
const HIGH_PRIORITY = 1500;

export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer, modeling) {
    super(eventBus, HIGH_PRIORITY);
    this.bpmnRenderer = bpmnRenderer;
    this.modeling = modeling;
    // 已完成的id数组
    this.highLightedActivitiesIds = store.getters.highLightedActivitiesIds;
    // 正在进行的id数组
    this.runningActivitiesIds = store.getters.runningActivitiesIds;
  }
  canRender(element) {
    // ignore labels
    return !element.labelTarget;
  }
  /**
   * 自定义连接线的样式
   * @param {*} parentNode 当前元素的svgNode
   * @param {*} element
   * @returns
   */
  drawConnection(parentNode, element) {
    const line = this.bpmnRenderer.drawConnection(parentNode, element);
    // 给节点添加class以更改样式
    let className = this.highLightedActivitiesIds.includes(element.id)
      ? 'djs-visual Activities'
      : this.runningActivitiesIds.includes(element.id)
      ? 'djs-visual running'
      : 'djs-visual unActivities';
    console.log(className);
    svgAttr(parentNode, 'class', className);

    return line;
  }

  getShapePath(shape) {
    return this.bpmnRenderer.getShapePath(shape);
  }
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'modeling'];