Browse Source

实现高级搜索

Kevin Jiang 3 years ago
parent
commit
5d70c33c54

+ 5 - 1
src/views/search/SearchResultView.vue

@@ -9,6 +9,7 @@ import type { SearchRequest } from "@/types/request.types";
 import { useSearchStore } from "@/stores/search.store";
 import { routeToSearch, type SearchRouteParam } from "./search.helper";
 import type { ResultMode, Sort } from "./search-component.type";
+import AdvancedSearchBox from "./components/AdvancedSearchBox.vue";
 
 const sideBarStore = useSideBarStore();
 
@@ -245,7 +246,7 @@ onUnmounted(() => {
 
 <template>
   <div class="search-result-wrap">
-    <div class="search-box-wrap">
+    <div class="search-box-wrap" v-if="searchType == 'simple'">
       <SearchBox
         v-model:keyword="keyword"
         v-model:field="field"
@@ -254,6 +255,9 @@ onUnmounted(() => {
         @update:keyword="changKeyword"
       />
     </div>
+    <div class="search-box-wrap" v-if="searchType == 'advanced'">
+      <AdvancedSearchBox :query="query" />
+    </div>
     <a-row type="flex" class="search-result-main" :gutter="10">
       <a-col :span="5">
         <div class="left-filter-header">

+ 27 - 0
src/views/search/components/AdvancedSearchBox.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps({
+  query: {
+    type: String,
+    required: true,
+  }
+});
+
+const emits = defineEmits<{
+  (e: "update:query", query: string): void;
+}>();
+
+function onSearch(e: any) {
+  console.log(e);
+  emits("update:query", e);
+}
+</script>
+
+<template>
+  <a-input-search
+    :value="query"
+    placeholder="请输入查询表达式"
+    enter-button="搜&nbsp;&nbsp;索"
+    size="large"
+    @search="onSearch"
+  />
+</template>