之前松哥发了一篇文章和小伙伴们介绍了前端的 bpmn.js 这个库，利用这个库咱们能够本人将绘制流程图的性能嵌入到咱们的我的项目中。

然而，这个库默认是给 Camunda 设计的，所以画进去的流程图导出来的 XML 文件无奈间接应用，必须要做一些深度定制，能力将 XML 文件转为 Flowable 流程引擎可用的 XML 文件。这个深度定制太太太麻烦了。

所以我就在想前端有没有现成的库，能够间接用来绘制 Flowable 流程图的？找来找去，找到了两个，这两个的类似度还蛮高的，不过这两个都有一个问题，那就是都是基于 Vue2 开发的，在 Vue3 中用不了，算了，作为一个工具，Vue2 就 Vue2 吧，忍了。毕竟我也不是业余的前端工程师，把握的前端技能能满足我后端的需要也就足够了，要是业余的前端工程师，我必定把 bpmn.js+Vue3 整的明明白白了。

好啦，接下来就不废话了，跟小伙伴们介绍一下这两个能够绘制 Flowable 流程图的前端库。

workflow-bpmn-modeler

workflow-bpmn-modeler 基于 Vue 和 bpmn.io@7.0，实现了 flowable 的工作流设计器。应用这个流程绘制工具，倡议采纳 flowable6.4.1 版本，flowable6.4.2 版本开始进行商业化重构，为了不便刨码学习，举荐应用 flowable6.4.1 版本。

这个用法其实很简略，首先咱们创立一个 Vue2 的我的项目，留神 Vue 的版本不要选错了，我的项目创立好之后，增加 workflow-bpmn-modeler 依赖，执行如下任意命令增加：

npm i workflow-bpmn-modeler

或者：

yarn add workflow-bpmn-modeler

增加实现后，package.json 内容如下：

{  "name": "bpmn_demo02",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build"  },  "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 文件中应用这个组件了，代码如下：

<template>  <div>    <bpmn-modeler            ref="refNode"            :xml="xml"            :users="users"            :groups="groups"            :categorys="categorys"            :is-view="false"            @save="save"    />  </div></template><script>  import bpmnModeler from "workflow-bpmn-modeler";  export default {    components: {      bpmnModeler,    },    data() {      return {        xml: "", // 后端查问到的xml        users: [          { name: "javaboy", id: 1 },          { name: "itboyhub", id: 2 },          { name: "江南一点雨", id: 3 },        ],        groups: [          { name: "经理", id: 4 },          { name: "组长", id: 5 },          { name: "员工", id: 6 },        ],        categorys: [          { name: "OA", id: "oa" },          { name: "财务", id: "finance" },        ],      };    },    methods: {      getModelDetail() {        // 发送申请，获取xml        // this.xml = response.xml      },      save(data) {        console.log(data);  // { process: {...}, xml: '...', svg: '...' }      },    },  };</script>

咱们来剖析一下这段代码：

  1. 首先从 workflow-bpmn-modeler 中导入 bpmnModeler。
  2. 注册 bpmnModeler 组件。

  3. 在页面中间接应用 bpmnModeler 组件，应用该组件时候，有五个属性一个办法，咱们挨个来说：

    1. xml：这个属性是 bpmnModeler 要展现的流程图的 XML 字符串，咱们能够提前给一个流程图的 XML 字符串，这样 bpmnModeler 组件就会将这个 XML 字符串所对应的流程图给画进去，如果咱们只是单纯的想本人绘制流程图，那么这个能够不必管，给一个空字符串就行了。
    2. users：这是一个数组，当咱们配置 UserTask 的时候，能够设置这个 UserTask 由谁来解决，users 配置的就是这里用到的用户。
    3. groups：这个相似于 users，也是在 UserTask 中，如果咱们想要配置一个 UserTask 的候选组的话，那么就会用到 groups 中的内容。
    4. categorys：这个属性亲测没有任何性能，源代码我也看了，源代码中也没有用这个属性，这齐全就是一个没有用的属性，可疏忽之。
    5. is-view：这个示意以后 bpmnModeler 是要画流程图还是单纯的只是将流程图展现进去，false 示意咱们是用 bpmnModeler 画流程图的，如果设置为 true，就示意 bpmnModeler 只是用来展现流程图（提前准备好流程图的 XML 文件，能够用 bpmnModeler 将之展现进去）。
    6. @save：这个是点击网页上的保留模型按钮的时候，会触发的一个回调函数。

好啦，这就能够了。

接下来，咱们启动 Vue 我的项目，就能够看到这个流程图绘制页面了：

当初就能够欢快的画流程图了～

接下来，松哥就用这个，手把手教大家画一下之前文章中和大家用的销假流程图，过后的流程图是这样的：

咱们来看下如何绘制：

  1. 首先咱们先来定义一下流程的根本信息：

  1. 接下来绘制经理批准还是回绝流程：

点击这个扳手按钮能够设置工作类型：

为这个工作设置一个监听器：

设置监听器的起因是因为前端用户在提交销假申请的时候，抉择审批人能够间接抉择审批人，也能够抉择审批人的身份（例如经理），这两种抉择都是被容许的。所以咱们就增加一个工作监听器，当流程执行到这个 Task 的时候，咱们就在工作监听器中，依据前端传来的参数去设置这个工作是由候选人解决还是候选用户组解决。
  1. 增加互斥网关：

  1. 审批通过线

接下来，先是审批通过，审批通过的条件是 approved 字段为 true 就示意审批通过：

  1. 审批通过发送告诉

审批通过后，给用户发送一个告诉，这是一个服务工作，发送告诉的类是咱们本人写的，所以也须要配置一下自定义类的地位：

  1. 完结

最初进入到审批通过 UserTask 并且完结：

  1. 绘制回绝线

依照如上流程，持续绘制销假被回绝的流程：

muheflow-bpmn-modeler

松哥要和大家介绍的第二个工具就是 muheflow-bpmn-modeler，这个基于 Vue 和 bpmn.io@8.0，实现了 flowable 的工作流设计器。应用这个流程绘制工具，倡议采纳 flowable6.4.1 版本，flowable6.4.2 版本开始进行商业化重构，为了不便刨码学习，举荐应用 flowable6.4.1 版本。

没找到这个的源代码，然而我发现这个的用法和 workflow-bpmn-modeler 的用法毫无差异～所以我就不废话了，照着下面的用这个就行了。

感兴趣的小伙伴无妨试试～公众号江南一点雨后盾回复 bpmn_demo02 能够下载本文案例～