二级菜单搜索

src/views/HVversion/menu/menus.vue

@@ -2,14 +2,18 @@
   <div class="menusContainer">
     <div class="top-search">
       <div class="title">
-        <section v-if="typeIndex == null">
+        <section v-if="typeIndex == null && !isSearch">
           <span>热门服务</span>
         </section>
         <section v-else>
-          <div class="tabs">
+          <div v-if="!isSearch" class="tabs">
             <div class="tab" @click="changeHot">热门服务</div>
             <div class="tab tab1">{{ trees[typeIndex].name }}</div>
           </div>
+          <div v-else class="tabs">
+            <div class="tab" @click="changeHot">热门服务</div>
+            <div class="tab tab1">搜索结果</div>
+          </div>
         </section>
       </div>
       <div class="search">
@@ -17,11 +21,12 @@
           <input
             type="text"
             placeholder="请输入要办理的业务名"
+            v-model="searchText"
             @focus="focus"
             @blur="blur"
           />
         </div>
-        <div class="searchBtn btnActive">
+        <div class="searchBtn btnActive" @click="search">
           <img src="@/assets/menu/sou.png" />
         </div>
       </div>
@@ -63,8 +68,8 @@
       </div>
     </div>
     <div class="bottom">
-      <div class="tip">业务列表 {{ tree }}{{ hot }}</div>
-      <div class="menu-type">
+      <div v-if="!isSearch" class="tip">业务列表 {{ tree }}{{ hot }}</div>
+      <div v-if="!isSearch" class="menu-type">
         <div
           class="type btnActive"
           v-for="(item, index) in trees"
@@ -123,6 +128,9 @@ export default {
 
   data() {
     return {
+      searchText: "",
+      isSearch: false,
+
       pageNum: 1,
 
       nowMenus: [],
@@ -170,12 +178,16 @@ export default {
     typeEvent(e, i) {
       this.typeIndex = i;
       this.nowMenus = e.menus;
+      this.searchText = "";
+      this.isSearch = false;
       this.pageReset();
     },
 
     changeHot() {
       this.typeIndex = null;
       this.nowMenus = this.hotMenus;
+      this.searchText = "";
+      this.isSearch = false;
       this.pageReset();
     },
 
@@ -271,6 +283,37 @@ export default {
       saveLog(form).then((res) => {});
     },
 
+    search() {
+      const treeData = this.treeData;
+      if (treeData && treeData.children) {
+        const text = this.searchText;
+        this.typeIndex = null;
+        this.isSearch = true;
+        this.pageReset();
+        const all = new Array();
+        const tree = treeData.children;
+        for (let i = 0; i < tree.length; i++) {
+          const item = tree[i];
+          all.push(...item.children);
+        }
+        const searchRes = all.filter((item) => {
+          if (item.menuName) {
+            return item.menuName.includes(text);
+          } else if (item.name) {
+            return item.name.includes(text);
+          }
+          return false;
+        });
+        if (searchRes.length > 0) {
+          this.nowMenus = this.customPager(searchRes);
+        } else {
+          const searchMap = new Map();
+          searchMap.set(1, []);
+          this.nowMenus = searchMap;
+        }
+      }
+    },
+
     focus() {
       var data = {
         funcId: "openDwInput",