在vue中使用bpmn-js（进阶）

由于公司前段时间在打造一个开发平台，而我主要负责工作流模块，于是就接触到了bpmn-js。但众所周知，bpmn-js 文档是全英的，相关资料少，填坑的人更少，所以开发起来并没有那么好上手。于是我研究了一段时间，没少踩坑，但收获颇丰，今天就跟大家分享一下。PS：以前一直做伸手党，今天要扳回一局，先上效果图～

进阶版 bpmn-js 效果图

什么是 bpmn-js ?

一个BPMN 2.0 渲染工具，简单来说，就是流程设计器。前端利用这样的一个流程设计器，设计流程，导出 xml，然后传给后端。启动 activiti 工作流引擎，最后生成流程实例。
官网地址：https://bpmn.io/toolkit/bpmn-js/
Github地址：https://github.com/bpmn-io

Hello world！

据称，Hello World 是世界上第一个演示程序。现在，我们要演示一个最基础的 bpmn-js 使用方式。

1. 在项目内安装 bpmn-js

npm install bpmn-js --save

2. 使用 bpmn-js

那么到了这一步，我们就可以得到如下的效果图：

bpmn-js 最原始的样子

是不是觉得和前面的效果图差距很大，哈哈别急。重头戏才刚来，我们接着往下走。

3. bpmn-js 属性面板
我们知道，流程设计不单单只是画图，还需要有节点属性的配置。在此，bpmn-js官方有推荐使用 bpmn-js-properties-panel工具对流程属性进行修改，效果图长这样：

官方提供的属性面板

一目了然，功能很全面，但就是用不起来！几个原因：
1. UI太丑
2. 全是英文，即时汉化了也不尽人意
3. 功能不好扩展。例如我们公司有一套自己的组织体系，我要怎样在这个属性面板上使用我们的人员选择控件
综合以上几点，我果断放弃了使用bpmn-js-properties-panel。当然，有需要的同学也可以出门左转，附上Github地址：https://github.com/bpmn-io/bpmn-js-examples

下面，我们来编写自己的属性面板，以最简单的Demo来讲最核心的原理！
首先，bpmn-js 提供了两个有用的 监听方法，藏匿在官网的一些 examples 当中

// 监听节点选择变化
this.modeler.on('selection.changed', (e) => {
    const element = e.newSelection[0]
    console.log(element) 
})

//  监听节点属性变化
this.modeler.on('element.changed', (e) => {
    const { element } = e
    console.log(element) 
})

这两个方法，决定了我们可以在自己开发的面板上展示流程节点的相应信息。相信这个不难理解吧～我们只需要开发一个简单的表单就可以验证

如上所示，在节点切换的时候，只要对form进行赋值，属性面板就会更新了。
那么我们要怎样修改节点属性，并更新回流程图呢？
bpmn-js同样也提供了相应的方法。
1.节点名称的更新，2.自定义节点属性的存储

// 节点名称的更新
const modeling = this.modeler.get('modeling')
modeling.updateLabel(this.element, name)

// 自定义节点属性的存储
const modeling = this.modeler.get('modeling')
modeling.setColor(this.element, {
   fill: null,
   stroke: color
})
modeling.updateProperties(this.element, {color: color})

通过上述两个方法就可以处理一些简单的属性存储以及更新了。看到这，我相信大家都理解得差不多了。当然，自己开发属性面板，还会涉及到自定义标签的插入、人员配置、会签属性以及条件表达式等
有兴趣的同学可以持续关注，我会继续写下去。毕竟，公司的工作流模块已经完整上线了，我还有好多可以分享的～噢对了，我还把左侧工具栏的样式以及部分功能给改了，代码都放在Github上，欢迎给个star～
Github地址：https://github.com/miniclound/vue-bpmn.git