bpmn.js + vue + vuex的业务实现-根据状态而呈现节点不同的颜色或图片

前言

上一章节我们介绍了关于bpmn.js如何与后端交互，实现特定的线用特定的颜色, 要是不了解的小伙请移步 bpmn.js + vue + vuex的业务实现-与后端交互

这一章节主要讲解的是关于bpmn.js如何根据状态而呈现节点不同的颜色或图片

根据状态而呈现不同的颜色或图片

在上一章节中已经与后端交互，实现了赋予不同节点不同的class，我们可以用同样的方法添加不同的图片和颜色

设置颜色

//.customRenderer.less
.djs-visual.running {
    path {
      display: none !important;
    }
    rect {
      fill: #1890ff !important;
      stroke: #1890ff !important;
    }
    .djs-label {
      font-weight: bold !important;
      fill: #fff !important;
    }
  } 

//.customRenderer.less

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

设置图片

//customRenderer.js

// 计数器，当匹配到就加1，匹配不到为0就默认图片
      let count = 0;
      customConfig.map(item => {
        if (element.businessObject.name.includes(item.labelKey)) {
          count++;
          const customIcon = svgCreate('image', {
            ...attr,
            href: isFinish ? item.url : item.unUrl,
          });
          svgAppend(parentNode, customIcon);
          return customIcon;
        }
        if (!count) {
          const customIcon = svgCreate('image', {
            ...attr,
            href: isFinish
              ? req