feat: 组件结构优化

apps/bigmember_pc/src/views/search/components/SearchHeader.vue

@@ -9,19 +9,8 @@
           @onSearch="onSearch"
           clearable
         >
-          <div
-            slot="suffix"
-            class="filter-button no-select"
-            @click="changeFilterState"
-          >
-            <span class="filter-button-text">筛选</span>
-            <span
-              class="el-icon-arrow-up"
-              :class="filterShow ? '' : 'rotate180'"
-            ></span>
-          </div>
         </SearchInput>
-        <slot name="input-suffix"></slot>
+        <slot></slot>
         <div
           class="search-right-wx"
           @mouseover="rightQrShow = true"
@@ -39,16 +28,6 @@
           </div>
         </div>
       </div>
-      <div class="search-header-bottom" style="display: none">
-        <el-tabs v-model="tabActive">
-          <el-tab-pane
-            v-for="pane in tabPaneList.filter((i) => i.show)"
-            :key="pane.name"
-            :label="pane.label"
-            :name="pane.name"
-          ></el-tab-pane>
-        </el-tabs>
-      </div>
     </div>
   </div>
 </template>
@@ -66,13 +45,14 @@ export default {
       type: String,
       default: ''
     },
-    perSearchEnabled: {
-      type: Boolean,
-      default: false
-    },
+    // 立即搜索
     immediateSearch: {
       type: Boolean,
       default: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
     }
   },
   model: {
@@ -81,145 +61,27 @@ export default {
   },
   data() {
     return {
-      tabActive: '',
-      placeholder: '',
-      tabActivePane: {},
-      filterShow: true,
-      tabPaneList: [
-        {
-          label: '招标采购搜索',
-          name: 'zb',
-          routerName: '',
-          placeholder: '',
-          show: true
-        },
-        {
-          label: '企业搜索',
-          name: 'qy',
-          routerName: '',
-          placeholder: '',
-          show: true
-        },
-        {
-          label: '采购单位搜索',
-          name: 'cgdw',
-          routerName: '',
-          placeholder: '',
-          show: false
-        },
-        {
-          label: '供应搜索',
-          name: 'issue',
-          routerName: 'search-issued',
-          placeholder: '输入您想要查询的供应信息，多个关键词用空格隔开',
-          show: true
-        }
-      ],
       searchQuery: {
         keywords: ''
       },
-      rightQrShow: false,
-      preSearch: {
-        hover: false,
-        focus: false,
-        list: []
-      }
-    }
-  },
-  computed: {
-    preSearchListShow: function () {
-      return (
-        this.searchContent.trim().length >= 2 &&
-        this.preSearch.list.length &&
-        (this.preSearch.focus || this.preSearch.hover)
-      )
-    }
-  },
-  watch: {
-    '$route.path': function () {
-      this.getDefaultActivePane()
-    },
-    tabActive: function (newVal, oldVal) {
-      let result = ''
-      if (newVal === 'zb') {
-        if (this.searchContent) {
-          result =
-            '/jylab/supsearch/index.html?keywords=' +
-            this.searchContent +
-            '&publishtime=thisyear'
-        } else {
-          result = '/jylab/supsearch/index.html'
-        }
-      } else if (newVal === 'cgdw') {
-        if (this.searchContent) {
-          result = '/jylab/purSearch/index.html?keywords=' + this.searchContent
-        } else {
-          result = '/jylab/purSearch/index.html'
-        }
-      } else if (newVal === 'qy') {
-        if (this.searchContent) {
-          result = '/jylab/entSearch/index.html?keywords=' + this.searchContent
-        } else {
-          result = '/jylab/entSearch/index.html'
-        }
-      }
-      if (!result) return
-      tryCallHooks(
-        {
-          fn: (result) => {
-            this.$BRACE.methods.open({
-              route: {
-                link: result,
-                appType: 'iframe'
-              }
-            })
-          },
-          spareFn: (result) => {
-            location.href = result
-          }
-        },
-        result
-      )
+      rightQrShow: false
     }
   },
   created() {
-    this.initSearchType()
     this.getParams()
   },
   methods: {
-    initSearchType() {
-      this.getDefaultActivePane()
-      this.checkPureShow()
-    },
     getParams() {
       let { keywords } = this.$route.query
       if (keywords === 'undefined') {
         keywords = ''
       }
       this.searchQuery.keywords = keywords
-      this.onInput(keywords) // 触发v-model
+      this.onInput(keywords)
       if (this.immediateSearch) {
         this.onSearch()
       }
     },
-    getDefaultActivePane() {
-      const { name } = this.$route
-      const activePane = this.tabPaneList.find((pane) => {
-        return pane.routerName === name
-      })
-      if (activePane) {
-        this.tabActivePane = activePane
-        this.tabActive = activePane.name
-        this.placeholder = activePane.placeholder
-      }
-    },
-    async checkPureShow() {
-      // const { data } = await entNicheWhetherbuy()
-      // if (data && data.isNew) {
-      //   const index = this.tabPaneList.findIndex((pane) => pane.name === 'cgdw')
-      //   this.tabPaneList[index].show = true
-      // }
-    },
     onInput(e) {
       this.$emit('input', e)
     },
@@ -237,10 +99,6 @@ export default {
         path: this.$route.path,
         query: this.searchQuery
       })
-    },
-    changeFilterState: function () {
-      this.filterShow = !this.filterShow
-      this.$emit('onFilterChange', this.filterShow)
     }
   }
 }
@@ -252,7 +110,8 @@ export default {
   }
 }
 .search-header {
-  padding: 24px 32px;
+  padding: 16px;
+  padding-left: 32px;
   // background-color: #f5f5fb;
 }
 .in-app {
@@ -368,7 +227,7 @@ export default {
 
 .search-right-wx {
   position: absolute;
-  right: 64px;
+  right: 0;
   top: 0;
   font-size: 17px;
   > .icon-erweima {

apps/bigmember_pc/src/views/search/components/search-header-card.vue

@@ -9,6 +9,10 @@ const props = defineProps({
   value: {
     type: String,
     default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
   }
 })
 </script>
@@ -28,15 +32,12 @@ const props = defineProps({
       </span>
     </div>
     <search-header
+      :placeholder="placeholder"
       :searchContent="value"
       @input="$emit('input', $event)"
       @search="$emit('search')"
     >
-      <div slot="input-suffix" class="aaa">
-        <el-badge value="限免" type="danger" class="publish-button">
-          <el-button type="primary" round>信息发布</el-button>
-        </el-badge>
-      </div>
+      <slot></slot>
     </search-header>
   </div>
 </template>

apps/bigmember_pc/src/views/search/layout/search-list.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Empty from '@/components/common/Empty.vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   isSelectAllCheckbox: {
@@ -37,6 +38,13 @@ const props = defineProps({
     })
   }
 })
+
+const canShowPagination = computed(() => {
+  if (props.listState.loading && props.listState.pageNum === 1) {
+    return false
+  }
+  return props.listState.total > 0
+})
 </script>
 
 <template>
@@ -129,7 +137,7 @@ const props = defineProps({
       <div
         class="search-result-footer-container p-b-16px p-r-16px p-t-24px flex flex-(col items-end)"
       >
-        <slot name="pagination" v-if="listState.total > 0">
+        <slot name="pagination" v-if="canShowPagination">
           <el-pagination
             background
             popper-class="pagination-custom-select"