From d28af316a8894de3d497d121ff0a8379ed6a5bcb Mon Sep 17 00:00:00 2001
From: gao <gaosongim@gmail.com>
Date: Mon, 28 Aug 2023 11:53:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/XnPageSelect/index.vue     | 242 +++++++++---------
 1 file changed, 122 insertions(+), 120 deletions(-)

diff --git a/snowy-admin-web/src/components/XnPageSelect/index.vue b/snowy-admin-web/src/components/XnPageSelect/index.vue
index 00a8ee06..cac7bb35 100644
--- a/snowy-admin-web/src/components/XnPageSelect/index.vue
+++ b/snowy-admin-web/src/components/XnPageSelect/index.vue
@@ -15,131 +15,133 @@
 </template>
 
 <script setup>
-import { watch } from 'vue'
+	import { watch } from 'vue'
 
-const total = ref(0) // 数据总数
-const initParams = ref({})
-const options = ref([])
-const spinning = ref(false)
-const emit = defineEmits({ change: null, 'update:value': null })
-const props = defineProps({
-	value: {
-		type: String,
-		default: () => undefined
-	},
-	placeholder: {
-		type: String,
-		default: () => '请选择'
-	},
-	pageFunction: {
-		type: Function
-	},
-	echoFunction: {
-		type: Function
-	},
-	pageSize: {
-		type: Number,
-		default: () => 10
-	},
-	allowClear: {
-		type: Boolean,
-		default: () => false
-	},
-	disabled: {
-		type: Boolean,
-		default: () => false
-	}
-})
-const modelValue = ref(props.value)
-watch(props, (newValue) => {
-	modelValue.value = newValue.value
-})
+	const total = ref(0) // 数据总数
+	const initParams = ref({})
+	const options = ref([])
+	const spinning = ref(false)
+	const emit = defineEmits({ change: null, 'update:value': null })
+	const props = defineProps({
+		value: {
+			type: String,
+			default: () => undefined
+		},
+		placeholder: {
+			type: String,
+			default: () => '请选择'
+		},
+		pageFunction: {
+			type: Function
+		},
+		echoFunction: {
+			type: Function
+		},
+		pageSize: {
+			type: Number,
+			default: () => 10
+		},
+		allowClear: {
+			type: Boolean,
+			default: () => false
+		},
+		disabled: {
+			type: Boolean,
+			default: () => false
+		}
+	})
+	const modelValue = ref(props.value)
+	watch(props, (newValue) => {
+		modelValue.value = newValue.value
+	})
 
-// 请求数据
-const onPage = (param = {}) => {
-	if (props.pageFunction) {
-		initParams.value = { ...initParams.value, ...param, size: props.pageSize };
-		// 加载API
-		spinning.value = true;
-		props.pageFunction(initParams.value)
-			.then((data) => {
-				// 更新当前页码
-				initParams.value.current = data.current;
-				// 加载完后设置总数
-				total.value = data.total;
-				options.value = data.records;
-				queryEcho();
-			})
-			.finally(() => {
-				spinning.value = false;
-			});
-	}
-};
-const queryEcho = () => {
-	// 如果带有查询的方法，那么我们去给查询回显
-	if (props.echoFunction) {
-		nextTick(() => {
-			if (modelValue.value) {
-				const entity = options.value.find((f) => f.id === modelValue.value)
-				if (!entity) {
-					const param = {
-						idList: [modelValue.value]
-					}
-					props.echoFunction(param).then((data) => {
-						if (data[0]){
-							options.value.unshift(data[0])
-						}
-					})
-				}
-			}
-		})
-	}
-}
-// change
-const handleChange = (value, array) => {
-	modelValue.value = value
-	// 触发change事件
-	emit('change', value, array)
-	// 更新数据
-	emit('update:value', value)
-}
-// 滚动触发
-const handlePopupScroll = (e) => {
-	const { target } = e
-	const { scrollTop, scrollHeight, clientHeight } = target
-	if (scrollTop + 2 + clientHeight >= scrollHeight) {
-		// 已经到达底部，触发分页逻辑
-		handlePagination()
-	}
-}
-// 分页加载数据
-const handlePagination = () => {
-	// 判断已有数量是否小于总量
-	if (options.value.length < total.value) {
-		const param = { ...initParams.value, current: initParams.value.current + 1 };
-		spinning.value = true;
-		props.pageFunction(param)
-			.then((data) => {
-				if (data.records.length > 0) {
+	// 请求数据
+	const onPage = (param = {}) => {
+		if (props.pageFunction) {
+			initParams.value = { ...initParams.value, ...param, size: props.pageSize }
+			// 加载API
+			spinning.value = true
+			props
+				.pageFunction(initParams.value)
+				.then((data) => {
 					// 更新当前页码
-					initParams.value.current = data.current;
-					// 合并新旧数据
-					const newOptions = [...options.value, ...data.records];
-					// 使用 id 去重
-					const uniqueOptions = newOptions.reduce((acc, cur) => {
-						acc[cur.id] = cur;
-						return acc;
-					}, {});
-					options.value = Object.values(uniqueOptions);
+					initParams.value.current = data.current
+					// 加载完后设置总数
+					total.value = data.total
+					options.value = data.records
+					queryEcho()
+				})
+				.finally(() => {
+					spinning.value = false
+				})
+		}
+	}
+	const queryEcho = () => {
+		// 如果带有查询的方法，那么我们去给查询回显
+		if (props.echoFunction) {
+			nextTick(() => {
+				if (modelValue.value) {
+					const entity = options.value.find((f) => f.id === modelValue.value)
+					if (!entity) {
+						const param = {
+							idList: [modelValue.value]
+						}
+						props.echoFunction(param).then((data) => {
+							if (data[0]) {
+								options.value.unshift(data[0])
+							}
+						})
+					}
 				}
 			})
-			.finally(() => {
-				spinning.value = false;
-			});
+		}
+	}
+	// change
+	const handleChange = (value, array) => {
+		modelValue.value = value
+		// 触发change事件
+		emit('change', value, array)
+		// 更新数据
+		emit('update:value', value)
+	}
+	// 滚动触发
+	const handlePopupScroll = (e) => {
+		const { target } = e
+		const { scrollTop, scrollHeight, clientHeight } = target
+		if (scrollTop + 2 + clientHeight >= scrollHeight) {
+			// 已经到达底部，触发分页逻辑
+			handlePagination()
+		}
+	}
+	// 分页加载数据
+	const handlePagination = () => {
+		// 判断已有数量是否小于总量
+		if (options.value.length < total.value) {
+			const param = { ...initParams.value, current: initParams.value.current + 1 }
+			spinning.value = true
+			props
+				.pageFunction(param)
+				.then((data) => {
+					if (data.records.length > 0) {
+						// 更新当前页码
+						initParams.value.current = data.current
+						// 合并新旧数据
+						const newOptions = [...options.value, ...data.records]
+						// 使用 id 去重
+						const uniqueOptions = newOptions.reduce((acc, cur) => {
+							acc[cur.id] = cur
+							return acc
+						}, {})
+						options.value = Object.values(uniqueOptions)
+					}
+				})
+				.finally(() => {
+					spinning.value = false
+				})
+		}
 	}
-};
 
-defineExpose({
-	onPage
-})
+	defineExpose({
+		onPage
+	})
 </script>