chore: 知识库分页

src/composables/usePagination.ts

+import { reactive } from 'vue'
+
+export interface DefaultPaginationData {
+  pageNo: number
+  pageSize: number
+  totalPages: number
+  totalRows: number
+}
+
+interface PaginationData {
+  pageNo?: number
+  pageSize?: number
+  totalPages?: number
+  totalRows?: number
+}
+
+/** 默认的分页参数 */
+const defaultPaginationData: DefaultPaginationData = {
+  pageNo: 1,
+  pageSize: 10,
+  totalPages: 0,
+  totalRows: 0,
+}
+
+export function usePagination(initialPaginationData: PaginationData = {}) {
+  /** 合并分页参数 */
+  const paginationData = reactive({ ...defaultPaginationData, ...initialPaginationData })
+  /** 改变当前页码 */
+  const handlePageNoChange = (pageNo: number) => {
+    paginationData.pageNo = pageNo
+  }
+  /** 改变页面大小 */
+  const handlePageSizeChange = (pageSize: number) => {
+    paginationData.pageNo = 1
+    paginationData.pageSize = pageSize
+  }
+
+  return { paginationData, handlePageNoChange, handlePageSizeChange }
+}

src/views/personal-space/personal-knowledge/document-detail.vue

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { ScrollbarInst } from 'naive-ui'
@@ -14,7 +14,8 @@ import {
   fetchOpenKnowledgeChunk,
   fetchUpdateKnowledgeChunk,
 } from '@/apis/knowledge'
