83 lines
3.1 KiB
Markdown
83 lines
3.1 KiB
Markdown
|
# 2026-03-24 专项核查页员工家庭资产负债专项核查前端实施记录
|
||
|
|
|
||
|
|
## 本次新增与修改文件
|
||
|
|
|
||
|
|
### API
|
||
|
|
|
||
|
|
- 新增 `ruoyi-ui/src/api/ccdi/projectSpecialCheck.js`
|
||
|
|
|
||
|
|
### 页面与组件
|
||
|
|
|
||
|
|
- 修改 `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue`
|
||
|
|
- 新增 `ruoyi-ui/src/views/ccdiProject/components/detail/specialCheck.mock.js`
|
||
|
|
- 新增 `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilitySection.vue`
|
||
|
|
- 新增 `ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue`
|
||
|
|
|
||
|
|
### 测试
|
||
|
|
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-family-asset-liability-api.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-layout.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-states.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-family-table.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-risk-tag.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-detail-expand.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-detail-layout.test.js`
|
||
|
|
- 新增 `ruoyi-ui/tests/unit/special-check-visual-alignment.test.js`
|
||
|
|
|
||
|
|
## 实现内容
|
||
|
|
|
||
|
|
### 1. 专项核查 API 封装
|
||
|
|
|
||
|
|
- 新增独立 API 文件 `projectSpecialCheck.js`
|
||
|
|
- 提供 `getFamilyAssetLiabilityList(projectId)` 与 `getFamilyAssetLiabilityDetail(projectId, staffIdCard)`
|
||
|
|
- 请求统一走 `@/utils/request`
|
||
|
|
|
||
|
|
### 2. 专项排查页主容器升级
|
||
|
|
|
||
|
|
- `SpecialCheck.vue` 从占位页改为真实三态容器
|
||
|
|
- 页面保留 `loading / empty / loaded` 三态
|
||
|
|
- 页面初始化与项目切换时都会重新触发专项核查列表加载
|
||
|
|
- `specialCheck.mock.js` 仅保留页面状态切换所需的最小结构
|
||
|
|
|
||
|
|
### 3. 员工家庭核查列表区块
|
||
|
|
|
||
|
|
- 新增 `FamilyAssetLiabilitySection.vue`
|
||
|
|
- 使用 `el-table` 展示姓名、身份证号、所属部门、家庭总年收入、家庭总资产、家庭总负债、风险情况、操作
|
||
|
|
- 风险标签统一使用 `el-tag`
|
||
|
|
- 风险码与标签类型映射：
|
||
|
|
- `NORMAL -> success`
|
||
|
|
- `RISK -> warning`
|
||
|
|
- `HIGH -> danger`
|
||
|
|
- 金额统一格式化为元并保留两位小数
|
||
|
|
|
||
|
|
### 4. 行内展开详情
|
||
|
|
|
||
|
|
- 新增 `FamilyAssetLiabilityDetail.vue`
|
||
|
|
- 详情固定拆成收入、资产、负债三组
|
||
|
|
- 详情使用当前表格行内展开，不引入弹窗、抽屉和路由跳转
|
||
|
|
- 首次点击“查看详情”时按需请求详情接口
|
||
|
|
- 详情结果按员工身份证号缓存
|
||
|
|
- 项目切换时清空展开状态与详情缓存，避免串项目数据
|
||
|
|
|
||
|
|
### 5. 视觉对齐收口
|
||
|
|
|
||
|
|
- 列表区块沿用结果总览已有的 `section-card / block-header / block-title / block-subtitle` 结构
|
||
|
|
- 表格头背景与标题区留白延续结果总览节奏
|
||
|
|
- 详情区块的标题层级统一为 `block-title / block-subtitle`
|
||
|
|
- 页面彻底移除“功能开发中”占位文案与占位图标
|
||
|
|
|
||
|
|
## 增量调整
|
||
|
|
|
||
|
|
### 缺少信息展示
|
||
|
|
|
||
|
|
- 风险标签新增 `MISSING_INFO` 映射，展示为“缺少信息”
|
||
|
|
- 当后端返回本人缺少资产信息时：
|
||
|
|
- 资产卡片隐藏小计区
|
||
|
|
- 当后端返回本人缺少负债信息时：
|
||
|
|
- 负债卡片隐藏小计区
|
||
|
|
|
||
|
|
### 详情卡片布局
|
||
|
|
|
||
|
|
- 详情区三个卡片改为桌面端横向三列均分
|
||
|
|
- 中小屏保留响应式回落为单列，避免表格挤压
|