diff --git a/docs/demos/2026-10-10-payment-confirm-sample-detail-demo.html b/docs/demos/2026-10-10-payment-confirm-sample-detail-demo.html new file mode 100644 index 00000000..4251f3a6 --- /dev/null +++ b/docs/demos/2026-10-10-payment-confirm-sample-detail-demo.html @@ -0,0 +1,845 @@ + + + + + + 缴费信息 · 缴费明细（样本全量 + 列表模式转账）Demo + + + + + + +
+
+

缴费明细 · 样本全量 + 列表模式转账

+

+ 列表「缴费明细」打开该样本全量应缴批次（应缴金额/时间只读）；转账登记对齐采集协议单 · SamplePaymentPanel： + 期次下表格行内编辑，支持添加 / 保存 / 提交财务确认 / 撤回 / 删除。改缴费方案仍走协议单。 +

+
参考：采集协议单新增/编辑弹窗 · 缴费方案 · 应缴批次列表模式（本页应缴字段只读）
+
+
1 列表点「缴费明细」
+
2 查看各期明细（应缴只读）
+
3 期次「添加转账」行内填写
+
4 行操作：保存 → 提交财务确认
+
+
+ +
+
+

缴费信息（示意列表）

+
+

点击「缴费明细」打开样本详情（有欠缴/可操作时主色；已缴清仍可查看，本 Demo 第二行示意「仅查看」）。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名合同编号缴费方式合同总额累计实缴待缴金额缴费进度操作
张敏XY-2026-0318分期¥68,000¥30,000¥38,000部分已缴 +
+ + +
+
李婷XY-2026-0281趸交¥48,000¥48,000¥0已缴清 +
+ + +
+
+
+
+ +
+
+

现状（待改）

+
    +
  • 按钮名「缴费确认」→ 直接弹单笔表单
    • +
  • 看不到全期转账明细
    • +
  • 与协议单编辑体验不一致
    • +
+
+
+

本 Demo（目标）

+
    +
  • 按钮改名「缴费明细」→ 样本全量批次详情
    • +
  • 应缴金额/时间只读；每期表格列表模式管转账
    • +
  • 行操作：保存 / 提交财务确认 / 撤回 / 删除（对齐协议单）
    • +
