ccdi/docs/plans/2026-03-13-employee-family-asset-import-split-frontend-implementation.md

# 员工资产导入与亲属资产导入拆分前端实施计划

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 将员工页与亲属页的资产导入前端交互彻底拆开，确保员工页只走员工资产导入接口，亲属页只走亲属资产导入接口。

**Architecture:** 保留亲属页现有资产导入状态管理，新增员工资产专用 API 封装并改造员工页上传地址、模板下载、状态轮询与失败记录查询。两边继续复用现有异步导入交互样式，但数据源和文案完全隔离。

**Tech Stack:** Vue 2, Element UI, Axios request wrapper, Node 静态契约测试

---

### Task 1: 固化前端拆分契约测试

**Files:**
- Modify: `ruoyi-ui/tests/unit/employee-asset-api-contract.test.js`
- Modify: `ruoyi-ui/tests/unit/employee-asset-import-ui.test.js`
- Modify: `ruoyi-ui/tests/unit/staff-family-asset-api-contract.test.js`
- Modify: `ruoyi-ui/tests/unit/staff-family-asset-detail-import-ui.test.js`

**Step 1: 写员工页失败测试**

- 断言员工页不再引用 `/ccdi/assetInfo/importData`
- 断言员工页引用新的员工资产 API 文件或路由
- 断言模板文案为“员工资产模板”

**Step 2: 运行员工页静态测试确认失败**

Run:

```bash
node tests/unit/employee-asset-api-contract.test.js
node tests/unit/employee-asset-import-ui.test.js
```

Expected:

- 至少一个断言失败
- 失败原因是员工页仍指向旧接口

**Step 3: 写亲属页保护性测试**

- 断言亲属页继续使用 `/ccdi/assetInfo/*`
- 断言亲属页模板文案仍为“亲属资产”

**Step 4: 运行亲属页测试确认当前仍通过**

Run:

```bash
node tests/unit/staff-family-asset-api-contract.test.js
node tests/unit/staff-family-asset-detail-import-ui.test.js
```

Expected:

- 现有亲属页测试通过

**Step 5: 提交**

```bash
git add ruoyi-ui/tests/unit/employee-asset-api-contract.test.js ruoyi-ui/tests/unit/employee-asset-import-ui.test.js ruoyi-ui/tests/unit/staff-family-asset-api-contract.test.js ruoyi-ui/tests/unit/staff-family-asset-detail-import-ui.test.js
git commit -m "补充资产导入拆分前端失败测试"
```

### Task 2: 新增员工资产导入 API 封装

**Files:**
- Create: `ruoyi-ui/src/api/ccdiBaseStaffAsset.js`
- Modify: `ruoyi-ui/tests/unit/employee-asset-api-contract.test.js`

**Step 1: 写最小 API 文件**

导出以下方法：

```javascript
export function importBaseStaffAssetTemplate() {}
export function importBaseStaffAssetData(data) {}
export function getBaseStaffAssetImportStatus(taskId) {}
export function getBaseStaffAssetImportFailures(taskId, pageNum, pageSize) {}
```

**Step 2: 接入员工专用路由**

- `/ccdi/baseStaff/asset/importTemplate`
- `/ccdi/baseStaff/asset/importData`
- `/ccdi/baseStaff/asset/importStatus/`
- `/ccdi/baseStaff/asset/importFailures/`

**Step 3: 运行员工资产 API 静态测试**

Run:

```bash
node tests/unit/employee-asset-api-contract.test.js
```

Expected:

- API 契约测试通过

**Step 4: 提交**

```bash
git add ruoyi-ui/src/api/ccdiBaseStaffAsset.js ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
git commit -m "新增员工资产导入前端接口"
```

### Task 3: 改造员工页导入交互

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
- Modify: `ruoyi-ui/tests/unit/employee-asset-import-ui.test.js`

**Step 1: 替换员工页上传地址**

- `assetUpload.url` 改为 `/ccdi/baseStaff/asset/importData`
- 模板下载改为 `/ccdi/baseStaff/asset/importTemplate`
- 状态查询与失败记录改为员工资产专用 API

**Step 2: 保持状态隔离**

- 保留 `assetUpload`、`assetPollingTimer`、`assetCurrentTaskId`
- 仅替换其数据来源
- 不改动普通员工导入状态

**Step 3: 调整员工页提示文案**

- 提示用户仅支持员工本人资产导入
- 下载链接文字明确为“下载员工资产模板”

**Step 4: 运行员工页静态测试**

Run:

```bash
node tests/unit/employee-asset-import-ui.test.js
```

Expected:

- 测试通过

**Step 5: 提交**

```bash
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
git commit -m "切换员工页资产导入到专用接口"
```

### Task 4: 保护亲属页导入交互不回归

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue`
- Modify: `ruoyi-ui/tests/unit/staff-family-asset-api-contract.test.js`
- Modify: `ruoyi-ui/tests/unit/staff-family-asset-detail-import-ui.test.js`

**Step 1: 检查亲属页调用**

- 确认亲属页仍使用 `/ccdi/assetInfo/importData`
- 确认模板下载仍使用 `/ccdi/assetInfo/importTemplate`
- 确认提示文案仍强调“亲属资产”

**Step 2: 如有必要补充只读修正**

- 若之前误改了亲属页文案或下载文件名，恢复为亲属专用表达

**Step 3: 运行亲属页静态测试**

Run:

```bash
node tests/unit/staff-family-asset-api-contract.test.js
node tests/unit/staff-family-asset-detail-import-ui.test.js
```

Expected:

- 测试通过

**Step 4: 提交**

```bash
git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue ruoyi-ui/tests/unit/staff-family-asset-api-contract.test.js ruoyi-ui/tests/unit/staff-family-asset-detail-import-ui.test.js
git commit -m "保护亲属页资产导入交互不回归"
```

### Task 5: 执行前端回归验证

**Files:**
- Modify: `docs/plans/2026-03-13-employee-family-asset-import-split-design.md`

**Step 1: 运行全部相关静态测试**

Run:

```bash
node tests/unit/employee-asset-api-contract.test.js
node tests/unit/employee-asset-import-ui.test.js
node tests/unit/staff-family-asset-api-contract.test.js
node tests/unit/staff-family-asset-detail-import-ui.test.js
```

Expected:

- 四个测试全部通过

**Step 2: 做源码检查**

Run:

```bash
git grep -n "/ccdi/baseStaff/asset|/ccdi/assetInfo" -- "ruoyi-ui/src/views/**/*.vue" "ruoyi-ui/src/api/*.js"
```

Expected:

- 员工页仅指向 `/ccdi/baseStaff/asset/*`
- 亲属页仅指向 `/ccdi/assetInfo/*`

**Step 3: 更新设计文档实现状态**

- 在设计文档末尾补充前端已完成拆分验证说明

**Step 4: 提交**

```bash
git add docs/plans/2026-03-13-employee-family-asset-import-split-design.md
git commit -m "完成资产导入拆分前端验证"
```