3.1 KiB
3.1 KiB
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 -> successRISK -> warningHIGH -> danger
- 金额统一格式化为元并保留两位小数
4. 行内展开详情
- 新增
FamilyAssetLiabilityDetail.vue - 详情固定拆成收入、资产、负债三组
- 详情使用当前表格行内展开，不引入弹窗、抽屉和路由跳转
- 首次点击“查看详情”时按需请求详情接口
- 详情结果按员工身份证号缓存
- 项目切换时清空展开状态与详情缓存，避免串项目数据
5. 视觉对齐收口
- 列表区块沿用结果总览已有的
section-card / block-header / block-title / block-subtitle结构 - 表格头背景与标题区留白延续结果总览节奏
- 详情区块的标题层级统一为
block-title / block-subtitle - 页面彻底移除“功能开发中”占位文案与占位图标
增量调整
缺少信息展示
- 风险标签新增
MISSING_INFO映射，展示为“缺少信息” - 当后端返回本人缺少资产信息时：
- 资产卡片隐藏小计区
- 当后端返回本人缺少负债信息时：
- 负债卡片隐藏小计区
详情卡片布局
- 详情区三个卡片改为桌面端横向三列均分
- 中小屏保留响应式回落为单列，避免表格挤压