580 lines
14 KiB
Markdown
580 lines
14 KiB
Markdown
# 员工资产信息维护前端实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**Goal:** 在员工信息维护页面中增加员工资产的新增、编辑、删除、详情展示、导入和失败记录查看能力，并保持现有员工导入交互不回归。
|
||
|
||
**Architecture:** 保持 `ccdiBaseStaff` 作为唯一页面入口，在现有员工新增、编辑、详情弹窗中扩展 `assetInfoList` 子表。资产导入复用当前员工导入的弹窗上传、异步轮询、localStorage 状态恢复、失败记录分页查看模型，但所有资产导入状态、文案、存储 key、轮询方法和失败记录弹窗都单独维护，避免与员工导入互相污染。
|
||
|
||
**Tech Stack:** Vue 2, Element UI, 若依前端脚手架, Axios request 封装, `npm run build:prod`
|
||
|
||
---
|
||
|
||
### Task 1: 扩展前端 API 封装员工资产导入能力
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/api/ccdiBaseStaff.js`
|
||
- Create: `ruoyi-ui/src/api/ccdiAssetInfo.js`
|
||
- Test: `ruoyi-ui/tests/unit/employee-asset-api-contract.test.js`
|
||
|
||
**Step 1: 先写失败校验脚本**
|
||
|
||
新增一个轻量级源码断言脚本，校验以下约束：
|
||
|
||
- `ccdiAssetInfo.js` 文件存在
|
||
- 资产导入 API 包含下载模板、提交导入、查询状态、查询失败记录
|
||
- 员工新增和编辑接口允许传递 `assetInfoList`
|
||
|
||
**Step 2: 运行校验确认失败**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
||
```
|
||
|
||
Expected: FAIL，因为资产导入 API 文件尚不存在。
|
||
|
||
**Step 3: 编写最小 API 封装**
|
||
|
||
在 `ccdiAssetInfo.js` 中新增：
|
||
|
||
- `importAssetTemplate`
|
||
- `importAssetData`
|
||
- `getAssetImportStatus`
|
||
- `getAssetImportFailures`
|
||
|
||
接口路径统一使用：
|
||
|
||
- `/ccdi/assetInfo/importTemplate`
|
||
- `/ccdi/assetInfo/importData`
|
||
- `/ccdi/assetInfo/importStatus/{taskId}`
|
||
- `/ccdi/assetInfo/importFailures/{taskId}`
|
||
|
||
`ccdiBaseStaff.js` 继续保留员工增删改查，不把资产导入接口混入员工 API 文件。
|
||
|
||
**Step 4: 再次运行校验**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
||
```
|
||
|
||
Expected: PASS
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/api/ccdiBaseStaff.js ruoyi-ui/src/api/ccdiAssetInfo.js ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
||
git commit -m "新增员工资产前端接口封装"
|
||
```
|
||
|
||
### Task 2: 扩展员工表单模型，支持聚合 `assetInfoList`
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
- Test: `ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js`
|
||
|
||
**Step 1: 先写失败校验脚本**
|
||
|
||
校验以下行为：
|
||
|
||
- `reset()` 默认初始化 `assetInfoList: []`
|
||
- `handleAdd()` 打开新增弹窗时带空资产列表
|
||
- `handleUpdate()` 回显详情时保留接口返回的 `assetInfoList`
|
||
- `submitForm()` 提交前会附带 `assetInfoList`
|
||
|
||
**Step 2: 运行校验确认失败**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
||
```
|
||
|
||
Expected: FAIL，因为当前 `form` 里还没有资产字段。
|
||
|
||
**Step 3: 编写最小表单改造**
|
||
|
||
调整 `index.vue` 中以下逻辑：
|
||
|
||
- `form` 默认值增加 `assetInfoList: []`
|
||
- `reset()` 同步重置 `assetInfoList`
|
||
- `handleAdd()` 明确初始化空数组
|
||
- `handleUpdate()` 和 `handleDetail()` 对返回值中的 `assetInfoList` 做空值兜底
|
||
- 新增 `normalizeAssetInfoList()`，提交前过滤全空行
|
||
|
||
注意：
|
||
|
||
- 前端不传 `familyId`
|
||
- 前端保留用户输入的 `personId`
|
||
- 不在前端生成 `assetId`
|
||
|
||
**Step 4: 再次运行校验**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
||
```
|
||
|
||
Expected: PASS
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
||
git commit -m "扩展员工表单资产聚合字段"
|
||
```
|
||
|
||
### Task 3: 在新增和编辑弹窗中加入“资产信息”可编辑子表
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
- Test: `ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js`
|
||
|
||
**Step 1: 先写失败校验脚本**
|
||
|
||
断言页面模板出现以下结构：
|
||
|
||
- “资产信息”分区标题
|
||
- “新增资产”按钮
|
||
- 资产子表或空状态容器
|
||
- 资产实际持有人身份证号输入框
|
||
- 每行删除按钮
|
||
|
||
**Step 2: 运行校验确认失败**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
||
```
|
||
|
||
Expected: FAIL，因为当前员工弹窗只有基本信息。
|
||
|
||
**Step 3: 编写最小弹窗结构**
|
||
|
||
在基本信息区域下方新增“资产信息”分区，并增加以下辅助方法：
|
||
|
||
- `createEmptyAssetRow()`
|
||
- `handleAddAsset()`
|
||
- `handleRemoveAsset(index)`
|
||
- `hasAssetContent(row)`
|
||
|
||
子表字段包含：
|
||
|
||
- `personId`
|
||
- `assetMainType`
|
||
- `assetSubType`
|
||
- `assetName`
|
||
- `ownershipRatio`
|
||
- `purchaseEvalDate`
|
||
- `originalValue`
|
||
- `currentValue`
|
||
- `valuationDate`
|
||
- `assetStatus`
|
||
- `remarks`
|
||
- `operation`
|
||
|
||
交互要求：
|
||
|
||
- 允许多行新增
|
||
- 每行支持删除
|
||
- 空列表时显示“暂无资产信息，请点击新增资产”
|
||
|
||
**Step 4: 再次运行校验**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
||
```
|
||
|
||
Expected: PASS
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
||
git commit -m "新增员工资产编辑子表"
|
||
```
|
||
|
||
### Task 4: 为资产子表补充前端校验与填写提示
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
|
||
**Step 1: 增加资产行字段校验**
|
||
|
||
至少校验以下前端规则：
|
||
|
||
- `personId` 格式为合法身份证号
|
||
- `assetMainType`、`assetSubType`、`assetName`、`currentValue`、`assetStatus` 为必填
|
||
- 金额字段允许为空，但填写时必须是合法数字
|
||
- 日期字段使用 `value-format="yyyy-MM-dd"`
|
||
|
||
**Step 2: 增加交互提示**
|
||
|
||
在资产分区标题或字段提示中明确说明：
|
||
|
||
- `personId` 表示资产实际持有人身份证号
|
||
- 如果 `personId` 等于当前员工身份证号，则视为员工本人资产
|
||
- 如果 `personId` 不等于当前员工身份证号，则视为员工亲属资产
|
||
|
||
**Step 3: 保持前端不做归属推导**
|
||
|
||
不要在前端根据 `personId` 生成 `familyId`，该逻辑完全交给后端。
|
||
|
||
**Step 4: 构建验证**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected: 构建通过，无模板语法错误。
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue
|
||
git commit -m "补充员工资产表单校验与提示"
|
||
```
|
||
|
||
### Task 5: 在详情弹窗中展示员工全部资产信息
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
- Test: `ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js`
|
||
|
||
**Step 1: 扩展详情弹窗布局**
|
||
|
||
在现有“基本信息”卡片下方新增“资产信息”区块。
|
||
|
||
**Step 2: 增加只读资产表格**
|
||
|
||
展示字段：
|
||
|
||
- `personId`
|
||
- `ownerType`
|
||
- `assetMainType`
|
||
- `assetSubType`
|
||
- `assetName`
|
||
- `ownershipRatio`
|
||
- `currentValue`
|
||
- `assetStatus`
|
||
- `remarks`
|
||
|
||
其中 `ownerType` 可在前端根据 `personId === employeeDetail.idCard` 计算展示“本人”或“亲属”。
|
||
|
||
**Step 3: 增加空状态**
|
||
|
||
当 `employeeDetail.assetInfoList` 为空时显示“暂无资产信息”。
|
||
|
||
**Step 4: 回归校验**
|
||
|
||
再次确认原有基本信息展示不受影响：
|
||
|
||
- 姓名
|
||
- 柜员号
|
||
- 所属部门
|
||
- 身份证号
|
||
- 电话
|
||
- 入职时间
|
||
- 状态
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
||
git commit -m "新增员工资产详情展示"
|
||
```
|
||
|
||
### Task 6: 增加独立的资产导入入口、弹窗和状态模型
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
- Test: `ruoyi-ui/tests/unit/employee-asset-import-ui.test.js`
|
||
|
||
**Step 1: 先写失败校验脚本**
|
||
|
||
校验页面存在以下独立状态：
|
||
|
||
- 资产导入按钮“导入资产信息”
|
||
- 资产失败记录按钮“查看员工资产导入失败记录”
|
||
- 独立 `assetUpload` 弹窗对象
|
||
- 独立 `assetPollingTimer`
|
||
- 独立 `assetCurrentTaskId`
|
||
- 独立 `assetFailureDialogVisible`
|
||
- 独立 localStorage key
|
||
|
||
**Step 2: 运行校验确认失败**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
||
```
|
||
|
||
Expected: FAIL，因为当前页面只有员工导入状态。
|
||
|
||
**Step 3: 编写最小导入 UI**
|
||
|
||
在按钮区新增：
|
||
|
||
- “导入资产信息”
|
||
- “查看员工资产导入失败记录”
|
||
|
||
在 `data()` 中新增一套独立状态，例如：
|
||
|
||
- `assetUpload`
|
||
- `assetImportResultVisible`
|
||
- `assetImportResultContent`
|
||
- `assetPollingTimer`
|
||
- `assetShowFailureButton`
|
||
- `assetCurrentTaskId`
|
||
- `assetFailureDialogVisible`
|
||
- `assetFailureList`
|
||
- `assetFailureLoading`
|
||
- `assetFailureTotal`
|
||
- `assetFailureQueryParams`
|
||
|
||
**Step 4: 新增资产导入弹窗**
|
||
|
||
复用员工导入交互结构，但文案调整为：
|
||
|
||
- 标题：`员工资产数据导入`
|
||
- 模板下载按钮：下载员工资产模板
|
||
- 提示文案：系统将根据 `personId/person_id` 自动识别归属员工
|
||
|
||
**Step 5: 再次运行校验**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
||
```
|
||
|
||
Expected: PASS
|
||
|
||
**Step 6: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
||
git commit -m "新增员工资产导入交互状态"
|
||
```
|
||
|
||
### Task 7: 接通资产导入上传、轮询、状态恢复和失败记录查询
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
- Check: `ruoyi-ui/src/api/ccdiAssetInfo.js`
|
||
|
||
**Step 1: 增加资产导入方法**
|
||
|
||
至少实现以下方法：
|
||
|
||
- `handleAssetImport()`
|
||
- `handleAssetImportDialogClose()`
|
||
- `importAssetTemplate()`
|
||
- `handleAssetFileUploadProgress()`
|
||
- `handleAssetFileSuccess()`
|
||
- `startAssetImportStatusPolling(taskId)`
|
||
- `handleAssetImportComplete(statusResult)`
|
||
- `viewAssetImportFailures()`
|
||
- `getAssetFailureList()`
|
||
|
||
**Step 2: 增加独立 localStorage 管理**
|
||
|
||
新增一组与员工导入隔离的方法：
|
||
|
||
- `saveAssetImportTaskToStorage()`
|
||
- `getAssetImportTaskFromStorage()`
|
||
- `clearAssetImportTaskFromStorage()`
|
||
- `restoreAssetImportState()`
|
||
- `getLastAssetImportTooltip()`
|
||
- `clearAssetImportHistory()`
|
||
|
||
建议 key 使用：
|
||
|
||
```text
|
||
employee_asset_import_last_task
|
||
```
|
||
|
||
**Step 3: 严格区分员工导入与资产导入**
|
||
|
||
保持现有员工导入逻辑不回归：
|
||
|
||
- 员工导入仍使用 `employee_import_last_task`
|
||
- 员工失败记录仍显示“查看导入失败记录”
|
||
- 资产失败记录按钮固定显示“查看员工资产导入失败记录”
|
||
|
||
**Step 4: 处理资产导入完成通知**
|
||
|
||
通知文案应显式区分：
|
||
|
||
- `员工资产导入任务已提交`
|
||
- `员工资产导入完成`
|
||
- `成功 X 条，失败 Y 条`
|
||
|
||
**Step 5: 接通失败记录弹窗**
|
||
|
||
弹窗标题为：
|
||
|
||
```text
|
||
员工资产导入失败记录
|
||
```
|
||
|
||
表格字段展示：
|
||
|
||
- `familyId`
|
||
- `personId`
|
||
- `assetMainType`
|
||
- `assetSubType`
|
||
- `assetName`
|
||
- `errorMessage`
|
||
|
||
若后端失败记录不返回 `familyId`，前端允许显示为空，不自行推导。
|
||
|
||
**Step 6: 构建验证**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected: 构建通过，资产导入方法和模板绑定完整。
|
||
|
||
**Step 7: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/src/api/ccdiAssetInfo.js
|
||
git commit -m "接通员工资产导入轮询与失败记录"
|
||
```
|
||
|
||
### Task 8: 调整样式与可读性，避免资产子表破坏现有弹窗布局
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
|
||
**Step 1: 调整编辑弹窗样式**
|
||
|
||
补充以下样式：
|
||
|
||
- 资产分区标题
|
||
- 资产表格容器
|
||
- 空状态
|
||
- 表头提示文案
|
||
- 详情页资产区块
|
||
|
||
**Step 2: 保持桌面端可读性**
|
||
|
||
检查 `1200px` 编辑弹窗在加入资产表后是否仍可读，必要时：
|
||
|
||
- 增加横向滚动容器
|
||
- 调整列宽
|
||
- 对备注列使用 `show-overflow-tooltip`
|
||
|
||
**Step 3: 检查窄屏降级**
|
||
|
||
至少保证：
|
||
|
||
- 弹窗内部不会内容挤压到不可操作
|
||
- 资产操作列始终可点击
|
||
- 详情表格可以横向滚动
|
||
|
||
**Step 4: 构建验证**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected: 样式改动不影响构建。
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiBaseStaff/index.vue
|
||
git commit -m "优化员工资产页面样式与布局"
|
||
```
|
||
|
||
### Task 9: 执行前端联调与最终验证
|
||
|
||
**Files:**
|
||
- Check: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
||
- Check: `ruoyi-ui/src/api/ccdiBaseStaff.js`
|
||
- Check: `ruoyi-ui/src/api/ccdiAssetInfo.js`
|
||
- Check: `ruoyi-ui/tests/unit/*.test.js`
|
||
|
||
**Step 1: 运行源码断言脚本**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
||
node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
||
node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
||
node ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
||
```
|
||
|
||
Expected: 全部 PASS
|
||
|
||
**Step 2: 运行生产构建**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
Expected: 构建成功
|
||
|
||
**Step 3: 启动本地前端联调**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
Expected: 本地员工信息维护页面可访问
|
||
|
||
**Step 4: 手工验证关键场景**
|
||
|
||
- 新增员工时添加 1 条本人资产并保存
|
||
- 新增员工时添加 1 条亲属资产并保存
|
||
- 编辑员工时增加、修改、删除资产行
|
||
- 打开员工详情时查看资产信息区
|
||
- 执行员工资产导入并检查轮询通知
|
||
- 导入失败后打开“查看员工资产导入失败记录”
|
||
- 刷新页面后验证资产导入失败记录按钮可恢复
|
||
- 清除资产导入历史后验证按钮消失
|
||
- 回归验证原员工导入功能未受影响
|
||
|
||
**Step 5: 整理问题并做最小修复**
|
||
|
||
优先排查：
|
||
|
||
- `assetInfoList` 回显为空数组时模板报错
|
||
- 资产日期字段格式不一致
|
||
- 两套导入轮询定时器互相覆盖
|
||
- localStorage key 混用导致员工和资产失败记录串数据
|
||
|
||
**Step 6: 最终提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/api/ccdiBaseStaff.js ruoyi-ui/src/api/ccdiAssetInfo.js ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit docs/plans/2026-03-12-employee-asset-maintenance-frontend-implementation.md
|
||
git commit -m "新增员工资产信息前端实施计划"
|
||
```
|