ccdi/docs/plans/frontend/2026-03-24-project-upload-credit-entry-jump-frontend-implementation.md

# Project Upload Credit Entry Jump 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:** 仅调整 `UploadData.vue` 中“征信导入”入口的前端交互，沿用现有动态菜单路由 `/maintain/creditInfo` 作为跳转目标。保持征信维护页面和后端接口完全不变，避免双入口并减少交互分叉。

**Tech Stack:** Vue 2, Vue Router, Element UI, Node.js 源码契约测试

---

## 文件结构与职责

**修改文件**

- `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
  将“征信导入”按钮点击行为从打开弹窗改为路由跳转，并清理不再使用的本地征信上传入口逻辑。
- `docs/reports/implementation/2026-03-24-project-upload-credit-entry-jump-frontend-record.md`
  记录本次前端实施内容、验证命令与结果。

**新增测试文件**

- `ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js`
  锁定“征信导入”按钮使用路由跳转且不再依赖本地上传弹窗入口。

**参考文件**

- `docs/design/2026-03-24-project-upload-credit-entry-jump-design.md`
- `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
- `sql/ccdi_credit_info_menu.sql`

## Task 1: 先锁定入口跳转契约

**Files:**
- Create: `ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js`
- Test: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`

- [ ] **Step 1: 编写失败契约测试**

在 `ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js` 中读取 `UploadData.vue` 源码，至少断言以下关键点：

```javascript
const assert = require("assert");
const fs = require("fs");
const path = require("path");

const viewPath = path.resolve(
  __dirname,
  "../../src/views/ccdiProject/components/detail/UploadData.vue"
);
const source = fs.readFileSync(viewPath, "utf8");

assert(source.includes("@click=\"handleOpenCreditUpload\""), "征信导入按钮事件已变化，需先看到旧入口");
assert(source.includes("showCreditUploadDialog"), "旧征信导入弹窗状态不存在，无法证明改动前行为");
```

- [ ] **Step 2: 运行测试确认当前为旧行为**

Run:

```bash
node ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js
```

Expected:

- PASS，证明当前按钮仍绑定旧的弹窗入口。

- [ ] **Step 3: 改写测试为目标行为**

将断言改为目标行为：

```javascript
[
  "@click=\"handleGoCreditInfoPage\"",
  "this.$router.push(\"/maintain/creditInfo\")",
].forEach((token) => {
  assert(source.includes(token), `缺少征信入口跳转关键代码: ${token}`);
});

[
  "showCreditUploadDialog",
  "handleConfirmCreditUpload",
  "handleCreditFileChange",
].forEach((token) => {
  assert(!source.includes(token), `旧征信弹窗逻辑未清理: ${token}`);
});
```

- [ ] **Step 4: 运行测试确认失败**

Run:

```bash
node ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js
```

Expected:

- FAIL，因为代码尚未切换到跳页实现。

## Task 2: 实现按钮跳转并清理旧入口

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue`
- Test: `ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js`

- [ ] **Step 1: 修改模板点击事件**

把“征信导入”按钮点击事件：

```vue
@click="handleOpenCreditUpload"
```

改为：

```vue
@click="handleGoCreditInfoPage"
```

- [ ] **Step 2: 删除本地征信导入弹窗模板**

移除 `title="征信导入"` 的 `el-dialog` 以及其中的 `el-upload`、底部按钮，确保该按钮点击后不再出现本地弹窗。

- [ ] **Step 3: 删除无用状态与方法并新增跳转方法**

删除以下无用状态与方法：

```javascript
showCreditUploadDialog: false,
creditFileList: [],
creditUploading: false,
```

```javascript
handleOpenCreditUpload() {}
handleCreditFileChange() {}
handleConfirmCreditUpload() {}
pollCreditImportStatus() {}
```

新增最小跳转实现：

```javascript
handleGoCreditInfoPage() {
  if (this.isProjectTagging) {
    return;
  }
  this.$router.push("/maintain/creditInfo");
}
```

- [ ] **Step 4: 处理无用 import**

若 `uploadFile`、`getImportStatus` 仅服务于旧征信弹窗逻辑，则从 `UploadData.vue` 顶部 import 中删除，避免残留死代码。

- [ ] **Step 5: 运行契约测试确认通过**

Run:

```bash
node ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js
```

Expected:

- PASS

- [ ] **Step 6: 手工检视跳转链路**

至少检查：

```bash
rg -n "handleGoCreditInfoPage|/maintain/creditInfo|征信导入" ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
```

Expected:

- PASS，按钮事件与路由目标清晰可见，不再出现旧弹窗控制逻辑。

## Task 3: 补前端实施记录

**Files:**
- Create: `docs/reports/implementation/2026-03-24-project-upload-credit-entry-jump-frontend-record.md`

- [ ] **Step 1: 新增实施记录文档**

记录以下内容：

```markdown
# 上传数据页征信导入入口跳转前端实施记录

## 本次改动
- 将项目详情上传数据页“征信导入”按钮改为直接跳转征信维护页面
- 删除当前页征信导入弹窗入口逻辑

## 影响文件
- ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
- ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js

## 验证
- node ruoyi-ui/tests/unit/project-upload-credit-entry-jump.test.js
```
```

- [ ] **Step 2: 复核暂存区仅包含本次前端相关文件**

Run:

```bash
git status --short
```

Expected:

- 仅暂存本次前端计划执行产生的相关文件；若有无关文件已暂存，先移出暂存区。