-import CustomPagination, { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
+import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
+import { usePagination } from '@/composables/usePagination.ts'
 import EditKnowledgeChunkModal from './components/edit-knowledge-chunk-modal.vue'
 import AddKnowledgeChunkModal from './components/add-knowledge-chunk-modal.vue'
 
@@ -22,6 +23,8 @@ const { t } = useI18n()
 
 const router = useRouter()
 
+const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+
 const currentKdId = ref(0)
 const currentKnowledgeDocumentName = ref('')
 const currentKnowledgeDocumentUrl = ref('')
@@ -34,13 +37,6 @@ const totalChunk = ref(0)
 const knowledgeChunkList = ref<KnowledgeChunkItem[]>([])
 const knowledgeChunkListLoading = ref(false)
 
-const pagingInfo = ref<PaginationInfo>({
-  pageNo: 1,
-  pageSize: 10,
-  totalPages: 0,
-  totalRows: 0,
-})
-
 const defaultKnowledgeChunkData: KnowledgeChunkItem = {
   knowledgeId: '',
   chunkContent: '',
@@ -65,6 +61,11 @@ const emptyKnowledgeChunkListText = computed(() => {
   return isSearchEmptyList.value ? t('common_module.search_empty_data') : t('common_module.empty_data')
 })
 
+watch([() => paginationData.pageNo, () => paginationData.pageSize], async () => {
+  await handleGetKnowledgeChunkList()
+  scrollBarRef.value?.scrollTo({ top: 0 })
+})
+
 onMounted(async () => {
   if (!router.currentRoute.value.params.kdId) {
     window.$message.warning(t('personal_space_module.knowledge_module.not_find_knowledge_document_message'))
@@ -98,16 +99,17 @@ async function handleGetKnowledgeChunkList() {
     searchKnowledgeChunkValue.value,
     currentKdId.value,
     {
-      pagingInfo: pagingInfo.value,
+      pagingInfo: paginationData,
     },
   )
 
   if (res.code === 0) {
     totalChunk.value = res.data.totalChunk
     knowledgeChunkList.value = res.data.chunkInfos || []
-    pagingInfo.value = res.pagingInfo as PaginationInfo
+    paginationData.totalRows = res.pagingInfo?.totalPages || 0
+    paginationData.totalPages = res.pagingInfo?.totalPages || 0
     knowledgeChunkListLoading.value = false
-    isSearchEmptyList.value = !!searchKnowledgeChunkValue.value && pagingInfo.value.totalRows === 0
+    isSearchEmptyList.value = !!searchKnowledgeChunkValue.value && paginationData.totalRows === 0
   }
 }
 
@@ -115,21 +117,8 @@ function handleBackKnowledgeDocumentList() {
   router.back()
 }
 
-async function handleGetKnowledgeChunkListUpdatePageNo(pageNo: number) {
-  pagingInfo.value.pageNo = pageNo
-  await handleGetKnowledgeChunkList()
-  scrollBarRef.value?.scrollTo({ top: 0 })
-}
-
-async function handleGetKnowledgeChunkListUpdatePageSize(pageSize: number) {
-  pagingInfo.value.pageNo = 1
-  pagingInfo.value.pageSize = pageSize
-  await handleGetKnowledgeChunkList()
-  scrollBarRef.value?.scrollTo({ top: 0 })
-}
-
 async function handleSearchKnowledgeChunkList() {
-  pagingInfo.value.pageNo = 1
+  paginationData.pageNo = 1
   await handleGetKnowledgeChunkList()
   scrollBarRef.value?.scrollTo({ top: 0 })
 }
@@ -292,9 +281,9 @@ async function handleUpdateOpenKnowledgeChunk(chunkItem: KnowledgeChunkItem) {
 
     <div class="mt-4 flex justify-end">
       <CustomPagination
-        :paging-info="pagingInfo"
-        @update-page-no="handleGetKnowledgeChunkListUpdatePageNo"
-        @update-page-size="handleGetKnowledgeChunkListUpdatePageSize"
+        :paging-info="paginationData"
+        @update-page-no="handlePageNoChange"
+        @update-page-size="handlePageSizeChange"
       />
     </div>
 

src/views/personal-space/personal-knowledge/personal-knowledge.vue

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Search } from '@icon-park/vue-next'
 import { createKnowledgeColumn } from './columns.tsx'
 import { KnowledgeItem } from './knowledge-type.ts'
-import CustomPagination, { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
+import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
 import useTableScrollY from '@/composables/useTableScrollY.ts'
+import { usePagination } from '@/composables/usePagination.ts'
 import { fetchDelKnowledgeById, fetchEnableKnowledgeInfo, fetchGetKnowledgeList } from '@/apis/knowledge.ts'
 
 const { t } = useI18n()
@@ -14,16 +15,10 @@ const { t } = useI18n()
 const router = useRouter()
 
 const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 32 + 16 + 16 + 28)
+const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
 
 const knowledgeColumns = createKnowledgeColumn(handleClickKnowledgeTableAction)
 
-const pagingInfo = ref<PaginationInfo>({
-  pageNo: 1,
-  pageSize: 10,
-  totalPages: 0,
-  totalRows: 0,
-})
-
 const knowledgeListTableLoading = ref(false)
 const knowledgeList = ref<KnowledgeItem[]>([])
 
@@ -38,6 +33,8 @@ const emptyTableDataText = computed(() => {
   return isSearchEmptyList.value ? t('common_module.search_empty_data') : t('common_module.empty_data')
 })
 
+watch([() => paginationData.pageNo, () => paginationData.pageSize], handleGetKnowledgeList)
+
 onMounted(async () => {
   await handleGetKnowledgeList()
 })
@@ -46,14 +43,15 @@ async function handleGetKnowledgeList() {
   knowledgeListTableLoading.value = true
 
   const res = await fetchGetKnowledgeList<KnowledgeItem[]>('', searchKnowledgeInputValue.value, {
-    pagingInfo: pagingInfo.value,
+    pagingInfo: paginationData,
   })
 
   if (res.code === 0) {
     knowledgeList.value = res.data
-    pagingInfo.value = res.pagingInfo as PaginationInfo
+    paginationData.totalRows = res.pagingInfo?.totalPages || 0
+    paginationData.totalPages = res.pagingInfo?.totalPages || 0
     knowledgeListTableLoading.value = false
-    isSearchEmptyList.value = !!searchKnowledgeInputValue.value && pagingInfo.value.totalRows === 0
+    isSearchEmptyList.value = !!searchKnowledgeInputValue.value && paginationData.totalRows === 0
   }
 }
 
@@ -100,20 +98,9 @@ async function handleDeleteKnowledge(knowledgeId: number) {
 }
 
 function handleSearchKnowledge() {
-  pagingInfo.value.pageNo = 1
+  paginationData.pageNo = 1
   handleGetKnowledgeList()
 }
-
-async function handleGetKnowledgeListUpdatePageNo(pageNo: number) {
-  pagingInfo.value.pageNo = pageNo
-  await handleGetKnowledgeList()
-}
-
-async function handleGetKnowledgeListUpdatePageSize(pageSize: number) {
-  pagingInfo.value.pageNo = 1
-  pagingInfo.value.pageSize = pageSize
-  await handleGetKnowledgeList()
-}
 </script>
 
 <template>
@@ -158,9 +145,9 @@ async function handleGetKnowledgeListUpdatePageSize(pageSize: number) {
 
     <footer v-show="isLoadingPagination" class="flex justify-end">
       <CustomPagination
-        :paging-info="pagingInfo"
-        @update-page-no="handleGetKnowledgeListUpdatePageNo"
-        @update-page-size="handleGetKnowledgeListUpdatePageSize"
+        :paging-info="paginationData"
+        @update-page-no="handlePageNoChange"
+        @update-page-size="handlePageSizeChange"
       />
     </footer>
   </div>