From 2dcff6f5c55e737a6d9429ba09d998f03f23a86b Mon Sep 17 00:00:00 2001
From: gao <gaosongim@gmail.com>
Date: Mon, 28 Aug 2023 11:47:29 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E5=A4=8D=E4=BA=86xnPageSelector?=
 =?UTF-8?q?=E5=8F=AA=E8=83=BD=E5=8A=A0=E8=BD=BD=E5=89=8D=E4=B8=A4=E9=A1=B5?=
 =?UTF-8?q?=E7=9A=84bug=202.=E5=B0=86=E5=9B=9E=E6=98=BE=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E7=9A=84=E7=BB=93=E6=9E=9C=E7=A7=BB=E5=8A=A8=E5=88=B0=E6=9C=80?=
 =?UTF-8?q?=E5=89=8D=E6=96=B9=E9=98=B2=E6=AD=A2=E6=BB=91=E5=8A=A8=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E5=87=BA=E7=8E=B0=E9=97=AE=E9=A2=98=203.initParams?=
 =?UTF-8?q?=E5=BA=94=E8=AF=A5=E5=8C=85=E5=90=AB=E5=8E=9F=E5=A7=8B=E7=9A=84?=
 =?UTF-8?q?param=E5=8F=82=E6=95=B0=E4=BB=A5=E9=80=82=E5=BA=94=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E6=9F=A5=E8=AF=A2=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/snowy-admin-web/src/components/XnPageSelect/index.vue b/snowy-admin-web/src/components/XnPageSelect/index.vue
index 95ba1c99..00a8ee06 100644
--- a/snowy-admin-web/src/components/XnPageSelect/index.vue
+++ b/snowy-admin-web/src/components/XnPageSelect/index.vue
@@ -14,133 +14,132 @@
 	</a-spin>
 </template>
 
-<script setup name="xnPageSelector">
-	import { cloneDeep } from 'lodash-es'
-	import { watch } from 'vue'
+<script setup>
+import { watch } from 'vue'
 
-	const current = ref(1) // 当前页数
-	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 = param
-			initParams.value.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 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 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.push(data[0])
-							}
-						})
+})
+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) {
+					// 更新当前页码
+					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;
+			});
 	}
-	// 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 = cloneDeep(initParams.value)
-			param.current = initParams.value.current + 1
-			spinning.value = true
-			props
-				.pageFunction(param)
-				.then((data) => {
-					if (data.records.length > 0) {
-						options.value = [...cloneDeep(options.value), ...data.records].filter((item, index, self) => {
-							return (
-								self.findIndex((f) => {
-									return f.id === item.id
-								}) === index
-							)
-						})
-					}
-				})
-				.finally(() => {
-					spinning.value = false
-				})
-		}
-	}
-	defineExpose({
-		onPage
-	})
+};
+
+defineExpose({
+	onPage
+})
 </script>