ccdi/docs/reports/implementation/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation.md

项目详情风险明细异常账户人员信息前端实施记录

日期: 2026-03-31
范围: 项目详情 - 结果总览 - 风险明细 - 异常账户人员信息前端

1. 本次实施内容

• 在 ruoyi-ui/src/api/ccdi/projectOverview.js 新增 getOverviewAbnormalAccountPeople，对接 GET /ccdi/project/overview/abnormal-account-people
• 在 ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue 为异常账户区块补充独立状态：
  • abnormalAccountLoading
  • abnormalAccountPageNum
  • abnormalAccountPageSize
  • abnormalAccountTotal
  • abnormalAccountList
• 在 RiskDetailSection.vue 新增 loadAbnormalAccountPeople 与 handleAbnormalAccountPageChange，使异常账户区块具备独立分页刷新能力
• 将异常账户人员信息区块从占位表格替换为真实 6 列：
  • 账号
  • 开户人
  • 银行
  • 异常类型
  • 异常发生时间
  • 状态
• 移除旧占位列 操作 / 查看详情
• 为异常账户区块补充独立空态文案 当前项目暂无异常账户人员信息
• 在 ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js 中对齐异常账户 mock 字段：
  • accountNo
  • accountName
  • bankName
  • abnormalType
  • abnormalTime
  • status
• 新增并更新静态单测，覆盖异常账户区块的列结构、空态文案、独立分页状态与旧占位断言移除

2. 影响范围

• ruoyi-ui/src/api/ccdi/projectOverview.js
• ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
• ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
• ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js
• ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js
• ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js

3. 验证结果

执行静态单测：

cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-layout.test.js
node tests/unit/risk-detail-abnormal-account-pagination.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/risk-detail-employee-credit-negative-layout.test.js

执行结果：

• 全部通过

执行生产构建：

cd ruoyi-ui
npm run build:prod

执行结果：

• 构建成功
• 仅存在仓库原有的体积告警，没有新增编译错误

4. 手工联调说明

• 本轮未启动 npm run dev 做浏览器手工联调
• 因未启动前端开发服务，本轮不存在额外前端进程需要关闭
• 真实接口翻页、区块级失败提示与统一导出联动，待结合后端接口联调时继续确认