基础数据大列表优化

web/src/views/BaseDataView.vue

@@ -92,10 +92,16 @@ const filteredRows = computed(() => {
 })
 const currentPage = ref(1)
 const pageSize = ref(20)
-const pagedRows = computed(() => filteredRows.value.slice(
-  (currentPage.value - 1) * pageSize.value,
-  currentPage.value * pageSize.value,
-))
+const total = ref(0)
+const serverPaged = computed(() =>
+  active.value === 'classes' || active.value === 'classrooms')
+let keywordTimer: ReturnType<typeof setTimeout> | undefined
+const pagedRows = computed(() => serverPaged.value
+  ? filteredRows.value
+  : filteredRows.value.slice(
+      (currentPage.value - 1) * pageSize.value,
+      currentPage.value * pageSize.value,
+    ))
 const venueNatureOptions = [
   { value: 1, label: '普通教室' },
   { value: 2, label: '实验室' },
@@ -138,11 +144,30 @@ function resetForm(row?: Row) {
   }
 }
 
-async function load() {
+async function load(resetPage = true) {
   loading.value = true
-  currentPage.value = 1
+  if (resetPage) currentPage.value = 1
   try {
-    rows.value = (await http.get(`/base-data/${active.value}`)).data
+    const response = await http.get(`/base-data/${active.value}`, {
+      params: serverPaged.value
+        ? {
+            page: currentPage.value,
+            pageSize: pageSize.value,
+            keyword: keyword.value.trim() || undefined,
+          }
+        : undefined,
+    })
+    if (serverPaged.value) {
+      rows.value = response.data.items
+      total.value = response.data.total
+      if (rows.value.length === 0 && currentPage.value > 1) {
+        currentPage.value--
+        await load(false)
+      }
+    } else {
+      rows.value = response.data
+      total.value = rows.value.length
+    }
   } catch (error) {
     ElMessage.error(apiErrorMessage(error))
   } finally {
@@ -308,7 +333,13 @@ onMounted(async () => {
 
 watch(
   () => keyword.value,
-  () => { currentPage.value = 1 },
+  () => {
+    currentPage.value = 1
+    if (keywordTimer) clearTimeout(keywordTimer)
+    if (serverPaged.value) {
+      keywordTimer = setTimeout(() => { void load(false) }, 250)
+    }
+  },
 )
 
 watch(
@@ -357,7 +388,7 @@ watch(
 
       <div class="table-toolbar">
         <el-input v-model="keyword" :prefix-icon="Search" clearable placeholder="搜索编码、名称或所属单位" />
-        <el-button :icon="Refresh" @click="load">刷新</el-button>
+        <el-button :icon="Refresh" @click="() => load(false)">刷新</el-button>
         <template v-if="canManage">
           <el-button :icon="Document" @click="downloadTemplate">下载模板</el-button>
           <el-button :icon="Upload" :loading="importing" @click="chooseImportFile">Excel 导入</el-button>
@@ -370,7 +401,7 @@ watch(
             @change="handleImport"
           />
         </template>
-        <span>共 {{ filteredRows.length }} 条</span>
+        <span>共 {{ serverPaged ? total : filteredRows.length }} 条</span>
       </div>
 
       <el-alert
@@ -494,13 +525,15 @@ watch(
         <template #empty><el-empty description="暂无数据，点击右上角开始新增" /></template>
       </el-table>
       <el-pagination
-        v-if="filteredRows.length > pageSize"
+        v-if="(serverPaged ? total : filteredRows.length) > pageSize"
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
         class="table-pagination"
         layout="total, sizes, prev, pager, next"
         :page-sizes="[20, 50, 100]"
-        :total="filteredRows.length"
+        :total="serverPaged ? total : filteredRows.length"
+        @current-change="() => { if (serverPaged) void load(false) }"
+        @size-change="() => { if (serverPaged) void load(true) }"
       />
     </section>