优化服务器端分页

web/src/views/CourseAdjustmentsView.vue

@@ -27,6 +27,11 @@ const sessionTask = ref<any>(null)
 const sessionLoading = ref(false)
 const termId = ref<string>()
 const tab = ref(isManager.value ? 'reviews' : 'mine')
+const minePage = ref(1)
+const mineTotal = ref(0)
+const reviewPage = ref(1)
+const reviewTotal = ref(0)
+const pageSize = 20
 
 const form = reactive({
   teachingTaskId: undefined as string | undefined,
@@ -79,21 +84,30 @@ function sessionLabel(session: any) {
   return `第 ${session.week} 周 · ${session.date} 周${weekdayLabel(session.dayOfWeek)} · 第 ${session.startPeriod}–${end} 节${room}`
 }
 
-async function load() {
+async function load(resetPages = false) {
+  if (resetPages) {
+    minePage.value = 1
+    reviewPage.value = 1
+  }
   loading.value = true
+  reviewLoading.value = isManager.value
   try {
     if (isTeacher.value || (!isManager.value)) {
-      adjustments.value = (await http.get('/course-adjustments/mine', {
-        params: { academicTermId: termId.value },
-      })).data
+      const response = await http.get('/course-adjustments/mine', {
+        params: { academicTermId: termId.value, page: minePage.value, pageSize },
+      })
+      adjustments.value = response.data.items
+      mineTotal.value = response.data.total
     }
     if (isManager.value) {
-      pendingReviews.value = (await http.get('/course-adjustments/pending-reviews', {
-        params: { academicTermId: termId.value },
-      })).data
+      const response = await http.get('/course-adjustments/pending-reviews', {
+        params: { academicTermId: termId.value, page: reviewPage.value, pageSize },
+      })
+      pendingReviews.value = response.data.items
+      reviewTotal.value = response.data.total
     }
   } catch (e) { ElMessage.error(apiErrorMessage(e)) }
-  finally { loading.value = false }
+  finally { loading.value = false; reviewLoading.value = false }
 }
 
 function openCreate() {
@@ -255,12 +269,12 @@ function showSub(type: string) { return type === 'Substitute' }
       </div>
       <div style="display:flex;gap:8px;align-items:center">
         <el-button v-if="isTeacher" type="primary" :icon="Plus" @click="openCreate">提交申请</el-button>
-        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-button :icon="Refresh" @click="() => load()">刷新</el-button>
       </div>
     </section>
 
     <section class="adj-toolbar">
-      <el-select v-model="termId" clearable placeholder="全部学期" @change="load(); loadTaskOptions()">
+      <el-select v-model="termId" clearable placeholder="全部学期" @change="() => { load(true); loadTaskOptions() }">
         <el-option v-for="t in terms" :key="t.id" :label="academicTermLabel(t)" :value="t.id" :class="academicTermOptionClass(t)" />
       </el-select>
       <el-segmented v-model="tab" :options="[
@@ -307,6 +321,15 @@ function showSub(type: string) { return type === 'Substitute' }
         </footer>
       </article>
       <el-empty v-if="!adjustments.length" description="暂无调停课申请" />
+      <el-pagination
+        v-if="mineTotal > pageSize"
+        v-model:current-page="minePage"
+        :page-size="pageSize"
+        :total="mineTotal"
+        layout="total, prev, pager, next"
+        class="table-pagination"
+        @current-change="() => load()"
+      />
     </section>
 
     <!-- Pending reviews -->
@@ -345,6 +368,15 @@ function showSub(type: string) { return type === 'Substitute' }
         </footer>
       </article>
       <el-empty v-if="!pendingReviews.length" description="暂无待审核申请" />
+      <el-pagination
+        v-if="reviewTotal > pageSize"
+        v-model:current-page="reviewPage"
+        :page-size="pageSize"
+        :total="reviewTotal"
+        layout="total, prev, pager, next"
+        class="table-pagination"
+        @current-change="() => load()"
+      />
     </section>
 
     <!-- Create dialog -->