企业官网建设流程全解析

SpringBoot3+Vue3+Flowable 待办列表：编号、摘要、节点该留哪些字段

🌐文档地址：https://ruoyioffice.com
📦源码1·GitHub：https://github.com/yuqing2026/ruoyi-office
📦源码2·GitCode：https://gitcode.com/zhouzhongyan/ruoyi-office
📦源码3·Gitee：https://gitee.com/yqzy1688/ruoyi-office
💬微信：17156169080（备注「RuoYi Office」）

客户打开待办，不会先问「这条 Task 的 definitionKey 是什么」。他们问的是：这是哪一张单、事由是什么、卡在哪个节点、等多久了、点哪里办理。RuoYi Office 把待办做成「单据身份 + 可配置摘要 + 节点时间」三块，而不是把流程表单所有控件摊进表格。字段少而准，工作台和流程中心才能对得上。

▲ 编号可点办理 · 摘要按模型配置 · 节点与接收时间 · 工作台与 todo-page 同源

引言：待办列表到底要回答哪四个问题？

很多第一版待办只有「流程名称 + 发起时间 + 办理」。领导扫十行看不出请假几天、用印哪份文件、报销多少钱，只能每行点进去。另一极端是把表单 20 个字段全做成列，表格横向滚动，手机端直接不可用。

本文只讨论列表字段怎么留、摘要怎么配、和首页工作台如何对齐。候选人策略、会签完成条件、空处理人属于流程设计器另一篇文章，不在待办列上解决。

一、先给出可直接抽取的定义

1.1 什么是待办列表？

待办列表，是当前登录人作为审批人、且任务仍处于 active 的任务分页，用于在不打开表单的前提下识别单据并进入办理。

RuoYi Office 的查询接口是GET /bpm/task/todo-page。任务查询条件是：assignee 等于当前用户、active、当前租户，按任务创建时间倒序。

1.2 什么是单据编号？

单据编号是流程变量里的billCode，给业务人员打电话、对账、打印时使用的人类可读单号，不是 Flowable 的 processInstanceId。

流程表单可按表单上的前缀自动生成；业务表单可从 businessKey 或变量写入。列表上编号必须可点，并带上taskId与viewType=todo。

1.3 什么是摘要？

摘要是从流程变量里抽出的少量键值对，用来在列表上回答「这单大概是什么事」，而不是完整表单快照。

流程表单有三层取值（模型自定义 → 字段「显示到摘要」→ 默认前 3 个字段）。业务表单没有表单项元数据，用事由cause一行代替。

二、一张表看清：该留、可搜、不要留

筛选区另算：系统分类、单据类型、编号模糊、单据日期范围、接收时间范围、申请部门。能搜的不必都做成列。

三、PC 端：工作台先扫，流程中心再筛

工作台路径是/workspace/home。待办作为任务卡片的一个 Tab，和抄送、已办、我的单据并列。待办、抄送展示数量角标；已办和我的单据会持续增长，故意不打红点，避免「永远 999」。

工作台待办列与流程中心同源：单据类型、编号、摘要、发起人、公司、部门，再加任务节点、接收时间。点击编号或办理，跳转BpmProcessInstanceTodoDetail，query 带id、taskId、viewType=todo、nodeKey。

▲ 首页工作台待办与流程中心共用 todo-page；角标数字来自分页 total，不是前端再数一遍行

流程中心「我的待办」路径/bpm/task/todo，多出完整筛选和固定列操作。这是本批唯一一张待办列表整页截图。

▲ 单据编号是办理入口；摘要多行展示键值；任务节点和接收时间回答「卡在哪、等多久」

点进办理后，详情页顶栏用同一套身份：单据名称、编号、发起人、部门、公司。列表上扫过的信息，进详情不能换一套 ID。

▲ 详情 headerData 使用 billCode，缺省才回退实例 ID；办理按钮只在 viewType=todo 且本人待办时出现

摘要不是在列表页手写的，而是流程模型「更多设置」里配的。流程表单才能看到「摘要设置」：系统默认前 3 个字段，或自定义多选表单字段。

▲ 只有流程表单（NORMAL）显示摘要设置；业务表单走事由字段，不要在模型里找多选框

四、前端列定义：编号必须是路由，摘要必须格式化

