在vue中使用bpmn-js（四）

给节点和线上色，其实就是找到这个节点的id，然后改变它的样式。
这里是写死的某几个节点和线，真正应该通过与后台交互获取到已经走过的流程然后上色。

<div class="containers" ref="content">
    <div class="canvas" ref="canvas"></div>
    <el-button class="back" type="primary" @click="back">返回列表</el-button>
    <el-dialog
      :title="nodeName"
      :visible.sync="dialogVisible"
      :show-close="true"
      width="30%"
      size="large">
      <flow-view :nodeName="nodeName" :nodeCode="nodeCode" :nodeId="dialog_id"
                 :confBaseId="dialog_confBaseId" :modelId="modelId"></flow-view>
    </el-dialog>
    <!--<div id="js-properties-panel" class="panel"></div>-->
  </div>
</template>
<script>
  import flowView from '../../components/flow/FlowsView.vue'
  import {getBpmnXml, saveBpmnData, getNodeData} from '../../api/modeler'
  // import { readFileSync } from "fs";
  export default {
    components: {
      flowView
    },
    data(){
      return {
        id: "",
        bpmnModeler: null,
        container: null,
        canvas: null,
        xmlStr: null,
        // 点击节点获取的数据
        nodeCode: "",
        nodeName: "",
        // 弹窗相关的数据
        dialogVisible: false,
        dialog_id: "",
        dialog_confBaseId: ''
      }
    },
    methods:{
      createNewDiagram() {
        const that = this;
        let params = {
          id: this.id
        };
        getBpmnXml(params).then(res => {
          const bpmnXmlStr = res.obj;
//          console.log(bpmnXmlStr)
          this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
            if (err) {
              console.error(err);
            }
            that.success()
            const canvas = that.bpmnModeler.get('canvas');
            canvas.zoom('fit-viewport');
            // 就是在这里写死了
            const nodeCodes = ['StartEvent_1','Task_0qg0mca','Task_0307aue'];
            const colorClass = 'nodeSuccess';
            that.setNodeColor(nodeCodes, colorClass, canvas);

            const nodeCodes2 = ['SequenceFlow_1u5gq9e','SequenceFlow_1n5pril'];
            const colorClass2 = 'lineSuccess';
            that.setNodeColor(nodeCodes2, colorClass2, canvas);
          });
        })
      },

      // 返回表格页面
      back() {
        const data = false;
        this.$emit("closeEdit", data);
      },


      success() {
        const bpmnjs = this.bpmnModeler;
        const eventBus = bpmnjs.get('eventBus');
        const elementFactory = bpmnjs.get('elementFactory');
//        viewer没有这两个 所以不传了
//        const commandStack = bpmnjs.get('commandStack');
//        const bpmnRules = bpmnjs.get('bpmnRules');
        const Modeling = require('bpmn-js/lib/features/modeling/Modeling')
        const commandStack = require('diagram-js/lib/command/index');
        const bpmnRules = require('bpmn-js/lib/features/rules/index');
        const modeling = new Modeling(eventBus,elementFactory,commandStack,bpmnRules);
//        this.setLineColor('Task_0307aue','RED', this, modeling);
        this.addBpmnListener(this, modeling);
      },
      // 给节点添加监听时间(点击)
      addBpmnListener(_self,modeling) {
        const bpmnjs = this.bpmnModeler;
        const eventBus = bpmnjs.get('eventBus');
        const events = [
          'element.click',
          'element.dblclick'
        ];
        events.forEach(function(event) {
          eventBus.on(event, function(e) {
            //bpmn:Lane bpmn:SequenceFlow bpmn:Task bpmn:SequenceFlow bpmn:ExclusiveGateway
            //bpmn:Process
            //console.log(event + '   ' + JSON.stringify(e.element));
            if(e.element.type === 'bpmn:Process' || e.element.type === 'bpmn:Lane')
              return;

            //debugger;
            const   elementRegistry = bpmnjs.get('elementRegistry');
            const shape = elementRegistry.get(e.element.id);
//            console.log(shape)
//            modeling.setColor(shape,{ stroke:'RED' });
//            _self.nodeCode=e.element.id;
            _self.nodeCode = shape.businessObject.id;
//            console.log(_self.nodeCode)
            _self.nodeName = shape.businessObject.name;
            _self.getDialogId()
          });
        });
      },
      // 给已经走过的流程添加颜色
      setNodeColor(nodeCodes, colorClass, canvas){
        for(let i = 0; i < nodeCodes.length; i++) {
          canvas.addMarker(nodeCodes[i], colorClass);
        }

      },

      // 获取给弹窗的id
      getDialogId(){
        const that = this;
        const params = {
          nodeCode: this.nodeCode,
          modelId: this.modelId
        };
        getNodeData(params).then(res => {
          that.dialog_id = res.obj.id;
          that.dialog_confBaseId = res.obj.confBaseId;
          that.dialogVisible = true;
        })
      }

    },
    mounted(){
      this.id = this.bpmnId;
      var BpmnModeler = require('bpmn-js');
      this.container = this.$refs.content;

      var canvas = this.$refs.canvas;
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
//
//        // 添加右边属性控制板
//        propertiesPanel: {
//          parent: '#js-properties-panel'
//        },

      });
      this.createNewDiagram(this.bpmnModeler);
    },
    props: [
      "bpmnId",
      "modelId"
    ]
  }

  @import "./css/diagram-js.css";
  @import "./css/app.css";
  @import "./vendor/bpmn-font/css/bpmn-embedded.css";
  .containers{
    position: absolute;
    display: inline-block;
    background-color: #ffffff;
    width: 100%;
    height: 90%;
  }
  .canvas{
    width: 100%;
    height: 100%;
  }
  .panel{
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
  .back {
    display: inline-block;
    position: absolute;
    bottom: 20px;
    left: 5px;
  }
  .nodeSuccess:not(.djs-connection) .djs-visual > :nth-child(1) {
    stroke: green !important;
    stroke-width: 3px;
    /* elements as success */
  }

  .nodeError:not(.djs-connection) .djs-visual > :nth-child(1) {
    stroke: red !important;
    stroke-width: 3px;
    /* elements as error */
  }

  .lineSuccess:not(.djs-shape) .djs-visual :last-child{
    stroke: green !important;
  }

  .lineError:not(.djs-shape) .djs-visual :last-child{
    stroke: red !important;
  }