金币收支记录分页

apps/src/views/gm/gold-operation.vue

@@ -67,6 +67,7 @@ const query = reactive<Record<string, any>>({
   backOperationUser: undefined,
   context: '',
   endTime: '',
+  lastId: '',
   limit: DEFAULT_PAGE_SIZE,
   startTime: '',
   type: undefined,
@@ -281,6 +282,7 @@ async function loadData(reset = false) {
     list.value = [];
     notMore.value = false;
     query.context = '';
+    query.lastId = '';
     currentPage.value = 1;
   }
 
@@ -295,6 +297,7 @@ async function loadData(reset = false) {
       backOperationUser: query.backOperationUser || undefined,
       context: query.context || undefined,
       endTime: query.endTime,
+      lastId: query.lastId || undefined,
       limit: query.limit,
       queryBackOperationUser: true,
       startTime: query.startTime,
@@ -302,9 +305,13 @@ async function loadData(reset = false) {
       userId: query.userId || undefined,
     });
     const waters = result?.waters || [];
-    list.value = reset ? waters : [...list.value, ...waters];
+    const nextList = reset ? waters : [...list.value, ...waters];
+    list.value = nextList;
     query.context = result?.context || '';
-    notMore.value = Boolean(result?.listOver) || !query.context;
+    query.lastId = String(getRunningWater(nextList[nextList.length - 1] || {}).id || '');
+    notMore.value =
+      Boolean(result?.listOver) ||
+      (!query.context && waters.length < Number(query.limit || DEFAULT_PAGE_SIZE));
   } finally {
     loading.value = false;
     loadMoreLoading.value = false;
@@ -325,7 +332,13 @@ async function ensurePageLoaded(page: number) {
   }
 }
 
-async function handlePageChange(page: number) {
+async function handlePageChange(page: number, pageSize?: number) {
+  if (pageSize && pageSize !== Number(query.limit || DEFAULT_PAGE_SIZE)) {
+    query.limit = pageSize;
+    await loadData(true);
+    return;
+  }
+
   await ensurePageLoaded(page);
   if (notMore.value) {
     const maxPage = Math.max(1, Math.ceil(list.value.length / Number(query.limit || DEFAULT_PAGE_SIZE)));
@@ -463,9 +476,12 @@ void loadData(true);
           :current="currentPage"
           :disabled="loading || loadMoreLoading"
           :page-size="query.limit"
+          :page-size-options="['20', '50', '100', '200']"
+          :show-size-changer="true"
           :total="paginationTotal"
           show-less-items
           @change="handlePageChange"
+          @showSizeChange="handlePageChange"
         />
       </div>
     </Card>

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

@@ -67,6 +67,7 @@ const query = reactive<Record<string, any>>({
   context: '',
   endTime: '',
   id: '',
+  lastId: '',
   limit: DEFAULT_PAGE_SIZE,
   origin: '',
   startTime: '',
@@ -115,6 +116,19 @@ const paginationTotal = computed(() => {
   return Math.max(list.value.length + pageSize, (currentPage.value + 1) * pageSize);
 });
 
+function getRunningWater(record: Record<string, any>) {
+  return record.runningWater || record;
+}
+
+function getRowKey(record: Record<string, any>) {
+  return getRunningWater(record).id || record.id;
+}
+
+function getLastRunningWaterId(records = list.value) {
+  const lastRecord = records[records.length - 1];
+  return lastRecord ? String(getRunningWater(lastRecord).id || '') : '';
+}
+
 watch(
   rangeDate,
   (value) => {
@@ -202,6 +216,7 @@ async function loadData(reset = false) {
     list.value = [];
     notMore.value = false;
     query.context = '';
+    query.lastId = '';
     currentPage.value = 1;
   }
 
@@ -220,9 +235,13 @@ async function loadData(reset = false) {
   try {
     const result = await getClsGoldRunningWater({ ...query });
     const waters = result?.waters || [];
-    list.value = reset ? waters : [...list.value, ...waters];
+    const nextList = reset ? waters : [...list.value, ...waters];
+    list.value = nextList;
     query.context = result?.context || '';
-    notMore.value = Boolean(result?.listOver) || !query.context;
+    query.lastId = getLastRunningWaterId(nextList);
+    notMore.value =
+      Boolean(result?.listOver) ||
+      (!query.context && waters.length < Number(query.limit || DEFAULT_PAGE_SIZE));
   } finally {
     loading.value = false;
     loadMoreLoading.value = false;
@@ -243,7 +262,13 @@ async function ensurePageLoaded(page: number) {
   }
 }
 
-async function handlePageChange(page: number) {
+async function handlePageChange(page: number, pageSize?: number) {
+  if (pageSize && pageSize !== Number(query.limit || DEFAULT_PAGE_SIZE)) {
+    query.limit = pageSize;
+    await loadData(true);
+    return;
+  }
+
   await ensurePageLoaded(page);
   if (notMore.value) {
     const maxPage = Math.max(1, Math.ceil(list.value.length / Number(query.limit || DEFAULT_PAGE_SIZE)));
@@ -339,7 +364,7 @@ void loadData(true);
         :data-source="currentPageList"
         :loading="loading"
         :pagination="false"
-        row-key="id"
+        :row-key="getRowKey"
         :scroll="{ x: 1280 }"
         @row-click="openUserDetails"
       >
@@ -391,9 +416,12 @@ void loadData(true);
           :current="currentPage"
           :disabled="loading || loadMoreLoading"
           :page-size="query.limit"
+          :page-size-options="['20', '50', '100', '200']"
+          :show-size-changer="true"
           :total="paginationTotal"
           show-less-items
           @change="handlePageChange"
+          @showSizeChange="handlePageChange"
         />
       </div>
     </component>