yudao-cloud 开发指南 yudao-cloud 开发指南
  • 萌新必读
  • 后端手册
  • 微服务手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
单体版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读
  • 后端手册
  • 微服务手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
单体版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读

    • 简介
    • 交流群
    • 视频教程
    • 功能列表
    • 快速启动(后端项目)
    • 快速启动(前端项目)
    • 接口文档
    • 技术选型
    • 项目结构
    • 代码热加载
    • 一键改包
    • 迁移模块(适合新项目)
    • 删除功能(以租户为例)
    • 表结构变更(版本升级)
    • 国产信创数据库(DM 达梦、大金、OpenGauss)
    • 内网穿透
    • 面试题、简历模版、简历优化
    • 项目外包
  • 后端手册

    • 新建服务
    • 代码生成【单表】(新增功能)
    • 代码生成【主子表】
    • 代码生成(树表)
    • 功能权限
    • 数据权限
    • 用户体系
    • 三方登录
    • OAuth 2.0(SSO 单点登录)
    • SaaS 多租户【字段隔离】
    • SaaS 多租户【数据库隔离】
    • WebSocket 实时通信
    • 异常处理(错误码)
    • 参数校验、时间传参
    • 分页实现
    • VO 对象转换、数据翻译
    • 文件存储(上传下载)
    • Excel 导入导出
    • 操作日志、访问日志、异常日志
    • MyBatis 数据库
    • MyBatis 联表&分页查询
    • 多数据源(读写分离)
    • Redis 缓存
    • 本地缓存
    • 异步任务
    • 分布式锁
    • 幂等性(防重复提交)
    • 请求限流(RateLimiter)
    • HTTP 接口签名(防篡改)
    • 单元测试
    • 验证码
    • 工具类 Util
    • 数据库文档
  • 微服务手册

    • 微服务调试(必读)
    • 注册中心 Nacos
    • 配置中心 Nacos
    • 服务网关 Spring Cloud Gateway
    • 服务调用 Feign
    • 定时任务 XXL Job
    • 消息队列(内存)
    • 消息队列(Redis)
    • 消息队列(RocketMQ)
    • 消息队列(RabbitMQ)
    • 消息队列(Kafka)
    • 消息队列(Cloud)
    • 分布式事务 Seata
    • 服务保障 Sentinel
  • 工作流手册

    • 工作流演示
    • 功能开启
    • 工作流(达梦适配)
    • 审批接入(流程表单)
    • 审批接入(业务表单)
      • 1. 业务接入(业务表单)
        • 1.0 第零步:业务开发
        • 2.1 第一步:定义流程
        • 2.2 第二步:发起流程
        • 2.3 第三步:审批流程
      • 2. 选择业务表单、流程表单?
      • 3. 业务表单是如何集成的?
    • 流程设计器(BPMN)
    • 流程设计器(钉钉、飞书)
    • 选择审批人、发起人自选
    • 会签、或签、依次审批
    • 流程发起、取消、重新发起
    • 审批通过、不通过、驳回
    • 审批加签、减签
    • 审批转办、委派、抄送
    • 执行监听器、任务监听器
    • 流程表达式
    • 流程审批通知
  • 大屏手册

    • 报表设计器
    • 大屏设计器
  • 支付手册

    • 功能开启
    • 支付宝支付接入
    • 微信公众号支付接入
    • 微信小程序支付接入
    • 支付宝、微信退款接入
    • 钱包充值、支付、退款
    • 模拟支付、退款
  • 会员手册

    • 功能开启
    • 微信公众号登录
    • 微信小程序登录
    • 微信小程序订阅消息
    • 微信小程序码
    • 会员用户、标签、分组
    • 会员等级、积分、签到
  • 商城手册

    • 商城演示
    • 功能开启
    • 商城装修
    • 在线客服
    • 【商品】商品分类
    • 【商品】商品属性
    • 【商品】商品 SPU 与 SKU
    • 【商品】商品评价
    • 【交易】购物车
    • 【交易】交易订单
    • 【交易】售后退款
    • 【交易】快递发货
    • 【交易】门店自提
    • 【交易】分销返佣
    • 【营销】优惠劵
    • 【营销】积分商城
    • 【营销】拼团活动
    • 【营销】秒杀活动
    • 【营销】砍价活动
    • 【营销】满减送活动
    • 【营销】限时折扣
    • 【营销】内容管理
    • 【统计】会员、商品、交易统计
  • ERP手册

    • ERP 演示
    • 功能开启
    • 【产品】产品信息、分类、单位
    • 【库存】产品库存、库存明细
    • 【库存】其它入库、其它出库
    • 【库存】库存调拨、库存盘点
    • 【采购】采购订单、入库、退货
    • 【销售】销售订单、出库、退货
    • 【财务】采购付款、销售收款
  • CRM手册

    • CRM 演示
    • 功能开启
    • 【线索】线索管理
    • 【客户】客户管理、公海客户
    • 【商机】商机管理、商机状态
    • 【合同】合同管理、合同提醒
    • 【回款】回款管理、回款计划
    • 【产品】产品管理、产品分类
    • 【通用】数据权限
    • 【通用】跟进记录、待办事项
  • AI大模型手册

    • AI 大模型演示
    • 功能开启
    • AI 聊天对话
    • AI 绘画创作
    • AI 知识库
    • AI 音乐创作
    • AI 写作助手
    • AI 思维导图
    • AI 工具(function calling)
    • AI 工作流
    • Dify 工作流
    • FastGPT 工作流
    • Coze 智能体
    • 【模型接入】OpenAI
    • 【模型接入】通义千问
    • 【模型接入】DeepSeek
    • 【模型接入】字节豆包
    • 【模型接入】腾讯混元
    • 【模型接入】硅基流动
    • 【模型接入】MiniMax
    • 【模型接入】月之暗灭
    • 【模型接入】百川智能
    • 【模型接入】文心一言
    • 【模型接入】LLAMA
    • 【模型接入】智谱 GLM
    • 【模型接入】讯飞星火
    • 【模型接入】微软 OpenAI
    • 【模型接入】谷歌 Gemini
    • 【模型接入】Stable Diffusion
    • 【模型接入】Midjourney
    • 【模型接入】Suno
  • IoT物联网手册

    • 功能开启
  • 公众号手册

    • 功能开启
    • 公众号接入
    • 公众号粉丝
    • 公众号标签
    • 公众号消息
    • 自动回复
    • 公众号菜单
    • 公众号素材
    • 公众号图文
    • 公众号统计
  • 系统手册

    • 短信配置
    • 邮件配置
    • 站内信配置
    • 数据脱敏
    • 敏感词
    • 地区 & IP 库
  • 运维手册

    • 开发环境
    • Linux 部署
    • Docker 部署
    • Jenkins 部署
    • 宝塔部署
    • HTTPS 证书
    • 服务监控
  • 前端手册 Vue 3.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
    • CRUD 组件
    • 国际化
    • IDE 调试
    • 代码格式化
  • 前端手册 Vue 2.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
  • 更新日志

    • 【v2.5.0】开发中...
    • 【v2.4.2】2025-04-12
    • 【v2.4.1】2025-02-09
    • 【v2.4.0】2024-12-31
    • 【v2.3.0】2024-10-07
    • 【v2.2.0】2024-08-02
    • 【v2.1.0】2024-05-05
    • 【v2.0.1】2024-03-01
    • 【v2.0.0】2024-01-26
    • 【v1.9.0】2023-12-01
  • 开发指南
  • 工作流手册
