89 lines
3.4 KiB
Markdown
89 lines
3.4 KiB
Markdown
# 项目详情风险总览员工列表分页前端实施记录
|
||
|
||
## 1. 实施概述
|
||
|
||
- 实施日期：2026-03-29
|
||
- 实施范围：风险总览员工列表前端分页 API、首屏分页装配、局部分页组件与测试回归
|
||
- 实施结果：前端代码改造完成，定向回归与真实浏览器翻页回归通过
|
||
|
||
本次实施按设计文档完成以下内容：
|
||
|
||
- `projectOverview.js` 中的 `getOverviewRiskPeople` 改为参数对象透传
|
||
- `PreliminaryCheck.vue` 首屏固定拉取风险员工第一页 5 条
|
||
- `RiskPeopleSection.vue` 接管局部分页状态、局部 loading 与翻页请求
|
||
- 修复 `Pagination` 与 `.sync` 联动下的翻页误拦截问题，确保点击页码后会真正发起指定页请求
|
||
|
||
## 2. 实际修改文件
|
||
|
||
### 2.1 前端代码
|
||
|
||
- `ruoyi-ui/src/api/ccdi/projectOverview.js`
|
||
- `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
|
||
- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue`
|
||
- `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
|
||
|
||
### 2.2 测试代码
|
||
|
||
- `ruoyi-ui/tests/unit/project-overview-api.test.js`
|
||
- `ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js`
|
||
- `ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination-load.test.js`
|
||
- `ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js`
|
||
- `ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js`
|
||
|
||
## 3. 关键实施说明
|
||
|
||
### 3.1 API 改造
|
||
|
||
- `getOverviewRiskPeople` 从 `getOverviewRiskPeople(projectId)` 改为 `getOverviewRiskPeople(params)`
|
||
- 透传字段固定为：
|
||
- `projectId`
|
||
- `pageNum`
|
||
- `pageSize`
|
||
|
||
### 3.2 首屏数据装配
|
||
|
||
- `PreliminaryCheck.vue` 在 `Promise.all` 中改为请求：
|
||
- `getOverviewRiskPeople({ projectId: this.projectId, pageNum: 1, pageSize: 5 })`
|
||
- `createOverviewLoadedData` 将 `riskPeople` 统一归一为：
|
||
- `rows`
|
||
- `total`
|
||
- `pageNum`
|
||
- `pageSize`
|
||
|
||
### 3.3 局部分页实现
|
||
|
||
- `RiskPeopleSection.vue` 新增 `projectId` 入参
|
||
- 组件内部维护：
|
||
- `pageNum`
|
||
- `pageSize`
|
||
- `total`
|
||
- `tableLoading`
|
||
- `localRows`
|
||
- 翻页时直接调用 `getOverviewRiskPeople` 拉取指定页，并只更新当前表格数据
|
||
- 去除 `handlePageChange` 中基于同步后 `pageNum` 的提前返回，避免页码样式切换成功但数据未刷新
|
||
|
||
## 4. 测试与验证
|
||
|
||
执行命令：
|
||
|
||
```bash
|
||
node ruoyi-ui/tests/unit/project-overview-api.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination-load.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-binding.test.js
|
||
node ruoyi-ui/tests/unit/preliminary-check-risk-people-pagination.test.js
|
||
```
|
||
|
||
验证结果：
|
||
|
||
- 5 条前端定向测试全部通过
|
||
- 首屏分页装配、分页条渲染与翻页调用链均通过结构校验
|
||
- 浏览器实测确认风险人员区点击第 2 页后会发出 `pageNum=2&pageSize=5` 请求，列表由第一页的“郑强、郭瑞、黄伟怡、许琳建、王欣”切换为第二页的“朱磊明、杨磊瑞、邓桂英、郑欣、董杰”
|
||
|
||
## 5. 实施结论
|
||
|
||
- 项目详情“风险总览”员工列表前端已完成分页化改造。
|
||
- 本次未改动风险模型区与风险明细区逻辑，仅对风险人员区做分页收口。
|
||
- 翻页行为已限制为局部刷新，不会再次触发整页结果总览并发请求。
|
||
- 真实浏览器回归已覆盖到页码点击场景，分页状态与表格数据保持一致。
|