reactor:优化热点选择和事件选择组件;

src/components/Hotspot/index.vue

@@ -6,10 +6,9 @@
 		ref="selectRef"
 		:clearable="props.clearable"
 		@clear="clear"
+		:filterable="props.filterable"
+		:filter-method="filterMethod"
 	>
-		<template #header>
-			<el-input v-model="filterText" :placeholder="inputPlaceholder" clearable />
-		</template>
 		<template #default>
 			<el-option hidden key="id" :value="state.id" :label="state.name"> </el-option>
 			<el-tree
@@ -20,7 +19,7 @@
 				:props="treeProps"
 				:filter-node-method="filterNode"
 				@node-click="nodeClick"
-				:default-expanded-keys="props.externalArr"
+				:default-expanded-keys="state.externalArr"
 				v-loading="loading"
 				highlight-current
 				check-strictly
@@ -59,7 +58,6 @@
 import { computed, reactive, ref, watch } from 'vue';
 import { hotSpotSearch, hotSpotType } from '@/api/business/order';
 import { removeDuplicate } from '@/utils/arrayOperation';
-import { throttle } from '@/utils/tools';
 import { treeEventClass, treeEventClassSearch } from '@/api/auxiliary/eventClass';
 
 const props = defineProps({
@@ -98,6 +96,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	filterable: {
+		type: Boolean,
+		default: true,
+	},
 } as any);
 const inputPlaceholder = computed(() => {
 	return props.type === 'hotspot' ? '热点名称' : '事件名称';
@@ -126,7 +128,16 @@ const state = reactive<any>({
 	checkNodes: [],
 });
 
-const filterText = ref('');
+watch(
+	() => props.externalArr,
+	(val) => {
+		if (val) {
+			state.externalArr = val;
+		}
+	},
+	{ immediate: true }
+);
+
 const lazyShow = ref(true);
 const loading = ref(false);
 // 懒加载
@@ -155,39 +166,36 @@ const loadNode = async (node: any, resolve: any) => {
 		loading.value = false;
 	}
 };
-// 查询的时候取消懒加载
-watch(
-	filterText,
-	throttle((val) => {
-		if (val) {
-			lazyShow.value = false; //当输入框有值时关闭懒加载
-			loading.value = true;
-			const { type } = props;
-			const method = type === 'hotspot' ? hotSpotSearch : treeEventClassSearch;
-			method(val)
-				.then((res) => {
-					//获取后端搜索的数据 	//selectMacTree是我自己的后端接口，你们换成自己的
-					state.treeData.length = 0;
-					state.treeData = res.result ?? [];
-					treeRef.value!.filter(val);
-					if (props.showCheckbox && state.checkedKeys.length) {
-						treeRef.value.setCheckedKeys(state.checkedKeys);
-					}
-					if (props.modelValue) {
-						setTimeout(() => {
-							treeRef.value.setCurrentKey(props.modelValue);
-						}, 100);
-					}
-					loading.value = false;
-				})
-				.catch((e) => {
-					loading.value = false;
-				});
-		} else if (val == '' || val == ' ' || val == null) {
-			lazyShow.value = true; // 懒加载树显示
-		}
-	}, 300)
-);
+// 搜索
+const filterMethod = (value: string) => {
+	if (value) {
+		lazyShow.value = false; //当输入框有值时关闭懒加载
+		loading.value = true;
+		const { type } = props;
+		const method = type === 'hotspot' ? hotSpotSearch : treeEventClassSearch;
+		method(value)
+			.then((res) => {
+				//获取后端搜索的数据 	//selectMacTree是我自己的后端接口，你们换成自己的
+				state.treeData.length = 0;
+				state.treeData = res.result ?? [];
+				treeRef.value!.filter(value);
+				if (props.showCheckbox && state.checkedKeys.length) {
+					treeRef.value.setCheckedKeys(state.checkedKeys);
+				}
+				if (props.modelValue) {
+					setTimeout(() => {
+						treeRef.value.setCurrentKey(props.modelValue);
+					}, 100);
+				}
+				loading.value = false;
+			})
+			.catch((e) => {
+				loading.value = false;
+			});
+	} else if (value == '' || value == ' ' || value == null) {
+		lazyShow.value = true; // 懒加载树显示
+	}
+};
 // 查询
 const filterNode = (value: string, data: any) => {
 	if (!value) return true;
@@ -208,7 +216,6 @@ const nodeClick = async (val: any, node: any) => {
 		emit('update:modelValue', val.id);
 		emit('choose', { externalArr: state.externalArr, ...val });
 		selectRef.value.blur();
-		filterText.value = '';
 	}
 	if (!node?.isLeaf) return;
 	state.externalArr = [];
@@ -220,7 +227,6 @@ const nodeClick = async (val: any, node: any) => {
 	emit('update:modelValue', val.id);
 	emit('choose', { externalArr: state.externalArr, ...val });
 	selectRef.value.blur();
-	filterText.value = '';
 };
 // 多选
 const checkChange = (val: any, e: any) => {