超市修复

src/components/Select/SelectSupermarketSupplier.vue

@@ -10,13 +10,30 @@
 		:loading="state.loading"
 		@visible-change="handleVisibleChange"
 		@change="handleChange"
+		popper-class="supplier-select-dropdown"
 	>
 		<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-select>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch } from "vue"
+import { reactive, watch, nextTick, onMounted, onUnmounted } from "vue"
 import { fetchList } from "/@/api/supermarketerp/smErpSupplier"
 
 interface Supplier {
@@ -46,30 +63,63 @@ const state = reactive({
 		current: 1,
 		size: 10,
 	},
+	hasMore: true,
+	total: 0,
+	isLoadingMore: false,
 })
 
+let scrollContainer: HTMLElement | null = null
+
 // 监听选中值变化
 watch(
 	selectedId,
 	(newVal) => {
 		if (newVal !== undefined) {
-			fetchoptionList()
+			resetAndFetch()
 		}
 	},
 	{ 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
+	
 	try {
-		state.loading = true
+		if (state.searchParams.current === 1) {
+			state.loading = true
+		} else {
+			state.isLoadingMore = true
+		}
+		
 		const params = {
 			supplierId: selectedId.value,
 			...state.searchParams,
 		}
 		const { data } = await fetchList(params)
-		state.optionList = data.records ?? []
+		
+		// 如果是第一页，替换数据；否则追加数据
+		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
 	} finally {
 		state.loading = false
+		state.isLoadingMore = false
 	}
 }
 
@@ -77,14 +127,23 @@ async function fetchoptionList() {
 function handleSearch(keyword: string) {
 	if (keyword !== state.searchParams.supplierName) {
 		state.searchParams.supplierName = keyword
-		fetchoptionList()
+		resetAndFetch()
 	}
 }
 
 // 下拉框显示状态变化
 function handleVisibleChange(visible: boolean) {
 	if (visible) {
-		fetchoptionList()
+		if (state.optionList.length === 0) {
+			resetAndFetch()
+		}
+		// 添加滚动监听
+		nextTick(() => {
+			addScrollListener()
+		})
+	} else {
+		// 移除滚动监听
+		removeScrollListener()
 	}
 }
 
@@ -93,4 +152,50 @@ function handleChange(supplierId: string) {
 	const selectedOption = state.optionList.find((option) => option.supplierId === supplierId)
 	emit("change", selectedOption)
 }
+
+// 加载更多
+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>