perf: 修改数据搜索引擎业务搜索

admin_2/src/pages/engineSearch/components/Search.vue

@@ -82,10 +82,29 @@
               placement="bottom-start"
               popper-class="search-popover"
             >
+              <div class="w-full">
+                <div class="mb-3">推荐业务</div>
+                <div class="flex w-full flex-col gap-3">
+                  <div
+                    class="flex cursor-pointer"
+                    v-for="(v, i) in calcBusinessList"
+                    :key="v.id"
+                    @click="form.businessName = v.businessName"
+                  >
+                    <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
+                      {{ i + 1 }}
+                    </div>
+                    <div class="flex-1 truncate">{{ v.businessName }}</div>
+                  </div>
+                </div>
+              </div>
               <el-input
                 size="small"
                 placeholder="暂未选择"
                 slot="reference"
+                v-model="form.businessName"
+                clearable
+                @input="handleBusinessNameInput"
               ></el-input>
             </el-popover>
           </div>
@@ -127,10 +146,12 @@
 
 <script>
 import { findBottomSubarrays } from "@/utils";
+import { mapState } from "vuex";
 export default {
   components: {},
   data() {
     return {
+      calcBusiness: [],
       subMenus: [],
       form: {
         type: "year",
@@ -145,6 +166,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("user", ["businessList", "deptList", "windowList"]),
     activeKey() {
       return this.$route.path;
     },
@@ -157,8 +179,17 @@ export default {
         return this.form.day;
       }
     },
+    calcBusinessList: {
+      get() {
+        return this.calcBusiness;
+      },
+      set(val) {
+        return (this.calcBusiness = val);
+      },
+    },
   },
   created() {
+    this.calcBusiness = this.businessList.slice(0, 10);
     this.getSubMenus();
   },
   mounted() {},
@@ -188,6 +219,16 @@ export default {
       this.form.month = "";
       this.form.day = "";
     },
+    handleBusinessNameInput(name) {
+      if (name !== "") {
+        let list = this.businessList.filter((v) =>
+          v.businessName.includes(name)
+        );
+        this.calcBusinessList = list.slice(0, 10);
+      } else {
+        this.calcBusinessList = this.businessList.slice(0, 10);
+      }
+    },
   },
 };
 </script>
@@ -260,6 +301,15 @@ export default {
     border: 2px solid var(--primary);
   }
 }
+.index-1 {
+  color: #ff5948;
+}
+.index-2 {
+  color: #ff6f48;
+}
+.index-3 {
+  color: #ff8d48;
+}
 
 :deep(.el-picker-panel) {
   border: none;