298 lines
8.2 KiB
Markdown
298 lines
8.2 KiB
Markdown
# Credit Info Direct Storage 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.
|
||
|
||
**Goal:** 将征信维护前端页面从“员工维度展示”调整为“征信对象维度展示”，移除“柜员号”“是否已维护”两项旧口径字段，并保持上传、列表、详情、删除交互可用。
|
||
|
||
**Architecture:** 保留现有 `ruoyi-ui/src/views/ccdiCreditInfo/index.vue` 独立页面和 `@/api/ccdiCreditInfo` API 封装，不新增路由和页面。核心改造点是精简查询参数和列表列定义，使页面只围绕姓名、身份证号和征信摘要展示运转，同时同步修正前端静态契约测试与删除确认文案。
|
||
|
||
**Tech Stack:** Vue 2, Element UI, Axios request 封装, Node.js 源码契约测试, npm
|
||
|
||
---
|
||
|
||
## 文件结构与职责
|
||
|
||
**修改文件**
|
||
|
||
- `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
|
||
移除“柜员号”“是否已维护”，收敛查询区、列表列和删除提示文案。
|
||
- `ruoyi-ui/tests/unit/credit-info-page-layout.test.js`
|
||
锁定新页面结构：只有姓名、身份证号查询，不再出现柜员号列。
|
||
- `ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js`
|
||
从“默认 maintained=1”契约改为“页面已彻底移除 maintained 口径”契约。
|
||
- `ruoyi-ui/tests/unit/credit-info-detail-ui.test.js`
|
||
删除提示文案从“员工当前已维护征信”改为“征信对象当前已维护征信”。
|
||
- `docs/reports/implementation/2026-03-24-credit-info-direct-storage-frontend-record.md`
|
||
前端实施记录。
|
||
|
||
**参考文件**
|
||
|
||
- `docs/design/2026-03-24-credit-info-direct-storage-design.md`
|
||
- `ruoyi-ui/src/api/ccdiCreditInfo.js`
|
||
- `docs/reports/implementation/2026-03-23-credit-info-maintenance-frontend-implementation.md`
|
||
|
||
## Task 1: 先把前端静态契约切到新口径
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/tests/unit/credit-info-page-layout.test.js`
|
||
- Modify: `ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js`
|
||
- Modify: `ruoyi-ui/tests/unit/credit-info-detail-ui.test.js`
|
||
|
||
- [ ] **Step 1: 改写页面结构契约**
|
||
|
||
在 `credit-info-page-layout.test.js` 中保留这些必备 token：
|
||
|
||
```javascript
|
||
[
|
||
"征信维护",
|
||
"姓名",
|
||
"身份证号",
|
||
"批量上传征信HTML",
|
||
"最近征信查询日期",
|
||
"负债笔数",
|
||
"负债总额",
|
||
"民事案件笔数",
|
||
"强制执行笔数",
|
||
"行政处罚笔数",
|
||
"详情",
|
||
"删除"
|
||
].forEach((token) => {
|
||
assert(source.includes(token), `征信维护页面缺少关键结构: ${token}`);
|
||
});
|
||
```
|
||
|
||
并增加排除断言：
|
||
|
||
```javascript
|
||
assert(!source.includes('label="柜员号"'), "征信维护页面不应再展示柜员号查询项");
|
||
assert(!source.includes('prop="staffId"'), "征信维护列表不应再展示柜员号列");
|
||
```
|
||
|
||
- [ ] **Step 2: 改写 maintained 契约**
|
||
|
||
把 `credit-info-maintained-filter.test.js` 改成下面这组断言：
|
||
|
||
```javascript
|
||
assert(!source.includes("maintained:"), "征信维护页面不应再维护 maintained 查询参数");
|
||
assert(!source.includes('label="是否已维护"'), "征信维护页面不应再展示是否已维护筛选项");
|
||
assert(!source.includes('value="1"'), "征信维护页面不应再内置已维护默认筛选");
|
||
```
|
||
|
||
- [ ] **Step 3: 改写详情/删除契约**
|
||
|
||
把 `credit-info-detail-ui.test.js` 的删除确认文案断言改为：
|
||
|
||
```javascript
|
||
"确认删除该征信对象当前已维护的征信信息吗？"
|
||
```
|
||
|
||
- [ ] **Step 4: 运行静态契约确认失败**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/credit-info-page-layout.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-detail-ui.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- FAIL，原因应集中在页面仍包含 `staffId`、`maintained` 和旧删除文案。
|
||
|
||
- [ ] **Step 5: 提交前端测试契约**
|
||
|
||
```bash
|
||
git add ruoyi-ui/tests/unit/credit-info-page-layout.test.js \
|
||
ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js \
|
||
ruoyi-ui/tests/unit/credit-info-detail-ui.test.js
|
||
git commit -m "新增征信维护前端直接入库测试契约"
|
||
```
|
||
|
||
## Task 2: 精简征信维护页面查询区与列表区
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
|
||
|
||
- [ ] **Step 1: 删除查询区旧字段**
|
||
|
||
从查询表单移除以下片段：
|
||
|
||
```vue
|
||
<el-form-item label="柜员号">
|
||
<el-input v-model="queryParams.staffId" ... />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否已维护">
|
||
<el-select v-model="queryParams.maintained" ...>
|
||
<el-option label="已维护" value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
```
|
||
|
||
查询区只保留：
|
||
|
||
```vue
|
||
<el-form-item label="姓名">
|
||
<el-input v-model="queryParams.name" placeholder="请输入姓名" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证号">
|
||
<el-input v-model="queryParams.idCard" placeholder="请输入身份证号" />
|
||
</el-form-item>
|
||
```
|
||
|
||
- [ ] **Step 2: 精简 `queryParams` 与重置逻辑**
|
||
|
||
把 `data()` 与 `resetQuery()` 收敛为：
|
||
|
||
```javascript
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
name: undefined,
|
||
idCard: undefined,
|
||
}
|
||
```
|
||
|
||
确保以下字段彻底消失：
|
||
|
||
```javascript
|
||
staffId
|
||
maintained
|
||
```
|
||
|
||
- [ ] **Step 3: 删除列表中的柜员号列**
|
||
|
||
移除：
|
||
|
||
```vue
|
||
<el-table-column label="柜员号" prop="staffId" align="center" />
|
||
```
|
||
|
||
保留列表列顺序为：
|
||
|
||
```vue
|
||
姓名 -> 身份证号 -> 最近征信查询日期 -> 负债笔数 -> 负债总额 -> 民事案件笔数 -> 强制执行笔数 -> 行政处罚笔数 -> 操作
|
||
```
|
||
|
||
- [ ] **Step 4: 调整删除确认文案**
|
||
|
||
将删除提示文案改成：
|
||
|
||
```javascript
|
||
"确认删除该征信对象当前已维护的征信信息吗？"
|
||
```
|
||
|
||
- [ ] **Step 5: 运行静态契约确认通过**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/credit-info-page-layout.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-detail-ui.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS，页面已完全移除员工口径字段。
|
||
|
||
- [ ] **Step 6: 提交页面改造**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiCreditInfo/index.vue \
|
||
ruoyi-ui/tests/unit/credit-info-page-layout.test.js \
|
||
ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js \
|
||
ruoyi-ui/tests/unit/credit-info-detail-ui.test.js
|
||
git commit -m "调整征信维护前端页面展示口径"
|
||
```
|
||
|
||
## Task 3: 校验 API 调用与页面数据流未回退
|
||
|
||
**Files:**
|
||
- Review: `ruoyi-ui/src/api/ccdiCreditInfo.js`
|
||
- Review: `ruoyi-ui/tests/unit/credit-info-api-contract.test.js`
|
||
- Review: `ruoyi-ui/tests/unit/credit-info-upload-ui.test.js`
|
||
|
||
- [ ] **Step 1: 确认 API 文件无需改路径**
|
||
|
||
检查 `ccdiCreditInfo.js` 保持以下函数与路径不变：
|
||
|
||
```javascript
|
||
uploadCreditHtml(files)
|
||
listCreditInfo(query)
|
||
getCreditInfoDetail(personId)
|
||
deleteCreditInfo(personId)
|
||
```
|
||
|
||
以及：
|
||
|
||
```javascript
|
||
'/ccdi/creditInfo/upload'
|
||
'/ccdi/creditInfo/list'
|
||
'/ccdi/creditInfo/'
|
||
```
|
||
|
||
- [ ] **Step 2: 运行 API 与上传 UI 契约**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/credit-info-api-contract.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-upload-ui.test.js
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS，说明本次仅调整查询口径，不影响接口路径和上传交互。
|
||
|
||
- [ ] **Step 3: 运行前端构建**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected:
|
||
|
||
- PASS，构建通过
|
||
- 允许出现项目既有体积告警，但不应出现新增编译错误
|
||
|
||
## Task 4: 补齐前端实施记录
|
||
|
||
**Files:**
|
||
- Create: `docs/reports/implementation/2026-03-24-credit-info-direct-storage-frontend-record.md`
|
||
|
||
- [ ] **Step 1: 编写前端实施记录**
|
||
|
||
在实施记录中至少包含：
|
||
|
||
- 实施目标：页面切到征信对象维度
|
||
- 实际修改文件
|
||
- 查询区与列表区移除字段说明
|
||
- 删除提示文案调整
|
||
- 验证命令与结果
|
||
- 若测试期间启动 dev server，结束后已关闭进程
|
||
|
||
- [ ] **Step 2: 检查暂存区仅包含本次前端改动**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
git status --short
|
||
git diff --staged --name-only
|
||
```
|
||
|
||
Expected:
|
||
|
||
- 仅出现前端页面、测试和实施记录相关文件。
|
||
|
||
- [ ] **Step 3: 提交前端记录**
|
||
|
||
```bash
|
||
git add docs/reports/implementation/2026-03-24-credit-info-direct-storage-frontend-record.md
|
||
git commit -m "补充征信维护前端直接入库实施记录"
|
||
```
|