springBoot集成flowable的流程解析

更新時間：2023年02月15日 08:30:56 作者：遇見你真好。

這篇文章主要介紹了springBoot集成flowable的流程，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

前言

Flowable可以十分靈活地加入你的應(yīng)用/服務(wù)/構(gòu)架。可以將JAR形式發(fā)布的Flowable庫加入應(yīng)用或服務(wù)，來嵌入引擎。

以JAR形式發(fā)布使Flowable可以輕易加入任何Java環(huán)境：Java SE；Tomcat、Jetty或Spring之類的servlet容器；

JBoss或WebSphere之類的Java EE服務(wù)器，等等。另外，也可以使用Flowable REST API進行HTTP調(diào)用。

也有許多Flowable應(yīng)用（Flowable Modeler, Flowable Admin, Flowable IDM 與 Flowable Task），提供了直接可用的UI示例，可以使用流程與任務(wù)。

一、pom中引入Flowable相關(guān)框架

本Demo使用的SpringBoot版本是2.7.5

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.5</version>
        <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 工作流flowable架包 -->
        <dependency>
            <groupId>org.flowable</groupId>
            <artifactId>flowable-spring-boot-starter</artifactId>
            <version>6.4.0</version>
        </dependency>
        <!-- mysql數(shù)據(jù)庫連接架包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.11</version>
        </dependency>
        <!-- mybatis ORM 架包 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>
        <!-- thymeleaf架包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

二、相關(guān)配置文件

1.application.properties配置文件

server.port=8081
#數(shù)據(jù)庫配置
spring.datasource.url=jdbc:mysql://localhost:3306/flowable01?autoReconnect=true&useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=song@1234
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  #開啟調(diào)試信息
logging.level.org.flowable=DEBUG
  #業(yè)務(wù)流程涉及的表自動生成
flowable.database-schema-update=true
flowable.async-executor-activate=false

2.審批流程xml文件，默認(rèn)放置在resources下的processess文件夾下

vacationRequest.bpmn20.xml 內(nèi)容如下：

三、控制層代碼塊

package com.sxjg.controller;

import com.sxjg.pojo.ResponseBean;
import com.sxjg.pojo.VacationApproveVo;
import com.sxjg.pojo.VacationRequestVo;
import com.sxjg.service.VacationService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

/**
 * @project 請假流程測試
 * @Description
 * @Author songwp
 * @Date 2023/2/13 20:06
 * @Version 1.0.0
 **/
@RequestMapping("vacation")
@RestController
public class VacationController {
    @Autowired
    VacationService vacationService;

    /**
     * 請假條新增頁面
     * @return
     */
    @GetMapping("/add")
    public ModelAndView add(){
        return new ModelAndView("vacation");
    }

    /**
     * 請假條審批列表
     * @return
     */
    @GetMapping("/aList")
    public ModelAndView aList(){
        return new ModelAndView("list");
    }

    /**
     * 請假條查詢列表
     * @return
     */
    @GetMapping("/sList")
    public ModelAndView sList(){
        return new ModelAndView("search");
    }

    /**
     * 請假請求方法
     * @param vacationRequestVO
     * @return
     */
    @PostMapping
    public ResponseBean askForLeave(@RequestBody VacationRequestVo vacationRequestVO) {
        return vacationService.askForLeave(vacationRequestVO);
    }

    /**
     * 獲取待審批列表
     * @param identity
     * @return
     */
    @GetMapping("/list")
    public ResponseBean leaveList(String identity) {
        return vacationService.leaveList(identity);
    }

    /**
     * 拒絕或同意請假
     * @param vacationVO
     * @return
     */
    @PostMapping("/handler")
    public ResponseBean askForLeaveHandler(@RequestBody VacationApproveVo vacationVO) {
        return vacationService.askForLeaveHandler(vacationVO);
    }

    /**
     * 請假查詢
     * @param name
     * @return
     */
    @GetMapping("/search")
    public ResponseBean searchResult(String name) {
        return vacationService.searchResult(name);
    }
}

四、Service層，請假條新增、審批、查詢的業(yè)務(wù)處理

package com.sxjg.service;

import com.sxjg.pojo.ResponseBean;
import com.sxjg.pojo.VacationApproveVo;
import com.sxjg.pojo.VacationInfo;
import com.sxjg.pojo.VacationRequestVo;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.flowable.engine.HistoryService;
import org.flowable.engine.RuntimeService;
import org.flowable.engine.TaskService;
import org.flowable.engine.history.HistoricProcessInstance;
import org.flowable.task.api.Task;
import org.flowable.variable.api.history.HistoricVariableInstance;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

/**
 * @project 請假流程測試
 * @Description
 * @Author songwp
 * @Date 2023/2/13 20:08
 * @Version 1.0.0
 **/