待办页列配置在bpm/task/todo/data.ts。单据类型取processInstance.name，编号用CellRouterLink指到待办详情，query 与办理按钮一致。

{field:'processInstance.billCode',title:'单据编号',minWidth:160,cellRender:{name:'CellRouterLink',props:{name:'BpmProcessInstanceTodoDetail',queryFields:[{key:'id',field:'processInstance.id'},{key:'taskId',field:'id'},{key:'nodeKey',field:'taskDefinitionKey'},],query:{viewType:'todo'},},},},

漏掉taskId，详情会落到「该实例下我的第一个待办」，会签或并行时可能办错节点。漏掉viewType，详情会按只读关闭，没有通过/拒绝。

摘要列把KeyValue[]拼成多行文本：

formatter:({cellValue})=>{returncellValue&&cellValue.length>0?cellValue.map((item)=>{constkey=item?.key;constvalue=item?.value??'';returnkey&&`${key}`.trim().length>0?`${key}:${value}`:`${value}`;}).join('\n'):'-';},

流程表单摘要带字段标题；业务表单只有 value（事由），key 为空。格式化函数两种都要能显示，不要因为 key 空就整格变-。

筛选里「单据类型」实际传的是流程定义 key（billType），「系统分类」是流程分类 code。名称叫单据类型，是给业务看的；查询走 definitionKey，是给引擎看的。两者不要做成两个互相矛盾的下拉。

五、后端：todo-page 查任务，再拼摘要和单号

Controller 先按当前用户查 Task 分页，再批量查流程实例、发起人、流程定义扩展信息，交给 Convert 组装。