+
+
+
+ + + +
+ + + + diff --git a/docs/superpowers/specs/2026-10-10-payment-info-detail-list-mode-design.md b/docs/superpowers/specs/2026-10-10-payment-info-detail-list-mode-design.md new file mode 100644 index 00000000..6c5b1d4e --- /dev/null +++ b/docs/superpowers/specs/2026-10-10-payment-info-detail-list-mode-design.md @@ -0,0 +1,158 @@ +# 缴费信息 ·「缴费明细」弹窗（列表模式转账）设计 + +> 状态：已确认 +> 日期：2026-10-10 +> 界面模式：P02 复杂业务列表 + 详情弹窗内嵌可编辑表格 +> Demo：`docs/demos/2026-10-10-payment-confirm-sample-detail-demo.html` +> 参考实现：`web-admin/src/views/cell-storage/protocol/SamplePaymentPanel.vue`（应缴批次下转账表格） + +## 1. 背景与目标 + +### 1.1 现状 + +【缴费信息】Excel 宽表操作列「缴费确认」在 `canConfirm=true` 时显示；点击后跳过全量明细，直接定位最早一期待缴期并打开 `PaymentReceiptConfirmDialog` 单笔表单。用户无法在同屏查看该样本全部期次与历史转账，也与采集协议单中的「列表模式」转账体验不一致。 + +### 1.2 目标 + +1. 操作列按钮改名为 **「缴费明细」**。 +2. 点击后打开 **样本级缴费详情弹窗**：展示该样本全部应缴批次与转账笔。 +3. **应缴金额 / 应缴时间只读**；改缴费方案仍只在采集协议单新增/编辑中完成。 +4. 转账登记对齐协议单列表模式：期次下表格行内编辑，支持添加 / 保存 / 提交财务确认 / 撤回 / 删除。 + +### 1.3 已确认决策 + +| 项 | 选择 | +|----|------| +| 入口文案 | 「缴费确认」→「缴费明细」 | +| 首屏 | 样本全量明细，不直接进单笔表单 | +| 应缴字段 | 只读 | +| 转账 UX | 对齐 `SamplePaymentPanel` 列表模式（非独立确认弹窗为主路径） | +| 已缴清样本 | 仍可打开明细查看（转账只读；无「添加转账」） | +| 单期「实缴金额」弹窗 | 保留只读查看能力（可选底部不再强推「缴费确认」进单笔表单，避免双路径；见 §3.4） | +| 后端 | 复用现有转账 API，不新增资源模型 | + +## 2. 信息架构 + +``` +缴费信息列表 + ├─ 协议单 → ProtocolViewDialog（现有） + └─ 缴费明细 → 样本缴费详情弹窗（本设计） + ├─ 摘要（协议号、客户、样本、方式、合同额、已缴/待缴、进度） + └─ 应缴批次（只读应缴） + └─ 转账表格（列表模式，可写） +``` + +数据模型不变： + +``` +样本缴费方案 1 ──N 应缴批次(期) ──N 转账笔 +``` + +## 3. 界面与交互 + +### 3.1 列表操作列 + +- 文案：**缴费明细**（图标可用 `List` / `Document` / `View`，与现有操作列风格一致；须带 `el-icon`）。 +- **始终展示**（不再依赖 `canConfirm` 隐藏）。已缴清时仍可查看；无有效期或无方案时按钮禁用并提示。 +- 点击：`fetchSamplePaymentDetail(id)` → 打开详情弹窗。 +- 「协议单」按钮行为不变。 + +### 3.2 样本缴费详情弹窗 + +- 标题：`样本缴费详情` 或 `客户名 · 协议号`。 +- 宽度约 1000～1080px；`dialog-form-layout` + `align-center` + `protocol-dialog-mask`；无 backdrop blur。 +- **摘要区**（只读）：协议号、客户（姓名·电话）、样本编码、缴费方式 Tag、合同额、已缴/待缴、整体进度（已缴清期数）、缴费进度 Tag、协议状态 Tag（可选）。 +- **应缴批次**：按 `scheduleNo` 升序；每期卡片/区块： + - 标题：第 N 期 · 应缴 · 应缴日 · 已缴 · 欠缴 · 批次状态 Tag。 + - **不提供**应缴金额/应缴时间编辑控件。 + - 期头右侧：当 `arrearsAmount > 0` 且允许新增时显示 **「添加转账」**（`Plus` 图标）；已缴清或无可写权限时不显示。 +- Footer：仅 **关闭**。 + +### 3.3 转账表格（列表模式） + +对齐 `SamplePaymentPanel` 列与行操作（本页不嵌整块 Panel，避免暴露改方案）： + +| 列 | 可编辑条件 | +|----|------------| +| # | — | +| 转账方式 | `pay_status` 非 `jfqrz`/`yjf`（及既有锁定规则） | +| 转账金额(元) | 同上 | +| 转账时间 | 同上 | +| 转账凭证 | 同上；卡片上传，对齐附件规范 | +| 备注 | 同上 | +| 财务备注 | 只读 | +| 状态 | Tag：`dfj`/`jfqrz`/`yjf` 等 | +| 操作 | 见下 | + +**行操作**（与协议单一致）： + +| 条件 | 操作 | +|------|------| +| 未锁定 | **保存**（无 id → create；有 id → update） | +| `id` 且 `dfj` | **提交财务确认** → `jfqrz` | +| `id` 且 `jfqrz` | **撤回** → `dfj`（二次确认文案对齐协议单） | +| 未锁定 | **删除**（未落库行本地移除；已落库按现有 delete/soft API，若协议单仅本地删未保存行则对齐其行为） | +| `yjf` 等终态 | 操作列 `—` | + +锁定规则复用协议单：`isTransferLocked`（财务已确认 `yjf` 锁定；`jfqrz` 不可改字段，仅可撤回）。 + +校验：转账方式必填、金额 > 0；上传中禁止保存。成功/失败 `ElMessage` 提示。保存或提交/撤回后刷新当前详情（或本地 patch 后与列表 `loadData` 同步）。 + +### 3.4 与单期「实缴金额」弹窗 + +- **保留**点击期次实缴金额打开的单期只读转账弹窗（摘要 + 凭证）。 +- 该弹窗底部 **去掉「缴费确认」主按钮**（避免再进入 `PaymentReceiptConfirmDialog`）；引导用户用操作列「缴费明细」管理转账。 +- 列表操作列不再调用「最早一期 + 打开 ReceiptConfirm」的旧路径。 + +### 3.5 不再作为主路径的组件 + +- `PaymentReceiptConfirmDialog`：本页主路径不再打开；其它页面（流程看板等）可继续使用，本设计不强制删除组件。 + +## 4. API 与数据 + +复用 `web-admin/src/api/protocol-sample-payment.ts`： + +| 动作 | API | +|------|-----| +| 详情 | `fetchSamplePaymentDetail` | +| 创建转账 | `fetchCreatePaymentTransfer` | +| 更新转账 | `fetchUpdatePaymentTransfer` | +| 提交财务 | `fetchSubmitPaymentTransferFinance` | +| 撤回 | `fetchWithdrawPaymentTransfer` | +| 列表刷新 | `fetchSamplePaymentList`（或现 Excel 列表接口） | + +附件上传复用 `fetchUploadAttachment`（folder 与协议单转账一致，如 `protocol-transfer`）。 + +无需新表、新菜单、新权限码（沿用 `cellStorage:paymentInfo:list` 及既有写权限）。 + +## 5. 实现边界 + +### 5.1 前端 + +- 主改：`PaymentExcelList.vue`（按钮文案、打开详情、移除旧 `handleConfirm` 直达单笔表单逻辑、单期弹窗去确认按钮）。 +- 建议抽组件（推荐）：`components/business/sample-payment-transfer-table/` 或 `payment-info/SamplePaymentDetailDialog.vue`，内嵌只读期头 + 可编辑转账表；协议单后续可渐进复用，**本迭代不强制改造 SamplePaymentPanel**。 +- 清理：本页对 `PaymentReceiptConfirmDialog` 的依赖可移除（若无其它引用则仅本页卸载）。 + +### 5.2 后端 + +- 无强制变更；若删除转账笔缺少接口且协议单亦仅本地删未保存行，则对齐「未保存行删除 / 已保存行需确认」的现有行为。 + +### 5.3 文档 + +- Demo 已存在；本 spec 为权威。 +- 可选：更新 `2026-10-09-payment-info-excel-list-and-chase-design.md` 中「缴费确认」表述为「缴费明细」（交叉引用即可，不强制大改旧文）。 + +## 6. 验收标准 + +1. 列表操作列显示「缴费明细」，有/无欠缴均可打开（无方案时禁用）。 +2. 详情展示全部期次；应缴金额/时间不可编辑。 +3. 有欠缴期可「添加转账」；行内保存、提交财务确认、撤回、删除行为与协议单一致，状态流转 `dfj → jfqrz → yjf`（确认在财务侧）。 +4. 不再从本页操作列直接打开旧「缴费确认」单笔弹窗。 +5. 单期实缴弹窗仅只读查看，无「缴费确认」提交入口。 +6. 关闭详情或转账变更后列表金额/进度刷新正确。 + +## 7. 非目标 + +- 不在本页改趸交/分期/分改趸或重算批次。 +- 不改造财务「缴费确认」待办页。 +- 不强制本迭代把协议单改为引用新抽组件（可后续跟进）。