feat(知识库): 知识库详情页增加分页

src/apis/knowledge.ts

@@ -91,8 +91,11 @@ export function fetchGetKnowledgeListByKdIds<T>(kdIds: number[]) {
  * @query search 搜索值
  * @returns 获取知识库文档列表
  */
-export function fetchGetKnowledgeDocumentList<T>(knowledgeInfoId: number, search: string) {
-  return request.post<T>(`/knowledgeRest/searchDocuments.json?knowledgeInfoId=${knowledgeInfoId}&search=${search}`)
+export function fetchGetKnowledgeDocumentList<T>(knowledgeInfoId: number, search: string, payload: object) {
+  return request.post<T>(
+    `/knowledgeRest/searchDocuments.json?knowledgeInfoId=${knowledgeInfoId}&search=${search}`,
+    payload,
+  )
 }
 
 /**

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

@@ -15,8 +15,10 @@ import {
   fetchUpdateKnowledgeInfo,
 } from '@/apis/knowledge'
 import useTableScrollY from '@/composables/useTableScrollY'
+import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
 import EditKnowledgeModal, { KnowledgeFormDataInterface } from './components/edit-knowledge-modal.vue'
 import { useUserStore } from '@/store/modules/user'
+import { usePagination } from '@/composables/usePagination'
 
 const { t } = useI18n()
 
@@ -24,10 +26,12 @@ const router = useRouter()
 
 const userStore = useUserStore()
 
-const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 48)
+const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 48 + 24 + 28)
 
 const knowledgeDocumentColumn = createKnowledgeDocumentColumn(handleClickKnowledgeDocumentTableAction)
 
+const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+
 const knowledgeDocumentTableLoading = ref(false)
 const knowledgeDocumentList = ref<KnowledgeDocumentItem[]>([])
 const checkedKdIdList = ref<number[]>([])
@@ -74,10 +78,13 @@ const { pause: pauseIntervalFn, resume: resumeIntervalFn } = useIntervalFn(
     const res = await fetchGetKnowledgeDocumentList<KnowledgeDocumentItem[]>(
       currentKnowledgeId.value,
       searchDocumentInputValue.value,
+      { pagingInfo: paginationData },
     )
 
     if (res.code === 0) {
       knowledgeDocumentList.value = res.data
+      paginationData.totalRows = res.pagingInfo?.totalRows || 0
+      paginationData.totalPages = res.pagingInfo?.totalPages || 0
       isSearchEmptyList.value = !!searchDocumentInputValue.value && res.data.length === 0
     }
   },
@@ -85,6 +92,10 @@ const { pause: pauseIntervalFn, resume: resumeIntervalFn } = useIntervalFn(
   { immediateCallback: false, immediate: false },
 )
 
+watch([() => paginationData.pageNo, () => paginationData.pageSize], () => {
+  handleGetKnowledgeDocumentList()
+})
+
 onMounted(async () => {
   if (!router.currentRoute.value.params.id) {
     window.$message.warning(t('personal_space_module.knowledge_module.not_find_knowledge_message'))
@@ -112,16 +123,24 @@ async function handleGetKnowledgeDocumentList() {
   const res = await fetchGetKnowledgeDocumentList<KnowledgeDocumentItem[]>(
     currentKnowledgeId.value,
     searchDocumentInputValue.value,
+    { pagingInfo: paginationData },
   )
 
   if (res.code === 0) {
     knowledgeDocumentList.value = res.data
     knowledgeDocumentTableLoading.value = false
     checkedKdIdList.value = []
+    paginationData.totalRows = res.pagingInfo?.totalRows || 0
+    paginationData.totalPages = res.pagingInfo?.totalPages || 0
     isSearchEmptyList.value = !!searchDocumentInputValue.value && res.data.length === 0
   }
 }
 
+async function handleSearchKnowledgeDocumentList() {
+  paginationData.pageNo = 1
+  await handleGetKnowledgeDocumentList()
+}
+
 function handleClickKnowledgeDocumentTableAction(actionType: string, knowledgeDocumentItem: KnowledgeDocumentItem) {
   switch (actionType) {
     case 'view':
@@ -150,6 +169,9 @@ async function handleDeleteKnowledgeDocument(kdId: number) {
 
       if (res.code === 0) {
         window.$message.success(t('common_module.delete_success_message'))
+        if (knowledgeDocumentList.value.length <= 1 && paginationData.pageNo === paginationData.totalPages) {
+          paginationData.pageNo = paginationData.pageNo - 1 || 1
+        }
         await userStore.fetchUpdateEquityInfo()
         await handleGetKnowledgeDocumentList()
       }
@@ -197,6 +219,12 @@ async function handleBatchDelDocument() {
 
       if (res.code === 0) {
         window.$message.success(t('common_module.delete_success_message'))
+        if (
+          knowledgeDocumentList.value.length <= checkedKdIdList.value.length &&
+          paginationData.pageNo === paginationData.totalPages
+        ) {
+          paginationData.pageNo = paginationData.pageNo - 1 || 1
+        }
         await userStore.fetchUpdateEquityInfo()
         await handleGetKnowledgeDocumentList()
       }
@@ -238,7 +266,7 @@ function handleBackKnowledgeList() {
         v-model:value="searchDocumentInputValue"
         :placeholder="t('personal_space_module.knowledge_module.search_knowledge_document_placeholder')"
         class="w-[214px]!"
-        @keyup.enter="handleGetKnowledgeDocumentList"
+        @keyup.enter="handleSearchKnowledgeDocumentList"
       >
         <template #suffix>
           <Search
@@ -246,7 +274,7 @@ function handleBackKnowledgeList() {
             size="16"
             fill="#999"
             class="cursor-pointer"
-            @click="handleGetKnowledgeDocumentList"
+            @click="handleSearchKnowledgeDocumentList"
           />
         </template>
       </NInput>
@@ -287,6 +315,14 @@ function handleBackKnowledgeList() {
           </template>
         </NDataTable>
       </div>
+
+      <div class="mt-6 flex justify-end">
+        <CustomPagination
+          :paging-info="paginationData"
+          @update-page-no="handlePageNoChange"
+          @update-page-size="handlePageSizeChange"
+        />
+      </div>
     </div>
 
     <EditKnowledgeModal