优化服务器端分页

web/src/views/TeachingPreferencesView.vue

@@ -19,6 +19,9 @@ const teachers = ref<any[]>([])
 const submitDialog = ref(false)
 const reviewDialog = ref(false)
 const assignmentDialog = ref(false)
+const page = ref(1)
+const total = ref(0)
+const pageSize = 20
 const form = reactive<Record<string, any>>({})
 const reviewForm = reactive<Record<string, any>>({})
 const assignmentForm = reactive<Record<string, any>>({})
@@ -39,14 +42,22 @@ const statusTypes: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
   Withdrawn: 'info',
 }
 
-async function load() {
+async function load(resetPage = false) {
+  if (resetPage) page.value = 1
   loading.value = true
   try {
     const endpoint = isTeacher.value
       ? '/teacher-course-applications/mine'
       : '/teacher-course-applications/reviews'
-    const { data } = await http.get(endpoint, { params: filters })
-    rows.value = data
+    const { data } = await http.get(endpoint, {
+      params: { ...filters, page: page.value, pageSize },
+    })
+    rows.value = data.items
+    total.value = data.total
+    if (rows.value.length === 0 && page.value > 1) {
+      page.value--
+      await load()
+    }
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   } finally {
@@ -195,14 +206,14 @@ onMounted(async () => {
 
     <section class="data-card">
       <div class="filter-bar">
-        <el-select v-model="filters.academicTermId" clearable placeholder="全部学期" @change="load">
+        <el-select v-model="filters.academicTermId" clearable placeholder="全部学期" @change="load(true)">
           <el-option v-for="item in terms" :key="item.id" :label="academicTermLabel(item)" :value="item.id" :class="academicTermOptionClass(item)" />
         </el-select>
-        <el-select v-model="filters.status" clearable placeholder="全部状态" @change="load">
+        <el-select v-model="filters.status" clearable placeholder="全部状态" @change="load(true)">
           <el-option v-for="(label, value) in statusLabels" :key="value" :label="label" :value="value" />
         </el-select>
-        <el-button :icon="Refresh" @click="load">刷新</el-button>
-        <span>共 {{ rows.length }} 条</span>
+        <el-button :icon="Refresh" @click="() => load()">刷新</el-button>
+        <span>共 {{ total }} 条</span>
       </div>
 
       <el-table v-loading="loading" :data="rows" class="data-table">
@@ -235,6 +246,15 @@ onMounted(async () => {
         </el-table-column>
         <template #empty><el-empty :description="isTeacher ? '尚未申报授课科目' : '没有待处理的授课申报'" /></template>
       </el-table>
+      <el-pagination
+        v-if="total > pageSize"
+        v-model:current-page="page"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        class="table-pagination"
+        @current-change="() => load()"
+      />
     </section>
 
     <el-dialog v-model="submitDialog" title="申报授课科目" width="600px">