SpringBoot+Flowable 移动审批实战：UniApp 待办详情如何把业务单据、viewType 与底栏按钮嵌进同一页

SpringBootFlowable 移动审批实战UniApp 待办详情如何把业务单据、viewType 与底栏按钮嵌进同一页演示地址http://ruoyioffice.com | 源码1·GitHubruoyi-office | 源码2·GitCoderuoyi-office | 源码3·Giteeruoyi-office | 微信17156169080备注「RuoYi Office」PC 上审批详情可以左右分栏、动态挂业务组件手机屏幕只有一列却要同时装下「流程头、业务单、进度、通过/拒绝/更多」。很多人一上来就拆成十几个页面结果状态一乱、按钮错位、小程序包体积爆炸。本文讲 RuoYi Office 怎么用Spring Boot Flowable 同一套/admin-api/bpm在 UniApp 里把移动审批收成一个详情页 一个 viewType 门禁。▲ 全景上层 UniApp 四 Tab 工作台 → 中层同一详情页头/单/轨迹/底栏→ 底层 Spring Boot Flowable引言移动审批真正难的是「同一页多身份」同一条流程实例可能被四种身份打开viewType入口用户心智底栏期望todo待办我要办通过 / 拒绝 / 转办 / 退回…my我的我发起的审批中可撤回驳回/撤回后可重提done已办我审过的条件满足时可取回copy抄送知会我的通常只读无办理按钮如果为每种身份各做一套页面业务表单会复制四遍如果完全不管来源又会出现「抄送人看到通过按钮」「已办里误点拒绝」。正确做法是路由只带id/taskId/viewType详情页按门禁切换底栏中间业务区与轨迹区复用。一、三端同源先别在 App 里直连 Flowable移动端、PC 管理端、H5 全部走GET /admin-api/bpm/process-instance/get-approval-detail ?processInstanceId... taskId...UniApp API 层封装exportfunctiongetApprovalDetail(params:{processDefinitionId?:stringprocessInstanceId?:stringactivityId?:stringtaskId?:stringprocessVariablesStr?:string}){returnhttp.getApprovalDetail(/bpm/process-instance/get-approval-detail,params)}一次返回通常包含processInstance名称、发起人、状态、businessKeyprocessDefinition表单类型NORMAL / CUSTOM、定义信息activityNodes审批进度时间线formFieldsPermission字段可写 / 只读 / 隐藏todoTask当前待办含buttonsSettingApp 不解析 BPMN XML不自己算候选人——权限、租户、按钮开关都在服务端收敛和 PC 待办详情对齐。▲ 移动审批工作台待办 / 我的 / 已办 / 抄送点进详情时把 viewType 带上二、详情页骨架头 单 轨迹 底栏页面路径约定/pages-bpm/processInstance/detail/index ?id{processInstanceId} taskId{taskId?} viewTypetodo|my|done|copy from{可选业务列表回跳}结构对应四个区块┌─────────────────────────────┐ │ Navbar审批详情 │ ├─────────────────────────────┤ │ 流程头标题 / 发起人 / 时间 │ │ 状态印章盖章 │ ├─────────────────────────────┤ │ FormDetailNORMAL 或 CUSTOM│ ├─────────────────────────────┤ │ 审批进度 Timeline │ ├─────────────────────────────┤ │ 底栏操作按钮 / 撤回 / 提交 │ └─────────────────────────────┘流程头用状态枚举映射静态 SVG 印章审批中 / 通过 / 不通过 / 已撤回…手机上一眼能读出「这单现在什么态」比纯文字 Tag 更适合拇指浏览。▲ 实机OA 通用报销申请 · 已撤回印章 · 表单可编辑 · 底栏「提交」——同一详情页按状态切换动作三、viewType 门禁底栏三选一而不是按钮大杂烩加载详情后的核心分支逻辑摘要constvtprops.viewType||todoconststatusdata.processInstance.statusconstisResubmitStatusstatusREJECT||statusWITHDRAW||statusNOT_STARTif(isResubmitStatus(vtmy||vttodo)){showResubmittrue// 底栏提交}elseif(vtmystatusRUNNING){showRevoketrue// 底栏撤回}elseif(vtdonetaskId){loadWithdrawStatus()// 可能显示取回}elseif(vttodo){if(data.todoTask){operationButton.init(...)// 底栏通过/拒绝/更多}elseif(statusRUNNING){showRevoketrue// 发起人待办落回开始节点时的兜底}}要点普通审批操作组件与「撤回 / 重提 / 取回」互斥渲染避免底栏同时出现两套语义冲突的按钮。from参数支持从业务列表如用印列表进详情办完后回业务页而不是死跳审批 Tab——小程序里裸switchTab容易闪首页项目里统一用navigateToBpmWorkbench。表单是否可编辑showResubmit或字段权限含「可写(2)」时打开。这套门禁把「审批反悔」三态也接进来了撤回 / 取回 / 重提下一篇会专门拆状态机本文先记住移动端详情页是状态机的 UI 投影。四、buttonsSetting底栏不是写死「通过拒绝」待办场景下operation-button.vue读取todoTask.buttonsSetting右侧最多两个主按钮通常拒绝plain danger 通过primary左侧最多两个图标操作转办、委派、退回、加签、抄送…超出进「更多」ActionSheetObject.keys(task.buttonsSetting||{}).forEach((key){constoperationTypeNumber(key)if(task.buttonsSetting[key].enableisHandleTaskStatus()!rightOperationTypes.includes(operationType)){// 左侧满 2 个 → 进更多}})显示名优先用模型配置的displayName比如把「通过」改成「同意付款」与 PC 办理区同源。操作页继续拆分子路由意见填写、选人转办、选节点退回避免详情页堆满弹层导致小程序 setData 抖动。五、CUSTOM 业务单小程序不能动态组件就静态 v-ifPC Web 可用registerComponent(formCustomViewPath)动态挂业务详情UniApp 微信小程序不支持任意动态组件。移动端约定在bpm-menu-config或等价菜单/模型配置声明mobileViewComponent标识在form-detail.vue静态 import并v-if匹配template v-ifresolvedFormType BpmModelFormType.CUSTOM LeaveDetail v-ifviewComponent LeaveDetail ... / SealApplyDetail v-else-ifviewComponent SealApplyDetail :todo-tasktodoTask :view-typeviewType ... / LeaveCancelDetail v-else-ifviewComponent LeaveCancelDetail ... / !-- 用车 / 会议室 / 入职转正离职调动 / 合同 … -- /template新增业务单三步配标识 → import → 加一条v-else-if。个别单据用印归还、销假还要把todoTask/viewType下传才能在「申请人归还印章」这类节点打开局部可编辑区——这是移动端相对 PC 更「显式」的代价也是包体积可控的前提。NORMAL 流程表单则走动态 schema 渲染字段权限直接吃formFieldsPermission。六、审批进度手机上的「信任来源」业务同事在手机上最常问的不是「按钮在哪」而是「现在卡在谁」。详情页中部ProcessInstanceTimeline吃activityNodes▲ 时间线可见多次「发起人撤回」意见与再次发起移动端也能讲清流程故事轨迹与底栏解耦即使当前是只读抄送进度区仍然完整——知情不办理。评论区可后续扩展但不阻塞办理闭环。七、和 PC 详情的差异清单落地对照维度PCVbenUniApp业务组件加载动态registerComponent静态v-if映射布局左表单右图/轨迹单列卡片堆叠入口参数路由 query 类似强制带viewType底栏横向工具条固定 footer 更多设计器BPMN / SIMPLE不做重设计只办理API/admin-api/bpm/**同源移动端砍掉的是设计器不是流程能力——加签、退回、抄送、超时策略仍由同一 Flowable 定义驱动。八、端到端体验建议打开演示环境移动端 / H5进入「审批」Tab看四入口。用有待办的账号打开一条viewTypetodo确认底栏来自buttonsSetting。用发起人打开「我的」里审批中单据应出现撤回而不是通过。撤回或驳回后回到同一详情表单可编辑底栏变「提交」。开发新增一张 CUSTOM 单只改配置 form-detail一条分支不新开详情壳。在线演示http://ruoyioffice.com源码仓库GitHub | GitCode | Gitee常见问题FAQ为什么必须传 viewType不能只靠后端判断身份吗后端仍会校验权限viewType解决的是UI 语义同一用户可能既是发起人又是审批人。入口明确后底栏不会在「撤回」和「通过」之间歧义闪烁。小程序主包会不会被业务详情撑爆业务详情放在pages-bpm分包跨分包组件按规范?async或上收主包公共件主包体积用pnpm check:mp-size卡死在 2MB 内。操作成功后为什么不直接 switchTab部分端上switchTab会先闪首页。项目统一navigateToBpmWorkbench并uni.$emit(bpm-list-refresh)刷新列表。移动端要不要独立一套审批 API不要。独立 API 双倍权限漏洞面。坚持/admin-api/bpmToken、租户、数据权限与 PC 一致。和「多人审批 / 超时 / 抄送」文章什么关系那些是引擎与节点能力本文是手机上的承载壳同一详情如何嵌单、如何按入口露按钮。结语移动审批做成「能点通过」很容易做成四入口共用一页、业务单可嵌、底栏跟模型配置走、小程序体积可控才是产品能长期加单据的骨架。RuoYi Office 的选择很克制Spring Boot Flowable 出详情聚合接口UniApp 用 viewType 门禁投影状态CUSTOM 用静态映射换可预期的包体。你们团队移动端现在是「只能看不能办」还是已经卡在「业务单嵌不进详情」欢迎评论区交流。想要体验 RuoYi Office 的强大功能在线演示http://ruoyioffice.com/web/账号 admin / admin123源码仓库GitHub | GitCode | Gitee技术咨询添加微信17156169080备注「RuoYi Office」⭐如果觉得不错请给个 Star 支持一下