# Vue3＋Flowable：业务表单接进审批，怎样让申请和待办看到同一份明细？

维修申请总额显示 **1,280 元**，申请人刚填完两行费用，审批人打开待办，表格却是空的。先看网络请求，详情接口已经返回两行。再看 Vue 页面，数据到的时候，负责画明细的表格还没挂载。

这个问题出现在 RuoYi Office 的设备维修教学单上。修复后，申请页、财务待办、审批通过后的原单都能核对这两行。下面沿实际办理过的单号 `OA909-2026102100001`，说明业务明细怎样进入审批详情，以及接口有数据时，如何把问题缩小到表格首次渲染。

![Vue3与Flowable的PPT主图，展示业务原单同时供申请页和待办详情使用](https://developer.qcloudimg.com/http-save/yehe-7872026/379667c7474a5cef0b987cbb2deaeb33.png)

## 先用同一张单，判断数据丢在哪一段

这张单是研发部会议室投影仪的维修申请。普通账号填了两条明细，保存后取得单号，再提交一次。下面第一张是已保存的草稿，第二张是原实例修复后在财务待办打开的效果。

| 维修项目 | 数量 | 预估单价 | 小计 |
| --- | ---: | ---: | ---: |
| 散热组件更换 | 1 | 980.00 元 | 980.00 元 |
| 现场检测与调试 | 1 | 300.00 元 | 300.00 元 |
| **合计** | | | **1,280.00 元** |

![历史教学实操，申请人保存的草稿保留两条维修明细和1280元预算](https://developer.qcloudimg.com/http-save/yehe-7872026/d4f64dc03183cf55a4b16f28bbdc607b.png)

![历史教学实操，财务打开同一单号的待办，两行维修费用均正常显示](https://developer.qcloudimg.com/http-save/yehe-7872026/a1de3e233ffda4d7509f57f533536b8a.png)

复查时，比对单号和两行项目名，比只看总额有用。总额在主表，项目行在明细表，二者可以分别加载。原教学排障记录里，审批首开时详情接口已经返回两行，排查才从数据库转向了前端。现存截图展示的是修复后的实际页面，空表阶段依据当时的排障记录和下文的本地复现说明。

## 把业务主键传到待办，详情页自己取明细

这类自研表单在模型里选择「业务表单」。**发起路由**负责把申请人带到可填单页面，本例是 `/oa/custom-apply/tutorial-repair-info`。**查看组件**填 `oa/tutorial/tutorialrepair/info/index`，由审批中心注册并内嵌。两处配置指向不同入口，但详情最终按同一个业务 ID 取数据。

![历史教学实操，流程模型业务表单设置显示发起路由和查看组件路径](https://developer.qcloudimg.com/http-save/yehe-7872026/1bc1bf7f8cbc40b15523fe22dd2e3fba.png)

提交服务先保存主表及明细，再用单据主键作为 `businessKey` 发起流程。Flowable 返回的流程实例 ID 则写回业务主表。这个往返关系解决了两个方向的查询。审批中心能从实例找到原单，业务页面也能从原单回查审批轨迹。课程提交分支中，建立关联的代码如下。

```java
String processInstanceId = processInstanceApi.submitProcessInstance(Long.valueOf(saveReqVO.getCreator()),
        new BpmProcessInstanceCreateReqDTO()
                .setProcessDefinitionKey(OaBillTypeEnum.OA_TUTORIAL_REPAIR_BILL.getProcessDefinitionKey())
                .setVariables(processInstanceVariables)
                .setStartUserSelectAssignees(saveReqVO.getStartUserSelectAssignees())
                .setBusinessKey(String.valueOf(bill.getId()))
).getCheckedData();
tutorialRepairBillMapper.updateById(new TutorialRepairBillDO()
        .setId(bill.getId())
        .setProcessInstanceId(processInstanceId));
```

本例的业务 ID 是 `1`，流程 Key 是 `oa_tutorial_repair`，`OA909-2026102100001` 是给人查的业务单号。当前通用审批详情会把流程的 `businessKey` 传给查看组件的 `id`。如果把业务单号或流程实例 ID 当成组件的 `id`，首先要修正这层映射。

课程表单的普通详情用 `/get`，审批详情走 `/get-for-bpm`。两边都调用同一个业务详情服务，按 `bill_id` 读取明细，并带回附件。审批专用接口在有流程实例和登录用户时校验参与者身份。联调时要分别查“拿到了哪张单”和“当前人能否查看”，不能用申请人的菜单可见性代替待办入口的授权检查。

金额也沿这条业务数据链走。申请页的小计是录入反馈，服务端用 `BigDecimal` 重新计算数量乘单价，逐行四舍五入到两位小数后汇总，再将总额写回主表。因此审批页看到的 1,280 元可以回到两条持久化的行核算。历史负向验收还记录了已通过单据修改和非制单人修改均被拒绝，主表及明细未变化。

## 接口有两行，为什么 `nextTick()` 之后表格还是空的？

先看真正控制挂载的条件。课程组件的 `BasicForm` 用 `v-if="initialized"` 控制，`ItemGrid` 位于它里面。初始化先等待 `loadData()` 和字段权限加载，最后才把 `initialized` 设为 `true`。因此 `loadData()` 内部即使等了一次 `nextTick()`，也只是等已经排队的 Vue 更新。此时打开表格的条件还没变，组件实例仍可能没就位。

课程修复保留了两条更新路径。先把数据写入 Grid 配置，供首次挂载读取。如果 Grid 已经存在，再显式刷新实例。课程归档代码如下。

```ts
async function reloadGridData(
  data: TutorialRepairBillApi.TutorialRepairItem[],
) {
  gridApi.setGridOptions({ data });
  await nextTick();
  if (gridApi?.grid) {
    await gridApi.grid.reloadData(data);
  }
}
```

这里先写 `setGridOptions({ data })` 是关键。当前 Vben 封装把它合并进 `gridOptions` 的状态，表格挂载时从配置取初始数据。只调 `reloadData` 依赖实例已经可用，无法给未来才挂载的表格留下初始行。

这次把课程函数原样取出，用项目里的 Vue 调度器和两行历史数据做了一个独立复现，Grid 实例用替身模拟。对照组只尝试刷新实例，挂载后是 **0 行**。采用课程代码先缓存，挂载后是 **2 行、1,280 元**。这项复现验证的是前端时序，原单和审批结果来自历史教学实操。

还有一个移植时容易漏掉的分支。当前封装里 `grid` 初始值可以是空对象，判断对象存在并不代表 `reloadData` 已经可调用。把空对象放进同一复现时，归档函数先保住了两行配置，但刷新调用出现 `TypeError`。新表单可以把条件收紧到方法是否可调用，例如 `await gridApi.grid?.reloadData?.(data)`。在复现里，这个写法仍回显两行，且没有抛错。这是本篇复现后的写法建议，历史教学截图使用的是课程归档版本。

## 待办办完一人，原单为什么还在审批中？

这张单的模型是部门负责人后接财务复核。财务节点分给了财务角色的三个成员，办理方式是 **依次审批**，即 `approveMethod=4`。所以负责人和财务专员各点一次通过后，实例仍有后续待办。实际记录显示，核算会计和出纳也办完后，流程才结束。流程设计图上是一个财务节点，运行轨迹里能看到它产生的三次办理。

![历史教学实操，流程模型展示发起人、部门负责人、财务复核及结束节点](https://developer.qcloudimg.com/http-save/yehe-7872026/4ec50b1d1ac33c86da2452c2de9940e6.png)

![历史教学实操，同一单号的审批轨迹显示部门负责人及三位财务成员办理完成](https://developer.qcloudimg.com/http-save/yehe-7872026/c761e99b73f323b36eb9c19ec51c7e54.png)

最后，业务状态回写到原单。课程的 `updateProcessStatus` 将流程回传的 `businessKey` 转回业务 ID，按这个 ID 更新主表的 `process_status`。申请人重开原单后，看到通过状态，两行项目和 1,280 元都保留。这里完成的是教学维修申请审批，状态通过表示这笔申请办结。

![历史教学实操，申请人回查已通过的原单，仍可见两行费用和1280元](https://developer.qcloudimg.com/http-save/yehe-7872026/4d0e989013f6ffc9bcf3ad6a7ddf1267.png)

自研表单接入后，可以用同一张单验收三次。草稿重开查行数和金额，第一次进待办查 `businessKey` 与明细首屏，实例结束后查剩余任务和业务状态。出现“有金额没明细”，先看同一 ID 的详情响应，再看表格挂载。出现“点了通过还在审批中”，先看后续任务，再查状态回写。两类问题都有明确的落点，可以直接查到是哪一层出了差异。

维修申请总额显示 1,280 元，申请人刚填完两行费用，审批人打开待办，表格却是空的。先看网络请求，详情接口已经返回两行。再看 Vue 页面，数据到的时候，负责画明细的表格还没挂载。

Vue3＋Flowable：业务表单接进审批，怎样让申请和待办看到同一份明细？

用一张实际办完的设备维修教学单，拆解业务 ID、审批详情组件和 VxeGrid 首次挂载，复现接口有两行但待办表格为空的原因。

前端

后端

开发工具

Vue3+Flowable审批集成中，业务表单与审批详情共享同一数据源，通过businessKey关联流程实例与业务主键。当接口已返回数据但表格为空时，问题根源在表格组件未挂载，需先用setGridOptions缓存数据供首次渲染，再显式reloadData刷新。同时注意依次审批模式下多节点流转，需校验业务状态回写逻辑。

代码解释

数据库

路由

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue3+Flowable审批集成中，业务表单与审批详情共享同一数据源，通过businessKey关联流程实例与业务主键。当接口已返回数据但表格为空时，问题根源在表格组件未挂载，需先用setGridOptions缓存数据供首次渲染，再显式reloadData刷新。同时注意依次审批模式下多节点流转，需校验业务状态回写逻辑...

Vue3＋Flowable：业务表单接进审批，怎样让申请和待办看到同一份明细？-腾讯云开发者社区-腾讯云

Vue3＋Flowable：业务表单接进审批，怎样让申请和待办看到同一份明细？

Vue3＋Flowable：业务表单接进审批，怎样让申请和待办看到同一份明细？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