【更新】人员、机构、岗位、角色选择器由传递url方式改为接口获取且为分页模式

2023-06-28 00:13:17 +08:00 · 2023-06-28 00:13:17 +08:00 · c2f7e4ebca
parent 1fe2ab6dd9
commit c2f7e4ebca
20 changed files with 567 additions and 337 deletions
--- a/snowy-admin-web/src/api/biz/bizOrgApi.js
+++ b/snowy-admin-web/src/api/biz/bizOrgApi.js
@ -41,5 +41,13 @@ export default {
 	// 获取机构详情
 	orgDetail(data) {
 		return request('detail', data, 'get')
+	},
+	// 获取机构树选择器
+	orgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取人员选择器
+	orgUserSelector(data) {
+		return request('userSelector', data, 'get')
 	}
 }
--- a/snowy-admin-web/src/api/components/Selector/orgSelectorPlusApi.js
+++ b/snowy-admin-web/src/api/components/Selector/orgSelectorPlusApi.js
@ -1,29 +0,0 @@
-/**
- *  Copyright [2022] [https://www.xiaonuo.vip]
- *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
- *	1.请不要删除和修改根目录下的LICENSE文件。
- *	2.请不要删除和修改Snowy源码头部的版权声明。
- *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
- *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
- *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
- *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
- */
-import { baseRequest } from '@/utils/request'
-
-const request = (url, ...arg) => baseRequest(`${url}`, ...arg)
-/**
- * 机构选择器
- *
- * @author yubaoshan
- * @date 2022-09-22 22:33:20
- */
-export default {
-	// 获取机构分页
-	orgSelector(url, data = {}) {
-		return request(url, data, 'get')
-	},
-	// 获取机构树
-	treeSelector(url, data = {}) {
-		return request(url, data, 'get')
-	}
-}
--- a/snowy-admin-web/src/api/components/Selector/posSelectorPlusApi.js
+++ b/snowy-admin-web/src/api/components/Selector/posSelectorPlusApi.js
@ -1,29 +0,0 @@
-/**
- *  Copyright [2022] [https://www.xiaonuo.vip]
- *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
- *	1.请不要删除和修改根目录下的LICENSE文件。
- *	2.请不要删除和修改Snowy源码头部的版权声明。
- *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
- *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
- *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
- *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
- */
-import { baseRequest } from '@/utils/request'
-
-const request = (url, ...arg) => baseRequest(`${url}`, ...arg)
-/**
- * 职位选择器
- *
- * @author yubaoshan
- * @date 2022-09-22 22:33:20
- */
-export default {
-	// 获取职位分页
-	posSelector(url, data = {}) {
-		return request(url, data, 'get')
-	},
-	// 获取机构树
-	treeSelector(url, data = {}) {
-		return request(url, data, 'get')
-	}
-}
--- a/snowy-admin-web/src/api/components/Selector/roleSelectorPlusApi.js
+++ b/snowy-admin-web/src/api/components/Selector/roleSelectorPlusApi.js
@ -1,29 +0,0 @@
-/**
- *  Copyright [2022] [https://www.xiaonuo.vip]
- *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
- *	1.请不要删除和修改根目录下的LICENSE文件。
- *	2.请不要删除和修改Snowy源码头部的版权声明。
- *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
- *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
- *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
- *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
- */
-import { baseRequest } from '@/utils/request'
-
-const request = (url, ...arg) => baseRequest(`${url}`, ...arg)
-/**
- * 角色选择器
- *
- * @author yubaoshan
- * @date 2022-09-22 22:33:20
- */
-export default {
-	// 获取角色分页
-	roleSelector(url, data = {}) {
-		return request(url, data, 'get')
-	},
-	// 获取机构树分页
-	treeSelector(url, data = {}) {
-		return request(url, data, 'get')
-	}
-}
--- a/snowy-admin-web/src/api/components/Selector/userSelectorPlusApi.js
+++ b/snowy-admin-web/src/api/components/Selector/userSelectorPlusApi.js
@ -1,29 +0,0 @@
-/**
- *  Copyright [2022] [https://www.xiaonuo.vip]
- *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
- *	1.请不要删除和修改根目录下的LICENSE文件。
- *	2.请不要删除和修改Snowy源码头部的版权声明。
- *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
- *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
- *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
- *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
- */
-import { baseRequest } from '@/utils/request'
-
-const request = (url, ...arg) => baseRequest(`${url}`, ...arg)
-/**
- * 用户选择器
- *
- * @author yubaoshan
- * @date 2022-09-22 22:33:20
- */
-export default {
-	// 获取用户分页
-	userSelector(url, data = {}) {
-		return request(url, data, 'get')
-	},
-	// 获取机构树
-	treeSelector(url, data = {}) {
-		return request(url, data, 'get')
-	}
-}
--- a/snowy-admin-web/src/api/sys/orgApi.js
+++ b/snowy-admin-web/src/api/sys/orgApi.js
@ -41,5 +41,13 @@ export default {
 	// 获取组织详情
 	orgDetail(data) {
 		return request('detail', data, 'get')
+	},
+	// 获取组织树选择器
+	orgOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取用户选择器
+	orgUserSelector(data) {
+		return request('userSelector', data, 'get')
 	}
 }
