351 lines
9.7 KiB
Markdown
351 lines
9.7 KiB
Markdown
# 项目详情风险明细异常账户人员信息前端 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：
|
||
|
||
```js
|
||
[
|
||
"异常账户人员信息",
|
||
"账号",
|
||
"开户人",
|
||
"银行",
|
||
"异常类型",
|
||
"异常发生时间",
|
||
"状态",
|
||
"当前项目暂无异常账户人员信息",
|
||
]
|
||
```
|
||
|
||
- [ ] **Step 2: 更新旧测试，先让它失败**
|
||
|
||
在 `preliminary-check-model-and-detail.test.js` 中把这一段：
|
||
|
||
```js
|
||
["风险明细", "涉疑交易明细", "异常账户人员信息", "查看详情"]
|
||
```
|
||
|
||
改成断言新的异常账户列名，不再要求旧占位的“查看详情”。
|
||
|
||
- [ ] **Step 3: 运行静态单测确认失败**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
node tests/unit/risk-detail-abnormal-account-pagination.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- FAIL，提示 API 方法或分页状态尚未接入
|
||
|
||
- [ ] **Step 3: 在 API 文件中增加轻量请求封装**
|
||
|
||
在 `projectOverview.js` 中新增：
|
||
|
||
```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:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
node tests/unit/risk-detail-abnormal-account-pagination.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS
|
||
|
||
- [ ] **Step 6: 提交本任务**
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
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: 提交本任务**
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS
|
||
|
||
- [ ] **Step 3: 如需手工联调，启动前端并在验证后关闭**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
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: 提交本任务**
|
||
|
||
```bash
|
||
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` 通过
|
||
- [ ] 如启动了前端进程，验证结束后已手动关闭
|