ccdi/docs/plans/2026-03-12-staff-family-asset-maintenance-frontend-implementation.md

员工亲属资产维护前端实施计划

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

Goal: 在员工亲属关系维护页面中增加亲属资产的可视化维护、详情展示和资产导入交互能力。

Architecture: 保持 ccdiStaffFmyRelation 为唯一页面入口，在现有新增、编辑、详情弹窗中扩展亲属资产子表，并新增独立的亲属资产导入状态、弹窗和失败记录视图。资产归属字段不在前端暴露，提交时仅上传资产业务字段列表。

Tech Stack: Vue 2, Element UI, 若依前端脚手架, Axios request 封装

---

Task 1: 扩展前端 API 封装资产导入与聚合保存字段

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\api\ccdiStaffFmyRelation.js
• Create: D:\ccdi\ccdi\ruoyi-ui\src\api\ccdiAssetInfo.js

Step 1: 保持亲属关系 API 支持传递 assetInfoList

• addRelation
• updateRelation
• getRelation

Step 2: 新增资产导入 API 文件

• 下载模板
• 提交导入
• 查询状态
• 查询失败记录

Step 3: 自查接口路径

• 使用 /ccdi/assetInfo/*
• 与现有 staffFmyRelation API 区分清楚

Step 4: 运行构建检查

Run: npm run build:prod Expected: API 引用路径无语法错误

Step 5: 提交

git add ruoyi-ui/src/api/ccdiStaffFmyRelation.js ruoyi-ui/src/api/ccdiAssetInfo.js
git commit -m "新增亲属资产前端接口封装"

Task 2: 扩展亲属关系表单模型与重置逻辑

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 为 form 增加 assetInfoList

• 默认值设为空数组
• 重置时同步清空

Step 2: 处理详情与编辑回显

• getRelation 返回后回填 assetInfoList
• 保证空值时回退为 []

Step 3: 在提交前过滤空资产行

• 仅保留有实际内容的资产
• 不在前端传 familyId、personId

Step 4: 本地验证

Run: npm run build:prod Expected: 页面脚本编译通过

Step 5: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "扩展亲属关系表单资产模型"

Task 3: 在新增/编辑弹窗中加入亲属资产子表

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 新增“亲属资产信息”分区

• 放在基本信息下方
• 右侧增加“新增资产”按钮

Step 2: 渲染可编辑子表

• 字段包含资产大类、资产小类、资产名称、产权占比、购买/评估日期、资产原值、当前估值、估值截止日期、资产状态、备注、操作

Step 3: 支持资产行增删

• 新增空白行
• 删除当前行

Step 4: 对新增资产按钮加前置限制

• 新增模式下未填写 relationCertType 或 relationCertNo 时禁用
• 提示“请先填写关系人证件信息”

Step 5: 构建验证

Run: npm run build:prod Expected: 模板与脚本通过编译

Step 6: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "新增亲属资产编辑子表"

Task 4: 锁定编辑场景下的亲属证件字段

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 将 relationCertType 在编辑场景下置灰

• :disabled="!isAdd"

Step 2: 将 relationCertNo 在编辑场景下置灰

• :disabled="!isAdd"

Step 3: 核对员工身份证号选择器

• 保持当前新增可选、编辑禁改逻辑

Step 4: 构建验证

Run: npm run build:prod Expected: 字段禁用逻辑无模板错误

Step 5: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "锁定亲属证件字段编辑能力"

Task 5: 在详情弹窗展示亲属资产信息

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 增加详情分区

• 标题为“亲属资产信息”

Step 2: 使用只读表格展示资产

• 展示关键资产字段
• 不展示归属键和主键

Step 3: 增加空状态

• 无资产时显示“暂无亲属资产信息”

Step 4: 构建验证

Run: npm run build:prod Expected: 详情模板渲染通过

Step 5: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "新增亲属资产详情展示"

Task 6: 新增亲属资产导入入口与状态管理

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 在按钮区新增入口

• “导入亲属资产信息”
• “查看亲属资产导入失败记录”

Step 2: 新增独立上传弹窗状态

• assetUpload
• assetImportPollingTimer
• assetCurrentTaskId

Step 3: 新增独立 localStorage key

• 例如 staff_fmy_asset_import_last_task

Step 4: 新增资产导入失败记录弹窗与分页状态

• 与现有亲属关系导入分开维护

Step 5: 构建验证

Run: npm run build:prod Expected: 导入状态变量与模板绑定正常

Step 6: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "新增亲属资产导入交互状态"

Task 7: 接通资产导入上传、轮询与失败记录查询

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue
• Check: D:\ccdi\ccdi\ruoyi-ui\src\api\ccdiAssetInfo.js

Step 1: 实现模板下载

• 调用资产导入模板接口

Step 2: 实现上传成功回调

• 校验返回的 taskId
• 保存任务状态
• 启动轮询

Step 3: 实现轮询完成处理

• 根据成功/失败数展示通知
• 刷新页面列表
• 控制失败记录按钮显示

Step 4: 实现失败记录查询

• 独立调用资产失败记录接口
• 处理记录过期和网络错误提示

Step 5: 构建验证

Run: npm run build:prod Expected: 资产导入流程相关方法通过编译

Step 6: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "接通亲属资产导入轮询与失败记录"

Task 8: 调整样式与交互可读性

Files:

• Modify: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 为资产分区补样式

• 表格区间距
• 空状态样式
• 分区标题样式

Step 2: 检查弹窗宽度

• 保证新增/编辑/详情在资产表加入后仍可读

Step 3: 检查移动端/窄屏降级

• 避免列宽完全挤压

Step 4: 构建验证

Run: npm run build:prod Expected: 样式变更不影响构建

Step 5: 提交

git add ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
git commit -m "优化亲属资产页面样式与布局"

Task 9: 执行前端联调验证

Files:

• Check: D:\ccdi\ccdi\ruoyi-ui\src\views\ccdiStaffFmyRelation\index.vue

Step 1: 运行生产构建

Run: cd ruoyi-ui && npm run build:prod Expected: 构建成功

Step 2: 启动前端开发环境

Run: cd ruoyi-ui && npm run dev Expected: 本地页面可访问

Step 3: 手工验证页面场景

• 新增亲属关系并添加资产
• 编辑亲属关系并维护资产
• 验证证件类型、证件号码禁改
• 查看详情资产区
• 触发亲属资产导入和失败记录查看

Step 4: 整理验证结果

• 记录已验证场景和遗留问题

Step 5: 提交

git add .
git commit -m "完成亲属资产前端联调验证"