⚔ refactor(pulldownSelecter): 优化并修复部分一直bug

Web/src/components/selector/pulldownSelecter.vue

@@ -91,7 +91,7 @@ const props = defineProps({
 	 */
 	labelFormat: {
 		type: Function,
-		default: (item: any) => {},
+		default: (item: any) => undefined,
 	},
 	/**
 	 * 默认查询条件值绑定的属性名
@@ -231,7 +231,7 @@ const resetQuery = () => {
 };
 
 // 远程查询方法
-const remoteMethod = debounce((query) => {
+const remoteMethod = debounce((query: any) => {
 	if (query) {
 		state.loading = true;
 		if (typeof query === 'string') {
@@ -258,37 +258,42 @@ const handleQuery = () => {
 // 选择值改变事件
 const handleChange = (row: any) => {
 	state.tableQuery = Object.assign(state.tableQuery, props.queryParams);
-	state.defaultOptions = props.defaultOptions ?? [];
-	state.defaultOptions.push(row);
 
+	// 处理初值
 	if (props.multiple && !state.selectedValues) state.selectedValues = [];
+
+	// 去除空格, 回显
 	if (typeof row[props.valueProp] === 'string') row[props.valueProp] = row[props.valueProp]?.trim();
+	setDefaultOptions([row]);
+
+	// 去重
 	state.selectedValues = props.multiple ? Array.from(new Set([...state.selectedValues, row[props.valueProp]])) : row[props.valueProp];
-	emit('update:modelValue', state.selectedValues);
+
-	emit('change', state.selectedValues, row);
+	// 设置表格选中效果，折叠选择器
 	if (!props.multiple || state.selectedValues) selectRef.value?.blur();
 	tableRef.value?.setCurrentRow(row);
+
+	emit('update:modelValue', state.selectedValues);
+	emit('change', state.selectedValues, row);
 };
 
-watch(
+// 选择器下拉框显示隐藏事件
-	() => props.modelValue,
+const selectVisibleChange = (visible: boolean) => {
-	(val: any) => {
+	if (visible) {
-		state.selectedValues = val;
+		state.tableQuery[props.keywordProp] = undefined;
-	},
+		handleQuery();
-	{ immediate: true }
+	}
-);
+};
 
-watch(
+// 设置默认选项
-	() => props.defaultOptions,
-	(val: any) => {
-		state.defaultOptions = val;
-	},
-	{ immediate: true }
-);
-
-// 设置默认值
 const setDefaultOptions = (options: any[]) => {
-	state.defaultOptions = options;
+	const list = [] as any[];
+	for(const item of [...options ?? [], ...state.defaultOptions]) {
+		const value = item?.[props.valueProp];
+		const label = props.labelFormat?.(item) || item?.[props.labelProp];
+		if (value && label) list.push({ [props.valueProp]: value, [props.labelProp]: label })
+	}
+	state.defaultOptions = Array.from(new Set(list));
 };
 
 // 设置查询参数
@@ -314,6 +319,9 @@ const setValue = (option: any | any[], row: any) => {
 	emit('change', state.selectedValues, row);
 };
 
+watch(() => props.modelValue, (val: any) => state.selectedValues = val, { immediate: true });
+watch(() => props.defaultOptions, (val: any) => setDefaultOptions(val), { immediate: true });
+
 defineExpose({
 	setValue,
 	handleQuery,
@@ -324,32 +332,26 @@ defineExpose({
 
 <template>
 	<el-select
-		v-model="state.selectedValues"
+			v-model="state.selectedValues"
-		:clearable="clearable"
+			:clearable="clearable"
-		:multiple="multiple"
+			:multiple="multiple"
-		:disabled="disabled"
+			:disabled="disabled"
-		:placeholder="placeholder"
+			:placeholder="placeholder"
-		:allow-create="allowCreate"
+			:allow-create="allowCreate"
-		:remote-method="remoteMethod"
+			:remote-method="remoteMethod"
-		:default-first-option="allowCreate"
+			:default-first-option="allowCreate"
-		@visible-change="(val: boolean) => (val ? handleQuery() : null)"
+			@visible-change="selectVisibleChange"
-		popper-class="popper-class"
+			popper-class="popper-class"
-		ref="selectRef"
+			ref="selectRef"
-		remote-show-suffix
+			remote-show-suffix
-		filterable
+			filterable
-		remote
+			remote
 	>
 		<!-- 隐藏的选项，用于占位 -->
 		<el-option style="width: 0; height: 0" />
 
 		<!-- 默认选项，用于回显数据 -->
-		<el-option
+		<el-option v-for="item in state.defaultOptions ?? []" :key="item[valueProp]" :label="labelFormat(item) || item[labelProp]" :value="item[valueProp]" style="width: 0; height: 0" />
-			v-for="item in (state.defaultOptions ?? []).filter((e) => !state.tableData?.items?.find((e2) => e2[valueProp] === e[valueProp]))"
-			:key="item[valueProp]"
-			:label="labelFormat(item) || item[labelProp]"
-			:value="item[valueProp]"
-			style="width: 0; height: 0"
-		/>
 
 		<!-- 下拉框内容区域 -->
 		<div class="w100" v-loading="state.loading">
@@ -367,12 +369,12 @@ defineExpose({
 
 			<!-- 数据表格 -->
 			<el-table
-				ref="tableRef"
+					ref="tableRef"
-				@row-click="handleChange"
+					@row-click="handleChange"
-				:data="state.tableData?.items ?? []"
+					:data="state.tableData?.items ?? []"
-				:height="`calc(${dropdownHeight} - 175px${$slots.queryForm ? ' - 35px' : ''})`"
+					:height="`calc(${dropdownHeight} - 175px${$slots.queryForm ? ' - 35px' : ''}${state.tableQuery[keywordProp] && allowCreate ? ' - 35px' : ''})`"
-				:style="{ width: dropdownWidth }"
+					:style="{ width: dropdownWidth }"
-				highlight-current-row
+					highlight-current-row
 			>
 				<template #empty><el-empty :image-size="25" /></template>
 				<slot name="columns"></slot>
@@ -380,17 +382,17 @@ defineExpose({
 
 			<!-- 分页组件 -->
 			<el-pagination
-				v-if="props.pagination"
+					v-if="props.pagination"
-				:disabled="state.loading"
+					:disabled="state.loading"
-				:currentPage="state.tableQuery.page"
+					:currentPage="state.tableQuery.page"
-				:page-size="state.tableQuery.pageSize"
+					:page-size="state.tableQuery.pageSize"
-				:total="state.tableData.total"
+					:total="state.tableData.total"
-				:pager-count="4"
+					:pager-count="4"
-				@size-change="handleSizeChange"
+					@size-change="handleSizeChange"
-				@current-change="handleCurrentChange"
+					@current-change="handleCurrentChange"
-				layout="prev, pager, next"
+					layout="prev, pager, next"
-				size="small"
+					size="small"
-				background
+					background
 			/>
 		</div>
 	</el-select>
@@ -407,4 +409,4 @@ defineExpose({
 .popper-class {
 	min-width: 400px !important;
 }
-</style>
+</style>