Springboot +Flowable，会签、或签简单使用（一）

news2024/11/28 12:31:51

一.简介

**会签：**在一个流程中的某一个 Task 上，这个 Task 需要多个用户审批，当多个用户全部审批通过，或者多个用户中的某几个用户审批通过，就算通过。
例如：之前的请假流程，假设这个请假流程需要组长和经理都审批了，才算审批通过，那么就需要设置这个 Task 是会签节点。

**或签：**意思就是 A 的请假流程提交给 B、C、D，但是并不需要 B/C/D 同时审批通过，只需要 B/C/D 中的任意一个审批即可，这就是或签，注意，我这里的表述，只需要 B/C/D 任意一个审批即可，这个审批即可以是审批通过，也可以是审批拒绝，反正只要审批，这个 UserTask 就算完成了。

二.会签流程图

首先来画一下这个请假流程图，这个流程图基本上还是和之前的一样，截图如下：
在这里插入图片描述

这跟之前的流程图有两个不一样的地方：

1.首先就是最核心的的这个批准或者拒绝的节点，这个节点下面多个三个竖线，这三个竖线的意思就是多个用户审批时是并发执行的，相互之间没有先后顺序，还有一种是三个横线，三个横线的意思是多个用户顺序执行。当然，这里不是说流程图上多三个竖线就行了，还需要稍微配置一下，截图如下：

在这里插入图片描述

这里配置的属性主要有五个：

多实例类型：
这个选项主要有两个，分别是 Parallel 和 Sequential，表示并发执行还是顺序执行，选择是 Parallel 就是多个用户并发执行，相互之间没有先后顺序，选择 Sequential 则是顺序执行，多个用户之间有先后顺序。
集合（多实例）：
这个地方我配置了一个 ${userTasks}，这个表示当流程执行到这个节点的时候，我会传进来一个变量，这个变量的名字是 userTasks，这个变量中包含了所有要审批这个 Task 的用户名。
元素变量（多实例）：由于上面的是一个集合，这里配置的则是集合中每一个元素的变量名，这就类似于 Java 里增强 for 循环的变量名。
元素变量（多实例）：
由于上面的是一个集合，这里配置的则是集合中每一个元素的变量名，这就类似于 Java 里增强 for 循环的变量名。
完成条件（多实例）：
这里我配置的值是 ${nrOfCompletedInstances== nrOfInstances}，涉及到两个变量，nrOfCompletedInstances 这个表示已经完成审批的实例个数，nrOfInstances 则表示总共的实例个数，也就是当完成审批的实例个数等于总的实例个数的时候，这个节点就算执行完了，换句话说，也就是 zhangsan 将请假申请提交给 javaboy 和 lisi，必须这两个人都审批了，这个节点才算执行完。另外这里还有一个内置的变量可用就是 nrOfActiveInstances 表示未完成审批的实例个数，只不过在本案例中没有用到这个内置变量。
分配用户：
这个是说这个 Task 的执行人，当然就是我们前面配置的 userTask，也就是从集合中拿出来的每一个元素的变量名。

2.去掉了审批通过之后的 UserTask。

在之前的请假流程图中，当请假审批通过之后，发送了请假通过通知之后，还会进入到一个 UserTask 流程中，这里为了方便，我把这个流程删掉了。

