ccdi/docs/reports/implementation/2026-03-29-project-detail-risk-overview-risk-people-pagination-frontend-implementation.md

项目详情风险总览员工列表分页前端实施记录

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. 测试与验证

执行命令：

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. 实施结论

• 项目详情“风险总览”员工列表前端已完成分页化改造。
• 本次未改动风险模型区与风险明细区逻辑，仅对风险人员区做分页收口。
• 翻页行为已限制为局部刷新，不会再次触发整页结果总览并发请求。
• 真实浏览器回归已覆盖到页码点击场景，分页状态与表格数据保持一致。