2026-06-14-payment-info-kanban-design.md 9.7 KB
采集协议单 · 缴费信息 Tab 五列看板 — 设计说明
日期：2026-06-14
状态：已实现
用户确认：卡片字段采用 方案 B（主字段 + 展开）
关联页面：
web-admin/src/views/cell-storage/protocol-audit/PaymentInfoTab.vue- 父页
web-admin/src/views/cell-storage/protocol-audit/index.vue
参考实现：
- 看板布局：
web-admin/src/views/pilot-service/cell-product-type/index.vue+cell-product-kanban.scss - 同模块卡片交互：
web-admin/src/views/cell-storage/protocol-audit/ProtocolAuditTab.vue（勾选、双击查看、KV 网格） - Demo 双栏看板：
web-admin/demo-payment-confirm-layouts.html方案 B - 现 P08 列表逻辑：
PaymentInfoTab.vue（筛选、批量、单条确认、退费弹窗）
UI 模式：P08 变体（状态分视图）→ 五列看板 + 卡片；实现后建议在 docs/web-admin-ui-pattern-index.md P08 节补充看板子模式说明。
1. 背景与目标
「采集协议单管理 → 缴费信息」当前为 5 个 Pill Tab + 表格列表，每次仅展示单一缴费状态的数据。财务/业务人员需在 Tab 间切换才能对比各阶段进度。
目标：
- 改为 5 列看板，列与缴费状态一一对应：待缴费、缴费确认中、已缴费、退费确认中、已退费。
- 每列内以 卡片 展示缴费明细；卡片默认展示主字段，可展开查看完整字段（与现列表字段一致）。
- 不改后端 API；保留现有筛选、批量操作、单条确认、退费弹窗、协议查看等业务能力。
2. 状态与列映射（不变）
| 列 key | 列标题 | payStatus | 列内可操作 |
|---|---|---|---|
dfj |
待缴费 | dfj |
勾选、批量/单条「缴费确认」、查看 |
jfqrz |
缴费确认中 | jfqrz |
查看 |
yjf |
已缴费 | yjf |
勾选、批量/单条「退费确认」、查看 |
tfqrz |
退费确认中 | tfqrz |
查看 |
ytf |
已退费 | ytf |
查看 |
状态流转与现实现一致，不在本次改动范围。
3. 布局结构
page-container / panel（父页已有）
└─ PaymentInfoTab
├─ filter-block（全局筛选，保留现有 3 项 + 防抖搜索）
├─ list-toolbar（全局批量区，保留待缴费/已缴费批量按钮）
└─ kanban-board（5 列 grid）
└─ kanban-col × 5
├─ kanban-col-hd（列名 + 数量 badge）
├─ kanban-list（卡片区，列内纵向滚动）
│ └─ payment-card × N
└─ kanban-col-footer（列内 mini 分页）
3.1 Grid 与响应式
| 视口宽度 | 布局 |
|---|---|
| ≥ 1400px | grid-template-columns: repeat(5, 1fr)，五列同屏 |
| 1024–1399px | 五列保留，容器 overflow-x: auto，最小列宽约 260px |
| < 1024px | 单列纵向堆叠五列（每列仍独立标题 + 卡片 + 分页） |
列容器样式对齐细胞产品看板：border-radius: 10px、列内 max-height: calc(100vh - 320px)、.kanban-list 独立滚动。
3.2 移除项
- 顶部
el-tabs（panel-pill-tabs）删除；状态由列标题表达。 el-table及表格专属样式（如row-due-soon行级样式）替换为卡片级样式。
4. 卡片字段（方案 B：主字段 + 展开）
4.1 默认展示（主字段，6–8 项）
| 标签 | 字段 | 展示规则 |
|---|---|---|
| 客户姓名 | motherName |
卡片头部主标题 |
| 协议状态 | protocolStatus |
el-tag，头部右侧 |
| 缴费方式 | payMode |
文本 + 期数合并为一行，如「分期 · 第 2 期」 |
| 应缴费时间 | installmentDueDate |
YYYY-MM-DD |
| 应缴金额(元) | dueAmount |
formatAmount，加粗 |
| 实缴金额(元) | transferAmount |
无值显示 — |
| 转账方式 | transferType |
枚举 label |
不展示：卡片内 不重复 展示 payStatus Tag（列标题已表达当前状态）。
4.2 展开区（次要字段）
点击卡片底部「展开详情 / 收起」切换，展示：
| 标签 | 字段 | 展示规则 |
|---|---|---|
| 序号 | 列内分页序号 | 展开区首行 |
| 身份证号 | motherIdCard |
maskIdCard |
| 新生儿姓名 | newbornName |
|
| 新生儿身份证号 | newbornIdCard |
maskIdCard |
| 转账时间 | transferTime |
|
| 创建时间 | createTime |
展开状态 按卡片 id 独立记忆（Set<string> 或 Record<id, boolean>），刷新数据后若 id 仍存在则保持展开。
4.3 卡片结构示意
┌─────────────────────────────┐
│ ☐ 张三 [生效中]│ ← 勾选(仅 dfj/yjf 列) + 姓名 + 协议状态 Tag
├─────────────────────────────┤
│ 缴费方式 分期 · 第 2 期 │
│ 应缴费时间 2026-03-15 │
│ 应缴金额 ¥5,000.00 │
│ 实缴金额 ¥5,000.00 │
│ 转账方式 微信转账 │
├─ 展开详情 ───────────────────│ ← 可折叠
│ 序号 / 身份证 / 新生儿… │
├─────────────────────────────┤
│ [查看] [缴费确认] │ ← 操作区；双击卡片 → 查看
└─────────────────────────────┘
4.4 临近到期预警
「待缴费」列中，payStatus === 'dfj' 且 isPaymentDueWithinWarnWindow(installmentDueDate) 为 true 的卡片：
- 左边框
3px solid #ef4444或背景#fee2e2（与现row-due-soon语义一致，改为卡片级 classpayment-card--due-soon）。
5. 交互与业务逻辑（保留）
| 能力 | 行为 |
|---|---|
| 筛选 | 关键词、转账方式、应缴费时间；变更后 五列并行刷新，页码重置为 1 |
| 防抖搜索 | 保留 watchDebounced 300ms |
| 批量缴费确认 | 工具栏按钮；仅统计 待缴费列 已勾选卡片 |
| 批量退费确认 | 工具栏按钮；仅统计 已缴费列 已勾选卡片 |
| 单条缴费确认 | 待缴费列卡片操作；确认框文案不变 |
| 单条退费确认 | 已缴费列卡片操作；退费弹窗不变 |
| 查看协议 | 所有列；打开 ProtocolViewDialog |
| 双击 | 卡片双击等同「查看」 |
勾选 不可跨列；每列独立 selectedIds 或全局 selectedRows 带 payStatus 校验。
6. 数据层（方案 A：五路并行请求）
6.1 API
沿用 fetchPaymentDetailList：
GET /web/admin/protocol-payment-details
?payStatus=dfj|jfqrz|yjf|tfqrz|ytf
&page=&pageSize=
&keyword=&transferType=
&installmentDueDateStart=&installmentDueDateEnd=
不新增后端接口。
6.2 列状态
每列独立：
interface KanbanColumnState {
key: PayStatusKey
label: string
list: Record<string, unknown>[]
total: number
page: number
pageSize: number // 默认 10
loading: boolean
selectable?: boolean
}
6.3 加载策略
loadAllColumns()：Promise.all五列loadColumn(key)。- 筛选 / 重置 / 防抖触发 →
loadAllColumns()，各列page = 1。 - 单条/批量操作成功 →
loadAllColumns()（或仅刷新受影响列，实现时取简单方案：全量刷新）。 - 列内分页
@current-change/@size-change仅刷新该列。 - 可选：AbortController 取消上一次未完成的全局刷新，避免竞态。
6.4 列头计数
列标题旁 badge 展示该列 total（来自 API res.total）。
7. 组件与文件变更
| 文件 | 变更 |
|---|---|
PaymentInfoTab.vue |
主改造：Tab+Table → Kanban+Card |
payment-info-kanban.scss（新建，同目录） |
看板列、卡片、展开区、预警样式；@import 复用 cell-product-kanban.scss 中 .entity-card 基础可选 |
docs/web-admin-ui-pattern-index.md |
P08 节补充看板子模式（实现时一并更新） |
不新建独立 Vue 子组件（除非单文件超 400 行时再抽 PaymentKanbanCard.vue）；首版以内联模板 + scoped SCSS 为主，与 ProtocolAuditTab 一致。
8. 视觉规范（Fresh Mint）
- 主色链：
--primary #10b981、--primary-bg #ecfdf5；列头背景--table-head #f8fafc。 - 卡片：
border-radius: 10px，hover 浅绿边框（对齐.entity-card）。 - 列头语义色（可选、低饱和）：待缴费列顶缘浅琥珀
#fffbeb；已缴费列浅绿#ecfdf5；其余列中性。 - 按钮：操作区沿用
btn-op-item；工具栏「已选 N 项」仍在最前。 - 遮罩、弹窗：退费弹窗、
ProtocolViewDialog不变。
9. 测试要点
- 五列同屏加载与列内分页独立。
- 筛选变更后五列数据与计数同步更新。
- 待缴费列勾选 → 批量缴费确认；已缴费列勾选 → 批量退费确认。
- 单条缴费/退费确认后对应卡片移列（刷新后验证）。
- 临近到期卡片预警样式仅出现在待缴费列。
- 展开/收起不影响勾选与操作。
- 1366 / 1920 视口下布局不溢出、列内可滚动。
- 双击、查看按钮打开协议弹窗正常。
10. 工作量
| 项 | 估时 |
|---|---|
| 看板布局 + 五列数据层 | 0.5d |
| 卡片主字段 + 展开区 | 0.5d |
| 勾选 / 批量 / 操作迁移 | 0.25d |
| 样式 + 响应式 | 0.25d |
| 自测 | 0.25d |
| 合计 | ~1.5 人日 |
11. 不在范围
- 后端 API / 状态机变更
- 缴费确认中、退费确认中列的新增操作
- 看板列间拖拽改状态
- 临床申请单缴费 Tab（
ClinicalPaymentTab.vue）同步改造