[update] 一阶段首页搜索

src/views/dashboard/search/GeneralSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <a-spin :spinning="loading || selectOptionLoading">
     <a-card :bordered="false">
       <!--  搜索框部分  -->
       <div class="top-search-div">
@@ -55,36 +55,35 @@
           {{ toggleSearchStatus ? $t('putAway') : $t('open') }}
         </div>
       </div>
+      <!--  结果展示  -->
       <template v-if="dataSource && dataSource.length > 0">
         <!--  查询结果展示区域  -->
         <div class="result-wrapper">
-          <a-spin :spinning="loading">
-            <div class="result-div" v-for="item in dataSource" :key="item.id">
-              <div class="result-title-wrapper">
-                <!--  正在搜索，标题根据搜索内容高亮显示  -->
-                <a-tooltip>
-                  <template #title>
-                    <span v-html="item.title"></span>
-                  </template>
-                  <p class="result-title" v-html="item.title"></p>
-                </a-tooltip>
-                <div class="result-source-wrapper">
-                  <p class="result-source">{{ resourceTypeOptions.find(i => i.key === item.resourceType).label }}</p>
-                </div>
-                <p class="result-date">{{ $t('dashboard.generalSearch.releaseDate') }} {{ item.releaseDate || global.emptyLine }}</p>
+          <div class="result-div" v-for="item in dataSource" :key="item.id">
+            <div class="result-title-wrapper">
+              <!--  正在搜索，标题根据搜索内容高亮显示  -->
+              <a-tooltip>
+                <template #title>
+                  <span v-html="item.title"></span>
+                </template>
+                <p class="result-title" v-html="item.title"></p>
+              </a-tooltip>
+              <div class="result-source-wrapper">
+                <p class="result-source">{{ resourceTypeOptions.find(i => i.key === item.resourceType).label }}</p>
               </div>
-              <template v-if="retrievalModeCurrent === '1'">
-                <!--  全文检索  -->
-                <div v-html="item.content" class="result-content-wrapper"></div>
-              </template>
-              <template v-else>
-                <div v-if="item.resourceType !== '4'" class="result-content-wrapper">
-                  {{ item.content }}
-                </div>
-                <div v-else v-html="item.content" class="result-content-wrapper"></div>
-              </template>
+              <p class="result-date">{{ $t('dashboard.generalSearch.releaseDate') }} {{ item.releaseDate || global.emptyLine }}</p>
             </div>
-          </a-spin>
+            <template v-if="retrievalModeCurrent === '1'">
+              <!--  全文检索  -->
+              <div v-html="item.content" class="result-content-wrapper"></div>
+            </template>
+            <template v-else>
+              <div v-if="item.resourceType !== '4'" class="result-content-wrapper">
+                {{ item.content }}
+              </div>
+              <div v-else v-html="item.content" class="result-content-wrapper"></div>
+            </template>
+          </div>
         </div>
         <a-pagination
           v-if="dataSource && dataSource.length > 0"
@@ -101,10 +100,10 @@
         />
       </template>
       <a-empty class="empty-content" v-else />
-    </a-card>
 
-    <search-history-modal ref="searchHistoryModal"></search-history-modal>
-  </div>
+      <search-history-modal ref="searchHistoryModal"></search-history-modal>
+    </a-card>
+  </a-spin>
 </template>
 
 <script>
@@ -121,6 +120,7 @@ export default {
   components: { SearchHistoryModal },
   data () {
     return {
+      selectOptionLoading: false, // 其他筛选条件部分的loading
       loading: false,
       searchValue: '', // 搜索框内容
       toggleSearchStatus: false, // 检索条件收缩还是展开， false收缩状态
@@ -164,6 +164,32 @@ export default {
       }
     }
   },
+  mounted () {
+    // 初始化检索方式
+    if (this.$route.query.type === 'title') {
+      // 标题检索
+      this.retrievalModeCurrent = '2'
+    } else if (this.$route.query.type === 'fullText') {
+      // 全文检索
+      this.retrievalModeCurrent = '1'
+    }
+    // 初始化资源类型
+    if (this.$route.query.resourceType) {
+      this.resourceTypeCurrent = this.$route.query.resourceType
+    }
+    // 初始化搜索内容
+    if (this.$route.query.searchValue) {
+      this.searchValue = this.$route.query.searchValue
+    }
+    // 资源类型不是全部，并且有搜索内容时获取筛选条件
+    if (this.resourceTypeCurrent !== 'all' && this.searchValue) {
+      this.initFilterData()
+    }
+    // 有搜索内容时，调用查询方法
+    if (this.searchValue) {
+      this.onSearch(1)
+    }
+  },
   methods: {
     // 获取要显示数量的筛选条件的数据
     initFilterData () {
@@ -180,6 +206,7 @@ export default {
       } else {
         func = getSearchParamNum
       }
+      this.selectOptionLoading = true
       func(param).then(res => {
         if (res.success) {
           // 设置对象key为搜索时需要传给后端的字段名，以及设置选项和字段label
@@ -229,6 +256,8 @@ export default {
           this.$message.warning(res.message)
           this.selectOptions = {}
         }
+      }).finally(() => {
+        this.selectOptionLoading = false
       })
     },
     // 查询时获取参数
@@ -311,6 +340,8 @@ export default {
       // 更新其他筛选项的数据
       if (key !== 'all') {
         this.initFilterData()
+      } else {
+        this.selectOptions = {}
       }
       this.onSearch()
     },