【升级】新增xnPageSelect分页组件，用户管理均已使用该新组件

snowy-admin-web/src/components/XnPageSelect/index.vue

@@ -0,0 +1,144 @@
+<template>
+	<a-spin size="small" :spinning="spinning">
+		<a-select
+			v-model:value="modelValue"
+			:options="options"
+			:field-names="{ label: 'name', value: 'id' }"
+			style="width: 100%"
+			:placeholder="props.placeholder"
+			:allow-clear="props.allowClear"
+			:disabled="props.disabled"
+			@change="handleChange"
+			@popupScroll="handlePopupScroll"
+		/>
+	</a-spin>
+</template>
+
+<script setup name="xnPageSelector">
+	import { cloneDeep } from 'lodash-es'
+	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 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) => {
+							options.value.push(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 = 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
+	})
+</script>

snowy-admin-web/src/views/biz/user/form.vue

@@ -76,28 +76,26 @@
 						</a-col>
 						<a-col :span="8">
 							<a-form-item label="选择职位：" name="positionId">
-								<a-select
+								<xn-page-select
+									ref="xnPositionPageSelectRef"
 									v-model:value="formData.positionId"
-									:options="positionData"
-									:field-names="{ label: 'name', value: 'id' }"
-									style="width: 100%"
 									placeholder="请选择职位"
 									allow-clear
-								>
+									:page-function="selectApiFunction.positionSelector"
-								</a-select>
+									:echo-function="selectApiFunction.echoPosition"
+								/>
 							</a-form-item>
 						</a-col>
 						<a-col :span="8">
 							<a-form-item label="选择主管：" name="directorId">
-								<a-select
+								<xn-page-select
+									ref="xnUserPageSelectRef"
 									v-model:value="formData.directorId"
-									:options="directorData"
-									:field-names="{ label: 'name', value: 'id' }"
-									style="width: 100%"
 									placeholder="请选择主管"
 									allow-clear
-								>
+									:page-function="selectApiFunction.userSelector"
-								</a-select>
+									:echo-function="selectApiFunction.echoUser"
+								/>
 							</a-form-item>
 						</a-col>
 					</a-row>
@@ -139,7 +137,6 @@
 									>
 										<a-tree-select
 											v-model:value="positionInfo.orgId"
-											show-search
 											style="width: 100%"
 											:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
 											placeholder="请选择机构"
@@ -148,7 +145,7 @@
 											:tree-data="treeData"
 											:tree-default-expanded-keys="treeDefaultExpandedKeys"
 											:field-names="{ children: 'children', label: 'name', value: 'id' }"
-											@select="childOrgSelect(positionInfo, 0)"
+											@select="childOrgSelect(positionInfo, 0, index)"
 										></a-tree-select>
 									</a-form-item>
 								</a-col>
@@ -157,28 +154,26 @@
 										:name="['positionJson', index, 'positionId']"
 										:rules="{ required: true, message: '请选择岗位' }"
 									>
-										<a-select
+										<xn-page-select
+											ref="xnChildPositionPageSelectRef"
 											v-model:value="positionInfo.positionId"
-											:options="childPosData(positionInfo.orgId)"
+											placeholder="请选择岗位"
-											:field-names="{ label: 'name', value: 'id' }"
-											style="width: 100%"
-											placeholder="请选择职位"
 											allow-clear
-										>
+											:page-function="selectApiFunction.childPositionSelector"
-										</a-select>
+											:echo-function="selectApiFunction.echoPosition"
+										/>
 									</a-form-item>
 								</a-col>
 								<a-col :span="7">
 									<a-form-item :name="['positionJson', index, 'directorId']">
-										<a-select
+										<xn-page-select
+											ref="xnChildUserPageSelectRef"
 											v-model:value="positionInfo.directorId"
-											:options="childUserData(positionInfo.orgId)"
-											:field-names="{ label: 'name', value: 'id' }"
-											style="width: 100%"
 											placeholder="请选择主管"
 											allow-clear
-										>
+											:page-function="selectApiFunction.childUserSelector"
-										</a-select>
+											:echo-function="selectApiFunction.echoUser"
+										/>
 									</a-form-item>
 								</a-col>
 								<a-col :span="3" style="margin-top: 4px">
@@ -331,27 +326,26 @@
 	import bizUserApi from '@/api/biz/bizUserApi'
 	import { required } from '@/utils/formRules'
 	import tool from '@/utils/tool'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	// 默认是关闭状态
-	let visible = $ref(false)
+	const visible = ref(false)
 	const formRef = ref()
 	const activeTabsKey = ref('1')
 	const emit = defineEmits({ successful: null })
 	const formLoading = ref(false)
 	const treeData = ref([])
 	const treeDefaultExpandedKeys = ref([])
