소스 검색

feature 1001558

章节搜索的重新搜索实现实现
Kevin Jiang 3 년 전
부모
커밋
4d67fdbdb6

+ 1 - 0
.gitignore

@@ -20,6 +20,7 @@ coverage
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 *.suo
 *.ntvs*

+ 14 - 0
.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "[typescript]": {
+    "editor.tabSize": 2
+  },
+  "[vue]": {
+    "editor.tabSize": 2
+  },
+  "[sass]": {
+    "editor.tabSize": 2
+  },
+  "[html]": {
+    "editor.tabSize": 2
+  }
+}

+ 1 - 0
src/types/search.types.ts

@@ -38,6 +38,7 @@ export interface ChapterSearchRequest {
   from?: number;
   size?: number;
   keywords: string[];
+  queryKeywords?: string[];
 }
 
 export interface UnitScholar {

+ 46 - 31
src/views/report/components/reference/ReferenceDraw.vue

@@ -16,8 +16,6 @@ const props = defineProps({
   }
 });
 
-// 主体元素ref
-const drawerContentElem = ref<HTMLInputElement | null>(null)
 // 组件可见状态
 const visible = ref<boolean>(false);
 // 章节搜索结果总数量
@@ -31,11 +29,28 @@ const pagination = reactive({
   page: 1,
   size: 10,
 })
+// 重新检索的查询词
+const queryKeywords = ref<string[]>([])
 
-function search(keywords: string[], page?: number) {
+function getFrom(page?: number) {
+  return (Math.max(1, page || 1) - 1) * pagination.size
+}
+
+function getDefaultKeywords(): string[] {
+  return props.keywords as string[]
+}
+
+function getSearchRequest(): ChapterSearchRequest {
+  const request: ChapterSearchRequest = {
+    keywords: getDefaultKeywords(),
+    queryKeywords: queryKeywords.value,
+    from: getFrom(pagination.page)
+  }
+  return request
+}
+
+function search(request: ChapterSearchRequest) {
   loading.value = true
-  const from = Math.max(1, page || 1) * pagination.size
-  const request: ChapterSearchRequest = { from, keywords }
   referenceSearchResult.value = []
   chapterSearchService.search(request).then((resp) => {
     loading.value = false
@@ -49,11 +64,13 @@ function search(keywords: string[], page?: number) {
 
 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)
-  }
+  search(getSearchRequest())
+}
+
+function onReferenceSearchBoxSearch(queryKeywordsIn: string[]) {
+  pagination.page = 1
+  queryKeywords.value = queryKeywordsIn
+  search(getSearchRequest())
 }
 
 const onClose = () => {
@@ -64,7 +81,7 @@ const show = () => {
   visible.value = true;
   const keywords = props.keywords
   if (keywords && keywords.length > 0) {
-    search(keywords as string[])
+    search(getSearchRequest())
   }
 };
 
@@ -83,26 +100,24 @@ defineExpose({
     @close="onClose"
     class="reference-drawer"
   >
-    <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>
+    <ReferenceSearchBox @search="onReferenceSearchBoxSearch" />
+    <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>
   </a-drawer>
 </template>
 

+ 9 - 5
src/views/report/components/reference/ReferenceSearchBox.vue

@@ -4,23 +4,27 @@ import { ref } from "vue";
 const keyword = ref('');
 
 const emits = defineEmits<{
-  (e: "search", keyword: string): void;
-  (e: "searchWithIn", keyword: string): void;
+  (e: "search", keyword: string[]): void;
+  (e: "searchWithIn", keyword: string[]): void;
 }>();
 
+function getKeywords(keyword: string) {
+  return keyword.split(' ').filter((item) => item.trim() != "")
+}
+
 function onSearch() {
-  emits("search", keyword.value);
+  emits("search", getKeywords(keyword.value));
 }
 
 function onSearchWithIn() {
-  emits("searchWithIn", keyword.value);
+  emits("searchWithIn", getKeywords(keyword.value));
 }
 </script>
 
 <template>
   <a-row type="flex" :gutter="8">
     <a-col flex="1">
-      <a-input v-model:value="keyword" />
+      <a-input v-model:value="keyword" placeholder="请输入查询词进行检索,使用空格区分多个查询词" />
     </a-col>
     <a-col>
       <a-space>