perf: 优化数据引擎搜索

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

@@ -85,21 +85,31 @@
               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 hover:text-primary"
-                    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 class="h-auto w-full">
+                <div class="w-full" v-if="calcBusinessList.length">
+                  <div class="mb-3">推荐业务</div>
+                  <div class="flex w-full flex-col gap-3">
+                    <div
+                      class="flex cursor-pointer hover:text-primary"
+                      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 class="flex-1 truncate">{{ v.businessName }}</div>
                   </div>
                 </div>
+                <div
+                  v-else
+                  class="flex h-full w-full items-center justify-center"
+                >
+                  <el-empty
+                    :image="require('@/assets/img/empty.png')"
+                  ></el-empty>
+                </div>
               </div>
               <el-input
                 size="small"
@@ -135,21 +145,31 @@
               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 hover:text-primary"
-                    v-for="(v, i) in calcDept"
-                    :key="v.id"
-                    @click="form.deptName = v.name"
-                  >
-                    <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
-                      {{ i + 1 }}
+              <div class="h-auto w-full">
+                <div class="w-full" v-if="calcDept.length">
+                  <div class="mb-3">推荐部门</div>
+                  <div class="flex w-full flex-col gap-3">
+                    <div
+                      class="flex cursor-pointer hover:text-primary"
+                      v-for="(v, i) in calcDept"
+                      :key="v.id"
+                      @click="form.deptName = v.name"
+                    >
+                      <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
+                        {{ i + 1 }}
+                      </div>
+                      <div class="flex-1 truncate">{{ v.name }}</div>
                     </div>
-                    <div class="flex-1 truncate">{{ v.name }}</div>
                   </div>
                 </div>
+                <div
+                  v-else
+                  class="flex h-full w-full items-center justify-center"
+                >
+                  <el-empty
+                    :image="require('@/assets/img/empty.png')"
+                  ></el-empty>
+                </div>
               </div>
               <el-input
                 size="small"
@@ -168,23 +188,33 @@
               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 hover:text-primary"
-                    v-for="(v, i) in calcWindow"
-                    :key="v.id"
-                    @click="form.windowNum = v.fromnum"
-                  >
-                    <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
-                      {{ i + 1 }}
-                    </div>
-                    <div class="flex-1 truncate">
-                      {{ v.fromnum }}-{{ v.name }}
+              <div class="h-auto w-full">
+                <div class="w-full" v-if="calcWindow.length">
+                  <div class="mb-3">推荐窗口</div>
+                  <div class="flex w-full flex-col gap-3">
+                    <div
+                      class="flex cursor-pointer hover:text-primary"
+                      v-for="(v, i) in calcWindow"
+                      :key="v.id"
+                      @click="form.windowNum = v.fromnum"
+                    >
+                      <div :class="['mr-4', ' w-[20px]', `index-${i + 1}`]">
+                        {{ i + 1 }}
+                      </div>
+                      <div class="flex-1 truncate">
+                        {{ v.fromnum }}-{{ v.name }}
+                      </div>
                     </div>
                   </div>
                 </div>
+                <div
+                  v-else
+                  class="flex h-full w-full items-center justify-center"
+                >
+                  <el-empty
+                    :image="require('@/assets/img/empty.png')"
+                  ></el-empty>
+                </div>
               </div>
               <el-input
                 size="small"
@@ -268,10 +298,30 @@ 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);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {
-    this.calcBusiness = this.businessList.slice(0, 10);
-    this.calcDept = this.deptList.slice(0, 10);
-    this.calcWindow = this.windowList.slice(0, 10);
     this.getSubMenus();
   },
   mounted() {},
@@ -423,5 +473,6 @@ export default {
 :global(.search-popover) {
   width: 348px;
   min-height: 330px;
+  display: flex;
 }
 </style>