feat:

优化逻辑

src/components/env.js

@@ -42,3 +42,4 @@ export const dateStringToDate = (str) => {
     if (!str || typeof str != 'string') return str || "-";
     return str.split("+")[0].replace("T", " ").replace("Z", " ")
 }
+export const delay = (time = 1000) => new Promise((resolve, reject) => setTimeout(resolve, time))
\ No newline at end of file

src/page/main/forewarning/indicator-config/modules/add-form.vue

 <template>
   <div class="add-form">
-    <el-form :model="state.form" ref="form_ref" :rules="state.rules" label-width="100px">
+    <el-form :model="state.form" ref="form_ref" :rules="state.rules" label-width="120px">
       <div class="add-form-item">
         <el-form-item label="指标名称" prop="name">
           <el-input v-model="state.form.name" :disabled="isEdit" placeholder="请输入指标名称"></el-input>

src/page/main/forewarning/indicator-config/modules/warning-scope.vue

@@ -28,27 +28,33 @@
                       @focus="inputLabel($index, false)"
                       @input="inputLabel($index, true)"></el-input>
                   </template>
-                  <div class="filter-first-tree-lists">
+                  <div class="filter-first-tree-lists" @mousedown.prevent="">
                     <ul class="bg-scroll" v-show="dataTree($index).length > 0">
                       <li
-                        v-for="data in dataTree($index)"
+                        v-for="(data, i) in dataTree($index)"
                         :key="data"
                         :class="{ active: state.form.warningScopeRows[$index].indicator_scope == data.label }">
-                        <div class="first-label-main" @click="chooseTreeFirst($index, data)">
-                          <div class="tree-label">{{ data.label }}</div>
+                        <div class="first-label-main" @click="chooseTreeFirst($index, data, i)">
+                          <div class="tree-label" v-html="data.label_html"></div>
                           <div class="tree-icon">
                             <bg-icon
-                              style="font-size: 16px; color: #404a62"
+                              style="font-size: 15px; color: #404a62"
                               class="is-loading"
                               :class="{ 'loading-show': data.isLoading }"
                               icon="#bg-ic-loading"></bg-icon>
-                            <bg-icon style="font-size: 14px; color: #404a62" icon="#bg-ic-arrow-right"></bg-icon>
+                            <bg-icon style="font-size: 13px; color: #404a62" icon="#bg-ic-arrow-right"></bg-icon>
                           </div>
                         </div>
                       </li>
                     </ul>
                     <ul v-show="dataTree($index).length == 0">
-                      <li class="no-data">未查询到相关指标范围数据</li>
+                      <li class="no-data">
+                        {{
+                          state.form.warningScopeRows[$index].input_indicator_tag
+                            ? "未查询到相关指标范围数据"
+                            : "请输入查询"
+                        }}
+                      </li>
                     </ul>
                     <ul class="bg-scroll" v-show="state.form.warningScopeRows[$index].lastOptions?.length > 0">
                       <li
@@ -59,6 +65,13 @@
                         {{ child }}
                       </li>
                     </ul>
+                    <ul
+                      v-show="
+                        state.form.warningScopeRows[$index].indicator_scope &&
+                        state.form.warningScopeRows[$index].lastOptions?.length == 0
+                      ">
+                      <li class="no-data">未查询到相关指标标签</li>
+                    </ul>
                   </div>
                 </el-popover>
               </div>
@@ -99,6 +112,7 @@
 import { reactive, watch, nextTick, computed, ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
+import { delay } from "@/components/env";
 
 const props = defineProps({
   indicator_expression: {
@@ -162,13 +176,19 @@ const dataTree = computed(() => {
   return (index) => {
     const { firstOptions, input_indicator_tag, oldQuery } = state.form.warningScopeRows[index];
     let query = isInput.value ? input_indicator_tag : oldQuery;
-    if (!query) return firstOptions;
+    // if (!query) return firstOptions;
+    if (!query) return [];
     let arr = firstOptions.filter((e) => e.label.includes(query));
-    if (arr == "") {
+    if (arr == []) {
       state.form.warningScopeRows[index].lastOptions = [];
       state.form.warningScopeRows[index].indicator_scope = "";
     }
-    return arr;
+    return arr.map((e) => {
+      return {
+        ...e,
+        label_html: e.label.replaceAll(input_indicator_tag, `<span class='mate-str'>${input_indicator_tag}</span>`),
+      };
+    });
   };
 });
 // 监听父组件传过来的指标表达式
@@ -230,9 +250,10 @@ watch(
 // 选择第一级，获取第二级数据
 const chooseTreeFirst = (index, data) => {
   inputRef.value[index].focus();
+  let i = state.form.warningScopeRows[index].firstOptions.findIndex((e) => e.label == data.label);
+  state.form.warningScopeRows[index].firstOptions[i].isLoading = true;
   state.form.warningScopeRows[activeIndex.value].indicator_tag = "";
   state.form.warningScopeRows[index].indicator_scope = data.label;
-  data.isLoading = true;
   state.form.warningScopeRows[index].lastOptions = [];
   const params = {
     label_name: data.label,
@@ -247,7 +268,7 @@ const chooseTreeFirst = (index, data) => {
       }
     })
     .finally(() => {
-      data.isLoading = false;
+      state.form.warningScopeRows[index].firstOptions[i].isLoading = false;
     });
 };
 // 获取第一级数据
@@ -268,34 +289,35 @@ const getDataTreeLevelFirst = () => {
 };
 let timer = null;
 // 输入模糊查询数据
-const inputLabel = (index, type) => {
-  state.form.warningScopeRows[index].visible = true;
+const inputLabel = async (index, type) => {
   activeIndex.value = index;
+  //   用户输入节流
+  timer && clearTimeout(timer);
+  timer = setTimeout(() => {
+    state.form.warningScopeRows[index].visible = true;
     isInput.value = type;
     if (state.form.warningScopeRows[index].input_indicator_tag == "") {
       state.form.warningScopeRows[index].lastOptions = [];
     }
-
-  //   用户输入节流
-  timer && clearTimeout(timer);
-  timer = setTimeout(() => {
     if (type) {
       state.form.warningScopeRows[index].oldQuery = state.form.warningScopeRows[index].input_indicator_tag;
       state.form.warningScopeRows[index].indicator_scope = "";
       state.form.warningScopeRows[index].indicator_tag = "";
       state.form.warningScopeRows[index].lastOptions = [];
     }
-  }, 200);
+  }, 500);
 };
 // 失去焦点是隐藏popper
 const blurInput = (index) => {
   state.form.warningScopeRows[index].visible = false;
 };
 // 选择范围中的属性
-const chooseTreeLast = (last, index, type) => {
+const chooseTreeLast = async (last, index, type) => {
   isInput.value = type;
   state.form.warningScopeRows[activeIndex.value].input_indicator_tag = last;
   state.form.warningScopeRows[activeIndex.value].indicator_tag = last;
+  await delay(500);
+  blurInput(index);
 };
 // form表单元素
 const form_ref = ref(null);
@@ -347,6 +369,7 @@ defineExpose({
   .filter-first-tree-lists {
     height: 240px;
     display: flex;
+    min-width: 100%;
     ul {
       min-width: 180px;
       height: 100%;
@@ -356,7 +379,7 @@ defineExpose({
       li {
         padding-left: 20px;
         line-height: 34px;
-        max-width: 400px;
+        // max-width: 400px;
         word-break: break-all;
         transition: all 300ms;
         &:hover {
@@ -415,4 +438,7 @@ defineExpose({
     }
   }
 }
+.mate-str {
+  font-weight: bold;
+}
 </style>