官方凭证档案优化

web/src/views/OfficialDocumentsView.vue

@@ -51,6 +51,9 @@ const historyLoading = ref(false)
 const downloadHistory = ref<any[]>([])
 const selectedDocument = ref<OfficialDocumentRow>()
 const filters = reactive<{ type?: DocumentType; status?: DocumentStatus }>({})
+const page = ref(1)
+const total = ref(0)
+const pageSize = 20
 const issueForm = reactive<{ studentId: string; type: DocumentType; purpose: string }>({
   studentId: '',
   type: 'Transcript',
@@ -67,11 +70,19 @@ const statusLabels: Record<DocumentStatus, string> = {
   Superseded: '已重签',
 }
 
-async function load() {
+async function load(resetPage = false) {
+  if (resetPage) page.value = 1
   loading.value = true
   try {
-    const { data } = await http.get('/official-documents', { params: filters })
-    documents.value = data
+    const { data } = await http.get('/official-documents', {
+      params: { ...filters, page: page.value, pageSize },
+    })
+    documents.value = data.items
+    total.value = data.total
+    if (documents.value.length === 0 && page.value > 1) {
+      page.value--
+      await load()
+    }
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   } finally {
@@ -224,14 +235,14 @@ onMounted(load)
     </section>
 
     <section class="document-toolbar">
-      <el-select v-model="filters.type" clearable placeholder="全部凭证类型" @change="load">
+      <el-select v-model="filters.type" clearable placeholder="全部凭证类型" @change="load(true)">
         <el-option v-for="(label, value) in typeLabels" :key="value" :label="label" :value="value" />
       </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>共 {{ documents.length }} 份凭证</span>
+      <el-button :icon="Refresh" @click="() => load()">刷新</el-button>
+      <span>共 {{ total }} 份凭证</span>
     </section>
 
     <section class="document-list" v-loading="loading">
@@ -274,6 +285,15 @@ onMounted(load)
         v-if="!documents.length"
         :description="isManager ? '暂无符合条件的官方凭证' : '暂无电子凭证，可点击上方按钮在线申请'"
       />
+      <el-pagination
+        v-if="total > pageSize"
+        v-model:current-page="page"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        class="document-pagination"
+        @current-change="() => load()"
+      />
     </section>
 
     <el-dialog v-model="issueDialog" :title="isManager ? '签发官方凭证' : '申请电子凭证'" width="620px">