优化

web/src/views/DegreeAwardsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import { Check, Close, Medal, Plus, Refresh, Stamp } from '@element-plus/icons-vue'
 import http, { apiErrorMessage } from '../api/http'
 import { useAuthStore } from '../stores/auth'
@@ -17,6 +17,10 @@ const reviewDialog = ref(false)
 const reviewTarget = ref<any | null>(null)
 const keyword = ref('')
 const conclusionFilter = ref('')
+const resultPage = ref(1)
+const resultPageSize = 20
+const resultRequestId = ref(0)
+let filterTimer: ReturnType<typeof setTimeout> | undefined
 const batchForm = reactive({
   name: '2030届学士学位授予审核',
   graduationYear: 2030,
@@ -29,12 +33,8 @@ const conclusionLabels: Record<string, string> = {
   Granted: '建议授予',
   NotGranted: '暂不授予',
 }
-const filteredResults = computed(() => {
-  const q = keyword.value.trim().toLowerCase()
-  return (selected.value?.results ?? []).filter((x: any) =>
-    (!conclusionFilter.value || x.conclusion === conclusionFilter.value) &&
-    (!q || `${x.studentNumber}${x.name}${x.className}${x.majorName}`.toLowerCase().includes(q)))
-})
+const resultItems = computed(() => selected.value?.results?.items ?? [])
+const resultTotal = computed(() => selected.value?.results?.total ?? 0)
 function dateText(value?: string) {
   if (!value) return '—'
   return new Intl.DateTimeFormat('zh-CN', {
@@ -60,7 +60,28 @@ async function load() {
   }
 }
 async function selectBatch(id: string) {
-  selected.value = (await http.get(`/degree-awards/batches/${id}`)).data
+  resultPage.value = 1
+  await loadBatch(id)
+}
+async function loadBatch(id = selected.value?.id) {
+  if (!id) return
+  const requestId = ++resultRequestId.value
+  loading.value = true
+  try {
+    const response = await http.get(`/degree-awards/batches/${id}`, {
+      params: {
+        page: resultPage.value,
+        pageSize: resultPageSize,
+        keyword: keyword.value.trim() || undefined,
+        conclusion: conclusionFilter.value || undefined,
+      },
+    })
+    if (requestId === resultRequestId.value) selected.value = response.data
+  } catch (error) {
+    if (requestId === resultRequestId.value) ElMessage.error(apiErrorMessage(error))
+  } finally {
+    if (requestId === resultRequestId.value) loading.value = false
+  }
 }
 async function createBatch() {
   try {
@@ -99,7 +120,7 @@ async function saveReview() {
     await http.put(`/degree-awards/results/${reviewTarget.value.id}`, reviewForm)
     reviewDialog.value = false
     ElMessage.success('学位复核结论已保存。')
-    await selectBatch(selected.value.id)
+    await loadBatch()
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   }
@@ -117,6 +138,17 @@ async function publish() {
   }
 }
 
+watch([keyword, conclusionFilter], () => {
+  resultPage.value = 1
+  if (filterTimer) clearTimeout(filterTimer)
+  filterTimer = setTimeout(() => loadBatch(), 300)
+})
+
+onUnmounted(() => {
+  if (filterTimer) clearTimeout(filterTimer)
+  resultRequestId.value++
+})
+
 onMounted(load)
 </script>
 
@@ -160,25 +192,33 @@ onMounted(load)
           <el-tag v-else type="success" effect="plain">授予结果已锁定</el-tag>
         </header>
         <div class="degree-summary">
-          <div><span>参审人数</span><b>{{ selected.results.length }}</b></div>
-          <div><span>建议授予</span><b>{{ selected.results.filter((x: any) => x.conclusion === 'Granted').length }}</b></div>
-          <div><span>暂不授予</span><b>{{ selected.results.filter((x: any) => x.conclusion === 'NotGranted').length }}</b></div>
-          <div><span>人工调整</span><b>{{ selected.results.filter((x: any) => x.isOverridden).length }}</b></div>
+          <div><span>参审人数</span><b>{{ selected.resultCount }}</b></div>
+          <div><span>建议授予</span><b>{{ selected.grantedCount }}</b></div>
+          <div><span>暂不授予</span><b>{{ selected.notGrantedCount }}</b></div>
+          <div><span>人工调整</span><b>{{ selected.overrideCount }}</b></div>
         </div>
         <div class="graduation-filter">
           <el-input v-model="keyword" clearable placeholder="搜索学号、姓名、专业或班级" />
           <el-select v-model="conclusionFilter" clearable placeholder="全部结论"><el-option label="建议授予" value="Granted" /><el-option label="暂不授予" value="NotGranted" /></el-select>
-          <span>显示 {{ filteredResults.length }} 条</span>
+          <span>共 {{ resultTotal }} 条</span>
         </div>
         <div class="degree-result-list">
-          <article v-for="row in filteredResults" :key="row.id">
+          <article v-for="row in resultItems" :key="row.id">
             <div><span>{{ row.studentNumber }} · {{ row.className }}</span><h4>{{ row.name }}</h4><p>{{ row.majorName }}</p></div>
             <div><span>加权平均绩点</span><b>{{ row.averageGradePoint }}</b><small>批次要求 ≥ {{ selected.minimumGradePoint }}</small></div>
             <div class="degree-rule-note"><span>规则说明</span><b>{{ row.exceptionReason || '毕业资格与绩点均符合' }}</b></div>
             <div class="degree-result-chip" :class="{ granted: row.conclusion === 'Granted' }"><el-icon><Check v-if="row.conclusion === 'Granted'" /><Close v-else /></el-icon><b>{{ conclusionLabels[row.conclusion] }}</b><small>{{ row.isOverridden ? '人工复核' : '规则计算' }}</small></div>
             <el-button v-if="selected.status === 'Draft'" link type="primary" @click="openReview(row)">人工复核</el-button>
           </article>
-          <el-empty v-if="!filteredResults.length" description="没有符合筛选条件的授予记录" />
+          <el-empty v-if="!resultItems.length" description="没有符合筛选条件的授予记录" />
+          <el-pagination
+            v-if="resultTotal > resultPageSize"
+            v-model:current-page="resultPage"
+            :page-size="resultPageSize"
+            :total="resultTotal"
+            layout="total, prev, pager, next"
+            @current-change="loadBatch()"
+          />
         </div>
       </section>
       <el-empty v-else v-loading="loading" description="尚未建立学位授予批次" />