图表搜索功能完善

src/views/etaChart/components/ClassifyWrap.vue

@@ -17,12 +17,15 @@ const expandedclassify = ref([])
 const searchVal = ref('')
 const searchOpts = ref([])
 const searchLoading = ref(false)
-let searchPage = 1
-const searchPageSize = 20
+let searchPage = ref(1)
+const searchPageSize = 15
 let finished = false
+const totals = ref(0)
+const showSearchResults = ref(false)
 function handleSearchChart(keyword) {
+  if (keyword === '' || keyword === null) return
   finished = false
-  searchPage = 1
+  searchPage.value = 1
   searchOpts.value = []
   handleGetSearchChartList(keyword)
 }
@@ -31,7 +34,7 @@ async function handleGetSearchChartList(keyword) {
   showSuggestions.value = true
   const res = await apiETAChart.chartSearch({
     PageSize: searchPageSize,
-    CurrentIndex: searchPage,
+    CurrentIndex: searchPage.value,
     SysUserIds: userVal.value?.join(','),
     Keyword: keyword
   })
@@ -40,6 +43,10 @@ async function handleGetSearchChartList(keyword) {
     const arr = res.Data.List || []
     searchOpts.value = [...searchOpts.value, ...arr]
     finished = res.Data.Paging.IsEnd
+    totals.value = res.Data.Paging.Totals
+    if (searchOpts.value.length === 0 && searchPage.value === 1) {
+      showSuggestions.value = false
+    }
   }
 }
 async function handleLoadMoreChart() {
@@ -132,13 +139,34 @@ const showSuggestions = ref(false)
 
 
 const handleBlur = (text) => {
+  showSuggestions.value = false
   if(!text){
     clearMenu()
   }
 }
 const clearMenu = () => {
   searchOpts.value = []
-  showSuggestions.value = false
+  showSearchResults.value = false
+}
+const handleEnterInput = () => {
+  showSearchResults.value = true
+}
+const handleFocusInput = () => {
+  if(!searchVal.value) return
+  handleSearchChart(searchVal.value)
+}
+const clearInput = () => {
+  searchVal.value = ''
+  showSearchResults.value = false
+  handleSearchChart(searchVal.value)
+}
+const searchLoad = (e) => {
+  const {scrollTop, clientHeight, scrollHeight} = e.target
+  if (scrollTop + clientHeight === scrollHeight){
+    if(finished) return
+    searchPage.value++
+    handleGetSearchChartList()
+  }
 }
 
 
@@ -157,6 +185,8 @@ const clearMenu = () => {
         placeholder="请输入图表名称"
         @change="handleSearchChart"
         @blur="handleBlur"
+        @focus="handleFocusInput"
+        @enter="handleEnterInput"
       >
       </t-input>
       <template #content>
@@ -172,8 +202,9 @@ const clearMenu = () => {
     </t-popup>
 
 
-    <div class="classify-list-box">
+    <div class="classify-list-box" ref="scrollView" @scroll="searchLoad">
       <t-tree
+        v-if="!showSearchResults"
         :actived="classifyActived"
         :data="classifyList"
         v-model:expanded="expandedclassify"
@@ -197,11 +228,40 @@ const clearMenu = () => {
           />
         </template>
       </t-tree>
+      <template v-else>
+        <div class="search-result flex-align">
+            <div>共<span class="total-text">{{ totals }}</span>条搜索结果</div>
+            <div @click="clearInput" class="clear-result flex-align">
+                清除内容
+                <img src="@/assets/imgs/clear.png" alt="">
+            </div>
+        </div>
+        <template v-for="(item, index) in searchOpts" :key="index">
+          <div class="list-item" @click="handleSelectChart(item)">
+            <div v-html="item.ChartName"></div>
+          </div>
+        </template>  
+      </template>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+
+// 美化滚动条
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  width: 1px;
+  background: rgba(#101F1C, 0.1);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
 .classify-wrap {
   width: 300px;
   flex-shrink: 0;
@@ -215,6 +275,38 @@ const clearMenu = () => {
     padding-top: 10px;
     height: calc(100vh - 260px);
     overflow-y: auto;
+    .search-result {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #999999;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .clear-result {
+        cursor: pointer;
+        img {
+          width: 16px;
+          height: 16px;
+          margin-left: 5px;
+        }
+      }
+      .total-text {
+        color: #333333;
+      }
+    }
+    .list-item {
+      width: 244px;
+      cursor:pointer;
+      margin: 4px;
+      padding: 5px 5px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      &:hover {
+        background-color: #ECF2FE; // 背景颜色变为浅灰色
+      }
+    }
   }
 }
 .suggestions-item {
@@ -229,4 +321,8 @@ const clearMenu = () => {
     background-color: #ECF2FE; // 背景颜色变为浅灰色
   }
 }
+.flex-align {
+  display: flex;
+  align-items: center;
+}
 </style>