feat:

优化指标配置前端逻辑

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

@@ -29,12 +29,12 @@
                       @input="inputLabel($index, true)"></el-input>
                   </template>
                   <div class="filter-first-tree-lists" @mousedown.prevent="">
-                    <ul class="bg-scroll" v-show="dataTree($index).length > 0">
+                    <ul class="bg-scroll" v-show="state.form.warningScopeRows[$index].firstOptions.length > 0">
                       <li
-                        v-for="(data, i) in dataTree($index)"
+                        v-for="data in state.form.warningScopeRows[$index].firstOptions"
                         :key="data"
                         :class="{ active: state.form.warningScopeRows[$index].indicator_scope == data.label }">
-                        <div class="first-label-main" @click="chooseTreeFirst($index, data, i)">
+                        <div class="first-label-main" @click="chooseTreeFirst($index, data)">
                           <div class="tree-label" v-html="data.label_html"></div>
                           <div class="tree-icon">
                             <bg-icon
@@ -47,7 +47,7 @@
                         </div>
                       </li>
                     </ul>
-                    <ul v-show="dataTree($index).length == 0">
+                    <ul v-show="state.form.warningScopeRows[$index].firstOptions.length == 0">
                       <li class="no-data">
                         {{
                           state.form.warningScopeRows[$index].input_indicator_tag
@@ -167,30 +167,8 @@ const tableRules = {
 const dataTreeDefault = ref([]);
 // 是否是输入触发
 const isInput = ref(false);
-// 当前操作的表格下标
-const activeIndex = ref(-1);
 // 指标输入框元素集合
 const inputRef = ref([]);
-// 下拉数据处理
-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 [];
-    let arr = firstOptions.filter((e) => e.label.includes(query));
-    if (arr == []) {
-      state.form.warningScopeRows[index].lastOptions = [];
-      state.form.warningScopeRows[index].indicator_scope = "";
-    }
-    return arr.map((e) => {
-      return {
-        ...e,
-        label_html: e.label.replaceAll(input_indicator_tag, `<span class='mate-str'>${input_indicator_tag}</span>`),
-      };
-    });
-  };
-});
 // 监听父组件传过来的指标表达式
 watch(
   () => props.indicator_expression,
@@ -209,7 +187,7 @@ watch(
           indicator_scope: "",
           indicator_tag: "",
           oldQuery: "",
-          firstOptions: dataTreeDefault.value,
+          firstOptions: [],
           lastOptions: [],
           cname: "",
           visible: false,
@@ -221,40 +199,17 @@ watch(
     state.form.warningScopeRows = arr;
   }
 );
-// 监听编辑的原数据，并显示
-watch(
-  () => props.warningScopeRows,
-  (n) => {
-    state.form.warningScopeRows =
-      n?.map((e) => {
-        return {
-          key: e.key,
-          input_indicator_tag: e.input_indicator_tag,
-          indicator_scope: e.indicator_scope,
-          indicator_tag: e.indicator_tag,
-          firstOptions: dataTreeDefault.value,
-          lastOptions: [],
-          oldQuery: "",
-          visible: false,
-          cname: e.cname,
-          is_required: e.is_required,
-          is_linkage: e.is_linkage,
-        };
-      }) || [];
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 // 选择第一级，获取第二级数据
-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;
-  state.form.warningScopeRows[index].lastOptions = [];
+const chooseTreeFirst = (index, data, isInfo = false) => {
+  let i = "";
+  if (!isInfo) {
+    inputRef.value[index].focus();
+    i = state.form.warningScopeRows[index].firstOptions.findIndex((e) => e.label == data.label);
+    state.form.warningScopeRows[index].firstOptions[i].isLoading = true;
+    state.form.warningScopeRows[index].indicator_tag = "";
+    state.form.warningScopeRows[index].indicator_scope = data.label;
+    state.form.warningScopeRows[index].lastOptions = [];
+  }
   const params = {
     label_name: data.label,
   };
@@ -268,6 +223,7 @@ const chooseTreeFirst = (index, data) => {
       }
     })
     .finally(() => {
+      if (i === "") return;
       state.form.warningScopeRows[index].firstOptions[i].isLoading = false;
     });
 };
@@ -288,36 +244,63 @@ const getDataTreeLevelFirst = () => {
   });
 };
 let timer = null;
+const inputType = ref(false);
+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 = "";
+    state.form.warningScopeRows[index].indicator_tag = "";
+    state.form.warningScopeRows[index].oldQuery = "";
+    return;
+  }
+  let query = type ? input_indicator_tag : oldQuery;
+  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 (state.form.warningScopeRows[index].firstOptions.length == 0) {
+    state.form.warningScopeRows[index].lastOptions = [];
+    state.form.warningScopeRows[index].indicator_scope = "";
+  }
+};
 // 输入模糊查询数据
 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 = [];
-    }
-    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 = [];
-    }
-  }, 500);
+  inputType.value = type;
+  // 用户输入节流
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  timer = setTimeout(
+    () => {
+      state.form.warningScopeRows[index].visible = true;
+      TreeFilter(index, type);
+    },
+    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;
   state.form.warningScopeRows[index].visible = false;
 };
 // 选择范围中的属性
 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);
+  inputRef.value[index].blur();
+  state.form.warningScopeRows[index].input_indicator_tag = last;
+  state.form.warningScopeRows[index].indicator_tag = last;
 };
 // form表单元素
 const form_ref = ref(null);
@@ -341,6 +324,33 @@ const Submit = async () => {
   }
   return form_valid && isFull;
 };
+// 监听编辑的原数据，并显示
+watch(
+  () => props.warningScopeRows,
+  (n) => {
+    state.form.warningScopeRows =
+      n?.map((e, i) => {
+        chooseTreeFirst(i, { label: e.indicator_scope }, true);
+        return {
+          key: e.key,
+          input_indicator_tag: e.indicator_tag,
+          indicator_scope: e.indicator_scope,
+          indicator_tag: e.indicator_tag,
+          firstOptions: [],
+          lastOptions: [],
+          oldQuery: e.indicator_scope,
+          visible: false,
+          cname: e.cname,
+          is_required: e.is_required,
+          is_linkage: e.is_linkage,
+        };
+      }) || [];
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 // 获取第一级指标范围列表
 onMounted(() => {
   getDataTreeLevelFirst();