通知中心游标分页

web/src/views/WarningsView.vue

@@ -19,7 +19,9 @@ const loading = ref(false)
 const detecting = ref(false)
 const filterType = ref('')
 const recordsPage = ref(1)
-const recordsTotal = ref(0)
+const recordsCursors = ref<string[]>([])
+const nextRecordsCursor = ref<string>()
+const recordsHasMore = ref(false)
 const recordsPageSize = 20
 const riskCases = ref<any[]>([])
 const riskDialogVisible = ref(false)
@@ -49,7 +51,11 @@ const ruleRows = reactive([
 ])
 
 async function load(resetRecordsPage = false) {
-  if (resetRecordsPage) recordsPage.value = 1
+  if (resetRecordsPage) {
+    recordsPage.value = 1
+    recordsCursors.value = []
+    nextRecordsCursor.value = undefined
+  }
   loading.value = true
   try {
     if (isWarningManager.value && termId.value) {
@@ -77,16 +83,13 @@ async function load(resetRecordsPage = false) {
         params: {
           academicTermId: termId.value || undefined,
           type: filterType.value || undefined,
-          page: recordsPage.value,
+          cursor: recordsCursors.value.at(-1),
           pageSize: recordsPageSize,
         },
       })
       records.value = response.data.items
-      recordsTotal.value = response.data.total
-      if (records.value.length === 0 && recordsPage.value > 1) {
-        recordsPage.value--
-        await load()
-      }
+      recordsHasMore.value = response.data.hasMore
+      nextRecordsCursor.value = response.data.nextCursor
       riskCases.value = (await http.get('/warnings/risk-cases', { params: { mineOnly: isCounselor.value } })).data
     }
     if (isStudent.value) {
@@ -96,6 +99,20 @@ async function load(resetRecordsPage = false) {
   } catch (e) { ElMessage.error(apiErrorMessage(e)) } finally { loading.value = false }
 }
 
+async function nextRecordsPage() {
+  if (!nextRecordsCursor.value || loading.value) return
+  recordsCursors.value.push(nextRecordsCursor.value)
+  recordsPage.value++
+  await load()
+}
+
+async function previousRecordsPage() {
+  if (!recordsCursors.value.length || loading.value) return
+  recordsCursors.value.pop()
+  recordsPage.value--
+  await load()
+}
+
 async function saveRules() {
   try {
     const payload = ruleRows.map(r => ({ type: r.type, name: r.name, threshold: r.threshold, isEnabled: r.isEnabled, notifyStudent: r.notifyStudent, notifyCounselor: r.notifyCounselor, description: r.description, autoCheckEnabled: r.autoCheckEnabled, checkDayOfWeek: r.checkDayOfWeek, checkHour: r.checkHour, checkMinute: r.checkMinute }))
@@ -220,15 +237,11 @@ onMounted(async () => {
         <el-table-column label="阈值/详情" min-width="200"><template #default="{row}"><span>{{ row.triggerValue }}</span><p style="margin:0;font-size:11px;color:var(--muted)">{{ row.detail }}</p></template></el-table-column>
         <el-table-column label="状态" width="100"><template #default="{row}"><el-tag size="small" :type="row.status===1?'danger':row.status===2?'success':'info'">{{ statusLabels[row.status] }}</el-tag></template></el-table-column>
       </el-table>
-      <el-pagination
-        v-if="recordsTotal > recordsPageSize"
-        v-model:current-page="recordsPage"
-        :page-size="recordsPageSize"
-        :total="recordsTotal"
-        layout="total, prev, pager, next"
-        class="table-pagination"
-        @current-change="() => load()"
-      />
+      <div v-if="recordsCursors.length || recordsHasMore" class="table-pagination cursor-pager">
+        <el-button :disabled="!recordsCursors.length || loading" @click="previousRecordsPage">上一批</el-button>
+        <span>第 {{ recordsPage }} 批</span>
+        <el-button type="primary" :disabled="!recordsHasMore || loading" @click="nextRecordsPage">下一批</el-button>
+      </div>
       <el-empty v-if="!records.length" description="暂无预警记录，请先执行检测。" />
     </section>