內容概述

bpmn是比較方便的繪製流程圖的外掛，官方demo https://github.com/bpmn-io/bpmn-js-examples

本文主要包括vue專案中bpmn使用例項、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。

前情提要

上文我們已經實現了在外部更改節點名。此時又有新玩法：在流程圖中，根據節點狀態為其標記不同顏色。例如：已完成：黃色，正在進行：綠色，本次我們通過兩種方式來實現該需求。效果：

方式1：modeling.setColor

modeling.setColor接受兩個引數：引數1：節點例項，可以是單個元素，也可是多個節點組成的陣列，引數2：class類

let modeling = this.bpmnModeler.get('modeling');
modeling.setColor(節點例項,{
 stroke: 'green',fill: 'yellow'
});

方式2：Overlay

個人理解，overlay是通過定位方式在元素正上方新增一層帶顏色的蒙板

const $overlayHtml = $('<div class="highlight-overlay">').css({
 width: shape.width,height: shape.height
});
overlays.add(節點id,{
 position: {top: 0,left: 0},html: $overlayHtml
});

highlight-overlay：css中宣告好的class類名

overlays.add將建立好的蒙板定位到指定節點位置，此時節點id就是目標節點的唯一身份！

注意事項

上述兩種方式均能實現為節點新增顏色。但方式2有一點副作用，如果此時你為節點註冊了點選事件，在節點被點選的時候要做某些處理。此時方式2會使節點點選事件失效。

原因：方式2中，此時節點上方有一層蒙板，並且和節點等寬等高，相當於節點被蒙板完全覆蓋。所以點選節點的時候，點選的是蒙版，不是節點。

不要慌，有解決辦法！此時為蒙板註冊了點選事件，將點選節點要做的操作給蒙板也來一份，哈哈

import $ from 'jquery'; // 引入jquery
$(".djs-container").on("click",".djs-overlays",(e) => {
 const parentEle = e.target.parentElement.parentElement;
 const shapeId = parentEle.getAttribute('data-container-id');
 const temp = this.nodeList.filter(
 (item) => item.id === shapeId
 )[0];
 // 此時temp就是蒙板下方的節點，要點選節點做什麼，此刻儘管拿去用
 ........
});

後續

上文程式碼都是片段，特此附上完整程式碼：老規矩：data中的chart變數流程圖xml檔案資料，由於行數過多，附在了附件中（點我！點我），使用時，將附件內容複製過來，賦值給chart即可執行！

<template>
 <div class="containerBox">
 <div id="container"></div>
 <div style="margin-left: 200px">看我！我是點選的節點名稱啊~
  <span style="color: #eaae00">{{nodeName}}</span>
 </div>
 </div>
</template>
<script>
 import BpmnModeler from 'bpmn-js/lib/Modeler';
 import camundaExtension from './resources/camunda';
 import {tempDetail,saveCanvas} from '@api/processConfig';
 import $ from 'jquery';

 export default {
 name: 'index',data() {
  return {
  containerEl: null,bpmnModeler: null,nodeName: '',nodeList: [],// chart變數流程圖xml檔案資料，由於行數過多，附在了附件中，使用時，將附件整個賦值給chart即可
  chart: ''
  };
 },mounted() {
  this.containerEl = document.getElementById('container');
  this.bpmnModeler = new BpmnModeler({
  container: this.containerEl,moddleExtensions: {camunda: camundaExtension}
  });
  this.showChart();
 },methods: {
  // 流程圖回顯
  showChart() {
  this.bpmnModeler.importXML(this.chart,(err) => {
   if (!err) {
   this.addEventBusListener();
   this.setNodeColor();
   }
  });
  },setNodeColor() {
  // 目的：為第一個節點新增綠色，為第二個節點新增黃色
  // 實現步驟：1、找到頁面裡所有節點
  const elementRegistry = this.bpmnModeler.get('elementRegistry');
  this.nodeList = elementRegistry.filter (
   (item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask'
  );
  // 此時得到的userTaskList 便是流程圖中所有的節點的集合
  console.log(this.nodeList);
  // 步驟2 ：為節點新增顏色
  // 方式1 ：modeling.setColor(引數1：節點，可以是單個元素例項，也可是多個節點組成的陣列，引數2：class類);
  let modeling = this.bpmnModeler.get('modeling');
  modeling.setColor(this.nodeList[0],{
   stroke: 'green',fill: 'yellow'
  });
  // 方式2 ：新增蒙板
  const overlays = this.bpmnModeler.get('overlays');
  const shape = elementRegistry.get(this.nodeList[1].id);
  if (shape) {
   const $overlayHtml = $('<div class="highlight-overlay">').css({
   width: shape.width,height: shape.height
   });
   overlays.add(this.nodeList[1].id,{
   position: {top: 0,html: $overlayHtml
   });
  }
  // 此方法為了解決方式2造成的節點點選事件失效問題，如果採用方式1，可忽略此方法
  this.overlayClick();
  },overlayClick() {
  $(".djs-container").on("click",(e) => {
   const parentEle = e.target.parentElement.parentElement;
   const shapeId = parentEle.getAttribute('data-container-id');
   const temp = this.nodeList.filter(
   (item) => item.id === shapeId
   )[0];
   this.nodeName = temp ? temp.businessObject.name : '';
  });
  },addEventBusListener() {
  const eventBus = this.bpmnModeler.get('eventBus');
  // 為節點註冊點選事件，點選節點，下方顯示點選的節點名稱
  eventBus.on('element.click',(e) => {
   const {element} = e;
   if (!element.parent) return;
   if (!e || element.type === 'bpmn:Process') {
   return false;
   } else {
   this.nodeName = element.businessObject.name;
   }
  });
  }
 }
 };
</script>
<style lang="scss">
 .containerBox {
 height: calc(100vh - 220px);
 position: relative;

 #container {
  height: calc(100% - 50px);
 }
 .highlight-overlay {
  background-color: green;
  opacity: 0.4;
  border-radius: 10px;
 }
 }
</style>

到此這篇關於vue專案中使用bpmn為節點新增顏色的方法的文章就介紹到這了,更多相關vue bpmn節點顏色內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！