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

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

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