二次开发：快速开发申请加班工资审批流程系统（1）

很多时候在公司内部，都要手动填写一些表格，久了之后，也没能去数字化流程化，将一些流程简化和自动化。网上有很多自动化OA的开源流程快速搭建和实现方案，例如springboot开源项目中集成了activity和Flowable 工作流，能够快速开始从页面建立一个流程，建立独立的公司级别租户，完成对应节点的任务，流程全程自动化和可视化，体验较好。项目的开发可以参考该文档https://doc.iocoder.cn/，二开github地址

系统需求

基于上述开源项目，快速开发一个常见的工作中的具体流程，程序员申请加班工资流程，该流程需要经过项目经理pm审批（审批加班合理性）、hr审批（审批加班加班是否符合公司规定）以及财务审批（审批加班工资），然后美滋滋的加班工资久到手了，这里为了简化流程，设计了如下流程图，基于flowable的bpmn2.0的规则设计。这里简化加班申报，需要满足审批完全部流程才能申请到加班工资，如果不满足加班的项目或者加班小于1天，则默认不会走完全流程，拿不到加班工资，这里设计的是走排他网关，只有满足条件表达式中的项目或者加班时长才能走完整个审批流程，否则，整个申请走向结束流程，走不到财务审批流程。下面看看如何实现这个加班工资审批系统。

在这里插入图片描述

定于流程业务表和流程页面

加班申请表字段定义

DROP TABLE IF EXISTS `bpm_oa_wop`;
CREATE TABLE `bpm_oa_wop` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '加班工资申请表单主键',`user_id` bigint NOT NULL COMMENT '申请人的用户编号',`type` tinyint NOT NULL COMMENT '加班项目',`reason` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '加班原因',`start_time` datetime NOT NULL COMMENT '加班开始时间',`end_time` datetime NOT NULL COMMENT '加班结束时间',`day` tinyint NOT NULL COMMENT '加班天数',`result` tinyint NOT NULL COMMENT '申请结果',`process_instance_id` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '流程实例的编号',`creator` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`updater` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',`update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',`deleted` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否删除',`tenant_id` bigint NOT NULL DEFAULT '0' COMMENT '租户编号',PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='申请加班工资业务表单';

有了业务表后，利用项目中代码生成器，快速生成页面和controller、service、sql以及测试用例代码，可以帮助我们节省50%左右的代码开发时间。生成代码和页面见如图所示。主要搞定对该表的简单增删查改，以及页面的表格化展示和搜索。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tC65btbP-1653325847175)(C:\Users\煎饼果子\AppData\Roaming\Typora\typora-user-images\image-20220518224055366.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YnO6U5b2-1653325847176)(C:\Users\煎饼果子\AppData\Roaming\Typora\typora-user-images\image-20220518224202226.png)]$

初始化流程角色和账号

很明显需求中需要不同的部门、角色、岗位等，该开源项目支持租户，可以通过初始化一个公司类型的租户，定义一个租户套餐（套餐页面可以自定义），制定租户的角色可以有多少菜单的权限。在租户基础上新增四种职位，研发人员、Pm、hr和财务，归属于研发、hr和财务部门。角色权限上也做不同的限制。这些开源项目也帮你做好了，开箱即用，下面我们快速创建公司租户、部门、角色以及岗位。这些创建的数据只有该租户可以看到和修改。对租户方案想要更了解的可以移步这里看看该开源项目租户方案如何设计，短短几分钟就能创建部门下不同岗位的用户和角色，不得不说这个角色权限和数据权限的设计很不错，对应模型也简单易懂。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Po94xXb8-1653325847177)(C:\Users\煎饼果子\AppData\Roaming\Typora\typora-user-images\image-20220518234034606.png)]$

前面将了流程图的设计，有了上述角色就可以将流程的关键审批人规则制定，下面从申请到不同的审批正好对应上述四个用户，因为框架现在只支持单人审批，所以只设置了一个用户就可以演练，后续会针对这个进行改进，完成多人审批。