芋道源码
2022-03-07
目录

审批接入(业务表单)

相关视频:

  • 23、如何实现 OA 请假的发起? (opens new window)
  • 24、如何实现 OA 请假的审批? (opens new window)

本文接 《审批接入(流程表单)》,讲解的是「业务接入(业务表单)」的流程:业务需建立独立的数据库表,并开发对应的表单、详情界面。

整个过程,还是:

  1. 定义流程:【管理员】新建流程、设计流程模型、并设置用户任务的审批人,最终发布流程
  2. 发起流程:【员工】选择流程,并发起流程实例
  3. 审批流程:【审批人】接收到流程任务,审批结果为通过或不通过

示例流程

# 1. 业务接入(业务表单)

根据业务需要,业务通过建立独立的数据库表(业务表)记录申请信息,而流程引擎只负责推动流程的前进或者结束。两者需要进行双向的关联:

  • 每一条业务表记录,通过它的流程实例的编号( process_instance_id )指向对应的流程实例
  • 每一个流程实例,通过它的业务键( BUSINESS_KEY_ ) 指向对应的业务表记录

以项目中提供的 OALeave (opens new window) 请假举例子,它的业务表 bpm_oa_leave 和流程引擎的流程实例的关系如下图:

请假单数据库表

也因为业务建立了独立的业务表,所以必须开发业务表对应的列表、表单、详情页面。不过,审核相关的功能是无需重新开发的,原因是业务表已经关联对应的流程实例,流程引擎审批流程实例即可。

