334 lines
11 KiB
Markdown
334 lines
11 KiB
Markdown
# Risk Detail Employee Credit Negative Frontend 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.
|
||
>
|
||
> **Repo note:** 本仓库 `AGENTS.md` 明确禁止开启 subagent，执行本计划时请在当前会话使用 `superpowers:executing-plans`。
|
||
|
||
**Goal:** 在结果总览“风险明细”中新增“员工负面征信信息”区块，按项目维度展示员工负面征信分页列表，并与现有涉疑交易区块并列呈现。
|
||
|
||
**Architecture:** 前端继续以 `PreliminaryCheck.vue` 作为结果总览入口，通过 `projectOverview.js` 新增员工负面征信接口封装，并在初次加载时注入 `riskDetails` 初始数据。`RiskDetailSection.vue` 负责渲染员工负面征信表格、空态和独立分页，并在后续翻页时直接调用结果总览专用接口，不复用全局征信维护页面或弹窗链路。
|
||
|
||
**Tech Stack:** Vue 2, Element UI, SCSS, axios request 封装, Node `assert` 结构测试
|
||
|
||
---
|
||
|
||
### Task 1: 新增结果总览员工负面征信前端 API 契约
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js`
|
||
- Test: `ruoyi-ui/tests/unit/project-overview-api.test.js`
|
||
|
||
- [ ] **Step 1: 先写 API 契约测试，锁定接口名、路由和参数透传**
|
||
|
||
```javascript
|
||
[
|
||
"getOverviewEmployeeCreditNegative",
|
||
"/ccdi/project/overview/employee-credit-negative",
|
||
"projectId: params.projectId",
|
||
"pageNum: params.pageNum",
|
||
"pageSize: params.pageSize",
|
||
].forEach((token) => assert(source.includes(token), token));
|
||
```
|
||
|
||
- [ ] **Step 2: 运行测试，确认当前项目还未接入该 API**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/project-overview-api.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- FAIL，提示缺少 `getOverviewEmployeeCreditNegative`
|
||
|
||
- [ ] **Step 3: 写最小 API 封装**
|
||
|
||
```javascript
|
||
export function getOverviewEmployeeCreditNegative(params) {
|
||
return request({
|
||
url: "/ccdi/project/overview/employee-credit-negative",
|
||
method: "get",
|
||
params: {
|
||
projectId: params.projectId,
|
||
pageNum: params.pageNum,
|
||
pageSize: params.pageSize,
|
||
},
|
||
});
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: 回跑 API 契约测试**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/project-overview-api.test.js
|
||
```
|
||
|
||
Expected: PASS
|
||
|
||
- [ ] **Step 5: 提交本任务**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/api/ccdi/projectOverview.js \
|
||
ruoyi-ui/tests/unit/project-overview-api.test.js
|
||
git commit -m "新增结果总览员工负面征信前端接口"
|
||
```
|
||
|
||
### Task 2: 在结果总览入口加载员工负面征信初始数据
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
|
||
- Modify: `ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js`
|
||
- Create: `ruoyi-ui/tests/unit/preliminary-check-credit-negative-load.test.js`
|
||
|
||
- [ ] **Step 1: 先写失败测试，锁定父组件并发请求和 `riskDetails` 注入结构**
|
||
|
||
```javascript
|
||
assert(source.includes("getOverviewEmployeeCreditNegative"), "结果总览应加载员工负面征信接口");
|
||
assert(source.includes("employeeCreditNegativeList"), "riskDetails 应注入员工负面征信初始列表");
|
||
assert(source.includes("employeeCreditNegativeTotal"), "riskDetails 应注入员工负面征信总数");
|
||
```
|
||
|
||
- [ ] **Step 2: 运行测试，确认当前入口页尚未接入该数据源**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-credit-negative-load.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- `preliminary-check-api-integration.test.js` 仍只有 4 个并发请求
|
||
- 新测试提示缺少员工负面征信数据装配
|
||
|
||
- [ ] **Step 3: 在父组件中并行加载新接口，并改造 mock 归一化结构**
|
||
|
||
```javascript
|
||
const [dashboardRes, riskPeopleRes, riskModelCardsRes, suspiciousRes, creditNegativeRes] =
|
||
await Promise.all([
|
||
getOverviewDashboard(this.projectId),
|
||
getOverviewRiskPeople(this.projectId),
|
||
getOverviewRiskModelCards(this.projectId),
|
||
getOverviewSuspiciousTransactions({ projectId: this.projectId, suspiciousType: "ALL", pageNum: 1, pageSize: 5 }),
|
||
getOverviewEmployeeCreditNegative({ projectId: this.projectId, pageNum: 1, pageSize: 5 }),
|
||
]);
|
||
```
|
||
|
||
```javascript
|
||
riskDetails: {
|
||
projectId,
|
||
suspiciousTransactionList: normalizeSuspiciousTransactions(suspiciousData && suspiciousData.rows),
|
||
suspiciousType: "ALL",
|
||
total: suspiciousData && suspiciousData.total ? suspiciousData.total : 0,
|
||
employeeCreditNegativeList: normalizeEmployeeCreditNegativeRows(creditNegativeData && creditNegativeData.rows),
|
||
employeeCreditNegativeTotal: creditNegativeData && creditNegativeData.total ? creditNegativeData.total : 0,
|
||
abnormalAccountList: [],
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: 回跑入口页相关测试**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-credit-negative-load.test.js
|
||
```
|
||
|
||
Expected: PASS
|
||
|
||
- [ ] **Step 5: 提交本任务**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue \
|
||
ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-credit-negative-load.test.js
|
||
git commit -m "接通结果总览员工负面征信初始加载"
|
||
```
|
||
|
||
### Task 3: 在 RiskDetailSection 中新增员工负面征信区块与独立分页
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
|
||
- Modify: `ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js`
|
||
- Create: `ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js`
|
||
- Create: `ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js`
|
||
|
||
- [ ] **Step 1: 先写失败测试，锁定新区块标题、列定义、空态和独立分页状态**
|
||
|
||
```javascript
|
||
[
|
||
"员工负面征信信息",
|
||
"展示当前项目员工的负面征信信息",
|
||
"员工姓名",
|
||
"身份证号",
|
||
"最近征信查询日期",
|
||
"民事案件笔数",
|
||
"民事案件金额",
|
||
"强制执行笔数",
|
||
"强制执行金额",
|
||
"行政处罚笔数",
|
||
"行政处罚金额",
|
||
"当前项目暂无员工负面征信信息",
|
||
].forEach((token) => assert(source.includes(token), token));
|
||
```
|
||
|
||
```javascript
|
||
[
|
||
"employeeCreditNegativeList",
|
||
"employeeCreditNegativeTotal",
|
||
"employeeCreditNegativePageNum",
|
||
"employeeCreditNegativePageSize",
|
||
"loadEmployeeCreditNegative",
|
||
"handleEmployeeCreditNegativePageChange",
|
||
].forEach((token) => assert(source.includes(token), token));
|
||
```
|
||
|
||
- [ ] **Step 2: 运行测试，确认当前风险明细组件还没有该区块**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js
|
||
node ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js
|
||
node ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- 新测试 FAIL，提示缺少员工负面征信区块和独立分页状态
|
||
|
||
- [ ] **Step 3: 写最小 UI 与分页实现**
|
||
|
||
```vue
|
||
<div class="block">
|
||
<div class="block-header">
|
||
<div>
|
||
<div class="block-title">员工负面征信信息</div>
|
||
<div class="block-subtitle">展示当前项目员工的负面征信信息</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table
|
||
v-loading="employeeCreditNegativeLoading"
|
||
:data="employeeCreditNegativeList"
|
||
class="result-table"
|
||
>
|
||
<template slot="empty">
|
||
<el-empty :image-size="96" description="当前项目暂无员工负面征信信息" />
|
||
</template>
|
||
<el-table-column prop="personName" label="员工姓名" min-width="140" />
|
||
<el-table-column prop="personId" label="身份证号" min-width="180" />
|
||
<el-table-column prop="queryDate" label="最近征信查询日期" min-width="160" />
|
||
</el-table>
|
||
</div>
|
||
```
|
||
|
||
```javascript
|
||
async loadEmployeeCreditNegative() {
|
||
const response = await getOverviewEmployeeCreditNegative({
|
||
projectId: this.projectId,
|
||
pageNum: this.employeeCreditNegativePageNum,
|
||
pageSize: 5,
|
||
});
|
||
...
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: 回跑风险明细相关测试**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js
|
||
node ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js
|
||
node ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- 员工负面征信区块结构、列定义、空态和分页状态测试全部通过
|
||
- 不影响现有涉疑交易布局测试
|
||
|
||
- [ ] **Step 5: 提交本任务**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue \
|
||
ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-layout.test.js \
|
||
ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js \
|
||
ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js
|
||
git commit -m "新增风险明细员工负面征信列表区块"
|
||
```
|
||
|
||
### Task 4: 做一次结果总览前端最小回归
|
||
|
||
**Files:**
|
||
- Reference: `ruoyi-ui/tests/unit/preliminary-check-layout.test.js`
|
||
- Reference: `ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js`
|
||
- Reference: `ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-detail-dialog.test.js`
|
||
- Reference: `ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js`
|
||
|
||
- [ ] **Step 1: 回跑结果总览关键结构测试**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/preliminary-check-layout.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
|
||
node ruoyi-ui/tests/unit/risk-detail-suspicious-transaction-detail-dialog.test.js
|
||
node ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- 入口页整体结构不回归
|
||
- 涉疑交易详情弹窗仍可用
|
||
- 新增员工负面征信区块测试通过
|
||
|
||
- [ ] **Step 2: 做一次前端静态构建验证**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected:
|
||
|
||
- 构建成功
|
||
- 没有因新增 API 或组件状态字段导致的编译错误
|
||
|
||
- [ ] **Step 3: 结束验证时清理本次启动的前端进程**
|
||
|
||
若本地为验证启动了 `npm run dev`，结束后执行：
|
||
|
||
```bash
|
||
lsof -ti tcp:80 tcp:8080 tcp:8081 | xargs kill -9
|
||
```
|
||
|
||
Expected:
|
||
|
||
- 不遗留前端调试进程
|
||
|
||
- [ ] **Step 4: 提交本任务**
|
||
|
||
```bash
|
||
git status --short
|
||
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue \
|
||
ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue \
|
||
ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js \
|
||
ruoyi-ui/src/api/ccdi/projectOverview.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js \
|
||
ruoyi-ui/tests/unit/preliminary-check-credit-negative-load.test.js \
|
||
ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-layout.test.js \
|
||
ruoyi-ui/tests/unit/risk-detail-employee-credit-negative-pagination.test.js
|
||
git commit -m "完成风险明细员工负面征信前端实现"
|
||
```
|