X-Financial/document/development/预算中心列表化改造/CONCEPT.md

预算中心列表化改造概念文档

功能一句话

将预算中心从看板式监控页改造成单据中心式预算列表，让预算的正式额度、待审核草案和历史归档有清晰入口。

背景与问题

当前预算中心以预算概览、部门切换、预算明细表和图表为主，适合查看执行情况，但不适合承载预算编制后的审核流程。预算从 AI 分析、部门编制、提交审核、高级财务审核、发布生效到归档，天然是对象生命周期，不应该把审核入口硬塞进看板区域。

本次改造采用类似单据中心的列表结构，把预算对象按状态域分成三个入口：

• 全部预算：查看已发布并生效的部门预算。
• 预算审核：查看各部门提交的预算草案，由高级财务人员审核。
• 归档预算：查看历史版本、已驳回、已失效或被新版本替换的预算。

目标与非目标

目标

• 将预算中心主界面改为列表形态。
• 提供三个 switch/tab：全部预算、预算审核、归档预算。
• 全部预算按部门展示正式预算，并在详情中展示年度、季度、月度预算。
• 预算审核按部门展示已提交预算草案，并提供进入审核助手的入口。
• 归档预算展示历史预算版本和审核痕迹。
• 保留预算监控员、高级财务人员、admin 的预算可见性边界。
• 前端 demo 阶段仅覆盖差旅、通信、招待费、办公用品四类预算。

非目标

• 本阶段不直接完成后端预算草案表、审核表和发布接口。
• 本阶段不实现真实审核通过或驳回的数据库写入。
• 本阶段不改变报销单据的预算占用和核销逻辑。
• 本阶段不扩大普通员工的预算可见范围。

用户与场景

• 预算监控员：查看本部门正式预算、提交草案状态和历史归档。
• 高级财务人员：查看所有部门预算、审核各部门提交的预算草案。
• admin：查看所有预算数据并兜底处理异常。
• 普通员工：不进入预算中心，不需要关注预算。

功能能力

全部预算

输入：

• 年度
• 季度
• 状态
• 关键词

输出：

• 预算编号
• 部门
• 预算周期
• 年度预算
• 季度预算
• 月度预算
• 已发生
• 已占用
• 剩余可用
• 风险状态
• 更新时间

点击行进入预算详情，详情展示：

• 年度预算、季度预算、月度预算
• 四类费用预算明细：差旅、通信、招待费、办公用品
• 已发生、已占用、剩余可用和使用率
• 提醒阈值、告警阈值、风险阈值

预算审核

输入：

• 年度
• 季度
• 审核状态
• 关键词

输出：

• 草案编号
• 提交部门
• 编制人
• 提交时间
• 预算周期
• 申请预算
• 较上一版变化
• AI 分析分
• 风险状态
• 审核状态

高级财务人员和 admin 可以通过“进入审核”打开预算编制助手，带入当前部门草案上下文。

归档预算

输入：

• 年度
• 季度
• 归档状态
• 关键词

输出：

• 归档编号
• 部门
• 预算周期
• 版本
• 归档类型
• 原预算额
• 审核人
• 归档时间
• 状态

方案设计

前端

• BudgetCenterView.vue 改成列表页结构。
• 复用单据中心的 status-tabs、table-wrap、list-foot 视觉结构。
• 保留 EnterpriseSelect 作为年度、季度、状态和分页大小控件。
• 使用通用详情页承载预算详情，和票据夹等列表详情页保持同一交互结构。
• 使用预算助手入口处理编制和审核上下文。
• 抽出预算列表 demo 数据和转换逻辑到 budgetCenterListModel.js，避免主脚本继续变大。

后端

本阶段不改后端。后续应新增预算草案、预算审核和预算发布接口，并将已发布预算写入正式预算池。

权限

• 预算监控员：只能看到本部门预算和本部门提交记录。
• 高级财务人员：可以看到全部部门预算，并审核预算草案。
• admin：可以看到全部预算并兜底处理。

算法与公式

预算使用率：

usageRate = \frac{usedAmount + occupiedAmount}{budgetAmount} \times 100

剩余可用预算：

availableAmount = budgetAmount - usedAmount - occupiedAmount

风险分层：

risk =
\begin{cases}
风险, & usageRate \ge riskThreshold \\
告警, & usageRate \ge alertThreshold \\
提醒, & usageRate \ge reminderThreshold \\
正常, & usageRate < reminderThreshold
\end{cases}

测试方案

• 静态检查：预算中心脚本 node --check。
• 前端构建：npm.cmd --prefix web run build。
• 交互验证：切换全部预算、预算审核、归档预算，检查筛选、分页、通用详情页和预算助手入口。
• 权限验证：使用 admin、高级财务人员、预算监控员分别检查可见范围。
• 响应式验证：检查笔记本宽度下列表横向滚动、通用详情页和按钮尺寸。

指标与验收

• 预算中心首屏为列表，而不是原看板。
• 三个 switch/tab 可切换：全部预算、预算审核、归档预算。
• 全部预算详情能看到年度、季度、月度预算。
• 预算审核列表有进入审核入口。
• 预算监控员不出现跨部门审核能力。
• 构建通过，无新增运行时引用错误。

风险与开放问题

• 后端预算草案和审核表尚未落库，本阶段使用前端 demo 数据表达流程。
• 后续需要明确“审核通过”是自动发布，还是高级财务人员审核后再点击发布。
• 归档预算的触发条件需要后续和预算发布版本模型一起设计。