From 7da2cf4d38e710dddd6f74d82aed984f84c7af21 Mon Sep 17 00:00:00 2001
From: zhangyao <zhangyao@wodcloud.com>
Date: Wed, 12 Jul 2023 11:01:13 +0800
Subject: [PATCH] feat:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化指标配置逻辑
---
 .../modules/warning-scope.vue                 | 89 +++++++++++--------
 1 file changed, 54 insertions(+), 35 deletions(-)

diff --git a/src/page/main/forewarning/indicator-config/modules/warning-scope.vue b/src/page/main/forewarning/indicator-config/modules/warning-scope.vue
index 98218ac..be4c7ad 100644
--- a/src/page/main/forewarning/indicator-config/modules/warning-scope.vue
+++ b/src/page/main/forewarning/indicator-config/modules/warning-scope.vue
@@ -7,33 +7,28 @@
         :key="header.prop"
         :label="header.label"
         :width="header.width">
-        <template #default="{ $index }">
+        <template #default="{ row, $index }">
           <div v-if="header.prop == 'indicator_tag'">
             <el-form-item :prop="`[${$index}].input_indicator_tag`" :rules="tableRules.input_indicator_tag">
               <div class="indictor-tag">
-                <el-popover
-                  :visible="state.form.warningScopeRows[$index].visible"
-                  popper-class="cascader-operation"
-                  placement="bottom-start">
+                <el-popover :visible="row.visible" popper-class="cascader-operation" placement="bottom-start">
                   <template #reference>
                     <el-input
                       v-model="state.form.warningScopeRows[$index].input_indicator_tag"
                       placeholder="请选择指标标签"
-                      :ref="
-                        (i_el) => {
-                          inputRef[$index] = i_el;
-                        }
-                      "
+                      ref="inputRef"
                       @blur="blurInput($index)"
                       @focus="inputLabel($index, false)"
                       @input="inputLabel($index, true)"></el-input>
                   </template>
                   <div class="filter-first-tree-lists" @mousedown.prevent="">
-                    <ul class="bg-scroll" v-show="state.form.warningScopeRows[$index].firstOptions.length > 0">
+                    <ul class="bg-scroll" ref="first_options_lists" v-show="row.firstOptions.length > 0">
                       <li
-                        v-for="data in state.form.warningScopeRows[$index].firstOptions"
+                        v-for="data in row.firstOptions"
                         :key="data"
-                        :class="{ active: state.form.warningScopeRows[$index].indicator_scope == data.label }">
+                        :class="{
+                          active: row.indicator_scope == data.label,
+                        }">
                         <div class="first-label-main" @click="chooseTreeFirst($index, data)">
                           <div class="tree-label" v-html="data.label_html"></div>
                           <div class="tree-icon">
@@ -47,30 +42,30 @@
                         </div>
                       </li>
                     </ul>
-                    <ul v-show="state.form.warningScopeRows[$index].firstOptions.length == 0">
+                    <ul v-show="row.firstOptions.length == 0">
                       <li class="no-data">
                         {{
-                          state.form.warningScopeRows[$index].input_indicator_tag
-                            ? "未查询到相关指标范围数据"
+                          row.input_indicator_tag
+                            ? row.firstOptionsLoading
+                              ? "查询中"
+                              : "未查询到相关指标范围数据"
                             : "请输入查询"
                         }}
                       </li>
                     </ul>
-                    <ul class="bg-scroll" v-show="state.form.warningScopeRows[$index].lastOptions?.length > 0">
+                    <ul class="bg-scroll" v-show="row.lastOptions?.length > 0">
                       <li
-                        v-for="child in state.form.warningScopeRows[$index].lastOptions"
+                        v-for="child in row.lastOptions"
                         :key="child"
                         @click="chooseTreeLast(child, $index, false)"