开始发起加班申请

流程的发起可以发起和查看，这就需要三个页面和两个接口，页面分别是填写表单页面用于发起加班流程，该加班流程查看页面和用户加班列表页面。接口是创建流程接口、查看流程接口以及取消流程接口。加班流程页面和查看页面还用来设计流程中表单路由模式，只需将两个页面的地址加入到vue中即可路由跳转，方便流程的快速申请和查看，这点也是框架定义的，非常好的功能设计。

我们利用自动生成的列表代码，可以快速修改下页面，加上申请的按钮操作以及跳转申请页面以及取消申请操作。其中vue.directive是设计的内置的指令（如v-model和v-show）之外的自定义指令。设计了v-hasPermi指令来判断用户对应角色是否可以调用接口权限。

<!-- 新增操作操作工具栏 --><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"v-hasPermi="['bpm:oa-wop:create']">发起申请</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row>/** 新增按钮操作 */handleAdd() {this.$router.push({ path: "/bpm/oa/wop/create"});}<!-- 表数据操作工具栏 --><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-delete" @click="handleCancel(scope.row)"v-hasPermi="['bpm:oa-wop:delete']" v-if="scope.row.result === 1">取消申请</el-button><el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"v-hasPermi="['bpm:oa-wop:query']">详情</el-button><el-button size="mini" type="text" icon="el-icon-edit" @click="handleProcessDetail(scope.row)">审批进度</el-button></template></el-table-column>

表单展示申请加班工资的记录，左上角可以发起申请，进入表达路由，主要是表单的填写和接口的调用，操作可以取消申请和查看详情及进度。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-738xCSHx-1653325847178)(C:\Users\煎饼果子\AppData\Roaming\Typora\typora-user-images\image-20220523223829790.png)]$

审批进度详情页面服用的框架的页面，主要包含三部分，第一部分申请详情的路由，第二部分审批记录，第三部分进度图。第二是获取的flowable的任务审批记录，框架包了一层表结构得到的结果，流程详情这个也是flowable原始表+框架自己的包装的表合起来返回的结果。可以在不同流程中快速复用这个页面。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFd8TNKP-1653325847179)(C:\Users\煎饼果子\AppData\Roaming\Typora\typora-user-images\image-20220523225313653.png)]$

后端代码主要是申请流程接口，其他主要都是借助的flowable开放的接口来实现功能的拓展。

@Override
@Transactional(rollbackFor = Exception.class)
public Long createOaWop(OaWopCreateReqVO createReqVO) {Long userID = getLoginUserId();// 插入业务表long day = DateUtil.betweenDay(createReqVO.getStartTime(), createReqVO.getEndTime(), false);OaWopDO oaWop = OaWopConvert.INSTANCE.convert(createReqVO).setUserId(userID).setDay((int) day).setResult(BpmProcessInstanceResultEnum.PROCESS.getResult());oaWopMapper.insert(oaWop);// 发起 BPM 流程 生成流程实例Map<String, Object> processInstanceVariables = new HashMap<>();// 放入条件参数，流程图条件表达式会用到改变量processInstanceVariables.put("workTime ", day);processInstanceVariables.put("project", createReqVO.getType());// 调用flowable api封装接口String processInstanceId = processInstanceApi.createProcessInstance(userID,new BpmProcessInstanceCreateReqDTO().setProcessDefinitionKey(PROCESS_KEY).setVariables(processInstanceVariables).setBusinessKey(String.valueOf(oaWop.getId())));// 将工作流的编号，更新到 OA 请假单中oaWopMapper.updateById(new OaWopDO().setId(oaWop.getId()).setProcessInstanceId(processInstanceId));return oaWop.getId();
}

下面的代码流程详细描述了每个类的工作流程，二开框架结合flowable框架用来大量的监听模式来完成业务的耦合。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrPHDAAk-1653325847180)(C:\Users\煎饼果子\AppData\Roaming\Typora\typora-user-images\image-20220524010107130.png)]$