修改货商下拉搜索

src/components/Select/SelectSupermarketSupplier.vue

@@ -1,201 +1,86 @@
 <template>
 	<el-select
-		v-model="selectedId"
-		:placeholder="placeholder"
+		style="width: 100%"
+		v-model="state.selectId"
+		:placeholder="props.placeholder"
 		clearable
 		remote-show-suffix
 		filterable
 		remote
-		:remote-method="handleSearch"
+		:remote-method="remoteSearch"
 		:loading="state.loading"
-		@visible-change="handleVisibleChange"
-		@change="handleChange"
-		popper-class="supplier-select-dropdown"
+		@visible-change="(e: boolean) => e && getOptions()"
+		@change="change"
 	>
-		<el-option v-for="item in state.optionList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
-		<el-option
-			v-if="state.loading && state.optionList.length > 0"
-			value=""
-			disabled
-			style="text-align: center; color: #999;"
-		>
-			加载中...
-		</el-option>
-		<el-option
-			v-if="!state.hasMore && state.optionList.length > 0"
-			value=""
-			disabled
-			style="text-align: center; color: #999;"
-		>
-			没有更多数据了
-		</el-option>
+		<el-option v-for="item in state.options" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
 	</el-select>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, nextTick, onMounted, onUnmounted } from "vue"
+import { reactive, watch } from "vue"
 import { fetchList } from "/@/api/supermarketerp/smErpSupplier"
 
-interface Supplier {
-	supplierId: string | number
-	supplierName: string
-}
+const emit = defineEmits(["change"])
 
-interface Props {
+const selectId = defineModel()
+
+export type Props = {
 	placeholder?: string
 }
-
 const props = withDefaults(defineProps<Props>(), {
-	placeholder: "请输入",
+	placeholder: "输入货商搜索",
 })
 
-const emit = defineEmits<{
-	(e: "change", supplier: Supplier | undefined): void
-}>()
-
-const selectedId = defineModel<string | number>()
-
-const state = reactive({
-	loading: false,
-	optionList: [] as Supplier[],
-	searchParams: {
-		supplierName: "",
-		current: 1,
-		size: 10,
-	},
-	hasMore: true,
-	total: 0,
-	isLoadingMore: false,
+const queryForm = reactive<any>({
+	supplierName: "",
+	current: 1,
+	size: 10,
 })
 
-let scrollContainer: HTMLElement | null = null
+const state = reactive<any>({
+	loading: true,
+	selectId: selectId,
+	options: [],
+})
 
-// 监听选中值变化
 watch(
-	selectedId,
-	(newVal) => {
-		if (newVal !== undefined) {
-			resetAndFetch()
-		}
+	selectId,
+	(newVal, oldValue) => {
+		if (newVal == oldValue) return
+		state.selectId = newVal
+		getOptions()
 	},
 	{ immediate: true },
 )
 
-// 重置并获取数据
-async function resetAndFetch() {
-	state.searchParams.current = 1
-	state.optionList = []
-	state.hasMore = true
-	state.isLoadingMore = false
-	await fetchoptionList()
-}
-
-async function fetchoptionList() {
-	if (state.loading || state.isLoadingMore) return
-	
+async function getOptions() {
 	try {
-		if (state.searchParams.current === 1) {
-			state.loading = true
-		} else {
-			state.isLoadingMore = true
+		state.loading = true
+		const _pa = {
+			supplierId: selectId.value,
+			...queryForm,
 		}
-		
-		const params = {
-			supplierId: selectedId.value,
-			...state.searchParams,
-		}
-		const { data } = await fetchList(params)
-		
-		// 如果是第一页，替换数据；否则追加数据
-		if (state.searchParams.current === 1) {
-			state.optionList = data.records ?? []
-		} else {
-			// 确保追加而不是替换
-			const newRecords = data.records ?? []
-			state.optionList = [...state.optionList, ...newRecords]
-		}
-		
-		state.total = data.total || 0
-		state.hasMore = state.optionList.length < state.total
+		const { data } = await fetchList(_pa)
+		state.options = data.records ?? []
 	} finally {
-		state.loading = false
-		state.isLoadingMore = false
+		setTimeout(() => (state.loading = false), 500)
 	}
 }
 
-// 搜索处理
-function handleSearch(keyword: string) {
-	if (keyword !== state.searchParams.supplierName) {
-		state.searchParams.supplierName = keyword
-		resetAndFetch()
+function remoteSearch(params: string) {
+	if (params != queryForm.supplierName) {
+		queryForm.supplierName = params
+		getOptions()
 	}
 }
 
-// 下拉框显示状态变化
-function handleVisibleChange(visible: boolean) {
-	if (visible) {
-		if (state.optionList.length === 0) {
-			resetAndFetch()
-		}
-		// 添加滚动监听
-		nextTick(() => {
-			addScrollListener()
-		})
-	} else {
-		// 移除滚动监听
-		removeScrollListener()
-	}
+function clear() {
+	state.selectId = null
+	getOptions()
 }
 
-// 选择变化处理
-function handleChange(supplierId: string) {
-	const selectedOption = state.optionList.find((option) => option.supplierId === supplierId)
-	emit("change", selectedOption)
+function change(v: any) {
+	const targetSupplier = state.options.find((i: any) => i.supplierId == v)
+	emit("change", targetSupplier)
 }
-
-// 加载更多
-function loadMore() {
-	if (state.hasMore && !state.loading && !state.isLoadingMore) {
-		state.searchParams.current += 1
-		fetchoptionList()
-	}
-}
-
-// 添加滚动监听
-function addScrollListener() {
-	// 查找下拉框的滚动容器
-	scrollContainer = document.querySelector('.supplier-select-dropdown .el-select-dropdown__wrap') as HTMLElement
-	if (scrollContainer) {
-		scrollContainer.addEventListener('scroll', handleScroll)
-	}
-}
-
-// 移除滚动监听
-function removeScrollListener() {
-	if (scrollContainer) {
-		scrollContainer.removeEventListener('scroll', handleScroll)
-		scrollContainer = null
-	}
-}
-
-// 处理滚动事件
-function handleScroll() {
-	if (!scrollContainer || state.isLoadingMore || !state.hasMore) return
-	
-	const { scrollTop, scrollHeight, clientHeight } = scrollContainer
-	// 当滚动到底部附近时（距离底部50px）触发加载
-	if (scrollTop + clientHeight >= scrollHeight - 50) {
-		loadMore()
-	}
-}
-
-onUnmounted(() => {
-	removeScrollListener()
-})
 </script>
-
-<style>
-.supplier-select-dropdown .el-select-dropdown__wrap {
-	max-height: 300px !important;
-}
-</style>