-                        :class="{ active: state.form.warningScopeRows[$index].indicator_tag == child }">
+                        :class="{ active: row.indicator_tag == child }">
                         {{ 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 v-show="row.indicator_scope && row.lastOptions?.length == 0">
+                      <li class="no-data">
+                        {{ row.lastOptionsLoading ? "查询中" : "未查询到相关指标标签" }}
+                      </li>
                     </ul>
                   </div>
                 </el-popover>
@@ -167,8 +162,9 @@ const tableRules = {
 const dataTreeDefault = ref([]);
 // 是否是输入触发
 const isInput = ref(false);
+const first_options_lists = ref(null);
 // 指标输入框元素集合
-const inputRef = ref([]);
+const inputRef = ref(null);
 // 监听父组件传过来的指标表达式
 watch(
   () => props.indicator_expression,
@@ -187,7 +183,9 @@ watch(
           indicator_scope: "",
           indicator_tag: "",
           oldQuery: "",
+          firstOptionsLoading: false,
           firstOptions: [],
+          lastOptionsLoading: false,
           lastOptions: [],
           cname: "",
           visible: false,
@@ -201,7 +199,9 @@ watch(
 );
 // 选择第一级，获取第二级数据
 const chooseTreeFirst = (index, data, isInfo = false) => {
+  state.form.warningScopeRows[index].lastOptionsLoading = true;
   let i = "";
+  // 是否是父组件传过来的默认展示数据
   if (!isInfo) {
     inputRef.value[index].focus();
     i = state.form.warningScopeRows[index].firstOptions.findIndex((e) => e.label == data.label);
@@ -223,6 +223,7 @@ const chooseTreeFirst = (index, data, isInfo = false) => {
       }
     })
     .finally(() => {
+      state.form.warningScopeRows[index].lastOptionsLoading = false;
       if (i === "") return;
       state.form.warningScopeRows[index].firstOptions[i].isLoading = false;
     });
@@ -249,6 +250,7 @@ const TreeFilter = (index, type) => {
   let options = dataTreeDefault.value;
   const { input_indicator_tag, oldQuery } = state.form.warningScopeRows[index];
   state.form.warningScopeRows[index].firstOptions = [];
+  // 如果没有输入，或者清空输入，则清除已选中的所有东西和所有下拉数据，并返回
   if (input_indicator_tag == "") {
     state.form.warningScopeRows[index].lastOptions = [];
     state.form.warningScopeRows[index].indicator_scope = "";
@@ -256,25 +258,36 @@ const TreeFilter = (index, type) => {
     state.form.warningScopeRows[index].oldQuery = "";
     return;
   }
+  // 如果只是聚焦，则使用旧的输入查询过滤，如果是输入，则使用输入的内容过滤
   let query = type ? input_indicator_tag : oldQuery;
+  // 提升性能问题使用for循环遍历
   for (let i = 0; i < options.length; i++) {
-    if (options[i].label.includes(query)) {
-      state.form.warningScopeRows[index].firstOptions.push({
-        ...options[i],
-        label_html: options[i].label.replaceAll(
-          input_indicator_tag,
-          `<span class='mate-str'>${input_indicator_tag}</span>`
-        ),
-      });
-    }
+    // 不符合直接跳出当次循环
+    if (!options[i].label.includes(query)) continue;
+    state.form.warningScopeRows[index].firstOptions.push({
+      ...options[i],
+      // 高亮显示和输入匹配的项
+      label_html: options[i].label.replaceAll(
+        input_indicator_tag,
+        `<span class='mate-str'>${input_indicator_tag}</span>`
+      ),
+    });
   }
+  // 如果第一级下拉没有数据，则隐藏第二级下拉，并清除当前现在的指标范围
   if (state.form.warningScopeRows[index].firstOptions.length == 0) {
     state.form.warningScopeRows[index].lastOptions = [];
     state.form.warningScopeRows[index].indicator_scope = "";
   }
+  // 结束查询中
+  state.form.warningScopeRows[index].firstOptionsLoading = false;
+  // 查询后第一级滚动条滚动到顶部
+  first_options_lists.value[index].scrollTop = 0;
 };
 // 输入模糊查询数据
 const inputLabel = async (index, type) => {
+  // 第一级显示查询中
+  state.form.warningScopeRows[index].firstOptionsLoading = true;
+  // 记录当前是聚焦还是输入
   inputType.value = type;
   // 用户输入节流
   if (timer) {
@@ -284,15 +297,19 @@ const inputLabel = async (index, type) => {
   timer = setTimeout(
     () => {
       state.form.warningScopeRows[index].visible = true;
+      // 过滤下拉数据
       TreeFilter(index, type);
     },
+    // 如果是聚集input的时候不需要节流，输入节流
     type ? 500 : 0
   );
 };
 // 失去焦点是隐藏popper
 const blurInput = (index) => {
   const { input_indicator_tag, oldQuery } = state.form.warningScopeRows[index];
+  // 判断是聚焦失去焦点还是输入后失去焦点，输入后失去焦点记录输入的内容，聚焦失去焦点还是使用之前的记录
   state.form.warningScopeRows[index].oldQuery = inputType.value ? input_indicator_tag : oldQuery;
+  // 隐藏popper
   state.form.warningScopeRows[index].visible = false;
 };
 // 选择范围中的属性
@@ -336,7 +353,9 @@ watch(
           input_indicator_tag: e.indicator_tag,
           indicator_scope: e.indicator_scope,
           indicator_tag: e.indicator_tag,
+          firstOptionsLoading: false,
           firstOptions: [],
+          lastOptionsLoading: false,
           lastOptions: [],
           oldQuery: e.indicator_scope,
           visible: false,
-- 
2.26.0