使用Bpmn.js在vue里制作查看流程图组件

说明

啊 好久不见，最近出差了很久，那久没写博客，来冒泡（填坑）啦~最近需要使用Bpmn.js制作流程的前端，技术上选的是vue，前几篇里我们一直讲的都是后端通用流程的实现，现在来讲一下前端吧（其实我是搞后端的ヽ(ー_ー)ノ有不对的地方欢迎指点）。

快速开始

默认项目已经引入bpmn-js等相关组件，我这里弹窗和按钮用的都是antdesign组件，你可以任意替换你喜欢的弹窗和按钮组件，直接上代码

两次Axios请求数据张这样第一个json里的node指的是你流程里节点的Key值，第二个json里的result指的是你流程图的xml，分别是用来变色节点和绘制图的，很好理解吧。都用这么久流程了这两个接口应该能写出来了，如果需要的人多的话我再写一篇后端教怎么拿好了(￣ェ￣;)：

{
	"success": true,
	"message": "操作成功！",
	"code": 0,
	"token": null,
	"result": {
		"node": ["Task_00475vw"]
	},
	"timestamp": 1585620877025
}
{
	"success": true,
	"message": "操作成功！",
	"code": 0,
	"token": null,
	"result": "这里是你的流程xml数据",
	"timestamp": 1585620877326
}

 制作组件Bpmn.vue代码如下，比较重要的代码是eventBus.off(events, null)，因为是查看，不需要绘制的各种操作，这里去掉监听，更多Event.js的方法戳->Event-js，同样的，如果需要监听每个节点例如弹出弹窗，可以在我注释掉的eventBus.on里写代码

<template>
  <a-modal
    title="流程查看"
    width="100%"
    :visible="dialogVisible"
    @cancel="dialogVisible=false"
    cancelText="关闭"
  >
    <div class="containers" ref="content">
      <div id="canvas" class="canvas" ref="canvas"></div>
    </div>