这就是新流程图和以前旧流程图之间的一个区别，现在来看下这个流程图对应的 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:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.flowable.org/processdef" exporter="Flowable Open Source Modeler" exporterVersion="6.7.2">
  <process id="holidayRequest" name="holidayRequest" isExecutable="true">
    <startEvent id="startEvent1" flowable:formFieldValidation="true"></startEvent>
    <userTask id="sid-1A1AA050-1900-4CAD-A277-18BD97BD61FB" flowable:assignee="${userTask}" flowable:formFieldValidation="true">
      <extensionElements>
        <modeler:initiator-can-complete xmlns:modeler="http://flowable.org/modeler"><![CDATA[false]]></modeler:initiator-can-complete>
      </extensionElements>
      <multiInstanceLoopCharacteristics isSequential="false" flowable:collection="${userTasks}" flowable:elementVariable="userTask">
        <extensionElements></extensionElements>
        <completionCondition>${nrOfCompletedInstances == nrOfInstances}</completionCondition>
      </multiInstanceLoopCharacteristics>
    </userTask>
    <sequenceFlow id="sid-2597F958-175E-4F9F-9BEA-6E89D6C5B0A4" sourceRef="startEvent1" targetRef="sid-1A1AA050-1900-4CAD-A277-18BD97BD61FB"></sequenceFlow>
    <exclusiveGateway id="sid-A04AF65B-D8B2-4F30-BFD5-7F2C9FCEFA51"></exclusiveGateway>
    <sequenceFlow id="sid-7CD68B1D-C2CE-4A1A-ABA7-216D0F80BDD8" sourceRef="sid-1A1AA050-1900-4CAD-A277-18BD97BD61FB" targetRef="sid-A04AF65B-D8B2-4F30-BFD5-7F2C9FCEFA51"></sequenceFlow>
    <serviceTask id="sid-4412386C-15E9-40C6-AB6B-66919A8D1302" flowable:class="org.javaboy.flowable03.flowable.Approve"></serviceTask>
    <serviceTask id="sid-903B79F3-2020-419E-AD42-215C2E26C784" flowable:class="org.javaboy.flowable03.flowable.Reject"></serviceTask>
    <endEvent id="sid-FE27FA28-2B2F-4572-A2D6-BFE83EBA9370"></endEvent>
    <sequenceFlow id="sid-474E5177-9B1A-4757-877F-5A0DA72B0A59" sourceRef="sid-903B79F3-2020-419E-AD42-215C2E26C784" targetRef="sid-FE27FA28-2B2F-4572-A2D6-BFE83EBA9370"></sequenceFlow>
    <sequenceFlow id="sid-85E7B515-734C-4E46-9889-D74FC5A04891" sourceRef="sid-A04AF65B-D8B2-4F30-BFD5-7F2C9FCEFA51" targetRef="sid-903B79F3-2020-419E-AD42-215C2E26C784">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${!approved}]]></conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="sid-EEC3F695-D61D-40BC-BA68-BCDD4DA40299" sourceRef="sid-A04AF65B-D8B2-4F30-BFD5-7F2C9FCEFA51" targetRef="sid-4412386C-15E9-40C6-AB6B-66919A8D1302">
      <conditionExpression xsi:type="tFormalExpression"><![CDATA[${approved}]]></conditionExpression>
    </sequenceFlow>
    <endEvent id="sid-92DA7300-EFD1-437B-96D5-EAADAFABC507"></endEvent>
    <sequenceFlow id="sid-E882A39F-9E88-4BB8-B7CE-F975B6ADC862" sourceRef="sid-4412386C-15E9-40C6-AB6B-66919A8D1302" targetRef="sid-92DA7300-EFD1-437B-96D5-EAADAFABC507"></sequenceFlow>
  </process>
</definitions>

三.请假处理

1.端提交请假流程

接下来看下前端如何提交请假申请，页面如下：
在这里插入图片描述
对应的 HTML 代码如下：

<h1>提交请假申请</h1>
<table>
    <tr>
        <td>请输入请假天数：</td>
        <td>
            <el-input type="text" v-model="afl.days"/>
        </td>
    </tr>
    <tr>
        <td>请输入请假理由：</td>
        <td>
            <el-input type="text" v-model="afl.reason"/>
        </td>
    </tr>
    <tr>
        <td>审批人：</td>
        <td>
            <el-select v-model="afl.approveUsers" style="width: 226px" placeholder="请选择审批人" multiple>
                <el-option
                        v-for="item in users"
                        :key="item.id"
                        :label="item.username"
                        :value="item.username"/>
            </el-select>
        </td>
    </tr>
</table>
<el-button type="primary" @click="submit">提交请假申请</el-button>

跟之前不同的是，这里的下拉框是多选的，当用户提交请假申请的时候，可以选择多个审批人，多个审批人的值将保存在 afl.approveUsers 变量中。
再来看提交请假方法，代码如下：

submit() {
    let _this = this;
    axios.post('/ask_for_leave', this.afl)
        .then(function (response) {
            if (response.data.status == 200) {
                //提交成功
                _this.$message.success(response.data.msg);
                _this.search();
            } else {
                //提交失败
                _this.$message.error(response.data.msg);
            }
        })
        .catch(function (error) {
            console.log(error);
        });
},

请求的参数截图如下：
在这里插入图片描述
看下这里提交的三个请求参数：