feat(grade): 添加年级列表及分页功能

- 前端新增年级列表展示表格和分页组件，同时支持加载状态显示
- 新增 grade.js 接口调用，支持分页查询年级数据
- 后端新增 GradeController 提供分页查询接口 /grade/list
- 实现 GradeService 新增分页查询和总数量统计方法
- 添加 GradeDOMapper 新增分页查询及计数 SQL 语句
- 定义请求与响应VO类用于年级分页查询接口数据传输
- 页面 onMounted 时同时请求班级列表和年级列表数据，提升数据展示完整性

enlish-service/src/main/java/com/yinlihupo/enlish/service/controller/GradeController.java

@@ -0,0 +1,41 @@
+package com.yinlihupo.enlish.service.controller;
+
+
+import com.yinlihupo.enlish.service.domain.dataobject.GradeDO;
+import com.yinlihupo.enlish.service.model.vo.grade.FindGradeListReqVO;
+import com.yinlihupo.enlish.service.model.vo.grade.FindGradeListRspVO;
+import com.yinlihupo.enlish.service.service.GradeService;
+import com.yinlihupo.framework.biz.operationlog.aspect.ApiOperationLog;
+import com.yinlihupo.framework.common.response.PageResponse;
+import jakarta.annotation.Resource;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/grade")
+public class GradeController {
+
+    @Resource
+    private GradeService gradeService;
+
+    @PostMapping("/list")
+    @ApiOperationLog(description = "查询年级列表")
+    public PageResponse<FindGradeListRspVO> findGradeList(@RequestBody FindGradeListReqVO findGradeListReqVO) {
+        Integer page = findGradeListReqVO.getPage();
+        Integer pageSize = findGradeListReqVO.getPageSize();
+        List<GradeDO> gradeList = gradeService.findGradeList(page, pageSize);
+
+        List<FindGradeListRspVO> list = gradeList.stream().map(gradeDO -> FindGradeListRspVO.builder()
+                .id(gradeDO.getId())
+                .title(gradeDO.getTitle())
+                .build()
+        ).toList();
+        Integer gradeCount = gradeService.findGradeCount();
+
+        return PageResponse.success(list, page, gradeCount, pageSize);
+    }
+}

enlish-service/src/main/java/com/yinlihupo/enlish/service/domain/mapper/GradeDOMapper.java

@@ -10,4 +10,8 @@ public interface GradeDOMapper {
     GradeDO selectById(Integer id);
 
     List<GradeDO> selectByGradeIds(@Param("gradeIds") List<Integer> gradeIds);
+
+    List<GradeDO> selectList(@Param("startIndex") Integer startIndex, @Param("pageSize") Integer pageSize);
+
+    Integer selectCount();
 }

enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/grade/FindGradeListReqVO.java

@@ -0,0 +1,16 @@
+package com.yinlihupo.enlish.service.model.vo.grade;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class FindGradeListReqVO {
+
+    Integer page;
+    Integer pageSize;
+}

enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/grade/FindGradeListRspVO.java

@@ -0,0 +1,16 @@
+package com.yinlihupo.enlish.service.model.vo.grade;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class FindGradeListRspVO {
+
+    private Integer id;
+    private String title;
+}

enlish-service/src/main/java/com/yinlihupo/enlish/service/service/GradeService.java

@@ -2,7 +2,13 @@ package com.yinlihupo.enlish.service.service;
 
 import com.yinlihupo.enlish.service.domain.dataobject.GradeDO;
 
+import java.util.List;
+
 public interface GradeService {
 
     GradeDO findByClassId(Integer classId);
+
+    List<GradeDO> findGradeList(Integer page, Integer PageSize);
+
+    Integer findGradeCount();
 }

enlish-service/src/main/java/com/yinlihupo/enlish/service/service/grade/GradeServiceImpl.java

