110 lines
4.0 KiB
Markdown
110 lines
4.0 KiB
Markdown
# 征信维护前端实施记录
|
||
|
||
## 1. 实施范围
|
||
|
||
- 实施目标：新增“征信维护”前端页面、批量上传弹窗、员工维度摘要列表、详情弹窗与删除交互
|
||
- 实施目录：`ruoyi-ui`
|
||
- 实施日期：2026-03-24
|
||
|
||
## 2. 实际修改文件
|
||
|
||
- `ruoyi-ui/src/api/ccdiCreditInfo.js`
|
||
- `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
|
||
- `ccdi-info-collection/src/main/resources/mapper/info/collection/CcdiCreditInfoQueryMapper.xml`
|
||
- `ccdi-info-collection/src/test/java/com/ruoyi/info/collection/mapper/CcdiCreditInfoQueryMapperXmlTest.java`
|
||
- `ruoyi-ui/tests/unit/credit-info-api-contract.test.js`
|
||
- `ruoyi-ui/tests/unit/credit-info-date-display.test.js`
|
||
- `ruoyi-ui/tests/unit/credit-info-maintained-filter.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-upload-api-behavior.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`
|
||
- 页面顶部包含姓名、柜员号、身份证号、是否已维护查询条件
|
||
- 页面中部按员工维度展示征信摘要列表
|
||
- 操作列提供“详情”“删除”入口
|
||
- 列表默认仅展示已维护征信的员工，不再展示未维护员工空记录
|
||
- 列表与详情中的征信查询日期统一按 `yyyy-MM-dd` 展示，避免直接渲染原始时间串导致展示不一致
|
||
|
||
### 3.3 上传交互
|
||
|
||
- 新增“批量上传征信HTML”弹窗
|
||
- 支持一次选择多个 `.html/.htm` 文件
|
||
- 选择与提交时均校验文件后缀
|
||
- 上传结果展示总文件数、成功数、失败数与失败清单
|
||
- 上传请求调整为由 API 层统一构造 `FormData`，页面层仅传递原始文件数组
|
||
- 上传接口显式声明 `multipart/form-data` 请求头，保证若依前端请求封装下后端能按 multipart 请求识别
|
||
- 上传成功后主动清空已选文件，避免同批次文件再次选择时表现异常
|
||
|
||
### 3.4 详情与删除
|
||
|
||
- 详情弹窗展示征信摘要、负面信息、负债明细
|
||
- 删除操作按员工身份证号调用删除接口
|
||
- 删除成功后刷新列表
|
||
|
||
## 4. 验证记录
|
||
|
||
### 4.1 源码契约测试
|
||
|
||
执行命令：
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/credit-info-date-display.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-maintained-filter.test.js
|
||
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-upload-api-behavior.test.js
|
||
node ruoyi-ui/tests/unit/credit-info-detail-ui.test.js
|
||
mvn -pl ccdi-info-collection -Dtest=CcdiCreditInfoQueryMapperXmlTest test
|
||
```
|
||
|
||
执行结果：
|
||
|
||
- 前端七个源码契约脚本均通过
|
||
- 后端 `CcdiCreditInfoQueryMapperXmlTest` 通过
|
||
|
||
### 4.2 前端构建
|
||
|
||
执行命令：
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
执行结果：
|
||
|
||
- 构建通过，`dist/` 产物生成成功
|
||
- 构建过程中仅出现项目既有的包体积告警，未出现新增编译错误
|
||
|
||
## 5. 页面联调关键行为说明
|
||
|
||
- 页面标题、查询区、列表区和操作列已落地
|
||
- 上传弹窗支持选择多个 HTML 文件并展示结果汇总
|
||
- 详情弹窗已绑定后端详情接口，展示负面信息与负债明细
|
||
- 删除按钮已绑定删除确认与列表刷新逻辑
|
||
|
||
## 6. 进程与环境说明
|
||
|
||
- 本次执行了源码契约测试、后端 XML 契约测试与前端生产构建
|
||
- 调试过程中启动过本地前端 dev server，验证结束后已主动关闭，无残留测试进程
|
||
|
||
## 7. 提交记录
|
||
|
||
- `033b7fc` 新增征信维护前端接口封装
|
||
- `96bb4f3` 新增征信维护页面骨架
|
||
- `0e3b7f7` 新增征信维护上传交互
|
||
- `7da041f` 新增征信维护详情与删除交互
|