宋哥发文和小伙伴介绍前端bpmn.js库。使用这个库，我们可以将绘制流程图的功能嵌入到我们的项目中。但是这个库默认是为Camunda设计的，所以不能直接使用绘制流程图导出的XML文件。必须进行一些深入的定制，以将XML文件转换为Flowable流程引擎可用的XML文件。这种深度定制太麻烦了。所以想知道前端有没有现成的库可以直接用来画Flowable流程图？环顾四周，我找到了两个。两者的相似度还是挺高的，但是两者都有一个问题，就是都是基于Vue2开发的，不能在Vue3中使用。算了，作为一个Tools，Vue2就是Vue2，忍忍吧。毕竟我不是专业的前端工程师，掌握的前端技能能够满足我的后端需求就足够了。如果我是一个专业的前端工程师，我一定会把bpmn.js+Vue3理解清楚。好了，废话不多说，下面介绍这两个可以画Flowable流程图的前端库。workflow-bpmn-modelerworkflow-bpmn-modeler实现了一个基于Vue和bpmn.io@7.0的可流动工作流设计器。使用此流程绘图工具，推荐使用flowable6.4.1版本，flowable6.4.2版本开始重构商用。为了方便coding学习，推荐使用flowable6.4.1版本。这个用法其实很简单。首先，我们创建一个Vue2项目。注意不要选择错误的Vue版本。项目创建完成后，添加workflow-bpmn-modeler依赖，执行以下任一命令添加：npmiworkflow-bpmn-modeler或:yarnaddworkflow-bpmn-modeler添加后，package.json的内容如下：{"name":"bpmn_demo02","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild"},"dependencies":{"core-js":"^3.8.3","element-ui":"^2.15.9","vue":"^2.6.14","vue-router":"^3.5.1","workflow-bpmn-modeler":"^0.2.8"},"devDependencies":{"@vue/cli-plugin-babel":"~5.0.0","@vue/cli-plugin-router":"~5.0.0","@vue/cli-service":"~5.0.0","vue-template-compiler":"^2.6.14"}}注意版本号接下来我们可以在一个.vue文件中使用这个组件，代码如下：
这里我们分析这段代码：首先从workflow-bpmn-modeler导入bpmnModeler，注册bpmnModeler组件，直接在页面使用bpmnModeler组件，使用这个组件时，有五个属性和一个方法，下面一一说说：xml：该属性是bpmnModeler要显示的流程图的XML字符串，我们可以预先给一个流程图的XML字符串，这样bpmnModeler组件就会绘制出XML字符串对应的流程图，如果我们只是想绘制是我们自己的Flowchart，那么这个可以不用管，给一个空字符串即可：这个和users类似，在UserTask中也是如此。如果我们要配置一个UserTask候选组，那么就会用到组中的内容。categories:这个属性个人测试没有作用，看过源码，源码中没有使用这个属性，完全没用，可以忽略。is-view：这个表示当前bpmnModeler是要绘制流程图还是单纯显示流程图，false表示我们是如果使用bpmnModeler来绘制流程图，如果设置为true则表示bpmnModeler只是用于展示流程图（提前准备好流程图的XML文件，使用bpmnModeler展示）。@save：这是一个回调函数，当网页上的保存模型按钮被点击时会被触发。好的，就是这样。接下来我们启动Vue项目，可以看到这个流程图绘制页面：现在我们可以愉快的绘制流程图啦~接下来宋哥就以此来教大家如何绘制上一篇文章中用到的那些请教大家留下流程图，当时的流程图是这样的：来看看怎么画：首先定义流程的基本信息：接下来画经理批准或拒绝的流程：点击这个扳手按钮设置任务type:为这个任务设置监听器：设置监听器的原因是前端用户提交请假申请时，选择器可以直接选择审批人，也可以选择审批人的身份（比如经理).允许。所以我们添加一个任务监听器。当流程到达这个Task时，我们根据前端传来的参数，在tasklistener中设置这个task是由candidate还是candidateusergroup来处理。添加互斥网关：审批通过线接下来，先审批通过。审批的条件是approved字段为true，表示审批通过：审批通过，发送通知。审核通过后，会向用户发送通知。这是一项服务任务。Send通知类是我们自己写的，所以我们还需要配置自定义类的位置：End最后进入审批通过UserTask结束：绘制拒绝线按照上面的流程继续绘制被拒绝的流程离开：muheflow-bpmn-modeler宋哥要给大家介绍的第二个工具是muheflow-bpmn-modeler，它实现了一个基于Vue和bpmn.io@8.0的可流动工作流设计器。使用此流程绘图工具，推荐使用flowable6.4.1版本，flowable6.4.2版本开始重构商用。为了方便coding学习，推荐使用flowable6.4.1版本。没找到这个的源码，但是发现这个的用法和workflow-bpmn-modeler的用法是一样的~所以废话不多说，直接用这个就和上面一样了。有兴趣的朋友不妨试试~公众号江南一点鱼后台回复bpmn_demo02可以下载本文案例~