@@ -6,6 +6,8 @@ import com.yinlihupo.enlish.service.service.GradeService;
 import jakarta.annotation.Resource;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 @Service
 public class GradeServiceImpl implements GradeService {
 
@@ -16,4 +18,14 @@ public class GradeServiceImpl implements GradeService {
     public GradeDO findByClassId(Integer classId) {
         return gradeDOMapper.selectById(classId);
     }
+
+    @Override
+    public List<GradeDO> findGradeList(Integer page, Integer PageSize) {
+        return gradeDOMapper.selectList((page - 1) * PageSize, PageSize);
+    }
+
+    @Override
+    public Integer findGradeCount() {
+        return gradeDOMapper.selectCount();
+    }
 }

enlish-service/src/main/resources/mapper/GradeDOMapper.xml

@@ -12,6 +12,7 @@
         from grade
         where id = #{id}
     </select>
+
     <select id="selectByGradeIds" resultMap="BaseResultMap">
         select *
         from grade
@@ -21,4 +22,15 @@
         </foreach>
     </select>
 
+    <select id="selectList" resultMap="BaseResultMap">
+        select *
+        from grade
+        limit #{startIndex},#{pageSize}
+    </select>
+
+    <select id="selectCount" resultType="java.lang.Integer">
+        select count(1)
+        from grade
+    </select>
+
 </mapper>

enlish-vue/src/api/grade.js

@@ -0,0 +1,8 @@
+import axios from "@/axios";
+
+export function getGradeList(page, size) {
+    return axios.post('/grade/list', {
+        page: page,
+        pageSize: size
+    })
+}

enlish-vue/src/pages/class.vue

@@ -7,24 +7,21 @@
 
             <el-main class="p-4">
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    
                     <div class="lg:col-span-1 flex flex-col gap-6">
                         <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                             <div class="text-lg font-semibold mb-4">班级列表</div>
-
                             <el-table :data="classes" border class="w-full" v-loading="loading">
                                 <el-table-column prop="id" label="ID" width="80" />
                                 <el-table-column prop="title" label="班级名称" min-width="120" />
                                 <el-table-column prop="gradeName" label="年级" min-width="120" />
                             </el-table>
-
                             <div class="mt-4 flex justify-end">
                                 <el-pagination background layout="prev, pager, next, sizes, total" :total="totalCount"
                                     :page-size="pageSize" :current-page="pageNo" @current-change="handlePageChange"
                                     @size-change="handleSizeChange" />
                             </div>
-
                         </div>
-
                     </div>
 
                     <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-2">
@@ -32,9 +29,17 @@
                         <div class="text-gray-500">内容待完善</div>
                     </div>
 
-                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="gradeLoading">
-                        <div class="text-lg font-semibold mb-4">左下卡片</div>
+                        <div class="text-lg font-semibold mb-4">年级列表</div>
-                        <div class="text-gray-500">内容待完善</div>
+                        <el-table :data="grades" border class="w-full">
+                            <el-table-column prop="id" label="ID" width="80" />
+                            <el-table-column prop="title" label="年级名称" min-width="160" />
+                        </el-table>
+                        <div class="mt-4 flex justify-end">
+                            <el-pagination background layout="prev, pager, next, sizes, total" :total="gradeTotalCount"
+                                :page-size="gradePageSize" :current-page="gradePageNo"
+                                @current-change="handleGradePageChange" @size-change="handleGradeSizeChange" />
+                        </div>
                     </div>
 
                 </div>
@@ -48,12 +53,18 @@
 import Header from '@/layouts/components/Header.vue'
 import { ref, onMounted } from 'vue'
 import { getClassList } from '@/api/class'
+import { getGradeList } from '@/api/grade'
 
 const classes = ref([])
 const pageNo = ref(1)
 const pageSize = ref(10)
 const totalCount = ref(0)
 const loading = ref(false)
+const grades = ref([])
+const gradePageNo = ref(1)
+const gradePageSize = ref(10)
+const gradeTotalCount = ref(0)
+const gradeLoading = ref(false)
 
 async function fetchClasses() {
     loading.value = true
@@ -69,6 +80,20 @@ async function fetchClasses() {
     }
 }
 
+async function fetchGrades() {
+    gradeLoading.value = true
+    try {
+        const res = await getGradeList(gradePageNo.value, gradePageSize.value)
+        const d = res.data
+        grades.value = Array.isArray(d.data) ? d.data : []
+        gradeTotalCount.value = d.totalCount || 0
+        gradePageNo.value = d.pageNo || gradePageNo.value
+        gradePageSize.value = d.pageSize || gradePageSize.value
+    } finally {
+        gradeLoading.value = false
+    }
+}
+
 function handlePageChange(p) {
     pageNo.value = p
     fetchClasses()
@@ -79,7 +104,18 @@ function handleSizeChange(s) {
     fetchClasses()
 }
 
+function handleGradePageChange(p) {
+    gradePageNo.value = p
+    fetchGrades()
+}
+function handleGradeSizeChange(s) {
+    gradePageSize.value = s
+    gradePageNo.value = 1
+    fetchGrades()
+}
+
 onMounted(() => {
     fetchClasses()
+    fetchGrades()
 })
 </script>