Files
ccdi/docs/design/2026-03-27-results-overview-suspicious-transaction-alignment-design.md

70 lines
2.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 结果总览涉疑交易明细与流水明细查询对齐设计
## 背景
- 结果总览页的“风险明细 > 涉疑交易明细”已接通真实接口,但当前列表列结构、详情弹窗内容和分页交互均与“流水明细查询”页面不一致。
- 用户要求以“流水明细查询”页为基准对齐交互与视觉,仅保留涉疑交易特有的“关联员工”字段,其余定制列移除。
## 目标
- 列表对齐“流水明细查询”页面的主表结构与样式。
- 详情弹窗对齐“流水明细查询”页面的字段布局、原始文件区域与命中异常标签区域。
- 分页固定每页 5 条,筛选切换后回到第一页。
- 保留“关联员工”列,作为涉疑交易明细相对流水明细查询的唯一额外业务列。
## 方案
### 列表
- `RiskDetailSection.vue` 保留“涉疑交易明细”区块与筛选下拉。
- 表格列改为:
- 交易时间
- 本方账户
- 对方账户
- 关联员工
- 摘要 / 交易类型
- 异常标签
- 交易金额
- 详情
- 保持与 `DetailQuery.vue` 相同的多行单元格结构、金额颜色和异常标签样式。
### 分页
- 组件内部新增独立分页状态:
- `suspiciousPageNum`
- `suspiciousPageSize` 固定为 `5`
- `suspiciousTotal`
- 初次加载、筛选切换和翻页都通过 `getOverviewSuspiciousTransactions` 重新请求。
- 分页组件沿用仓库现有 `Pagination`,但限制 `pageSizes``[5]`,并移除 `sizes` 布局项。
### 详情弹窗
- 详情弹窗结构对齐 `DetailQuery.vue`
- 基础字段宫格
- 原始文件信息
- 命中异常标签
- 详情数据继续复用 `getBankStatementDetail(bankStatementId)`,避免新增后端接口。
### 异常标签
- 结果总览涉疑交易列表接口当前不直接返回 `hitTags`
- 前端在列表加载完成后,按当前页流水 `bankStatementId` 逐条调用详情接口补齐 `hitTags`,仅处理当前页 5 条数据,保证逻辑闭环且不扩大后端改造范围。
## 影响范围
- 前端:
- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
- `ruoyi-ui/tests/unit/`
- 文档:
- 当前设计文档
- 本轮实施记录
## 验证
- 单测验证列表列名、分页配置、详情弹窗字段与异常标签区域。
- 浏览器联调验证:
- 初始加载为 5 条
- 筛选切换可翻页
- 详情弹窗样式与字段对齐
- 导出仍可用