wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
ccdi/docs/plans/2026-02-27-project-status-counts-fix.md

579 lines
13 KiB
Markdown
Raw Permalink Normal View History

docs: 添加项目状态统计修复实施计划
2026-02-27 17:22:22 +08:00
# 项目管理状态统计修复实施计划
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
**Goal:** 修复项目管理标签页状态统计功能，使标签页显示数据库中所有该状态的项目总数，而非当前页的数量。
**Architecture:** 后端新增独立的状态统计接口 `/ccdi/project/statusCounts`，前端在加载列表时并行调用统计接口，使用 `Promise.all` 同时获取列表数据和统计数据。
**Tech Stack:** Java 17, Spring Boot 3.5.8, MyBatis Plus 3.5.10, Vue.js 2.6.12, Element UI 2.15.14
---
## Task 1: 创建状态统计 VO 类
**Files:**
- Create: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiProjectStatusCountsVO.java`
**Step 1: 创建 VO 类文件**
创建新文件 `ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiProjectStatusCountsVO.java`:
```java
package com.ruoyi.ccdi.project.domain.vo;
import lombok.Data;
/**
* 项目状态统计VO
*
* @author ruoyi
*/
@Data
public class CcdiProjectStatusCountsVO {
/** 全部项目总数 */
private Long all;
/** 进行中项目数（状态0） */
private Long status0;
/** 已完成项目数（状态1） */
private Long status1;
/** 已归档项目数（状态2） */
private Long status2;
}
```
**Step 2: 验证文件创建**
Run: `ls ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiProjectStatusCountsVO.java`
Expected: 文件存在
**Step 3: Commit**
```bash
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/domain/vo/CcdiProjectStatusCountsVO.java
git commit -m "feat: 添加项目状态统计 VO 类"
```
---
## Task 2: 添加 Service 接口方法
**Files:**
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiProjectService.java`
**Step 1: 读取当前 Service 接口**
Run: Read `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiProjectService.java`
Expected: 看到现有方法列表
**Step 2: 添加统计方法声明**
在 `ICcdiProjectService.java` 文件末尾（类定义的最后一个方法之后）添加:
```java
/**
* 查询各状态的项目总数（不受搜索条件影响）
*
* @return 状态统计
*/
CcdiProjectStatusCountsVO getStatusCounts();
```
**Step 3: 验证语法**
Run: `cd ccdi-project && mvn compile`
Expected: BUILD SUCCESS
**Step 4: Commit**
```bash
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/ICcdiProjectService.java
git commit -m "feat: Service 接口添加状态统计方法声明"
```
---
## Task 3: 实现 Service 统计方法
**Files:**
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiProjectServiceImpl.java`
**Step 1: 读取当前 Service 实现类**
Run: Read `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiProjectServiceImpl.java`
Expected: 看到现有实现和依赖
**Step 2: 确认需要的 import**
检查文件顶部是否已有以下 import：
- `com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper`
- `com.ruoyi.ccdi.project.domain.vo.CcdiProjectStatusCountsVO`
如果没有，添加它们。
**Step 3: 实现 getStatusCounts 方法**
在 Service 实现类末尾添加方法实现:
```java
@Override
public CcdiProjectStatusCountsVO getStatusCounts() {
CcdiProjectStatusCountsVO vo = new CcdiProjectStatusCountsVO();
// 统计全部项目
Long totalCount = ccdiProjectMapper.selectCount(null);
vo.setAll(totalCount);
// 统计进行中项目（状态0）
Long status0Count = ccdiProjectMapper.selectCount(
new LambdaQueryWrapper<CcdiProject>()
.eq(CcdiProject::getStatus, "0")
);
vo.setStatus0(status0Count);
// 统计已完成项目（状态1）
Long status1Count = ccdiProjectMapper.selectCount(
new LambdaQueryWrapper<CcdiProject>()
.eq(CcdiProject::getStatus, "1")
);
vo.setStatus1(status1Count);
// 统计已归档项目（状态2）
Long status2Count = ccdiProjectMapper.selectCount(
new LambdaQueryWrapper<CcdiProject>()
.eq(CcdiProject::getStatus, "2")
);
vo.setStatus2(status2Count);
return vo;
}
```
**Step 4: 验证编译**
Run: `cd ccdi-project && mvn compile`
Expected: BUILD SUCCESS
**Step 5: Commit**
```bash
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiProjectServiceImpl.java
git commit -m "feat: 实现项目状态统计方法"
```
---
## Task 4: 添加 Controller 接口
**Files:**
- Modify: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiProjectController.java`
**Step 1: 读取当前 Controller**
Run: Read `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiProjectController.java`
Expected: 看到现有接口定义
**Step 2: 添加状态统计接口**
在 Controller 类的最后一个方法之后添加:
```java
/**
* 查询项目状态统计
*/
@GetMapping("/statusCounts")
@Operation(summary = "查询项目状态统计")
@PreAuthorize("@ss.hasPermi('ccdi:project:list')")
public AjaxResult getStatusCounts() {
CcdiProjectStatusCountsVO counts = projectService.getStatusCounts();
return AjaxResult.success(counts);
}
```
**Step 3: 验证编译**
Run: `cd ccdi-project && mvn compile`
Expected: BUILD SUCCESS
**Step 4: Commit**
```bash
git add ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/CcdiProjectController.java
git commit -m "feat: 添加项目状态统计接口"
```
---
## Task 5: 测试后端接口
**Files:**
- None (测试验证)
**Step 1: 启动后端服务**
Run: `mvn spring-boot:run` 或 `ry.bat`
Expected: 服务启动成功，看到 "Started RuoYiApplication" 日志
**Step 2: 获取访问令牌**
Run (使用 curl 或浏览器):
```bash
curl -X POST "http://localhost:8080/login/test?username=admin&password=admin123"
```
Expected: 返回 JSON 包含 token
**Step 3: 测试状态统计接口**
在 Swagger UI 中测试:
1. 访问: http://localhost:8080/swagger-ui/index.html
2. 找到: "纪检初核项目管理" → "GET /ccdi/project/statusCounts"
3. 点击 "Try it out" → "Execute"
或使用 curl (替换 YOUR_TOKEN):
```bash
curl -X GET "http://localhost:8080/ccdi/project/statusCounts" \
-H "Authorization: Bearer YOUR_TOKEN"
```
Expected: 返回类似以下的响应:
```json
{
"code": 200,
"msg": "操作成功",
"data": {
"all": 30,
"status0": 10,
"status1": 15,
"status2": 5
}
}
```
**Step 4: 验证数据正确性**
使用数据库工具连接 MySQL，执行:
```sql
SELECT
status,
COUNT(*) as count
FROM ccdi_project
GROUP BY status;
```
Expected: 统计数字与接口返回一致
---
## Task 6: 添加前端 API 方法
**Files:**
- Modify: `ruoyi-ui/src/api/ccdiProject.js`
**Step 1: 读取当前 API 文件**
Run: Read `ruoyi-ui/src/api/ccdiProject.js`
Expected: 看到现有的 API 方法定义
**Step 2: 添加状态统计 API 方法**
在文件末尾（最后一个 export 函数之后）添加:
```javascript
// 查询项目状态统计
export function getStatusCounts() {
return request({
url: '/ccdi/project/statusCounts',
method: 'get'
})
}
```
**Step 3: 验证语法**
Run: `cd ruoyi-ui && npm run lint -- --fix src/api/ccdiProject.js`
Expected: No errors
**Step 4: Commit**
```bash
git add ruoyi-ui/src/api/ccdiProject.js
git commit -m "feat: 前端 API 添加状态统计方法"
```
---
## Task 7: 修改前端页面组件
**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/index.vue`
**Step 1: 读取当前页面组件**
Run: Read `ruoyi-ui/src/views/ccdiProject/index.vue`
Expected: 看到现有代码结构
**Step 2: 修改 import 语句**
找到第 64 行左右的 import 语句:
```javascript
import {listProject} from '@/api/ccdiProject'
```
修改为:
```javascript
import {listProject, getStatusCounts} from '@/api/ccdiProject'
```
**Step 3: 重构 getList 方法**
找到 `getList()` 方法（大约第 122-134 行），完全替换为:
```javascript
/** 查询项目列表 */
getList() {
this.loading = true
// 并行请求列表数据和状态统计
Promise.all([
listProject(this.queryParams),
getStatusCounts()
]).then(([listResponse, countsResponse]) => {
// 处理列表数据
this.projectList = listResponse.rows
this.total = listResponse.total
// 处理状态统计
const counts = countsResponse.data
this.tabCounts = {
all: counts.all,
'0': counts.status0,
'1': counts.status1,
'2': counts.status2
}
this.loading = false
}).catch(() => {
this.loading = false
})
}
```
**Step 4: 删除旧的统计方法**
找到并删除 `calculateTabCounts()` 方法（大约第 135-145 行）:
```javascript
// 删除这个方法
/** 计算标签页数量 */
calculateTabCounts() {
// 注意：这里需要后端API返回所有状态的数量统计
// 目前暂时使用当前页的数据进行计算
this.tabCounts = {
all: this.total,
'0': this.projectList.filter(p => p.status === '0').length,
'1': this.projectList.filter(p => p.status === '1').length,
'2': this.projectList.filter(p => p.status === '2').length
}
}
```
**Step 5: 验证语法**
Run: `cd ruoyi-ui && npm run lint -- --fix src/views/ccdiProject/index.vue`
Expected: No errors
**Step 6: Commit**
```bash
git add ruoyi-ui/src/views/ccdiProject/index.vue
git commit -m "refactor: 使用后端统计接口替换前端计算"
```
---
## Task 8: 测试前端功能
**Files:**
- None (测试验证)
**Step 1: 确保后端服务运行**
确认后端服务在运行中。
**Step 2: 启动前端开发服务器**
Run:
```bash
cd ruoyi-ui
npm run dev
```
Expected: 服务启动，看到 "App running at" 消息
**Step 3: 测试页面加载**
1. 打开浏览器访问: http://localhost:80
2. 登录系统 (admin/admin123)
3. 导航到 "项目管理" 页面
Expected:
- 页面正常加载
- 标签页显示正确的统计数字（例如：全部项目(30)）
- 标签页数字不随分页变化
**Step 4: 测试搜索功能**
1. 在搜索框输入项目名称
2. 点击搜索按钮或按回车
Expected:
- 列表正确过滤
- 标签页数字保持不变（显示总数）
**Step 5: 测试分页功能**
1. 点击分页组件切换到第 2 页
Expected:
- 列表切换到第 2 页
- 标签页数字保持不变
**Step 6: 测试状态切换功能**
1. 点击"进行中"标签
Expected:
- 列表只显示进行中的项目
- 标签页数字保持不变（仍显示总数）
**Step 7: 测试浏览器控制台**
打开浏览器开发者工具的 Console 标签
Expected:
- 没有 JavaScript 错误
- 看到两个 API 请求成功（list 和 statusCounts）
---
## Task 9: 最终提交和文档更新
**Files:**
- Modify: `docs/plans/2026-02-27-project-status-counts-fix-design.md`
**Step 1: 更新设计文档状态**
修改设计文档的状态部分:
```markdown
## 文档信息
- **创建日期**: 2026-02-27
- **作者**: Claude Code
- **状态**: ✅ 已完成
```
**Step 2: 验收清单**
对照设计文档的验收标准，确认:
- [ ] 后端 `/statusCounts` 接口返回正确的统计数字
- [ ] 前端标签页显示数据库中的完整统计
- [ ] 搜索不影响标签页统计数字
- [ ] 分页不影响标签页统计数字
- [ ] 状态过滤不影响标签页统计数字
- [ ] 统计接口响应时间 < 100ms
- [ ] 页面加载时间无明显增加
**Step 3: 提交文档更新**
```bash
git add docs/plans/2026-02-27-project-status-counts-fix-design.md
git commit -m "docs: 更新项目状态统计修复设计文档状态为已完成"
```
**Step 4: 推送所有提交**
```bash
git push origin dev
```
---
## 验收清单
在完成所有任务后，验证以下内容:
### 功能验收
- [ ] 后端接口正确返回统计数字
- [ ] 前端标签页显示正确统计
- [ ] 搜索不影响统计数字
- [ ] 分页不影响统计数字
- [ ] 状态过滤不影响统计数字
### 性能验收
- [ ] 统计接口响应时间 < 100ms
- [ ] 页面加载流畅
### 代码质量
- [ ] 后端代码符合规范
- [ ] 前端代码符合规范
- [ ] 提交信息清晰
---
## 注意事项
1. **测试数据准备**: 如果数据库中没有足够的项目数据，可以先插入一些测试数据以验证统计功能
2. **错误处理**: 当前实现中，如果统计接口失败，会在控制台显示错误但不阻塞列表加载
3. **性能考虑**: 如果项目数量很大（> 10000），建议后续优化为 GROUP BY 单次查询
---
## 回滚方案
如果实施后发现问题，可以通过以下步骤回滚:
1. **回滚前端代码**:
```bash
git revert <commit-hash-of-task-6-and-7>
```
2. **回滚后端代码**:
```bash
git revert <commit-hash-of-task-1-to-4>
```
3. **重新部署服务**
---
## 相关文档
- 设计文档: `docs/plans/2026-02-27-project-status-counts-fix-design.md`
- 若依框架文档: 项目根目录的 `CLAUDE.md`
- MyBatis Plus 文档: https://baomidou.com/
Reference in New Issue Copy Permalink