Browse Source

实现搜索结果 简洁|详细 功能

Kevin Jiang 3 years ago
parent
commit
7960644702

+ 17 - 4
src/views/search/SearchResultView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onUnmounted, ref, computed, type Ref, onMounted, reactive } from "vue";
+import { onUnmounted, ref, computed, type Ref, onMounted, reactive, provide } from "vue";
 import { useRoute } from "vue-router";
 import { useSideBarStore } from "@/stores/side-bar";
 import SearchBox from "./components/SearchBox.vue";
@@ -8,7 +8,7 @@ import SearchResultList from "./components/SearchResultList.vue";
 import type { SearchRequest } from "@/types/request.types";
 import { useSearchStore } from "@/stores/search.store";
 import { routeToSearch, type SearchRouteParam } from "./search.helper";
-import type { Sort } from "./search-component.type";
+import type { ResultMode, Sort } from "./search-component.type";
 
 const sideBarStore = useSideBarStore();
 
@@ -38,6 +38,8 @@ const authorAggResult = computed(() => searchStore.authorAggResult);
 
 const searchType: Ref<'simple' | 'advanced'> = ref('simple');
 
+const resultMode: Ref<ResultMode> = ref('detail');
+
 const query = ref('');
 
 interface SearchParams {
@@ -49,6 +51,10 @@ interface SearchParams {
   size?: number;
 }
 
+/**
+ * 根据搜索状态数据执行搜索
+ * @param searchParams 搜索状态数据
+ */
 function performSearch(searchParams: SearchParams) {
   let sortParam: Object = { "Relevance": "Relevance" };
   if (searchParams.sort) {
@@ -126,6 +132,8 @@ function doSearch() {
     query: query.value,
     yearSelected: yearChecked.value,
     authorSelected: authorChecked.value,
+    page: pagination.page,
+    size: pagination.size,
     sort: sort.value,
   };
   performSearch(searchParams);
@@ -216,6 +224,10 @@ function onPaginationChange(page: any, pageSize: any) {
   doSearch();
 }
 
+function onModeChange(mode: ResultMode) {
+  resultMode.value = mode;
+}
+
 function changeYearChecked() {
   pagination.page = 1;
   doSearch();
@@ -274,13 +286,14 @@ onUnmounted(() => {
       <a-col :span="19">
         <SearchResultToolbar
           v-if="searchResult"
-          @update:sort="changeSort"
           :data="searchResult"
           v-model:sort="sort"
           v-model:pagination="pagination"
+          @update:sort="changeSort"
           @paginationChange="onPaginationChange"
+          @modeChange="onModeChange"
         />
-        <SearchResultList :data="searchResult" v-if="searchResult" />
+        <SearchResultList :data="searchResult" :mode="resultMode" v-if="searchResult" />
       </a-col>
     </a-row>
   </div>

+ 17 - 6
src/views/search/components/SearchResultItem.vue

@@ -1,31 +1,42 @@
 <script setup lang="ts">
 import type { PropType } from "vue";
 import type { SearchResultDoc } from "@/types/search.types";
+import type { ResultMode } from "../search-component.type";
 
 defineProps({
   data: {
     type: Object as PropType<SearchResultDoc>,
     required: true,
+  },
+  mode: {
+    type: String as PropType<ResultMode>,
+    default() { return 'detail' },
   }
 });
 </script>
 
 <template>
-  <div class="item">
+  <div class="item-wrap">
     <h1>
       <RouterLink :to="'/detail/' + data.id" target="_blank">
         {{ data.title }}
       </RouterLink>
     </h1>
-    <p>作者:{{ data.authors.join(",") }}</p>
-    <p>机构:{{ data.unit }}</p>
-    <p>关键词:{{ data.keywords.join(",") }}</p>
-    <p>摘要:<span v-html="data.abstract.replace('摘要:', '')"></span></p>
+    <div class="metadata">
+      <div>作者:{{ data.authors.join(",") }}</div>
+      <div v-if="data.unit">机构:{{ data.unit }}</div>
+      <div>关键词:{{ data.keywords.join(",") }}</div>
+    </div>
+    <p v-if="mode != 'brief'">摘要:<span v-html="data.abstract.replace('摘要:', '')"></span></p>
   </div>
 </template>
 
 <style scoped lang="scss">
-.item {
+.item-wrap {
   padding: 5px;
+
+  .metadata {
+    padding-bottom: 5px;
+  }
 }
 </style>

+ 6 - 1
src/views/search/components/SearchResultList.vue

@@ -2,11 +2,16 @@
 import { computed, type PropType } from "vue";
 import SearchResultItem from "./SearchResultItem.vue";
 import type { SearchResult } from "@/types/search.types";
+import type { ResultMode } from "../search-component.type";
 
 const props = defineProps({
   data: {
     type: Object as PropType<SearchResult>,
     required: true,
+  },
+  mode: {
+    type: String as PropType<ResultMode>,
+    default() { return 'detail' },
   }
 });
 
@@ -16,7 +21,7 @@ const docSize = computed(() => props.data.docs.length);
 <template>
   <div class="search-result-content">
     <div v-for="(doc, index) in data.docs" :key="index">
-      <SearchResultItem :data="doc" />
+      <SearchResultItem :data="doc" :mode="mode" />
       <a-divider v-if="index < docSize - 1" />
     </div>
   </div>

+ 8 - 3
src/views/search/components/SearchResultToolbar.vue

@@ -3,7 +3,7 @@ import type { SelectProps } from "ant-design-vue";
 import { ref } from "vue";
 import type { PropType } from "vue";
 import type { SearchResult } from "@/types/search.types";
-import type { Pagination } from "../search-component.type";
+import type { Pagination, ResultMode } from "../search-component.type";
 
 // 排序选择项列表
 const sortOptions = ref<SelectProps["options"]>([
@@ -36,6 +36,7 @@ defineProps({
 const emits = defineEmits<{
   (e: "paginationChange", field: string, keyword: string): void;
   (e: "update:sort", sort: string): void;
+  (e: "modeChange", mode: ResultMode): void;
 }>();
 
 /**
@@ -49,6 +50,10 @@ function handleSortChange(value: string) {
 function onPageChange(size: string, page: string) {
   emits("paginationChange", size, page);
 }
+
+function onModeChange(mode: ResultMode) {
+  emits("modeChange", mode);
+}
 </script>
 
 <template>
@@ -59,8 +64,8 @@ function onPageChange(size: string, page: string) {
       <span>
         <span>显示:</span>
         <a-space>
-        <a href="#">简洁</a>
-        <a href="#">详细</a>
+          <a href="#" @click="onModeChange('brief')">简洁</a>
+          <a href="#" @click="onModeChange('detail')">详细</a>
         </a-space>
       </span>
       <a-divider type="vertical"></a-divider>

+ 2 - 0
src/views/search/search-component.type.ts

@@ -5,3 +5,5 @@ export interface Pagination {
 }
 
 export type Sort = 'Relevance' | 'DateDesc' | 'DateAsc';
+
+export type ResultMode = 'brief' | 'detail';