今天给大家介绍这两个可以画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-导入bpmnModeler建模器并注册bpmnModeler组件。直接在页面上使用bpmnModeler组件。使用该组件时，有五个属性和一个方法。下面一一说一下：xml：该属性是bpmnModeler要展示的流程图的XML字符串。我们可以预先给出一个流程图的XMLString，这样bpmnModeler组件就会绘制出XML字符串对应的流程图。如果我们只是想自己画流程图，那么这个可以忽略，空字符串即可。用户：这是一个数组。当我们配置UserTask时，我们可以设置谁来处理UserTask。用户配置是这里使用的用户。groups：这个和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的用法是一样的~所以废话不多说，直接用这个就和上面一样了。
