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

```bash
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: 提交**

```bash
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: 提交**

```bash
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: 提交**

```bash
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: 提交**

```bash
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: 提交**

```bash
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: 提交**

```bash
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: 提交**

```bash
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: 提交**

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