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:

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:

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

Expected:

• 现有亲属页测试通过

Step 5: 提交

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 文件

导出以下方法：

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:

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

Expected:

• API 契约测试通过

Step 4: 提交

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:

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

Expected:

• 测试通过

Step 5: 提交

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:

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

Expected:

• 测试通过

Step 4: 提交

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:

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:

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: 提交

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