--- a/snowy-admin-web/src/api/sys/roleApi.js
+++ b/snowy-admin-web/src/api/sys/roleApi.js
@ -85,5 +85,13 @@ export default {
 	// 获取权限授权树
 	rolePermissionTreeSelector(data) {
 		return request('permissionTreeSelector', data, 'get')
+	},
+	// 获取角色选择器
+	roleRoleSelector(data) {
+		return request('roleSelector', data, 'get')
+	},
+	// 获取用户选择器
+	roleUserSelector(data) {
+		return request('userSelector', data, 'get')
 	}
 }
--- a/snowy-admin-web/src/api/sys/userCenterApi.js
+++ b/snowy-admin-web/src/api/sys/userCenterApi.js
@ -81,5 +81,21 @@ export default {
 	// 读取登录用户站内信详情
 	userLoginUnreadMessageDetail(data) {
 		return request('loginUnreadMessageDetail', data, 'get')
+	},
+	// 根据id集合获取组织集合
+	userCenterGetOrgListByIdList(data) {
+		return request('getOrgListByIdList', data)
+	},
+	// 根据id集合获取用户集合
+	userCenterGetUserListByIdList(data) {
+		return request('getUserListByIdList', data)
+	},
+	// 根据id集合获取职位集合
+	userCenterGetPositionListByIdList(data) {
+		return request('getPositionListByIdList', data)
+	},
+	// 根据id集合获取角色集合
+	userCenterGetRoleListByIdList(data) {
+		return request('getRoleListByIdList', data)
 	}
 }
--- a/snowy-admin-web/src/components/Selector/orgSelectorPlus.vue
+++ b/snowy-admin-web/src/components/Selector/orgSelectorPlus.vue
@ -44,6 +44,7 @@
 						:columns="commons"
 						:data-source="tableData"
 						:expand-row-by-click="true"
+						:loading="pageLoading"
 						bordered
 					>
 						<template #title>
@ -61,6 +62,17 @@
 							</template>
 						</template>
 					</a-table>
+					<div class="mt-2">
+						<a-pagination
+							v-if="!isEmpty(tableData)"
+							v-model:current="current"
+							v-model:page-size="pageSize"
+							:total="total"
+							size="small"
+							showSizeChanger
+							@change="paginationChange"
+						/>
+					</div>
 				</div>
 			</a-col>
 			<a-col :span="6">
@ -71,6 +83,7 @@
 						:columns="selectedCommons"
 						:data-source="selectedData"
 						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
 						bordered
 					>
 						<template #title>
@ -92,11 +105,10 @@
 </template>

 <script setup name="orgSelectorPlus">
-	import orgSelectorPlusApi from '@/api/components/Selector/orgSelectorPlusApi'
 	import { message } from 'ant-design-vue'
-	import { remove } from 'lodash-es'
+	import { remove, isEmpty } from 'lodash-es'
 	// 弹窗是否打开
-	let visible = $ref(false)
+	const visible = ref(false)
 	// 主表格common
 	const commons = [
 		{
@ -137,72 +149,102 @@
 	const searchFormState = ref({})
 	const searchFormRef = ref()
 	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
 	// 获取机构树数据
 	const treeData = ref()
 	//  默认展开二级树的节点id
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const emit = defineEmits({ onBack: null })
 	const tableData = ref([])
 	const selectedData = ref([])
 	const recordIds = ref()
-	const props = defineProps(['pageUrl', 'orgUrl', 'radioModel', 'dataIsConverterFlw'])
+	const props = defineProps(['orgPageApi', 'orgTreeApi', 'radioModel', 'dataIsConverterFlw', 'checkedOrgListApi'])
 	// 是否是单选
 	const radioModel = props.radioModel || false
 	// 数据是否转换成工作流格式
 	const dataIsConverterFlw = props.dataIsConverterFlw || false
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(0) // 每页条数
+	const total = ref(0) // 数据总数

 	// 打开弹框
 	const showOrgPlusModal = (ids) => {
-		visible = true
+		visible.value = true
 		if (dataIsConverterFlw) {
 			ids = goDataConverter(ids)
 		}
 		recordIds.value = ids
-		// 获取机构树
-		orgSelectorPlusApi.treeSelector(props.orgUrl).then((res) => {
-			cardLoading.value = false
-			if (res !== null) {
-				treeData.value = res
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
+		if (props.orgTreeApi) {
+			// 获取机构树
+			props.orgTreeApi().then((data) => {
+				cardLoading.value = false
+				if (data !== null) {
+					treeData.value = data
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
 						}
-					}
-				})
-			}
-		})
+					})
+				}
+			})
+		}
 		loadData()
