Procházet zdrojové kódy

feature 1001568

章节搜索翻页功能实现
Kevin Jiang před 2 roky
rodič
revize
f298453ab0

+ 0 - 1
src/services/httpClient.ts

@@ -28,7 +28,6 @@ httpClient.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     return response;
 }, function (error: AxiosError) {
-    // 对响应错误做点什么
     if (error.response?.status == 404) {
         message.error("请求参数错误!");
     } else if (error.response?.status == 401) {

+ 47 - 13
src/views/report/components/reference/ReferenceDraw.vue

@@ -1,7 +1,7 @@
 <!-- 参考文献抽屉组件 -->
 
 <script setup lang="ts">
-import { ref, type Ref } from "vue";
+import { ref, reactive, type Ref } from "vue";
 import ReferenceSearchBox from "./ReferenceSearchBox.vue";
 import ReferenceSearchResultItem from "./ReferenceSearchResultItem.vue";
 import type { ChapterSearchDocResponse, ChapterSearchRequest } from "@/types/search.types"
@@ -16,6 +16,9 @@ const props = defineProps({
   }
 });
 
+// 主体元素ref
+const drawerContentElem = ref<HTMLInputElement | null>(null)
+// 组件可见状态
 const visible = ref<boolean>(false);
 // 章节搜索结果总数量
 const total = ref(0)
@@ -23,12 +26,18 @@ const total = ref(0)
 const referenceSearchResult: Ref<ChapterSearchDocResponse[]> = ref([]);
 // 章节搜索状态
 const loading = ref(false)
+// 翻页
+const pagination = reactive({
+  page: 1,
+  size: 10,
+})
 
-function search(keywords: string[]) {
+function search(keywords: string[], page?: number) {
   loading.value = true
-  const request: ChapterSearchRequest = { keywords }
+  const from = Math.max(1, page || 1) * pagination.size
+  const request: ChapterSearchRequest = { from, keywords }
+  referenceSearchResult.value = []
   chapterSearchService.search(request).then((resp) => {
-    console.log(resp)
     loading.value = false
     total.value = resp.total
     referenceSearchResult.value = resp.items
@@ -38,6 +47,15 @@ function search(keywords: string[]) {
   })
 }
 
+function onPageChange(page: number) {
+  pagination.page = page
+  search(props.keywords as string[], page)
+  if (drawerContentElem.value) {
+    (drawerContentElem.value as HTMLElement).scrollTop = 0
+    console.log('(drawerContentElem.value as HTMLElement).scrollTop', (drawerContentElem.value as HTMLElement).scrollTop)
+  }
+}
+
 const onClose = () => {
   visible.value = false;
 };
@@ -45,7 +63,6 @@ const onClose = () => {
 const show = () => {
   visible.value = true;
   const keywords = props.keywords
-  console.log('keywords', keywords)
   if (keywords && keywords.length > 0) {
     search(keywords as string[])
   }
@@ -66,14 +83,26 @@ defineExpose({
     @close="onClose"
     class="reference-drawer"
   >
-    <ReferenceSearchBox />
-    <a-divider />
-    <SpinComponent :spinning="loading">
-      <div v-for="(item, index) in referenceSearchResult" :key="index">
-        <ReferenceSearchResultItem :data="item" />
-        <a-divider class="result-item-divider" v-if="index < referenceSearchResult.length - 1" />
-      </div>
-    </SpinComponent>
+    <div class="content-wrap" ref="drawerContentElem">
+      <ReferenceSearchBox />
+      <a-divider />
+      <SpinComponent :spinning="loading">
+        <div v-for="(item, index) in referenceSearchResult" :key="index">
+          <ReferenceSearchResultItem :data="item" />
+          <a-divider class="result-item-divider" v-if="index < referenceSearchResult.length - 1" />
+        </div>
+        <div class="pigination-wrap">
+          <a-pagination
+            :current="pagination.page"
+            :pageSize="pagination.size"
+            :total="total"
+            :show-size-changer="false"
+            size="small"
+            @change="onPageChange"
+          />
+        </div>
+      </SpinComponent>
+    </div>
   </a-drawer>
 </template>
 
@@ -81,4 +110,9 @@ defineExpose({
 .result-item-divider {
   margin: 1.2em 0;
 }
+
+.pigination-wrap {
+  text-align: right;
+  margin-top: 1em;
+}
 </style>