分页100

apps/src/views/operate/gold-running-water.vue

@@ -12,6 +12,7 @@ import {
   DatePicker,
   Input,
   message,
+  Pagination,
   Select,
   Space,
   Table,
@@ -52,6 +53,7 @@ const sysOriginOptions = computed(() => {
   return options.length > 0 ? options : getAllowedSysOrigins([]);
 });
 
+const DEFAULT_PAGE_SIZE = 100;
 const loading = ref(false);
 const loadMoreLoading = ref(false);
 const list = ref<Array<Record<string, any>>>([]);
@@ -59,12 +61,13 @@ const notMore = ref(false);
 const originKeyword = ref('');
 const sysOrigins = ref<string[]>([]);
 const rangeDate = ref<[string, string] | null>(null);
+const currentPage = ref(1);
 
 const query = reactive<Record<string, any>>({
   context: '',
   endTime: '',
   id: '',
-  limit: 20,
+  limit: DEFAULT_PAGE_SIZE,
   origin: '',
   startTime: '',
   sysOrigin: '',
@@ -98,6 +101,20 @@ const originOptions = computed(() => {
   }));
 });
 
+const currentPageList = computed(() => {
+  const pageSize = Number(query.limit || DEFAULT_PAGE_SIZE);
+  const startIndex = (currentPage.value - 1) * pageSize;
+  return list.value.slice(startIndex, startIndex + pageSize);
+});
+
+const paginationTotal = computed(() => {
+  const pageSize = Number(query.limit || DEFAULT_PAGE_SIZE);
+  if (notMore.value) {
+    return list.value.length;
+  }
+  return Math.max(list.value.length + pageSize, (currentPage.value + 1) * pageSize);
+});
+
 watch(
   rangeDate,
   (value) => {
@@ -185,6 +202,7 @@ async function loadData(reset = false) {
     list.value = [];
     notMore.value = false;
     query.context = '';
+    currentPage.value = 1;
   }
 
   normalizeOriginValue();
@@ -204,15 +222,39 @@ async function loadData(reset = false) {
     const waters = result?.waters || [];
     list.value = reset ? waters : [...list.value, ...waters];
     query.context = result?.context || '';
-    notMore.value = Boolean(result?.listOver);
+    notMore.value = Boolean(result?.listOver) || !query.context;
   } finally {
     loading.value = false;
     loadMoreLoading.value = false;
   }
 }
 
-function handleSearch() {
-  void loadData(true);
+async function ensurePageLoaded(page: number) {
+  const pageSize = Number(query.limit || DEFAULT_PAGE_SIZE);
+  let guard = 0;
+  while (!notMore.value && list.value.length < page * pageSize && guard < page) {
+    const beforeLength = list.value.length;
+    const beforeContext = query.context;
+    await loadData(false);
+    guard += 1;
+    if (list.value.length === beforeLength && query.context === beforeContext) {
+      break;
+    }
+  }
+}
+
+async function handlePageChange(page: number) {
+  await ensurePageLoaded(page);
+  if (notMore.value) {
+    const maxPage = Math.max(1, Math.ceil(list.value.length / Number(query.limit || DEFAULT_PAGE_SIZE)));
+    currentPage.value = Math.min(page, maxPage);
+    return;
+  }
+  currentPage.value = page;
+}
+
+async function handleSearch() {
+  await loadData(true);
 }
 
 function openUserDetails(record: Record<string, any>) {
@@ -294,7 +336,7 @@ void loadData(true);
 
       <Table
         :columns="columns"
-        :data-source="list"
+        :data-source="currentPageList"
         :loading="loading"
         :pagination="false"
         row-key="id"
@@ -344,16 +386,15 @@ void loadData(true);
         </template>
       </Table>
 
-      <div v-if="list.length > 0" class="load-more">
-        <Button
-          v-if="!notMore"
-          :loading="loadMoreLoading"
-          size="small"
-          @click="loadData(false)"
-        >
-          加载更多
-        </Button>
-        <span v-else>已加载全部</span>
+      <div v-if="list.length > 0" class="pagination">
+        <Pagination
+          :current="currentPage"
+          :disabled="loading || loadMoreLoading"
+          :page-size="query.limit"
+          :total="paginationTotal"
+          show-less-items
+          @change="handlePageChange"
+        />
       </div>
     </component>
   </component>
@@ -384,9 +425,9 @@ void loadData(true);
   color: #262626;
 }
 
-.load-more {
+.pagination {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   margin-top: 16px;
 }
 </style>