+		if (props.checkedOrgListApi) {
+			if (isEmpty(recordIds.value)) {
+				return
+			}
+			const param = {
+				idList: recordIds.value
+			}
+			selectedTableListLoading.value = true
+			props.checkedOrgListApi(param).then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+		}
 	}
 	// 查询主表格数据
 	const loadData = () => {
-		orgSelectorPlusApi.orgSelector(props.pageUrl, searchFormState.value).then((res) => {
-			// 总共多少条
-			tableRecordNum.value = res.length
-			tableData.value = res
-			loadCheckedKey()
+		pageLoading.value = true
+		props.orgPageApi(searchFormState.value).then((data) => {
+			current.value = data.current
+			pageSize.value = data.size
+			total.value = data.total
+			// 重置、赋值
+			tableData.value = []
+			tableRecordNum.value = 0
+			tableData.value = data.records
+			if (data.records) {
+				tableRecordNum.value = data.records.length
+			} else {
+				tableRecordNum.value = 0
+			}
+		})
+		.finally(() => {
+			pageLoading.value = false
 		})
 	}
-	// 加载已选中的
-	const loadCheckedKey = () => {
-		selectedData.value = []
-		if (recordIds.value.length > 0) {
-			recordIds.value.forEach((item) => {
-				tableData.value.forEach((table) => {
-					if (item === table.id) {
-						selectedData.value.push(table)
-					}
-				})
-			})
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		const param = {
+			current: page,
+			size: pageSize
 		}
+		loadData(param)
 	}
 	const judge = () => {
 		if (radioModel && selectedData.value.length > 0) {
@ -285,7 +327,11 @@
 		searchFormState.value = {}
 		tableRecordNum.value = 0
 		tableData.value = []
-		visible = false
+		current.value = 0
+		pageSize.value = 0
+		total.value = 0
+		selectedData.value = []
+		visible.value = false
 	}

 	// 数据进入后转换
--- a/snowy-admin-web/src/components/Selector/posSelectorPlus.vue
+++ b/snowy-admin-web/src/components/Selector/posSelectorPlus.vue
@ -44,6 +44,7 @@
 						:columns="commons"
 						:data-source="tableData"
 						:expand-row-by-click="true"
+						:loading="pageLoading"
 						bordered
 					>
 						<template #title>
@ -61,6 +62,17 @@
 							</template>
 						</template>
 					</a-table>
+					<div class="mt-2">
+						<a-pagination
+							v-if="!isEmpty(tableData)"
+							v-model:current="current"
+							v-model:page-size="pageSize"
+							:total="total"
+							size="small"
+							showSizeChanger
+							@change="paginationChange"
+						/>
+					</div>
 				</div>
 			</a-col>
 			<a-col :span="6">
@ -71,6 +83,7 @@
 						:columns="selectedCommons"
 						:data-source="selectedData"
 						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
 						bordered
 					>
 						<template #title>
@ -92,11 +105,10 @@
 </template>

 <script setup name="posSelectorPlus">
-	import posSelectorPlusApi from '@/api/components/Selector/posSelectorPlusApi'
 	import { message } from 'ant-design-vue'
-	import { remove } from 'lodash-es'
+	import { remove, isEmpty } from 'lodash-es'
 	// 弹窗是否打开
-	let visible = $ref(false)
+	const visible = ref(false)
 	// 主表格common
 	const commons = [
 		{
@ -137,72 +149,103 @@
 	const searchFormState = ref({})
 	const searchFormRef = ref()
 	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
 	// 获取机构树数据
 	const treeData = ref()
 	//  默认展开二级树的节点id
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const emit = defineEmits({ onBack: null })
 	const tableData = ref([])
 	const selectedData = ref([])
 	const recordIds = ref()
-	const props = defineProps(['pageUrl', 'orgUrl', 'radioModel', 'dataIsConverterFlw'])
+	const props = defineProps(['posPageApi', 'orgTreeApi', 'radioModel', 'dataIsConverterFlw', 'checkedPosListApi'])
 	// 是否是单选
 	const radioModel = props.radioModel || false
 	// 数据是否转换成工作流格式
 	const dataIsConverterFlw = props.dataIsConverterFlw || false
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(0) // 每页条数
+	const total = ref(0) // 数据总数

 	// 打开弹框
 	const showPosPlusModal = (ids) => {
-		visible = true
+		visible.value = true
 		if (dataIsConverterFlw) {
 			ids = goDataConverter(ids)
 		}
 		recordIds.value = ids
 		// 获取机构树
-		posSelectorPlusApi.treeSelector(props.orgUrl).then((res) => {
-			cardLoading.value = false
-			if (res !== null) {
-				treeData.value = res
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
+		if (props.orgTreeApi) {
+			// 获取机构树
+			props.orgTreeApi().then((data) => {
+				cardLoading.value = false
+				if (data !== null) {
+					treeData.value = data
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
 						}
-					}
-				})
-			}
-		})
+					})
+				}
+			})
+		}
 		loadData()
+		if (props.checkedPosListApi) {
+			if (isEmpty(recordIds.value)) {
+				return
+			}
+			const param = {
+				idList: recordIds.value
+			}
+			selectedTableListLoading.value = true
+			props.checkedPosListApi(param).then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+		}
 	}
 	// 查询主表格数据
 	const loadData = () => {
-		posSelectorPlusApi.posSelector(props.pageUrl, searchFormState.value).then((res) => {
-			// 总共多少条
-			tableRecordNum.value = res.length
-			tableData.value = res
-			loadCheckedKey()
+		pageLoading.value = true
+		props.posPageApi(searchFormState.value).then((data) => {
+			current.value = data.current
+			pageSize.value = data.size
+			total.value = data.total
+			// 重置、赋值
+			tableData.value = []
+			tableRecordNum.value = 0
+			tableData.value = data.records
+			if (data.records) {
+				tableRecordNum.value = data.records.length
+			} else {
+				tableRecordNum.value = 0
+			}
+		})
+		.finally(() => {
+			pageLoading.value = false
 		})
 	}
-	// 加载已选中的
-	const loadCheckedKey = () => {
-		selectedData.value = []
-		if (recordIds.value.length > 0) {
-			recordIds.value.forEach((item) => {
-				tableData.value.forEach((table) => {
-					if (item === table.id) {
-						selectedData.value.push(table)
-					}
-				})
-			})
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		const param = {
+			current: page,
+			size: pageSize
 		}
+		loadData(param)
 	}
 	const judge = () => {
 		if (radioModel && selectedData.value.length > 0) {
@ -285,7 +328,11 @@
 		searchFormState.value = {}
 		tableRecordNum.value = 0
 		tableData.value = []
-		visible = false
+		current.value = 0
+		pageSize.value = 0
+		total.value = 0
+		selectedData.value = []
+		visible.value = false
 	}

 	// 数据进入后转换
--- a/snowy-admin-web/src/components/Selector/roleSelectorPlus.vue
+++ b/snowy-admin-web/src/components/Selector/roleSelectorPlus.vue
@ -44,6 +44,7 @@
 						:columns="commons"
 						:data-source="tableData"
 						:expand-row-by-click="true"
+						:loading="pageLoading"
 						bordered
 					>
 						<template #title>
@ -61,6 +62,17 @@
 							</template>
 						</template>
 					</a-table>
+					<div class="mt-2">
+						<a-pagination
+							v-if="!isEmpty(tableData)"
+							v-model:current="current"
+							v-model:page-size="pageSize"
+							:total="total"
+							size="small"
+							showSizeChanger
+							@change="paginationChange"
+						/>
+					</div>
 				</div>
 			</a-col>
 			<a-col :span="6">
@ -71,6 +83,7 @@
 						:columns="selectedCommons"
 						:data-source="selectedData"
 						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
 						bordered
 					>
 						<template #title>
@ -92,11 +105,10 @@
 </template>

 <script setup name="roleSelectorPlus">
-	import roleSelectorPlusApi from '@/api/components/Selector/roleSelectorPlusApi'
 	import { message } from 'ant-design-vue'
-	import { remove } from 'lodash-es'
+	import { remove, isEmpty } from 'lodash-es'
 	// 弹窗是否打开
-	let visible = $ref(false)
+	const visible = ref(false)
 	// 主表格common
 	const commons = [
 		{
@ -137,26 +149,24 @@
 	const searchFormState = ref({})
 	const searchFormRef = ref()
 	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
 	// 获取机构树数据
 	const treeData = ref()
 	//  默认展开二级树的节点id
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const emit = defineEmits({ onBack: null })
 	const tableData = ref([])
 	const selectedData = ref([])
 	const recordIds = ref()
 	const props = defineProps({
-		pageUrl: {
-			type: String,
-			default: '',
-			required: true
+		rolePageApi: {
+			type: Function
 		},
-		orgUrl: {
-			type: String,
-			default: '',
-			required: true
+		orgTreeApi: {
+			type: Function
 		},
 		// 是否是单选
 		radioModel: {
@ -175,6 +185,9 @@
 			type: Boolean,
 			default: true,
 			required: false
+		},
+		checkedRoleListApi: {
+			type: Function
 		}
 	})
 	// 是否是单选
@ -183,47 +196,67 @@
 	const dataIsConverterFlw = props.dataIsConverterFlw
 	// 是否展示‘全局’这个节点
 	const roleGlobal = props.roleGlobal
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(0) // 每页条数
+	const total = ref(0) // 数据总数

 	// 打开弹框
 	const showRolePlusModal = (ids) => {
-		visible = true
+		visible.value = true
 		if (dataIsConverterFlw) {
 			ids = goDataConverter(ids)
 		}
 		recordIds.value = ids
-		// 获取机构树
-		roleSelectorPlusApi.treeSelector(props.orgUrl).then((res) => {
-			cardLoading.value = false
-			if (res !== null) {
-				treeData.value = res
-				// 树中插入全局角色类型
-				if (roleGlobal) {
-					const globalRoleType = [
-						{
-							id: 'GLOBAL',
-							parentId: '-1',
-							name: '全局'
-						}
-					]
-					treeData.value = globalRoleType.concat(res)
-				}
-
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
-						}
+		if (props.orgTreeApi) {
+			// 获取机构树
+			props.orgTreeApi().then((data) => {
+				cardLoading.value = false
+				if (data !== null) {
+					treeData.value = data
+					// 树中插入全局角色类型
+					if (roleGlobal) {
+						const globalRoleType = [
+							{
+								id: 'GLOBAL',
+								parentId: '-1',
+								name: '全局'
+							}
+						]
+						treeData.value = globalRoleType.concat(data)
 					}
-				})
-			}
-		})
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
+						}
+					})
+				}
+			})
+		}
 		loadData()
+		if (props.checkedRoleListApi) {
+			if (isEmpty(recordIds.value)) {
+				return
+			}
+			const param = {
+				idList: recordIds.value
+			}
+			selectedTableListLoading.value = true
+			props.checkedRoleListApi(param).then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+		}
 	}
 	// 查询主表格数据
 	const loadData = () => {
@ -231,25 +264,32 @@
 		if (!roleGlobal) {
 			searchFormState.value.category = 'ORG'
 		}
-		roleSelectorPlusApi.roleSelector(props.pageUrl, searchFormState.value).then((res) => {
-			// 总共多少条
-			tableRecordNum.value = res.length
-			tableData.value = res
-			loadCheckedKey()
+		pageLoading.value = true
+		props.rolePageApi(searchFormState.value).then((data) => {
+			current.value = data.current
+			pageSize.value = data.size
+			total.value = data.total
+			// 重置、赋值
+			tableData.value = []
+			tableRecordNum.value = 0
+			tableData.value = data.records
+			if (data.records) {
+				tableRecordNum.value = data.records.length
+			} else {
+				tableRecordNum.value = 0
+			}
+		})
+		.finally(() => {
+			pageLoading.value = false
 		})
 	}
-	// 加载已选中的
-	const loadCheckedKey = () => {
-		selectedData.value = []
-		if (recordIds.value.length > 0) {
-			recordIds.value.forEach((item) => {
-				tableData.value.forEach((table) => {
-					if (item === table.id) {
-						selectedData.value.push(table)
-					}
-				})
-			})
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		const param = {
+			current: page,
+			size: pageSize
 		}
+		loadData(param)
 	}
 	const judge = () => {
 		if (radioModel && selectedData.value.length > 0) {
@ -338,7 +378,11 @@
 		searchFormState.value = {}
 		tableRecordNum.value = 0
 		tableData.value = []
-		visible = false
+		current.value = 0
+		pageSize.value = 0
+		total.value = 0
+		selectedData.value = []
+		visible.value = false
 	}

 	// 数据进入后转换
--- a/snowy-admin-web/src/components/Selector/userSelectorPlus.vue
+++ b/snowy-admin-web/src/components/Selector/userSelectorPlus.vue
@ -44,6 +44,7 @@
 						:columns="commons"
 						:data-source="tableData"
 						:expand-row-by-click="true"
+						:loading="pageLoading"
 						bordered
 					>
 						<template #title>
@ -61,6 +62,17 @@
 							</template>
 						</template>
 					</a-table>
+					<div class="mt-2">
+						<a-pagination
+							v-if="!isEmpty(tableData)"
+							v-model:current="current"
+							v-model:page-size="pageSize"
+							:total="total"
+							size="small"
+							showSizeChanger
+							@change="paginationChange"
+						/>
+					</div>
 				</div>
 			</a-col>
 			<a-col :span="6">
@ -71,6 +83,7 @@
 						:columns="selectedCommons"
 						:data-source="selectedData"
 						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
 						bordered
 					>
 						<template #title>
@ -92,11 +105,10 @@
 </template>

 <script setup name="userSelectorPlus">
-	import userSelectorPlusApi from '@/api/components/Selector/userSelectorPlusApi'
 	import { message } from 'ant-design-vue'
-	import { remove } from 'lodash-es'
+	import { remove, isEmpty } from 'lodash-es'
 	// 弹窗是否打开
-	let visible = $ref(false)
+	const visible = ref(false)
 	// 主表格common
 	const commons = [
 		{
@ -137,72 +149,103 @@
 	const searchFormState = ref({})
 	const searchFormRef = ref()
 	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
 	// 获取机构树数据
 	const treeData = ref()
 	//  默认展开二级树的节点id
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const emit = defineEmits({ onBack: null })
 	const tableData = ref([])
 	const selectedData = ref([])
 	const recordIds = ref()
-	const props = defineProps(['pageUrl', 'orgUrl', 'radioModel', 'dataIsConverterFlw'])
+	const props = defineProps(['radioModel', 'dataIsConverterFlw', 'orgTreeApi', 'userPageApi', 'checkedUserListApi'])
 	// 是否是单选
 	const radioModel = props.radioModel || false
 	// 数据是否转换成工作流格式
 	const dataIsConverterFlw = props.dataIsConverterFlw || false
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(0) // 每页条数
+	const total = ref(0) // 数据总数

 	// 打开弹框
 	const showUserPlusModal = (ids = []) => {
-		visible = true
+		visible.value = true
 		if (dataIsConverterFlw) {
 			ids = goDataConverter(ids)
 		}
 		recordIds.value = ids
-		// 获取机构树
-		userSelectorPlusApi.treeSelector(props.orgUrl).then((res) => {
-			cardLoading.value = false
-			if (res !== null) {
-				treeData.value = res
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
+		// 加载机构树
+		if (props.orgTreeApi) {
+			// 获取机构树
+			props.orgTreeApi().then((data) => {
+				cardLoading.value = false
+				if (data !== null) {
+					treeData.value = data
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
 						}
-					}
-				})
-			}
-		})
+					})
+				}
+			})
+		}
 		loadData()
+		if (props.checkedUserListApi) {
+			if (isEmpty(recordIds.value)) {
+				return
+			}
+			const param = {
+				idList: recordIds.value
+			}
+			selectedTableListLoading.value = true
+			props.checkedUserListApi(param).then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+		}
 	}
 	// 查询主表格数据
 	const loadData = () => {
-		userSelectorPlusApi.userSelector(props.pageUrl, searchFormState.value).then((res) => {
-			// 总共多少条
-			tableRecordNum.value = res.length
-			tableData.value = res
-			loadCheckedKey()
+		pageLoading.value = true
+		props.userPageApi(searchFormState.value).then((data) => {
+			current.value = data.current
+			pageSize.value = data.size
+			total.value = data.total
+			// 重置、赋值
+			tableData.value = []
+			tableRecordNum.value = 0
+			tableData.value = data.records
+			if (data.records) {
+				tableRecordNum.value = data.records.length
+			} else {
+				tableRecordNum.value = 0
+			}
+		})
+		.finally(() => {
+			pageLoading.value = false
 		})
 	}
-	// 加载已选中的
-	const loadCheckedKey = () => {
-		selectedData.value = []
-		if (recordIds.value.length > 0) {
-			recordIds.value.forEach((item) => {
-				tableData.value.forEach((table) => {
-					if (item === table.id) {
-						selectedData.value.push(table)
-					}
-				})
-			})
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		const param = {
+			current: page,
+			size: pageSize
 		}
+		loadData(param)
 	}
 	const judge = () => {
 		if (radioModel && selectedData.value.length > 0) {
@ -285,7 +328,11 @@
 		searchFormState.value = {}
 		tableRecordNum.value = 0
 		tableData.value = []
-		visible = false
+		current.value = 0
+		pageSize.value = 0
+		total.value = 0
+		selectedData.value = []
+		visible.value = false
 	}

 	// 数据进入后转换
--- a/snowy-admin-web/src/views/biz/org/form.vue
+++ b/snowy-admin-web/src/views/biz/org/form.vue
@ -53,8 +53,9 @@
 		</template>
 		<user-selector-plus
 			ref="UserSelectorPlus"
-			page-url="/biz/org/userSelector"
-			org-url="/biz/org/orgTreeSelector"
+			:org-tree-api="selectorApiFunction.orgTreeApi"
+			:user-page-api="selectorApiFunction.userPageApi"
+			:checked-user-list-api="selectorApiFunction.checkedUserListApi"
 			:radio-model="true"
 			@onBack="userBack"
 		/>
@ -64,6 +65,7 @@
 <script setup name="bizOrgForm">
 	import { required } from '@/utils/formRules'
 	import bizOrgApi from '@/api/biz/bizOrgApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
 	import tool from '@/utils/tool'

@ -162,6 +164,24 @@
 			})
 			.catch(() => {})
 	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return bizOrgApi.orgTreeSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userPageApi: (param) => {
+			return bizOrgApi.orgUserSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		checkedUserListApi: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		onOpen
--- a/snowy-admin-web/src/views/biz/user/form.vue
+++ b/snowy-admin-web/src/views/biz/user/form.vue
@ -427,13 +427,14 @@
 	const selePositionData = (orgId, type) => {
 		if (orgId) {
 			const param = {
-				orgId: orgId
+				orgId: orgId,
+				size: -1
 			}
-			bizUserApi.userPositionSelector(param).then((res) => {
-				positionData.value = res
+			bizUserApi.userPositionSelector(param).then((data) => {
+				positionData.value = data.records
 			})
-			bizUserApi.userSelector(param).then((res) => {
-				directorData.value = res
+			bizUserApi.userSelector(param).then((data) => {
+				directorData.value = data.records
 			})
 			// 此类型代表选择的时候重置后面的职位
 			if (type === 0) {
@ -480,8 +481,8 @@
 		const userList = await bizUserApi.userSelector(param)
 		const obj = {
 			orgId: data.orgId,
-			posList: posList,
-			userList: userList
+			posList: posList.records,
+			userList: userList.records
 		}
 		childrenOrgPosArray.value.push(obj)
 	}
--- a/snowy-admin-web/src/views/biz/user/index.vue
+++ b/snowy-admin-web/src/views/biz/user/index.vue
@ -143,8 +143,9 @@
 	<Form ref="form" @successful="table.refresh(true)" />
 	<role-selector-plus
 		ref="RoleSelectorPlus"
-		page-url="/biz/user/roleSelector"
-		org-url="/biz/user/orgTreeSelector"
+		:org-tree-api="selectorApiFunction.orgTreeApi"
+		:role-page-api="selectorApiFunction.rolePageApi"
+		:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
 		:role-global="false"
 		@onBack="roleBack"
 	/>
@ -154,6 +155,7 @@
 	import tool from '@/utils/tool'
 	import downloadUtil from '@/utils/downloadUtil'
 	import bizUserApi from '@/api/biz/bizUserApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'

@ -390,6 +392,24 @@
 			downloadUtil.resultDownload(res)
 		})
 	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return bizUserApi.userOrgTreeSelector(param).then((orgTree) => {
+				return Promise.resolve(orgTree)
+			})
+		},
+		rolePageApi: (param) => {
+			return bizUserApi.userRoleSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		checkedRoleListApi: (param) => {
+			return userCenterApi.userCenterGetRoleListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 </script>

 <style scoped>
--- a/snowy-admin-web/src/views/dev/message/form.vue
+++ b/snowy-admin-web/src/views/dev/message/form.vue
@ -35,9 +35,10 @@
 		</template>
 	</xn-form-container>
 	<user-selector-plus
-		ref="UserSelectorPlus"
-		page-url="/sys/org/userSelector"
-		org-url="/sys/org/orgTreeSelector"
+		ref="userSelectorPlusRef"
+		:org-tree-api="selectorApiFunction.orgTreeApi"
+		:user-page-api="selectorApiFunction.userPageApi"
+		:checked-user-list-api="selectorApiFunction.checkedUserListApi"
 		@onBack="userBack"
 	/>
 </template>
@ -46,11 +47,13 @@
 	import { required } from '@/utils/formRules'
 	import { message } from 'ant-design-vue'
 	import messageApi from '@/api/dev/messageApi'
-	import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
+	import userApi from '@/api/sys/userApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
+	import UserSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
 	import tool from '@/utils/tool'

 	const sendLoading = ref(false)
-	let UserSelectorPlus = ref()
+	const userSelectorPlusRef = ref()
 	// 定义emit事件
 	const emit = defineEmits({ successful: null })
 	// 默认是关闭状态
@ -85,7 +88,7 @@
 				ids.push(item.id)
 			})
 		}
-		UserSelectorPlus.value.showUserPlusModal(ids)
+		userSelectorPlusRef.value.showUserPlusModal(ids)
 	}
 	// 人员选择回调
 	const userBack = (value) => {
@ -122,6 +125,24 @@
 		})
 		formData.value.receiverIdList = ids
 	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return userApi.userOrgTreeSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userPageApi: (param) => {
+			return userApi.userSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		checkedUserListApi: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		onOpen
--- a/snowy-admin-web/src/views/sys/org/form.vue
+++ b/snowy-admin-web/src/views/sys/org/form.vue
@ -52,9 +52,10 @@
 			<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
 		</template>
 		<user-selector-plus
-			ref="UserSelectorPlus"
-			page-url="/sys/org/userSelector"
-			org-url="/sys/org/orgTreeSelector"
+			ref="userSelectorPlusRef"
+			:org-tree-api="selectorApiFunction.orgTreeApi"
+			:user-page-api="selectorApiFunction.userPageApi"
+			:checked-user-list-api="selectorApiFunction.checkedUserListApi"
 			:radio-model="true"
 			@onBack="userBack"
 		/>
@ -63,16 +64,16 @@

 <script setup name="orgForm">
 	import { required } from '@/utils/formRules'
-	import { message } from 'ant-design-vue'
 	import orgApi from '@/api/sys/orgApi'
-	import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
+	import userCenterApi from '@/api/sys/userCenterApi'
+	import UserSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
 	import tool from '@/utils/tool'

 	// 定义emit事件
 	const emit = defineEmits({ successful: null })
 	// 默认是关闭状态
 	let visible = $ref(false)
-	let UserSelectorPlus = ref()
+	let userSelectorPlusRef = ref()
 	const formRef = ref()
 	// 表单数据，也就是默认给一些数据
 	const formData = ref({})
@ -128,7 +129,7 @@
 	const openSelector = (id) => {
 		let checkedUserIds = []
 		checkedUserIds.push(id)
-		UserSelectorPlus.value.showUserPlusModal(checkedUserIds)
+		userSelectorPlusRef.value.showUserPlusModal(checkedUserIds)
 	}
 	// 人员选择器回调
 	const userBack = (value) => {
@ -160,6 +161,24 @@
 				})
 		})
 	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return orgApi.orgOrgTreeSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userPageApi: (param) => {
+			return orgApi.orgUserSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		checkedUserListApi: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		onOpen
--- a/snowy-admin-web/src/views/sys/role/index.vue
+++ b/snowy-admin-web/src/views/sys/role/index.vue
@ -101,8 +101,9 @@
 	<Form ref="form" @successful="table.refresh(true)" />
 	<user-selector-plus
 		ref="userselectorPlusRef"
-		page-url="/sys/role/userSelector"
-		org-url="/sys/role/orgTreeSelector"
+		:org-tree-api="selectorApiFunction.orgTreeApi"
+		:user-page-api="selectorApiFunction.userPageApi"
+		:checked-user-list-api="selectorApiFunction.checkedUserListApi"
 		@onBack="userCallBack"
 	/>
 </template>
@ -111,6 +112,7 @@
 	import { Empty } from 'ant-design-vue'
 	import roleApi from '@/api/sys/roleApi'
 	import orgApi from '@/api/sys/orgApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	import grantResourceForm from './grantResourceForm.vue'
 	import grantMobileResourceForm from './grantMobileResourceForm.vue'
 	import grantPermissionForm from './grantPermissionForm.vue'
@ -271,6 +273,24 @@
 		}
 		roleApi.roleGrantUser(param).then(() => {})
 	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return roleApi.roleOrgTreeSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userPageApi: (param) => {
+			return roleApi.roleUserSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		checkedUserListApi: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 </script>

 <style scoped>
--- a/snowy-admin-web/src/views/sys/user/form.vue
+++ b/snowy-admin-web/src/views/sys/user/form.vue
@ -425,13 +425,14 @@
 	const selePositionData = (orgId, type) => {
 		if (orgId) {
 			const param = {
-				orgId: orgId
+				orgId: orgId,
+				size: -1
 			}
-			userApi.userPositionSelector(param).then((res) => {
-				positionData.value = res
+			userApi.userPositionSelector(param).then((data) => {
+				positionData.value = data.records
 			})
-			userApi.userSelector(param).then((res) => {
-				directorData.value = res
+			userApi.userSelector(param).then((data) => {
+				directorData.value = data.records
 			})
 			// 此类型代表选择的时候重置后面的职位
 			if (type === 0) {
@ -478,8 +479,8 @@
 		const userList = await userApi.userSelector(param)
 		const obj = {
 			orgId: data.orgId,
-			posList: posList,
-			userList: userList
+			posList: posList.records,
+			userList: userList.records
 		}
 		childrenOrgPosArray.value.push(obj)
 	}
--- a/snowy-admin-web/src/views/sys/user/index.vue
+++ b/snowy-admin-web/src/views/sys/user/index.vue
@ -138,8 +138,9 @@
 	<Form ref="form" @successful="table.refresh(true)" />
 	<role-selector-plus
 		ref="RoleSelectorPlus"
-		page-url="/sys/user/roleSelector"
-		org-url="/sys/user/orgTreeSelector"
+		:org-tree-api="selectorApiFunction.orgTreeApi"
+		:role-page-api="selectorApiFunction.rolePageApi"
+		:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
 		@onBack="roleBack"
 	/>
 	<ImpExp ref="ImpExpRef" />
@ -152,6 +153,7 @@
 	import tool from '@/utils/tool'
 	import downloadUtil from '@/utils/downloadUtil'
 	import userApi from '@/api/sys/userApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
 	import ImpExp from './impExp.vue'
@ -384,6 +386,24 @@
 			downloadUtil.resultDownload(res)
 		})
 	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return userApi.userOrgTreeSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		rolePageApi: (param) => {
+			return userApi.userRoleSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		checkedRoleListApi: (param) => {
+			return userCenterApi.userCenterGetRoleListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 </script>

 <style scoped>