Files
ccdi/docs/reports/implementation/2026-03-23-credit-info-maintenance-frontend-implementation.md

2.7 KiB
Raw Blame History

征信维护前端实施记录

1. 实施范围

  • 实施目标:新增“征信维护”前端页面、批量上传弹窗、员工维度摘要列表、详情弹窗与删除交互
  • 实施目录:ruoyi-ui
  • 实施日期2026-03-24

2. 实际修改文件

  • ruoyi-ui/src/api/ccdiCreditInfo.js
  • ruoyi-ui/src/views/ccdiCreditInfo/index.vue
  • ruoyi-ui/tests/unit/credit-info-api-contract.test.js
  • ruoyi-ui/tests/unit/credit-info-page-layout.test.js
  • ruoyi-ui/tests/unit/credit-info-upload-ui.test.js
  • ruoyi-ui/tests/unit/credit-info-detail-ui.test.js

3. 功能落地说明

3.1 API 封装

  • 新增征信上传、列表、详情、删除四个接口封装
  • 上传接口补充 multipart/form-data 请求头,字段名按后端约定使用 files

3.2 页面结构

  • 新增独立页面 ccdiCreditInfo/index.vue
  • 页面顶部包含姓名、柜员号、身份证号、是否已维护查询条件
  • 页面中部按员工维度展示征信摘要列表
  • 操作列提供“详情”“删除”入口

3.3 上传交互

  • 新增“批量上传征信HTML”弹窗
  • 支持一次选择多个 .html/.htm 文件
  • 选择与提交时均校验文件后缀
  • 上传结果展示总文件数、成功数、失败数与失败清单

3.4 详情与删除

  • 详情弹窗展示征信摘要、负面信息、负债明细
  • 删除操作按员工身份证号调用删除接口
  • 删除成功后刷新列表

4. 验证记录

4.1 源码契约测试

执行命令:

node ruoyi-ui/tests/unit/credit-info-api-contract.test.js
node ruoyi-ui/tests/unit/credit-info-page-layout.test.js
node ruoyi-ui/tests/unit/credit-info-upload-ui.test.js
node ruoyi-ui/tests/unit/credit-info-detail-ui.test.js

执行结果:

  • 四个脚本均通过

4.2 前端构建

执行命令:

cd ruoyi-ui
npm run build:prod

执行结果:

  • 构建通过,dist/ 产物生成成功
  • 构建过程中仅出现项目既有的包体积告警,未出现新增编译错误

5. 页面联调关键行为说明

  • 页面标题、查询区、列表区和操作列已落地
  • 上传弹窗支持选择多个 HTML 文件并展示结果汇总
  • 详情弹窗已绑定后端详情接口,展示负面信息与负债明细
  • 删除按钮已绑定删除确认与列表刷新逻辑

6. 进程与环境说明

  • 本次仅执行源码契约测试与生产构建,未启动本地前端 dev server
  • 未启动额外后端或 Mock 进程,因此无残留测试进程需要关闭

7. 提交记录

  • 033b7fc 新增征信维护前端接口封装
  • 96bb4f3 新增征信维护页面骨架
  • 0e3b7f7 新增征信维护上传交互
  • 7da041f 新增征信维护详情与删除交互