wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e36f13b6b5fc1ad04d2bb2672f1c4a493068935e
ccdi/docs/plans/2026-03-12-employee-asset-maintenance-frontend-implementation.md

14 KiB
Raw Blame History

员工资产信息维护前端实施计划

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:

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:

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

Expected: PASS

Step 5: 提交

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:

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:

node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js

Expected: PASS

Step 5: 提交

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:

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:

node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js

Expected: PASS

Step 5: 提交

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:

cd ruoyi-ui
npm run build:prod

Expected: 构建通过，无模板语法错误。

Step 5: 提交

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

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:

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:

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

Expected: PASS

Step 6: 提交

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 使用：

employee_asset_import_last_task

Step 3: 严格区分员工导入与资产导入

保持现有员工导入逻辑不回归：

  • 员工导入仍使用 employee_import_last_task
  • 员工失败记录仍显示“查看导入失败记录”
  • 资产失败记录按钮固定显示“查看员工资产导入失败记录”

Step 4: 处理资产导入完成通知

通知文案应显式区分：

  • 员工资产导入任务已提交
  • 员工资产导入完成
  • 成功 X 条，失败 Y 条

Step 5: 接通失败记录弹窗

弹窗标题为：

员工资产导入失败记录

表格字段展示：

  • familyId
  • personId
  • assetMainType
  • assetSubType
  • assetName
  • errorMessage

若后端失败记录不返回 familyId，前端允许显示为空，不自行推导。

Step 6: 构建验证

Run:

cd ruoyi-ui
npm run build:prod

Expected: 构建通过，资产导入方法和模板绑定完整。

Step 7: 提交

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:

cd ruoyi-ui
npm run build:prod

Expected: 样式改动不影响构建。

Step 5: 提交

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:

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:

cd ruoyi-ui
npm run build:prod

Expected: 构建成功

Step 3: 启动本地前端联调

Run:

cd ruoyi-ui
npm run dev

Expected: 本地员工信息维护页面可访问

Step 4: 手工验证关键场景

  • 新增员工时添加 1 条本人资产并保存
  • 新增员工时添加 1 条亲属资产并保存
  • 编辑员工时增加、修改、删除资产行
  • 打开员工详情时查看资产信息区
  • 执行员工资产导入并检查轮询通知
  • 导入失败后打开“查看员工资产导入失败记录”
  • 刷新页面后验证资产导入失败记录按钮可恢复
  • 清除资产导入历史后验证按钮消失
  • 回归验证原员工导入功能未受影响

Step 5: 整理问题并做最小修复

优先排查：

  • assetInfoList 回显为空数组时模板报错
  • 资产日期字段格式不一致
  • 两套导入轮询定时器互相覆盖
  • localStorage key 混用导致员工和资产失败记录串数据

Step 6: 最终提交

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 "新增员工资产信息前端实施计划"
Reference in New Issue View Git Blame Copy Permalink