wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8798aa9230d56763abe7a6f70ef65f16f333f5c9
ccdi/docs/plans/frontend/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation-plan.md

9.7 KiB
Raw Blame History

项目详情风险明细异常账户人员信息前端 Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

仓库约束：当前仓库明确禁止开启 subagent，执行时统一使用 superpowers:executing-plans。

Goal: 将 RiskDetailSection.vue 中的“异常账户人员信息”从占位表格改为真实接口驱动的列表，并与统一导出的 6 个字段保持一致。

Architecture: 前端保持最小改动，继续复用 RiskDetailSection.vue 内现有的独立分区加载模式，为异常账户区块补一套与员工负面征信相同风格的 loading/pageNum/pageSize/total/list 状态。数据请求通过 @/api/ccdi/projectOverview 新增一个轻量 GET 方法，不改 PreliminaryCheck.vue 的页面编排逻辑。

Tech Stack: Vue 2, Element UI, RuoYi request 封装, Node 静态单测, Vue CLI 构建

File Map

Create:

  • ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js
    • 覆盖异常账户区块的真实列结构和空态文案
  • ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js
    • 覆盖异常账户独立分页状态与加载方法

Modify:

  • ruoyi-ui/src/api/ccdi/projectOverview.js
    • 新增异常账户分页查询 API 封装
  • ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
    • 接入真实异常账户列表、独立分页、独立 loading、移除旧占位操作列
  • ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js
    • 对齐 mock 中异常账户字段名，避免静态预览口径落后于真实页面
  • ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
    • 更新旧断言，移除对“查看详情”的占位依赖
  • docs/reports/implementation/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation.md
    • 记录前端实施与验证结果

No Change Expected:

  • ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue
    • 仍只负责把 projectId 传给 RiskDetailSection

Task 1: 锁定异常账户区块的静态结构与测试期望

Files:

  • Create: ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js

  • Modify: ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js

  • Step 1: 先写新的静态布局测试

创建 risk-detail-abnormal-account-layout.test.js，直接读取 RiskDetailSection.vue 源码并断言以下 token：

[
  "异常账户人员信息",
  "账号",
  "开户人",
  "银行",
  "异常类型",
  "异常发生时间",
  "状态",
  "当前项目暂无异常账户人员信息",
]
  • Step 2: 更新旧测试，先让它失败

在 preliminary-check-model-and-detail.test.js 中把这一段：

["风险明细", "涉疑交易明细", "异常账户人员信息", "查看详情"]

改成断言新的异常账户列名，不再要求旧占位的“查看详情”。

  • Step 3: 运行静态单测确认失败

Run:

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

Expected:

  • FAIL，提示 RiskDetailSection.vue 仍包含旧列结构或缺少新字段

  • Step 4: 提交本任务

本任务先不提交，等待真实模板改完后与 Task 2 一起提交。

Task 2: 接入异常账户真实 API 与独立分页状态

Files:

  • Modify: ruoyi-ui/src/api/ccdi/projectOverview.js

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue

  • Create: ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js

  • Step 1: 先写分页/加载相关静态测试

创建 risk-detail-abnormal-account-pagination.test.js，断言源码已包含：

  • getOverviewAbnormalAccountPeople

  • abnormalAccountLoading

  • abnormalAccountPageNum

  • abnormalAccountPageSize

  • abnormalAccountTotal

  • abnormalAccountList

  • handleAbnormalAccountPageChange

  • loadAbnormalAccountPeople

  • Step 2: 跑静态测试确认失败

Run:

cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-pagination.test.js

Expected:

  • FAIL，提示 API 方法或分页状态尚未接入

  • Step 3: 在 API 文件中增加轻量请求封装

在 projectOverview.js 中新增：

export function getOverviewAbnormalAccountPeople(params) {
  return request({
    url: "/ccdi/project/overview/abnormal-account-people",
    method: "get",
    params: {
      projectId: params.projectId,
      pageNum: params.pageNum,
      pageSize: params.pageSize
    }
  })
}
  • Step 4: 在 RiskDetailSection.vue 中补齐独立状态与加载函数

