perf: 优化数据引擎搜索配置

admin_2/src/pages/engineSearch/QueueUpData.vue

 <template>
   <div class="flex h-full w-full flex-col">
-    <Search @search="handleSearch"></Search>
+    <Search @search="handleSearch" :dict="dict"></Search>
     <div
       class="main flex w-full flex-1 items-center justify-center rounded-[4px] bg-white p-[20px]"
     >
@@ -61,6 +61,7 @@ export default {
       loading: false,
       exportLoading: false,
       siteId: storage.get(2, "siteId"),
+      dict: {},
       page: 1,
       size: 10,
       total: 0,
@@ -147,7 +148,7 @@ export default {
     };
   },
   created() {
-    // this.getQueueStatList();
+    this.getQueueStatList();
   },
   methods: {
     getData() {},
@@ -160,10 +161,11 @@ export default {
         ...form,
       });
       if (res.data.code == 1) {
-        let { data, total } = res.data.data;
+        let { data, total, dict } = res.data.data;
         return {
           data,
           total,
+          dict,
         };
       } else {
         return {
@@ -174,10 +176,11 @@ export default {
     },
     async getQueueStatList() {
       this.loading = true;
-      let { data, total } = await this.queueStatList();
+      let { data, total, dict } = await this.queueStatList();
       data.forEach((v) => {
         v.waitTime = v.waitTime ? formatSeconds(v.waitTime) : "";
       });
+      this.dict = dict;
       this.total = total;
       this.tableData = data;
       this.loading = false;

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

@@ -84,6 +84,7 @@
               trigger="click"
               placement="bottom-start"
               popper-class="search-popover"
+              @show="handleShowPopper('business')"
             >
               <div class="h-auto w-full">
                 <div class="w-full" v-if="calcBusinessList.length">
@@ -92,13 +93,13 @@
                     <div
                       class="flex cursor-pointer hover:text-primary"
                       v-for="(v, i) in calcBusinessList"
-                      :key="v.id"
-                      @click="form.businessName = v.businessName"
+                      :key="i"
+                      @click="form.businessName = v"
                     >
                       <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
                         {{ i + 1 }}
                       </div>
-                      <div class="flex-1 truncate">{{ v.businessName }}</div>
+                      <div class="flex-1 truncate">{{ v }}</div>
                     </div>
                   </div>
                 </div>
@@ -144,6 +145,7 @@
               trigger="click"
               placement="bottom-start"
               popper-class="search-popover"
+              @show="handleShowPopper('deptName')"
             >
               <div class="h-auto w-full">
                 <div class="w-full" v-if="calcDept.length">
@@ -152,13 +154,13 @@
                     <div
                       class="flex cursor-pointer hover:text-primary"
                       v-for="(v, i) in calcDept"
-                      :key="v.id"
-                      @click="form.deptName = v.name"
+                      :key="i"
+                      @click="form.deptName = v"
                     >
                       <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
                         {{ i + 1 }}
                       </div>
-                      <div class="flex-1 truncate">{{ v.name }}</div>
+                      <div class="flex-1 truncate">{{ v }}</div>
                     </div>
                   </div>
                 </div>
@@ -187,6 +189,7 @@
               trigger="click"
               placement="bottom-start"
               popper-class="search-popover"
+              @show="handleShowPopper('window')"
             >
               <div class="h-auto w-full">
                 <div class="w-full" v-if="calcWindow.length">
@@ -195,14 +198,14 @@
                     <div
                       class="flex cursor-pointer hover:text-primary"
                       v-for="(v, i) in calcWindow"
-                      :key="v.id"
-                      @click="form.windowNum = v.fromnum"
+                      :key="i"
+                      @click="form.windowNum = v"
                     >
                       <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
                         {{ i + 1 }}
                       </div>
                       <div class="flex-1 truncate">
-                        {{ v.fromnum }}-{{ v.name }}
+                        {{ v }}
                       </div>
                     </div>
                   </div>
@@ -236,10 +239,15 @@
 
 <script>
 import { findBottomSubarrays } from "@/utils";
-import { mapState } from "vuex";
 let pjOption = ["非常满意", "满意", "基本满意", "不满意", "非常不满意"];
 export default {
   components: {},
+  props: {
+    dict: {
+      required: true,
+      default: () => {},
+    },
+  },
   data() {
     return {
       pjOption,
@@ -247,6 +255,9 @@ export default {
       calcDept: [],
       calcWindow: [],
       subMenus: [],
+      businessList: [],
+      sectionList: [],
+      windowList: [],
       form: {
         type: "year",
         businessName: "",
@@ -260,7 +271,6 @@ export default {
     };
   },
   computed: {
-    ...mapState("user", ["businessList", "deptList", "windowList"]),
     activeKey() {
       return this.$route.path;
     },
@@ -275,7 +285,7 @@ export default {
     },
     calcBusinessList: {
       get() {
-        return this.calcBusiness;
+        return this.calcBusiness.slice(0, 10);
       },
       set(val) {
         this.calcBusiness = val;
@@ -283,7 +293,7 @@ export default {
     },
     calcDeptList: {
       get() {
-        return this.calcDept;
+        return this.calcDept.slice(0, 10);
       },
       set(val) {
         this.calcDept = val;
@@ -291,7 +301,7 @@ export default {
     },
     calcWindowList: {
       get() {
-        return this.calcWindow;
+        return this.calcWindow.slice(0, 10);
       },
       set(val) {
         this.calcWindow = val;
@@ -299,23 +309,9 @@ export default {
     },
   },
   watch: {
-    businessList: {
-      handler(val) {
-        this.calcBusiness = val.slice(0, 10);
-      },
-      deep: true,
-      immediate: true,
-    },
-    deptList: {
-      handler(val) {
-        this.calcDept = val.slice(0, 10);
-      },
-      deep: true,
-      immediate: true,
-    },
-    windowList: {
-      handler(val) {
-        this.calcWindow = val.slice(0, 10);
+    dict: {
+      handler(newVal) {
+        this.changeOptions(newVal);
       },
       deep: true,
       immediate: true,
@@ -329,6 +325,7 @@ export default {
     changeRouter(e) {
       this.$router.push(e.name);
     },
+
     // 获取当前顶层路由下的所有子路由
     getSubMenus() {
       let path = this.$route?.meta.parentPath
@@ -340,6 +337,19 @@ export default {
         (v) => !v.meta.hidden
       );
     },
+
+    getTopKeyList(arr) {
+      return arr.map((item) => Object.keys(item)[0]);
+    },
+
+    // 获取搜索配置
+    changeOptions(dict) {
+      if (JSON.stringify(dict) == "{}") return;
+      let { businessList, sectionNameList, windowFromnumList } = dict;
+      this.calcBusiness = this.businessList = this.getTopKeyList(businessList);
+      this.calcDept = this.sectionList = this.getTopKeyList(sectionNameList);
+      this.calcWindow = this.windowList = this.getTopKeyList(windowFromnumList);
+    },
     changeTab(key) {
       this.form.year = "";
       this.form.month = "";
@@ -354,9 +364,7 @@ export default {
     },
     handleBusinessNameInput(name) {
       if (name != "") {
-        let list = this.businessList.filter((v) =>
-          v.businessName.includes(name)
-        );
+        let list = this.businessList.filter((v) => v.includes(name));
         this.calcBusinessList = list.slice(0, 10);
       } else {
         this.calcBusinessList = this.businessList.slice(0, 10);
@@ -364,17 +372,15 @@ export default {
     },
     handleDeptNameInput(name) {
       if (name != "") {
-        let list = this.deptList.filter((v) => v.name.includes(name));
+        let list = this.deptList.filter((v) => v.includes(name));
         this.calcDeptList = list.slice(0, 10);
       } else {
-        this.calcDeptList = this.deptList.slice(0, 10);
+        this.calcDeptList = this.sectionList.slice(0, 10);
       }
     },
     handleWindowInput(value) {
       if (value != "") {
-        let list = this.windowList.filter(
-          (v) => v.name.includes(value) || v.fromnum.includes(value)
-        );
+        let list = this.windowList.filter((v) => v.includes(value));
         this.calcWindowList = list.slice(0, 10);
       } else {
         this.calcWindowList = this.windowList.slice(0, 10);
@@ -383,6 +389,18 @@ export default {
     handleSearch() {
       this.$emit("search", this.form);
     },
+    handleShowPopper(type) {
+      switch (type) {
+        case "business":
+          this.calcBusinessList = this.businessList.slice(0, 10);
+          break;
+        case "deptName":
+          this.calcDeptList = this.sectionList.slice(0, 10);
+          break;
+        case "window":
+          this.calcWindowList = this.windowList.slice(0, 10);
+      }
+    },
   },
 };
 </script>