@Service
public class VacationService {
    @Autowired
    RuntimeService runtimeService;

    @Autowired
    TaskService taskService;

    @Autowired
    HistoryService historyService;

    /**
     * 申請請假
     * @param vacationRequestVO
     * @return
     */
    @Transactional
    public ResponseBean askForLeave(VacationRequestVo vacationRequestVO) {
        Map<String, Object> variables = new HashMap<>();
        variables.put("name", vacationRequestVO.getName());
        variables.put("days", vacationRequestVO.getDays());
        variables.put("reason", vacationRequestVO.getReason());
        try {
            //指定業(yè)務(wù)流程
            runtimeService.startProcessInstanceByKey("vacationRequest", vacationRequestVO.getName(), variables);
            return ResponseBean.ok("已提交請假申請");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ResponseBean.error("提交申請失敗");
    }

    /**
     * 審批列表
     * @param identity
     * @return
     */
    public ResponseBean leaveList(String identity) {
        List<Task> tasks = taskService.createTaskQuery().taskCandidateGroup(identity).list();
        List<Map<String, Object>> list = new ArrayList<>();
        for (int i = 0; i < tasks.size(); i++) {
            Task task = tasks.get(i);
            Map<String, Object> variables = taskService.getVariables(task.getId());
            variables.put("id", task.getId());
            list.add(variables);
        }
        return ResponseBean.ok("加載成功", list);
    }

    /**
     * 操作審批
     * @param vacationVO
     * @return
     */
    public ResponseBean askForLeaveHandler(VacationApproveVo vacationVO) {
        try {
            boolean approved = vacationVO.getApprove();
            Map<String, Object> variables = new HashMap<String, Object>();
            variables.put("approved", approved);
            variables.put("employee", vacationVO.getName());
            Task task = taskService.createTaskQuery().taskId(vacationVO.getTaskId()).singleResult();
            taskService.complete(task.getId(), variables);
            if (approved) {
                //如果是同意，還需要繼續(xù)走一步
                Task t = taskService.createTaskQuery().processInstanceId(task.getProcessInstanceId()).singleResult();
                taskService.complete(t.getId());
            }
            return ResponseBean.ok("操作成功");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ResponseBean.error("操作失敗");
    }

    /**
     * 請假列表
     * @param name
     * @return
     */
    public ResponseBean searchResult(String name) {
        List<VacationInfo> vacationInfos = new ArrayList<>();
        List<HistoricProcessInstance> historicProcessInstances = historyService.createHistoricProcessInstanceQuery().processInstanceBusinessKey(name).finished().orderByProcessInstanceEndTime().desc().list();
        for (HistoricProcessInstance historicProcessInstance : historicProcessInstances) {
            VacationInfo vacationInfo = new VacationInfo();
            Date startTime = historicProcessInstance.getStartTime();
            Date endTime = historicProcessInstance.getEndTime();
            List<HistoricVariableInstance> historicVariableInstances = historyService.createHistoricVariableInstanceQuery()
                    .processInstanceId(historicProcessInstance.getId())
                    .list();
            for (HistoricVariableInstance historicVariableInstance : historicVariableInstances) {
                String variableName = historicVariableInstance.getVariableName();
                Object value = historicVariableInstance.getValue();
                if ("reason".equals(variableName)) {
                    vacationInfo.setReason((String) value);
                } else if ("days".equals(variableName)) {
                    vacationInfo.setDays(Integer.parseInt(value.toString()));
                } else if ("approved".equals(variableName)) {
                    vacationInfo.setStatus((Boolean) value);
                } else if ("name".equals(variableName)) {
                    vacationInfo.setName((String) value);
                }
            }
            vacationInfo.setStartTime(startTime);
            vacationInfo.setEndTime(endTime);
            vacationInfos.add(vacationInfo);
        }
        return ResponseBean.ok("ok", vacationInfos);
    }
}

五、POJO相關(guān)類

import lombok.Data;

/**
 * 請假條審批
 * @Date
 */
@Data
public class VacationApproveVo {

  private String taskId;
    
    private Boolean approve;
    
    private String name;
}

import lombok.Data;

/**
 * 請假條申請
 * @Date
 */
@Data
public class VacationRequestVo {

    private String name;
    
    private Integer days;
    
    private String reason;
}

import lombok.Data;

/**
 * 響應(yīng)類
 * @Date
 */
@Data
public class ResponseBean {
  
    private Integer status;
    
    private String msg;
    
    private Object data;

    public static ResponseBean ok(String msg, Object data) {
        return new ResponseBean(200, msg, data);
    }


    public static ResponseBean ok(String msg) {
        return new ResponseBean(200, msg, null);
    }


    public static ResponseBean error(String msg, Object data) {
        return new ResponseBean(500, msg, data);
    }


    public static ResponseBean error(String msg) {
        return new ResponseBean(500, msg, null);
    }

    private ResponseBean() {
    }

    private ResponseBean(Integer status, String msg, Object data) {
        this.status = status;
        this.msg = msg;
        this.data = data;
    }
}

import java.util.Date;

import lombok.Data;

/**
 * 請假條DO
 * @Date
 */
@Data
public class VacationInfo {

  private String name;
  
  private Date startTime;
  
  private Date endTime;
  
  private String reason;
  
  private Integer days;
  
  private Boolean status;
}

六、頁面代碼，頁面文件放在resources的templates文件夾下

1.提交請假條申請頁面vacation.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交請假條申請頁面</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Import style -->
    <link rel="stylesheet" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="http://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <h1>開始一個請假流程</h1>
    <table>
        <tr>
            <td>請輸入姓名：</td>
            <td>
                <el-input type="text" v-model="afl.name"/>
            </td>
        </tr>
        <tr>
            <td>請輸入請假天數(shù)：</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>
    </table>
    <el-button type="primary" @click="submit">提交請假申請</el-button>
</div>
<script>
    Vue.createApp(
        {
            data() {
                return {
                    afl: {
                        name: 'test',
                        days: 3,
                        reason: '測試'
                    }
                }
            },
            methods: {
                submit() {
                    let _this = this;
                    axios.post('/vacation', this.afl)
                        .then(function (response) {
                            if (response.data.status == 200) {
                                //提交成功
                                _this.$message.success(response.data.msg);
                            } else {
                                //提交失敗
                                _this.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        }
    ).use(ElementPlus).mount('#app')
</script>
</body>
</html>

2.審批請假條頁面list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>審批請假條頁面</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Import style -->
    <link rel="stylesheet" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="http://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <div>
        <div>請選擇你的身份：</div>
        <div>
            <el-select name="" id="" v-model="identity" @change="initTasks">
                <el-option :value="iden" v-for="(iden,index) in identities" :key="index" :label="iden"></el-option>
            </el-select>
            <el-button type="primary" @click="initTasks">刷新一下</el-button>
        </div>

    </div>
    <el-table border strip :data="tasks">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="days" label="請假天數(shù)"></el-table-column>
        <el-table-column prop="reason" label="請假原因"></el-table-column>
        <el-table-column lable="操作">
            <template #default="scope">
                <el-button type="primary" @click="approveOrReject(scope.row.id,true,scope.row.name)">批準(zhǔn)</el-button>
                <el-button type="danger" @click="approveOrReject(scope.row.id,false,scope.row.name)">拒絕</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
    Vue.createApp(
        {
            data() {
                return {
                    tasks: [],
                    identities: [
                        'managers'
                    ],
                    identity: ''
                }
            },
            methods: {
                initTasks() {
                    let _this = this;
                    axios.get('/vacation/list?identity=' + this.identity)
                        .then(function (response) {
                            _this.tasks = response.data.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                approveOrReject(taskId, approve,name) {
                    let _this = this;
                    axios.post('/vacation/handler', {taskId: taskId, approve: approve,name:name})
                        .then(function (response) {
                            _this.$message.success("審批成功");
                            _this.initTasks();

                        })
                        .catch(function (error) {
                            _this.$message.error("操作失敗");
                            console.log(error);
                        });
                }
            }
        }
    ).use(ElementPlus).mount('#app')
</script>
</body>
</html>

3.已審批請假條查詢頁面search.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>已審批請假條查詢頁面</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Import style -->
    <link rel="stylesheet" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="http://unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 50px">
        <el-input v-model="name" style="width: 300px" placeholder="請輸入用戶名"></el-input>
        <el-button type="primary" @click="search">查詢</el-button>
    </div>

    <div>
        <el-table border strip :data="historyInfos">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="startTime" label="提交時間"></el-table-column>
            <el-table-column prop="endTime" label="審批時間"></el-table-column>
            <el-table-column prop="reason" label="事由"></el-table-column>
            <el-table-column prop="days" label="天數(shù)"></el-table-column>
            <el-table-column label="狀態(tài)">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.status">已通過</el-tag>
                    <el-tag type="danger" v-else>已拒絕</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
<script>
    Vue.createApp(
        {
            data() {
                return {
                    historyInfos: [],
                    name: 'zhangsan'
                }
            },
            methods: {
                search() {
                    let _this = this;
                    axios.get('/vacation/search?name=' + this.name)
                        .then(function (response) {
                            if (response.data.status == 200) {
                                _this.historyInfos=response.data.data;
                            } else {
                                _this.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        }
    ).use(ElementPlus).mount('#app')
</script>
</body>
</html>