按员工负面征信区块的模式补充：

  1. data() 中新增：
    • abnormalAccountLoading
    • abnormalAccountPageNum
    • abnormalAccountPageSize
    • abnormalAccountTotal
    • abnormalAccountList
  2. watch.sectionData 中初始化：
    • projectId
    • 默认页码 1
    • 页大小 5
    • 初始列表为空
  3. 新增：
    • loadAbnormalAccountPeople()
    • handleAbnormalAccountPageChange(pageInfo)

加载规则：

  • 无 projectId 时直接清空列表并结束

  • 请求失败时仅清空异常账户区块并提示 加载异常账户人员信息失败

  • 不影响涉疑交易和员工负面征信区块

  • Step 5: 重新运行静态测试

Run:

cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-pagination.test.js

Expected:

  • PASS

  • Step 6: 提交本任务

git add ruoyi-ui/src/api/ccdi/projectOverview.js \
  ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue \
  ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js
git commit -m "补充异常账户人员前端查询状态"

Task 3: 把异常账户表格从占位列改成真实 6 列

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js

  • Create: ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js

  • Modify: ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js

  • Step 1: 修改异常账户表格模板

把旧占位表格：

  • 账户号
  • 账户人姓名
  • 开户银行
  • 异常发生时间
  • 状态
  • 操作

改为真实 6 列：

  • 账号
  • 开户人
  • 银行
  • 异常类型
  • 异常发生时间
  • 状态

并删除“操作 / 查看详情”列。

  • Step 2: 补独立空态与分页组件

将异常账户区块从纯 el-table 升级为与员工负面征信一致的结构：

  • v-loading="abnormalAccountLoading"

  • :data="abnormalAccountList"

  • <el-empty description="当前项目暂无异常账户人员信息" />

  • 独立 pagination

  • Step 3: 对齐 mock 字段命名

在 preliminaryCheck.mock.js 中把异常账户 mock 数据对齐成：

  • accountNo
  • accountName
  • bankName
  • abnormalType
  • abnormalTime
  • status

说明：

  • 这里不要求 mock 走真实接口

  • 只是避免静态数据结构继续停留在旧字段名

  • Step 4: 运行静态布局测试

Run:

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

Expected:

  • PASS

  • Step 5: 提交本任务

git add 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/preliminary-check-model-and-detail.test.js
git commit -m "调整异常账户人员信息前端展示列"

Task 4: 做前端联调与构建回归

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue

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

  • Step 1: 本地执行静态单测

Run:

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

Expected:

  • PASS

  • Step 2: 跑前端生产构建

Run:

cd ruoyi-ui
npm run build:prod

Expected:

  • PASS

  • Step 3: 如需手工联调，启动前端并在验证后关闭

Run:

cd ruoyi-ui
npm run dev

至少验证：

  1. 异常账户人员信息 区块只显示 6 个目标字段
  2. 翻页只刷新异常账户区块
  3. 统一导出按钮仍请求 ccdi/project/overview/risk-details/export
  4. 异常账户查询失败时只影响当前区块

验证结束后必须关闭 npm run dev 进程。

  • Step 4: 编写前端实施记录

在实施记录中写清：

  • 新增 API 方法

  • RiskDetailSection.vue 的状态与模板调整

  • mock 字段对齐

  • 静态单测与构建结果

  • 如有手工联调，记录启动与关闭前端进程情况

  • Step 5: 提交本任务

git add docs/reports/implementation/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation.md
git commit -m "记录异常账户人员信息前端实施"

Final Verification

  • 页面与导出统一使用 账号 / 开户人 / 银行 / 异常类型 / 异常发生时间 / 状态
  • 页面已移除旧占位“查看详情”列
  • 异常账户分页状态与员工负面征信分页状态互不干扰
  • 构建命令 npm run build:prod 通过
  • 如启动了前端进程，验证结束后已手动关闭
Reference in New Issue View Git Blame Copy Permalink