-	// 主职职位数据
+	// 分页select组件dom定义
-	let positionData = ref([])
+	const xnPositionPageSelectRef = ref()
-	// 主职主管人员数据
+	const xnUserPageSelectRef = ref()
-	let directorData = ref([])
+	const xnChildPositionPageSelectRef = ref()
-
+	const xnChildUserPageSelectRef = ref()
-	// 定义一个装机构跟职位的壳
-	let childrenOrgPosArray = ref([])
 	// 表单数据
-	let formData = ref({})
+	const formData = ref({})
 
 	// 打开抽屉
 	const onOpen = (record, orgId) => {
-		visible = true
+		visible.value = true
 		formData.value = {
 			gender: '男',
 			positionJson: []
@@ -392,9 +386,7 @@
 	const onClose = () => {
 		treeData.value = []
 		treeDefaultExpandedKeys.value = []
-		positionData.value = []
+		visible.value = false
-		directorData.value = []
-		visible = false
 	}
 	// 回显数据
 	const convertFormData = (record) => {
@@ -404,14 +396,18 @@
 		// 查询详情
 		bizUserApi.userDetail(param).then((data) => {
 			if (data.positionJson) {
-				const positionJsonLocal = JSON.parse(data.positionJson).map((item) => {
-					childOrgSelect(item)
-					return item
-				})
 				// 替换表单中的格式与后端查到的
-				data.positionJson = positionJsonLocal
+				data.positionJson = JSON.parse(data.positionJson)
 			}
 			formData.value = Object.assign(formData.value, data)
+			// 这里再写一次是因为上面需要先加载增行，下面再进行循环赋值
+			if (data.positionJson) {
+				// 遍历进行补充
+				data.positionJson.map((item, index) => {
+					childOrgSelect(item, 1, index)
+					return item
+				})
+			}
 			selePositionData(formData.value.orgId)
 		})
 	}
@@ -426,16 +422,14 @@
 	// 机构选择后查询对应的职位
 	const selePositionData = (orgId, type) => {
 		if (orgId) {
-			const param = {
+			const xnPositionPageSelectParam = {
-				orgId: orgId,
+				orgId: orgId
-				size: -1
 			}
-			bizUserApi.userPositionSelector(param).then((data) => {
+			xnPositionPageSelectRef.value.onPage(xnPositionPageSelectParam)
-				positionData.value = data.records
+			const xnUserPageSelectParam = {
-			})
+				orgId: orgId
-			bizUserApi.userSelector().then((data) => {
+			}
-				directorData.value = data.records
+			xnUserPageSelectRef.value.onPage(xnUserPageSelectParam)
-			})
 			// 此类型代表选择的时候重置后面的职位
 			if (type === 0) {
 				formData.value.positionId = undefined
@@ -446,6 +440,40 @@
 			formData.value.directorId = undefined
 		}
 	}
+	// 传递选择组件需要的API
+	const selectApiFunction = {
+		positionSelector: (param) => {
+			return bizUserApi.userPositionSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userSelector: (param) => {
+			return bizUserApi.userSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		childPositionSelector: (param) => {
+			return bizUserApi.userPositionSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		childUserSelector: (param) => {
+			return bizUserApi.userSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		// 通过id回显数据接口
+		echoPosition: (param) => {
+			return userCenterApi.userCenterGetPositionListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		echoUser: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 	// 附属职位信息增行
 	const addDomains = () => {
 		if (formData.value.positionJson === null) {
@@ -462,11 +490,11 @@
 		formData.value.positionJson.splice(index, 1)
 	}
 	// 子表行内选择机构
-	const childOrgSelect = async (data, type) => {
+	const childOrgSelect = async (data, type, index) => {
 		// 说明正在切换机构，我们就将他的后面的设置空
 		if (type === 0) {
-			formData.value.positionJson.filter((item) => {
+			formData.value.positionJson.filter((item, serial) => {
-				if (item.orgId === data.orgId) {
+				if (item.orgId === data.orgId && serial === index) {
 					item.positionId = undefined
 					item.directorId = undefined
 				}
@@ -475,30 +503,10 @@
 		const param = {
 			orgId: data.orgId
 		}
-		// 查询职位
+		nextTick(() => {
-		const posList = await bizUserApi.userPositionSelector(param)
+			xnChildPositionPageSelectRef.value[index].onPage(param)
-		// 查询人员
+			xnChildUserPageSelectRef.value[index].onPage(param)
-		const userList = await bizUserApi.userSelector(param)
+		})
-		const obj = {
-			orgId: data.orgId,
-			posList: posList.records,
-			userList: userList.records
-		}
-		childrenOrgPosArray.value.push(obj)
-	}
-	// 获取行内职位数据
-	const childPosData = (value) => {
-		const resultData = childrenOrgPosArray.value.filter((item) => item.orgId === value)
-		if (resultData.length > 0) {
-			return resultData[0].posList
-		}
-	}
-	// 获取行内人员数据
-	const childUserData = (value) => {
-		const resultData = childrenOrgPosArray.value.filter((item) => item.orgId === value)
-		if (resultData.length > 0) {
-			return resultData[0].userList
-		}
 	}
 	// 验证并提交数据
 	const onSubmit = () => {

snowy-admin-web/src/views/sys/user/form.vue

@@ -76,25 +76,25 @@
 						</a-col>
 						<a-col :span="8">
 							<a-form-item label="选择职位：" name="positionId">
-								<a-select
+								<xn-page-select
+									ref="xnPositionPageSelectRef"
 									v-model:value="formData.positionId"
-									:options="positionData"
-									:field-names="{ label: 'name', value: 'id' }"
-									style="width: 100%"
 									placeholder="请选择职位"
 									allow-clear
+									:page-function="selectApiFunction.positionSelector"
+									:echo-function="selectApiFunction.echoPosition"
 								/>
 							</a-form-item>
 						</a-col>
 						<a-col :span="8">
 							<a-form-item label="选择主管：" name="directorId">
-								<a-select
+								<xn-page-select
+									ref="xnUserPageSelectRef"
 									v-model:value="formData.directorId"
-									:options="directorData"
-									:field-names="{ label: 'name', value: 'id' }"
-									style="width: 100%"
 									placeholder="请选择主管"
 									allow-clear
+									:page-function="selectApiFunction.userSelector"
+									:echo-function="selectApiFunction.echoUser"
 								/>
 							</a-form-item>
 						</a-col>
@@ -137,7 +137,6 @@
 									>
 										<a-tree-select
 											v-model:value="positionInfo.orgId"
-											show-search
 											style="width: 100%"
 											:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
 											placeholder="请选择组织"
@@ -146,7 +145,7 @@
 											:tree-data="treeData"
 											:tree-default-expanded-keys="treeDefaultExpandedKeys"
 											:field-names="{ children: 'children', label: 'name', value: 'id' }"
-											@select="childOrgSelect(positionInfo, 0)"
+											@select="childOrgSelect(positionInfo, 0, index)"
 										/>
 									</a-form-item>
 								</a-col>
@@ -155,25 +154,25 @@
 										:name="['positionJson', index, 'positionId']"
 										:rules="{ required: true, message: '请选择职位' }"
 									>
-										<a-select
+										<xn-page-select
+											ref="xnChildPositionPageSelectRef"
 											v-model:value="positionInfo.positionId"
-											:options="childPosData(positionInfo.orgId)"
-											:field-names="{ label: 'name', value: 'id' }"
-											style="width: 100%"
 											placeholder="请选择职位"
 											allow-clear
+											:page-function="selectApiFunction.childPositionSelector"
+											:echo-function="selectApiFunction.echoPosition"
 										/>
 									</a-form-item>
 								</a-col>
 								<a-col :span="7">
 									<a-form-item :name="['positionJson', index, 'directorId']">
-										<a-select
+										<xn-page-select
+											ref="xnChildUserPageSelectRef"
 											v-model:value="positionInfo.directorId"
-											:options="childUserData(positionInfo.orgId)"
-											:field-names="{ label: 'name', value: 'id' }"
-											style="width: 100%"
 											placeholder="请选择主管"
 											allow-clear
+											:page-function="selectApiFunction.childUserSelector"
+											:echo-function="selectApiFunction.echoUser"
 										/>
 									</a-form-item>
 								</a-col>
@@ -327,29 +326,28 @@
 
 <script setup>
 	import userApi from '@/api/sys/userApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	import { required } from '@/utils/formRules'
 	import tool from '@/utils/tool'
 	// 默认是关闭状态
-	let visible = $ref(false)
+	const visible = ref(false)
 	const formRef = ref()
 	const activeTabsKey = ref('1')
 	const emit = defineEmits({ successful: null })
 	const formLoading = ref(false)
 	const treeData = ref([])
 	const treeDefaultExpandedKeys = ref([])
-	// 主职职位数据
+	// 分页select组件dom定义
-	let positionData = ref([])
+	const xnPositionPageSelectRef = ref()
-	// 主职主管人员数据
+	const xnUserPageSelectRef = ref()
-	let directorData = ref([])
+	const xnChildPositionPageSelectRef = ref()
-
+	const xnChildUserPageSelectRef = ref()
-	// 定义一个装机构跟职位的壳
-	let childrenOrgPosArray = ref([])
 	// 表单数据
-	let formData = ref({})
+	const formData = ref({})
 
 	// 打开抽屉
 	const onOpen = (record, orgId) => {
-		visible = true
+		visible.value = true
 		formData.value = {
 			gender: '男',
 			positionJson: []
@@ -390,9 +388,7 @@
 	const onClose = () => {
 		treeData.value = []
 		treeDefaultExpandedKeys.value = []
-		positionData.value = []
+		visible.value = false
-		directorData.value = []
-		visible = false
 	}
 	// 回显数据
 	const convertFormData = (record) => {
@@ -402,17 +398,22 @@
 		// 查询详情
 		userApi.userDetail(param).then((data) => {
 			if (data.positionJson) {
-				const positionJsonLocal = JSON.parse(data.positionJson).map((item) => {
-					childOrgSelect(item)
-					return item
-				})
 				// 替换表单中的格式与后端查到的
-				data.positionJson = positionJsonLocal
+				data.positionJson = JSON.parse(data.positionJson)
 			}
 			formData.value = Object.assign(formData.value, data)
+			// 这里再写一次是因为上面需要先加载增行，下面再进行循环赋值
+			if (data.positionJson) {
+				// 遍历进行补充
+				data.positionJson.map((item, index) => {
+					childOrgSelect(item, 1, index)
+					return item
+				})
+			}
 			selePositionData(formData.value.orgId)
 		})
 	}
+
 	// 默认要校验的
 	const formRules = {
 		account: [required('请输入账号')],
@@ -424,16 +425,14 @@
 	// 机构选择后查询对应的职位
 	const selePositionData = (orgId, type) => {
 		if (orgId) {
-			const param = {
+			const xnPositionPageSelectParam = {
-				orgId: orgId,
+				orgId: orgId
-				size: -1
 			}
-			userApi.userPositionSelector(param).then((data) => {
+			xnPositionPageSelectRef.value.onPage(xnPositionPageSelectParam)
-				positionData.value = data.records
+			const xnUserPageSelectParam = {
-			})
+				orgId: orgId
-			userApi.userSelector().then((data) => {
+			}
-				directorData.value = data.records
+			xnUserPageSelectRef.value.onPage(xnUserPageSelectParam)
-			})
 			// 此类型代表选择的时候重置后面的职位
 			if (type === 0) {
 				formData.value.positionId = undefined
@@ -444,6 +443,40 @@
 			formData.value.directorId = undefined
 		}
 	}
+	// 传递选择组件需要的API
+	const selectApiFunction = {
+		positionSelector: (param) => {
+			return userApi.userPositionSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userSelector: (param) => {
+			return userApi.userSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		childPositionSelector: (param) => {
+			return userApi.userPositionSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		childUserSelector: (param) => {
+			return userApi.userSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		// 通过id回显数据接口
+		echoPosition: (param) => {
+			return userCenterApi.userCenterGetPositionListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		echoUser: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 	// 附属职位信息增行
 	const addDomains = () => {
 		if (formData.value.positionJson === null) {
@@ -459,12 +492,13 @@
 	const delDomains = (index) => {
 		formData.value.positionJson.splice(index, 1)
 	}
+
 	// 子表行内选择机构
-	const childOrgSelect = async (data, type) => {
+	const childOrgSelect = (data, type, index) => {
 		// 说明正在切换机构，我们就将他的后面的设置空
 		if (type === 0) {
-			formData.value.positionJson.filter((item) => {
+			formData.value.positionJson.filter((item, serial) => {
-				if (item.orgId === data.orgId) {
+				if (item.orgId === data.orgId && serial === index) {
 					item.positionId = undefined
 					item.directorId = undefined
 				}
@@ -473,30 +507,10 @@
 		const param = {
 			orgId: data.orgId
 		}
-		// 查询职位
+		nextTick(() => {
-		const posList = await userApi.userPositionSelector(param)
+			xnChildPositionPageSelectRef.value[index].onPage(param)
-		// 查询人员
+			xnChildUserPageSelectRef.value[index].onPage(param)
-		const userList = await userApi.userSelector(param)
+		})
-		const obj = {
-			orgId: data.orgId,
-			posList: posList.records,
-			userList: userList.records
-		}
-		childrenOrgPosArray.value.push(obj)
-	}
-	// 获取行内职位数据
-	const childPosData = (value) => {
-		const resultData = childrenOrgPosArray.value.filter((item) => item.orgId === value)
-		if (resultData.length > 0) {
-			return resultData[0].posList
-		}
-	}
-	// 获取行内用户数据
-	const childUserData = (value) => {
-		const resultData = childrenOrgPosArray.value.filter((item) => item.orgId === value)
-		if (resultData.length > 0) {
-			return resultData[0].userList
-		}
 	}
 	// 验证并提交数据
 	const onSubmit = () => {