SpringBoot+Vue+Flowable，模拟一个请假审批流程

1. 效果展示

在正式开搞之前，我先来给小伙伴们看下我们今天要完成的效果。

简单起见，我这里并没有引入用户、角色等概念，涉及到用户的地方都是手动输入，在后续的文章中我会继续结合 Spring Security 来和大家展示引入用户之后的情况。

我们先来看看请假页面：

员工可以在这个页面输入姓名，请假天数以及请假理由等，然后点击按钮提交一个请假申请。

当员工提交请假申请之后，这个请假申请默认是由经理来处理的，此时经理登录之后，就可以看到员工提交上来的请求：

经理此时可以选择批准或者拒绝。无论是批准还是拒绝，都可以通过短信或者邮件等告知员工。

对于员工来说，也可以在一个页面查询自己请假流程的最终情况：

可能有小伙伴已经注意到了，我们这里所有涉及到用户名的地方，都需要手动输入。这是因为我为了让这个案例足够简单，暂时没有引入 Spring Security，只是单纯的和大家分享 Flowable 的用法，等小伙伴们通过这篇文章掌握了 Flowable 的基本用法之后，下篇文章我会和大家分享如何结合具体的用户来使用。

2. 工程创建

我就直接来和小伙伴们展示 Spring Boot 中 flowable 的用法了。

首先我们创建一个 Spring Boot 项目，创建的时候引入 Web 和 MySQL 驱动依赖即可，项目创建成功之后，再引入 flowable 依赖，最终的依赖文件如下：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.flowable</groupId>
    <artifactId>flowable-spring-boot-starter</artifactId>
    <version>6.7.2</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>
复制代码

项目创建成功之后，首先需要我们在 application.properties 中配置一下数据库连接信息，如下：

spring.datasource.username=root
spring.datasource.password=123
spring.datasource.url=jdbc:mysql:///flowable02?serverTimezone=Asia/Shanghai&useSSL=false&nullCatalogMeansCurrent=true
复制代码

配置完成之后，当 Spring Boot 项目第一次启动的时候，会自动创建出来对应的表和需要的数据。

同时，Spring Boot 项目也会自动创建并暴露 Flowable 中的 ProcessEngine、CmmnEngine、DmnEngine、FormEngine、ContentEngine 及 IdmEngine 等 Bean。

并且所有的 Flowable 服务都暴露为 Spring Bean。例如 RuntimeService、TaskService、HistoryService 等等服务，我们都可以在需要使用的时候，直接注入就可以使用了。

同时：

• resources/processes 目录下的任何 BPMN 2.0 流程定义都会被自动部署，所以在 Spring Boot 项目中，我们只需要将自己的流程文件放对位置即可，剩下的事情就会自动完成。
• cases 目录下的任何 CMMN 1.1 事例都会被自动部署。
• forms 目录下的任何 Form 定义都会被自动部署。

3. 流程图分析

今天这个例子比较简单，就是一个请假流程，我暂时先不跟小伙伴们去扯画流程图的事，咱们直接用一个官网现成的请假流程图：

我们先来简单分析一下这张图：

1. 最左侧的圆圈叫做启动事件(start event)，这表示一个流程实例的起点。
2. 一个流程启动之后，首先到达第一个有用户图标的矩形中，这个矩形称为一个 User Task，在这个 User Task 中，经理可以选择批准亦或者拒绝。
3. UserTask 的下一步是一个菱形，这个称作排他网关（Exclusive Gateway）,这个会将请求路由到不同的地方。
4. 先说批准，如果在第一个矩形中，经理选择了批准，那么就会进入到一个带有齿轮图标的矩形中，在这个矩形中我们我们可以额外做一些事情，然后又会调用到一个 UserTask，最终完成整个流程。
5. 如果经理选择了拒绝，则会进入到下面的发邮件的矩形中，在这个中我们可以给员工发送一个通知，告知他请假没有通过。
6. 当系统走到最右边的圆圈之后，就表示这个流程执行结束了。

这个流程图对应的 XML 文件位于 src/main/resources/processes/holiday-request.bpmn20.xml 位置，其内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:flowable="http://flowable.org/bpmn"
             typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath"
             targetNamespace="http://www.flowable.org/processdef">
    <process id="holidayRequest" name="Holiday Request" isExecutable="true">

        <startEvent id="startEvent"/>
        <sequenceFlow sourceRef="startEvent" targetRef="approveTask"/>

        <userTask id="approveTask" name="Approve or reject request" flowable:candidateGroups="managers"/>
        <sequenceFlow sourceRef="approveTask" targetRef="decision"/>

        <exclusiveGateway id="decision"/>
        <sequenceFlow sourceRef="decision" targetRef="externalSystemCall">
            <conditionExpression xsi:type="tFormalExpression">
                <![CDATA[
          ${approved}
        ]]>
            </conditionExpression>
        </sequenceFlow>
        <sequenceFlow  sourceRef="decision" targetRef="rejectLeave">
            <conditionExpression xsi:type="tFormalExpression">
                <![CDATA[
          ${!approved}
        ]]>
            </conditionExpression>
        </sequenceFlow>

        <serviceTask id="externalSystemCall" name="Enter holidays in external system"
                     flowable:class="org.javaboy.flowable02.flowable.Approve"/>
        <sequenceFlow sourceRef="externalSystemCall" targetRef="holidayApprovedTask"/>

        <userTask