bpmn

前端bpmn.js

项目背景，这是公司重构的项目，画图的功能是在后台利用activiti来写的，在前台是显示回看的效果。项目之前是利用的activiti在前端的使用，引入js插件的形式，用jquery来写的，代码冗余，每次维护都要阅读大量源码，成本较高，新的项目采用的是vue框架，经过筛选最终确定bpmn.js。
项目需求：封装成插件，只能显示，动态回看流程，点击查看具体流程的人员信息。

项目中安装bpmn

项目背景：后台activit，前端：vue+element+bpmn.js
安装命令：yarn add bpmn-js
yarn add bpmn-js-properties-panel
yarn add camunda-bpmn-moddle

项目中的应用

在html中创建画布

 <!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的，并设置ref让vue获取到element -->
      <div class="bpmn-canvas" ref="canvas" style="height:500px"></div>

在后面的代码中获取画布，

  init() {
      // 获取画布 element
      this.canvas = this.$refs.canvas;
      // 创建Bpmn对象
      this.bpmnModeler = new BpmnModeler({
        // 设置bpmn的绘图容器为上门获取的画布 element
        container: this.canvas,
        additionalModules: [
          {
            paletteProvider: ["value", ""], // 禁用左面板
            labelEditingProvider: ["value", ""], // 禁用编辑
            contextPadProvider: ["value", ""], // 禁用点击出现的contextPad
            interactionEvents: ["type", InteractionEvents]
          }
        ]
      });
      var eventBus = this.bpmnModeler.get("eventBus");
      let that = this;
      eventBus.on("element.click", function(evt) {
        console.log(evt);
        if (evt.element.type !== "bpmn:UserTask") {
          return;
        }
        that.dialogVisible = true;
      });
      // 初始化建模器内容
      this.initDiagram(this.initTemplate);
    },
   initDiagram(bpmn) {  //将生成的xml导入到画布
      // 将xml导入Bpmn-js建模器
      this.bpmnModeler.importXML(bpmn, err => {
        if (err) {
          this.$Message.error("打开模型出错,请确认该模型符合Bpmn2.0规范");
        }
      });
    },

additionalModules里面是对一些功能的禁用，添加。重点讲一下interactionEvents，是对流程线的拖动的禁用，这个需要在文件中引入interactionEvents.js的，并且在文件中的function fire(type, event, element) {}函数中进行操作，如果是所有的事件都禁止，可以直接return，也可以进行判断根绝自己的需求来，这里的我需求是只允许点击：

 function fire(type, event, element) {
    if(type !== 'element.click'){
       return;
    }
    }

对于点击事件的处理是在init（）{}里面：

      var eventBus = this.bpmnModeler.get("eventBus");
      let that = this;
      eventBus.on("element.click", function(evt) {
        console.log(evt);
        if (evt.element.type !== "bpmn:UserTask") {
          return;
        }
        that.dialogVisible = true;
      });

后面的需求就是改变节点的颜色，这里要提一下，如果是引入viwer的话是获取不到modeling的，所以这里选用的是BpmnModeler。改变颜色的代码如下：

    onChangeColor() {
      // this.init()
      let colorStr = "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
      var elementRegistry = this.bpmnModeler.get("elementRegistry"),
        modeling = this.bpmnModeler.get("modeling");
      let keys = Object.keys(elementRegistry._elements);
      console.log(keys);
      let mmmm = keys.splice(keys.indexOf("sid-89CC69DB-1B9E-4788-9C72-DA8A396F66E8"))
      console.log(mmmm);
      mmmm.forEach((v, index) => {
        setTimeout(() => {
          modeling.setColor([elementRegistry.get(v)], {
            stroke: colorStr
            // fill: 'green'
          });
        }, index * 500);
      });
    }

因为这里要实现的是慢慢一步步的显示步骤，所以用了一个定时器。