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

13 KiB
Raw Blame History

项目管理状态统计修复实施计划

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:

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

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 文件末尾（类定义的最后一个方法之后）添加:

/**
 * 查询各状态的项目总数（不受搜索条件影响）
 *
 * @return 状态统计
 */
CcdiProjectStatusCountsVO getStatusCounts();

Step 3: 验证语法

Run: cd ccdi-project && mvn compile

Expected: BUILD SUCCESS

Step 4: Commit

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 实现类末尾添加方法实现:

@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

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 类的最后一个方法之后添加:

/**
 * 查询项目状态统计
 */
@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

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 或浏览器):

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):

curl -X GET "http://localhost:8080/ccdi/project/statusCounts" \
  -H "Authorization: Bearer YOUR_TOKEN"

Expected: 返回类似以下的响应:

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "all": 30,
    "status0": 10,
    "status1": 15,
    "status2": 5
  }
}

Step 4: 验证数据正确性

使用数据库工具连接 MySQL，执行:

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 函数之后）添加:

// 查询项目状态统计
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

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 语句:

import {listProject} from '@/api/ccdiProject'

修改为:

import {listProject, getStatusCounts} from '@/api/ccdiProject'

Step 3: 重构 getList 方法

找到 getList() 方法（大约第 122-134 行），完全替换为:

/** 查询项目列表 */
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 行）:

// 删除这个方法
/** 计算标签页数量 */
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

git add ruoyi-ui/src/views/ccdiProject/index.vue
git commit -m "refactor: 使用后端统计接口替换前端计算"

Task 8: 测试前端功能

Files:

  • None (测试验证)

Step 1: 确保后端服务运行

确认后端服务在运行中。

Step 2: 启动前端开发服务器

Run:

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: 更新设计文档状态

修改设计文档的状态部分:

## 文档信息

- **创建日期**: 2026-02-27
- **作者**: Claude Code
- **状态**: ✅ 已完成

Step 2: 验收清单

对照设计文档的验收标准，确认:

  • 后端 /statusCounts 接口返回正确的统计数字
  • 前端标签页显示数据库中的完整统计
  • 搜索不影响标签页统计数字
  • 分页不影响标签页统计数字
  • 状态过滤不影响标签页统计数字
  • 统计接口响应时间 < 100ms
  • 页面加载时间无明显增加

Step 3: 提交文档更新

git add docs/plans/2026-02-27-project-status-counts-fix-design.md
git commit -m "docs: 更新项目状态统计修复设计文档状态为已完成"

Step 4: 推送所有提交

git push origin dev

验收清单

在完成所有任务后，验证以下内容:

功能验收

  • 后端接口正确返回统计数字
  • 前端标签页显示正确统计
  • 搜索不影响统计数字
  • 分页不影响统计数字
  • 状态过滤不影响统计数字

性能验收

  • 统计接口响应时间 < 100ms
  • 页面加载流畅

代码质量

  • 后端代码符合规范
  • 前端代码符合规范
  • 提交信息清晰

注意事项

  1. 测试数据准备: 如果数据库中没有足够的项目数据，可以先插入一些测试数据以验证统计功能
  2. 错误处理: 当前实现中，如果统计接口失败，会在控制台显示错误但不阻塞列表加载
  3. 性能考虑: 如果项目数量很大（> 10000），建议后续优化为 GROUP BY 单次查询

回滚方案

如果实施后发现问题，可以通过以下步骤回滚:

  1. 回滚前端代码:

    git revert <commit-hash-of-task-6-and-7>

  2. 回滚后端代码:

    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 View Git Blame Copy Permalink