diff --git a/src/components/env.js b/src/components/env.js index 9d1442dea09aa7d2251422dd54c37fb6129f4cc4..9569812074c4bb0aa5605c6f62c4e553c9881dd5 100644 --- a/src/components/env.js +++ b/src/components/env.js @@ -41,4 +41,5 @@ export const Empty = (key, Obj) => { export const dateStringToDate = (str) => { if (!str || typeof str != 'string') return str || "-"; return str.split("+")[0].replace("T", " ").replace("Z", " ") -} \ No newline at end of file +} +export const delay = (time = 1000) => new Promise((resolve, reject) => setTimeout(resolve, time)) \ No newline at end of file diff --git a/src/page/main/forewarning/indicator-config/modules/add-form.vue b/src/page/main/forewarning/indicator-config/modules/add-form.vue index e0d77596b56a3bb3acc5b859778167140fa5be6b..b6676a8763364965708f1ba12ebe7cb7c631dc59 100644 --- a/src/page/main/forewarning/indicator-config/modules/add-form.vue +++ b/src/page/main/forewarning/indicator-config/modules/add-form.vue @@ -1,6 +1,6 @@ -
+
+
@@ -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, `${input_indicator_tag}`), + }; + }); }; }); // 监听父组件传过来的指标表达式 @@ -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; - isInput.value = type; - if (state.form.warningScopeRows[index].input_indicator_tag == "") { - state.form.warningScopeRows[index].lastOptions = []; - } - // 用户输入节流 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 = []; } - }, 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; +}