# 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 "补充征信维护前端直接入库实施记录"
```