游标分页优化

web/src/views/CourseAdjustmentsView.vue

@@ -31,9 +31,13 @@ const sessionLoading = ref(false)
 const termId = ref<string>()
 const tab = ref(isManager.value ? 'reviews' : 'mine')
 const minePage = ref(1)
-const mineTotal = ref(0)
+const mineCursors = ref<string[]>([])
+const nextMineCursor = ref<string>()
+const mineHasMore = ref(false)
 const reviewPage = ref(1)
-const reviewTotal = ref(0)
+const reviewCursors = ref<string[]>([])
+const nextReviewCursor = ref<string>()
+const reviewHasMore = ref(false)
 const pageSize = 20
 const targetAdjustmentId = computed(() => {
   const value = route.query.adjustmentId
@@ -95,33 +99,67 @@ async function load(resetPages = false) {
   if (resetPages) {
     minePage.value = 1
     reviewPage.value = 1
+    mineCursors.value = []
+    reviewCursors.value = []
+    nextMineCursor.value = undefined
+    nextReviewCursor.value = undefined
   }
   loading.value = true
   reviewLoading.value = isManager.value
   try {
     if (isTeacher.value || (!isManager.value)) {
       const response = await http.get('/course-adjustments/mine', {
-        params: { academicTermId: termId.value, page: minePage.value, pageSize },
+        params: { academicTermId: termId.value, cursor: mineCursors.value.at(-1), pageSize },
       })
       adjustments.value = response.data.items
-      mineTotal.value = response.data.total
+      mineHasMore.value = response.data.hasMore
+      nextMineCursor.value = response.data.nextCursor
     }
     if (isManager.value) {
       const response = await http.get('/course-adjustments/pending-reviews', {
         params: {
           academicTermId: targetAdjustmentId.value ? undefined : termId.value,
           adjustmentId: targetAdjustmentId.value,
-          page: reviewPage.value,
+          cursor: reviewCursors.value.at(-1),
           pageSize,
         },
       })
       pendingReviews.value = response.data.items
-      reviewTotal.value = response.data.total
+      reviewHasMore.value = response.data.hasMore
+      nextReviewCursor.value = response.data.nextCursor
     }
   } catch (e) { ElMessage.error(apiErrorMessage(e)) }
   finally { loading.value = false; reviewLoading.value = false }
 }
 
+async function nextMinePage() {
+  if (!nextMineCursor.value || loading.value) return
+  mineCursors.value.push(nextMineCursor.value)
+  minePage.value++
+  await load()
+}
+
+async function previousMinePage() {
+  if (!mineCursors.value.length || loading.value) return
+  mineCursors.value.pop()
+  minePage.value--
+  await load()
+}
+
+async function nextReviewPage() {
+  if (!nextReviewCursor.value || reviewLoading.value) return
+  reviewCursors.value.push(nextReviewCursor.value)
+  reviewPage.value++
+  await load()
+}
+
+async function previousReviewPage() {
+  if (!reviewCursors.value.length || reviewLoading.value) return
+  reviewCursors.value.pop()
+  reviewPage.value--
+  await load()
+}
+
 function openCreate() {
   Object.assign(form, {
     teachingTaskId: undefined,
@@ -346,15 +384,11 @@ 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()"
-      />
+      <div v-if="mineCursors.length || mineHasMore" class="table-pagination cursor-pager">
+        <el-button :disabled="!mineCursors.length || loading" @click="previousMinePage">上一批</el-button>
+        <span>第 {{ minePage }} 批</span>
+        <el-button type="primary" :disabled="!mineHasMore || loading" @click="nextMinePage">下一批</el-button>
+      </div>
     </section>
 
     <!-- Pending reviews -->
@@ -393,15 +427,11 @@ 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()"
-      />
+      <div v-if="reviewCursors.length || reviewHasMore" class="table-pagination cursor-pager">
+        <el-button :disabled="!reviewCursors.length || reviewLoading" @click="previousReviewPage">上一批</el-button>
+        <span>第 {{ reviewPage }} 批</span>
+        <el-button type="primary" :disabled="!reviewHasMore || reviewLoading" @click="nextReviewPage">下一批</el-button>
+      </div>
     </section>
 
     <!-- Create dialog -->