新增员工亲属资产维护设计与实施计划
This commit is contained in:
@@ -0,0 +1,314 @@
|
||||
# 员工亲属资产维护前端实施计划
|
||||
|
||||
> **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 "完成亲属资产前端联调验证"
|
||||
```
|
||||
Reference in New Issue
Block a user