@GetMapping("todo-page")publicCommonResult<PageResult<BpmTaskRespVO>>getTaskTodoPage(@ValidBpmTaskPageReqVOpageVO){PageResult<Task>pageResult=taskService.getTaskTodoPage(getLoginUserId(),pageVO);if(CollUtil.isEmpty(pageResult.getList())){returnsuccess(PageResult.empty());}Map<String,ProcessInstance>processInstanceMap=processInstanceService.getProcessInstanceMap(convertSet(pageResult.getList(),Task::getProcessInstanceId));// ... userMap、processDefinitionInfoMapreturnsuccess(BpmTaskConvert.INSTANCE.buildTodoTaskPage(pageResult,processInstanceMap,userMap,processDefinitionInfoMap));}

任务查询本身带includeProcessVariables()。摘要和 billCode 都来自变量，不在 ACT_RU_TASK 表上。漏了 include，列表编号和摘要会整列空白，看起来像前端没绑字段。

查询只认 assignee，不把 candidate 组任务算进「我的待办」。组任务要先签收或按你们的认领策略变成 assignee。这是产品口径：待办页展示「已经轮到我处理」的单，不是「我所在组还没人领」的池。工单模块另有工单池，不要用审批待办冒充抢单池。

编号、部门、公司在 Convert 里统一从变量读取，流程表单和业务表单共用：

if(NORMAL.equals(info.getFormType())){taskVO.getProcessInstance().setSummary(FlowableUtils.getSummary(info,processVariables));}else{taskVO.getProcessInstance().setSummary(Collections.singletonList(newKeyValue<>("",getCause(processVariables))));}taskVO.getProcessInstance().setBillCode(getBillCode(processVariables));taskVO.getProcessInstance().setDeptName(getDeptName(processVariables));taskVO.getProcessInstance().setCompanyName(getCompanyName(processVariables));

业务表单没有 formFields 元数据，不能走「前 3 个控件」算法，否则只能空白。用 cause 是显式降级，不是漏实现。

按编号筛选使用processVariableValueLike，按公司/部门用 equals。变量名必须和发起时写入的常量一致，否则筛选永远空。单据日期筛选走历史流程的 startedAfter/Before，再processInstanceIdIn；范围内没有实例时直接空页，避免IN ()。

六、摘要三种取值：怎么选怎么配

FlowableUtils.getSummary只对流程表单生效，并且保持表单字段定义顺序。

对应代码路径：

if(summarySetting!=null&&Boolean.TRUE.equals(summarySetting.getEnable())){returnconvertList(summarySetting.getSummary(),item->{BpmFormFieldVOformField=formFieldsMap.get(item);if(formField!=null){returnnewKeyValue<>(formField.getTitle(),processVariables.getOrDefault(item,"").toString());}returnnull;});}

自定义摘要里勾了已删除的字段，convertList 会得到 null 项，需要在展示层忽略。配完摘要后要重新部署流程定义，已在途的实例仍用发起时的 definition 扩展信息，不会热更新历史行。

字段级showInSummary适合「这个控件天生就该出现在列表」的场景，例如金额、天数。和模型级自定义同时存在时，模型级优先。不要两套都配还指望叠加，代码是 if-else，不是合并。

默认前 3 个字段会把布局组件的 children 递归展开后再取。把说明文字、分割线放在表单最前面，列表摘要就会变成无意义短句。这是默认策略的代价：新流程上线前，用一条测试单看一眼待办，比事后加列便宜。

七、停留时长和紧急度：列上怎么留

当前实现留的是接收时间（任务 createTime），没有单独的「停留时长」列，也没有「紧急」红点列。这是有意的。

停留时长 = 现在 - 接收时间，前端随时可算。做成后端字段要定义时区、工作日、暂停规则，和考勤加班不是同一套日历。待办列表用接收时间足够回答「这单是今天到的还是上周到的」。超时升级、自动跳过，走流程模型的超时策略，不是待办列的职责。

紧急度如果每张单都标「紧急」，列立刻失效。真正有 SLA 的是工单：响应/解决双 deadline。审批待办里用印、请假的优先级差异，用流程分类或单据类型筛选即可。

工作台已办 Tab 多一列「审批建议」，待办 Tab 没有。待办还没写意见，列空只会占宽。抄送 Tab 换成抄送节点、抄送时间。同一张任务卡片组件，按 Tab 换特殊列，基础列保持单据身份不变——这就是「字段对齐」的前端做法。

动态路由尚未注册时，工作台跳转会兜底到通用详情页，避免偶发No match for。这是入口容错，不是允许列表不传 taskId。

八、移动端：卡片比表格更狠，字段更少

UniApp 待办/我的单据卡片优先展示编号、状态、标题、摘要、发起时间、发起人。没有公司、部门、任务节点那么多列。小屏上节点名可以进第二行或详情顶栏，但编号和摘要不能丢。

PC 工作台已经接近「卡片化表格」：列可以省略操作以外的次要项，但不能省略编号和节点。两端共用同一套 todo-page 数据，只是渲染密度不同。不要为 App 再做一套不带 billCode 的接口。

九、和创新点对照

详情顶栏的headerData把 billCode 缺省回退成实例 ID，是为了老数据没有单号时仍能显示。列表上的编号列不要做这个回退：回退会让客户把 UUID 当单号抄走。打印模板同样「只展示业务单据编号，不回退流程实例 ID」。列表、详情、打印三处口径要一致——打印已经选择不回退，列表更应如此。

十、数据结构（列表真正依赖的）

待办行不是一张业务表，而是 Task + 流程实例变量 + 流程定义扩展。

不要为了列表再冗余一张bpm_todo_index，除非待办量到了变量查询撑不住。先把筛选和 includeProcessVariables 用对。待办慢时，优先看是否每页都拉流程图高亮，而不是先怪这几列字段。

十一、筛选和列要分开，不要做成「能搜的都展示」

筛选回答「帮我缩小范围」，列回答「这一行是什么」。混在一起，表格会又宽又空。

工作台没有这些筛选，只靠「最新 N 条」。这是对的：工作台是提醒，流程中心是工作台账。不要把工作台做成第二张全功能待办，否则客户不知道以哪张为准。

已办列表把「审批建议」加上，是因为已办才有意见。抄送加上抄送节点、抄送时间。三张列表的基础身份列保持同一套，特殊列按生命周期切换——这比「已办再加 8 个表单字段」好维护。

发起权限、节点字段权限、打印模板都不进待办列。它们影响的是点进去之后能不能改、能不能打。列表只负责把人带到正确的 taskId。

若客户坚持「请假待办必须看到天数」，正确做法是把天数放进该流程的摘要配置，而不是在待办组件里写if (key===leave) 加一列。一写特殊列，下一个用印、下一个报销都会来加，待办页会变成各业务的垃圾桶。

流程模型「标题设置」和「摘要设置」是两件事。标题影响实例 name 怎么拼；摘要影响列表事由。请假单标题写成「张三的请假」，摘要仍应留天数和起止，避免两列信息完全重复。

办理页顶栏把单据名、编号、发起人、部门、公司一次给表单头。列表已经展示过的身份，详情头不要改成「流程实例」技术标签。制单人看自己的非运行中实例时不显示审批按钮，避免把「我的单据」误当成待办。

搜索「单据编号」是 like，适合客户只记得后几位。不要把 like 用在公司 ID 上。接收时间筛选对应任务创建时间，和单据日期不要共用一个 RangePicker。

十二、技术亮点总结

十三、快速体验

在线演示：https://ruoyioffice.com/web/（账号 admin / admin123）

推荐路径：

1. 登录后看工作台「待办任务」Tab，记下角标数字；
2. 打开「流程中心 → 待办任务」，确认条数与角标一致；
3. 看列：单据类型、编号、摘要、发起人、节点、接收时间是否都在；
4. 点一条编号，确认进入办理页且顶栏编号与列表相同；
5. 打开「流程模型」，选一个流程表单，在更多设置里改摘要字段，部署后再发起一条，看列表摘要是否变化；
6. 用业务表单流程（如用车、用印）看摘要是否变成事由行；
7. 手机端用同一账号打开待办，确认编号和摘要仍在卡片第一屏。

源码仓库：GitHub：https://github.com/yuqing2026/ruoyi-office ｜ GitCode：https://gitcode.com/zhouzhongyan/ruoyi-office ｜ Gitee：https://gitee.com/yqzy1688/ruoyi-office

版本锚点：本文对应 Spring Boot 3.5 + Vue 3 + Flowable 7 待办分页与摘要算法。列表不承担会签完成条件、空审批人、发起人自审等引擎策略；那些在模型节点上配，配完后仍然只通过「节点名」出现在待办行上。

结语

待办列表的产品价值是让人不点开也能决定先办哪一张。编号解决身份，摘要解决事由，节点和接收时间解决排队，办理链接解决下手处。字段一旦超过「扫一眼」的容量，客户会退回用即时通讯传截图。

同一套「身份 + 摘要 + 节点时间」还可以用在已办、抄送、我的单据上，只替换特殊列。不要为每个 Tab 重新发明主键。

评论区欢迎补充：你们有没有把金额、天数做成固定列，而不是摘要？固定列在单一单据中心好用，在「所有流程进同一张待办」时往往会空一半。

常见问题（FAQ）

SpringBoot+Flowable 待办列表应该显示哪些字段？

至少保留单据类型、单据编号、摘要、发起人、任务节点、接收时间。集团再加公司与部门。不要把表单全字段和流程实例 ID 当作主列。

流程摘要在哪里配置，默认显示几个字段？

流程模型更多设置里，流程表单可选「系统默认」（前 3 个字段）或「自定义摘要」。也可在表单控件上打「显示到摘要」。模型自定义优先。业务表单没有这套配置，用事由字段。

待办编号点击后怎样保证进入当前任务而不是别的节点？

链接必须带流程实例 id、当前任务 taskId、viewType=todo。只带实例 id 时，后端会退回该实例下「我的第一个待办」，并行节点会办错。

工作台待办红点和列表数量不一致先信哪个？

两者应走同一todo-page的 total。不一致时先看工作台是否用了另一套统计接口或缓存，再看列表筛选是否悄悄带了分类条件。不要先改角标计算公式。

待办列表要不要加紧急度和停留时长列？

接收时间已能看出新旧；停留时长可在前端算。紧急度在全流程待办里很容易全部标红。有 SLA 的走工单 deadline；审批超时走模型超时策略，不必在待办主列再堆两个徽章。

💡想要体验 RuoYi Office 的强大功能？

🌐在线演示：https://ruoyioffice.com/web/（账号 admin / admin123）

📦源码仓库：GitHub：https://github.com/yuqing2026/ruoyi-office ｜ GitCode：https://gitcode.com/zhouzhongyan/ruoyi-office ｜ Gitee：https://gitee.com/yqzy1688/ruoyi-office

💬技术咨询：添加微信17156169080，备注「RuoYi Office」

⭐如果觉得不错，请给个 Star 支持一下！