fix(page): pagination in review records

hitokoto-osc · Aug 31, 2023 · 6da0e2c · 6da0e2c
1 parent 5487006
commit 6da0e2c
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 18 deletions.
diff --git a/components/review/records/PollDetailModal.vue b/components/review/records/PollDetailModal.vue
@@ -12,7 +12,13 @@ const emit = defineEmits<{
 
 // fetch PollDetail
 const pollID = computed(() => props.pollId)
-const { data, pending, error, refresh } = usePollDetail(pollID)
+const { data, pending, error, refresh } = usePollDetail(
+  pollID,
+  {},
+  {
+    immediate: false
+  }
+)
 
 watch(
   () => props.open,
@@ -29,9 +35,9 @@ watch(
     @update:open="emit('update:open', $event)"
     @ok="emit('update:open', false)"
   >
-    <template v-if="pending">
+    <div v-if="pending" class="loading">
       <a-spin />
-    </template>
+    </div>
     <template v-if="error">
       <p>加载失败</p>
     </template>
@@ -83,6 +89,10 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+.loading {
+  @apply w-full flex h-70 items-center justify-center;
+}
+
 .chart {
   @apply w-full h-70 mt-5;
 }

diff --git a/pages/dashboard/records/review.vue b/pages/dashboard/records/review.vue
@@ -14,47 +14,121 @@ const showPollDetail = (pollID: number) => {
 
 // 审核记录
 const route = useRoute()
+const pageSizeOptions = ref<string[]>(['10', '20', '30'])
 const page = computed(() => {
   return Number(route.query.page) || 1
 })
 const pageSize = computed(() => {
-  return Number(route.query.pageSize) || 10
+  return Number(route.query.pageSize) || Number(pageSizeOptions.value[0])
 })
+const onPagniationChange = (page: number, pageSize: number) => {
+  navigateTo({
+    name: route.name || undefined,
+    query: {
+      page: page.toString(),
+      pageSize: pageSize.toString()
+    }
+  })
+}
+
+// 请求数据
 const userPollLogsParams = computed(() => {
   return {
     page: page.value,
     pageSize: pageSize.value,
     order: 'desc'
   } as UserPollLogsReq
 })
-const { data: userPollLogsData, refresh: refreshUserPollLogs } =
-  await useUserPollLogs(userPollLogsParams, {
-    lazy: true
-  })
+const {
+  data: userPollLogsData,
+  pending: userPollLogsPending,
+  error: userPollLogsError,
+  refresh: refreshUserPollLogs
+} = await useUserPollLogs(userPollLogsParams, {
+  lazy: true
+})
 watch([page, pageSize], () => {
   refreshUserPollLogs()
 })
 </script>
 
 <template>
-  <div class="review-records w-full">
+  <div class="review-records">
     <a-page-header title="审核记录" />
     <ReviewRecordsPollDetailModal
       v-model:open="showPollDetailModal"
       :poll-id="showPollDetailModalPollId"
     />
-    <div class="mt-10 w-full">
+    <div class="main">
+      <div v-if="userPollLogsPending" class="status">
+        <a-spin />
+      </div>
+      <div v-if="userPollLogsError" class="status">
+        <p>加载失败</p>
+      </div>
       <div
-        v-if="userPollLogsData && userPollLogsData.data.collection.length > 0"
-        class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4"
+        v-if="!userPollLogsPending && !userPollLogsError"
+        class="records-container"
       >
-        <ReviewRecordsCard
-          v-for="userPollLog in userPollLogsData.data.collection"
-          :key="userPollLog.poll_id"
-          :user-poll-log="userPollLog"
-          @show-poll-detail="showPollDetail"
-        />
+        <div class="records">
+          <template v-if="userPollLogsData && userPollLogsData.data.total > 0">
+            <ReviewRecordsCard
+              v-for="userPollLog in userPollLogsData.data.collection"
+              :key="userPollLog.poll_id"
+              :user-poll-log="userPollLog"
+              @show-poll-detail="showPollDetail"
+            />
+          </template>
+          <div v-else class="status">
+            <a-empty />
+          </div>
+        </div>
+        <!-- 分页器 -->
+        <div
+          v-show="userPollLogsData && userPollLogsData.data.total > 0"
+          class="pagination"
+        >
+          <a-pagination
+            :current="page"
+            :page-size="pageSize"
+            show-quick-jumper
+            show-size-changer
+            :page-size-options="pageSizeOptions"
+            :total="userPollLogsData?.data?.total || 0"
+            @change="onPagniationChange"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
+<style lang="scss" scoped>
+.status {
+  @apply w-full h-70 flex items-center justify-center;
+}
+
+.review-records {
+  @apply w-full flex flex-col;
+
+  .main {
+    @apply w-full flex-1 flex flex-col;
+
+    .records-container {
+      @apply w-full flex-1 flex flex-col;
+
+      .records {
+        @apply w-full flex-1 flex flex-col;
+        @apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4;
+      }
+    }
+  }
+
+  .ant-page-header {
+    @apply mx-0 px-0;
+  }
+
+  .pagination {
+    @apply mt-10 flex justify-center;
+  }
+}
+</style>