下面,我们以项目中的 OALeave (opens new window) 为例子,详细讲解下业务表单的开发与使用的过程。

# 1.0 第零步:业务开发

# 1.0.1 新建业务表

新建业务表 bpm_oa_leave,建表语句如下:

CREATE TABLE `bpm_oa_leave` (
  `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 '请假天数',
  `status` 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='OA 请假申请表';

重点是两个字段:

  • process_instance_id 字段,关联流程引擎的流程实例对应的 ACT_HI_PROCINST 表的 PROC_INST_ID_ 字段
  • status 字段,请假结果,需要通过 Listener 监听回调结果,稍后来看看

# 1.0.2 【后端】实现业务逻辑

实现业务表的【后端】业务逻辑,具体代码可以看看如下两个类:

  • BpmOALeaveController (opens new window)
  • BpmOALeaveServiceImpl (opens new window)

重点是看流程发起的逻辑,它定义了 /bpm/oa/leave/create 给业务的表单界面调用,UML 时序图如下:

后续时序图

具体的实现代码比较简单,如下图所示:

BpmOALeaveServiceImpl 创建流程的逻辑

  • PROCESS_KEY 静态变量:是业务对应的流程模型的编号,稍后会进行创建编号为 oa_leave 的流程模型。
  • BpmProcessInstanceApi (opens new window) 定义了 #createProcessInstance(...) 方法,用于创建流程实例,业务无需关心底层是 Flowable 引擎,还是 Activiti、Camunda 引擎。

# 1.0.3 【前端】实现业务逻辑

实现业务表的【前端】业务逻辑,具体代码可以看看如下三个页面:

  • 请假发起界面:leave/create.vue (opens new window)
  • 请假详情界面:leave/detail.vue (opens new window)
  • 请假列表界面:leave/index.vue (opens new window)

另外,在 router/modules/remaining.ts (opens new window) 中定义 create.vue 和 detail.vue 的路由,配置如下:

{
    path: '/bpm',
    component: Layout,
    name: 'bpm',
    meta: {
      hidden: true
    },
    children: [
      {
        path: 'oa/leave/create',
        component: () => import('@/views/bpm/oa/leave/create.vue'),
        name: 'OALeaveCreate',
        meta: {
          noCache: true,
          hidden: true,
          canTo: true,
          title: '发起 OA 请假',
          activeMenu: '/bpm/oa/leave'
        }
      },
      {
        path: 'oa/leave/detail',
        component: () => import('@/views/bpm/oa/leave/detail.vue'),
        name: 'OALeaveDetail',
        meta: {
          noCache: true,
          hidden: true,
          canTo: true,
          title: '查看 OA 请假',
          activeMenu: '/bpm/oa/leave'
        }
      }
    ]
}

为什么要做独立的 `create.vue` 和 `index.vue` 页面?

  • 创建流程时,需要跳转到 create.vue 页面,填写业务表的信息,才能提交流程。
  • 审批流程时,需要跳转到 detail.vue 页面,查看业务表的信息。

# 1.0.4 【实现】实现审批结果的监听

审批结束时(例如说流程实例最终被审批通过、不通过、取消),后端需要监听审批结果,然后更新业务表的状态。

具体可见 BpmOALeaveStatusListener (opens new window) 监听器,它实现流程引擎定义的 BpmProcessInstanceStatusEventListener (opens new window) 抽象类,在流程实例结束时,回调通知它最终的结果是通过还是不通过。代码如下图:

BpmOALeaveStatusListener 监听结果

友情提示:BpmProcessInstanceStatusEventListener 是什么呢?

BpmProcessInstanceStatusEventListener 是我们框架自己封装的一个监听器,用于监听流程实例的最终结果。在流程实例结束时,会回调通知它。

如果你自己的业务接入工作流,并且需要监听审批结果,必须继承它,实现自己的监听器!!!


至此,我们了解了 OALeave 使用业务表单所涉及到的开发,下面我们来定义对应的流程、发起该流程、并审批该流程。

友情提示:从这一步开始,和「1. 请假流程【流程表单】」的流程基本是一致的,所以重点还是上面。

# 2.1 第一步:定义流程

登录账号 admin、密码 admin123 的用户,扮演【管理员】的角色,进行流程的定义。

# 1.1.1 新建流程

访问 [工作流程 -> 流程管理 -> 流程模型] 菜单,点击「新建流程」按钮,填写流程标识、流程名称。如下图所示:

新建流程

注意,流程标识需要填 oa_leave。因为在 BpmOALeaveServiceImpl 类中,发起流程的标识是 oa_leave。

# 1.1.2 修改流程

点击「修改流程」按钮,配置表单类型为业务表单,填写表单提交路由为 /bpm/oa/leave/create(用于发起流程时,跳转的业务表单的路由)、表单查看路由为 /bpm/oa/leave/detail(用于在流程详情中,点击查看表单的路由)。如下图所示:

修改流程

友情提示:注意!!!`/bpm/oa/leave/create` 和 `/bpm/oa/leave/detail`,都是相对 `/views` 开始的 Vue 文件的路径!!!

# 1.1.3 设计流程

① 点击「设计流程」按钮,在线设计请假流程模型,包含两个用户任务:领导审批、HR 审批。如下图所示:

设计流程

可以点击 oa_leave_bpmn.XML 进行下载,然后点击「打开文件」按钮,进行导入。

② 点击图中的“领导审批”,规则类型为“流程表达式”,流程表达式为 ${bpmTaskAssignLeaderExpression.calculateUsers(execution, 1)}。如下图所示:

设置审批人 - 领导审批

友情提示:该流程表达式的作用是,流程发起人的一级领导。

为什么呢?这块我们在 《流程表达式》 详细讲解。

点击图中的“HR 审批”,规则类型为“岗位”,指定岗位为“人力资源”。如下图所示:

设置审批人 - HR 审批

之后,点击右上角的「保存模型」按钮,完成流程模型的设计。

③ 点击「发布流程」按钮,把定义的流程模型部署出去。部署成功后,就可以发起该流程了。

# 2.2 第二步:发起流程

登录账号 admin、密码 admin123 的用户,扮演【员工】的角色,进行流程的发起。

① 发起业务表单请假流程,两种路径:

  1. 访问 [工作流程 -> 审批中心 -> 发起流程] 菜单,选择“OA 请求”流程,会跳转到流程模型 oa_leave 配置的表单提交路由。 路径一:我的流程 -> 发起流程

  2. 访问 [工作流程 -> OA 示例 -> 请假查询] 菜单,点击「发起请假」按钮。 路径二:请假查询 -> 发起请假

② 填写一个小于等于 3 天的请假,只会走【领导审批】任务;填写一个大于 3 天的请假,在走完【领导审批】任务后,会额外走【HR 审批】任务。

后续的流程,和 审批接入(流程表单) 是基本一致的,这里就不重复赘述,当然你还是要试着跑一跑,了解整个的过程。

# 2.3 第三步:审批流程

略~自己跑

  • 登录账号 test、密码 test123 的用户,扮演【审批人】的角色,进行请假流程的【领导审批】任务
  • 登录账号 hrmgr、密码 hr123 的用户,扮演【审批人】的角色,进行请假流程的【HR 审批】任务

# 2. 选择业务表单、流程表单?

流程表单,适合简单业务,无需开发的那种。大多数场景下,我们还是选择业务表单,例如说:

  • 《CRM 手册 —— 【合同】合同管理、合同提醒》 的合同审批
  • 《CRM 手册 —— 【回款】回款管理、回款计划》 的回款审批

也就是说,审批只是业务的一个环节,而不是整个业务的所有。所以,我们选择业务表单,是为了更好的支持业务的复杂度。

# 3. 业务表单是如何集成的?

① 流程发起时,会跳转流程模型配置的“表单提交路由”,代码如下图所示:

业务表单 - 发起

② 流程详情时,需要展示业务表单详情时,通过 Vue3 异步组件 (opens new window) 特性,将展示流程模型配置的“表单查看路由”,代码如下图所示:

业务表单 - 详情

审批接入(流程表单)
流程设计器(BPMN)

← 审批接入(流程表单) 流程设计器(BPMN)→

Theme by Vdoing | Copyright © 2019-2025 芋道源码 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×