From deb617da7e3ab9d18a38cceab2ddd10946de4557 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=9E=E5=AE=9D=E5=B1=B1?= <1253070437@qq.com>
Date: Fri, 19 Jul 2024 01:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91=E9=87=8D?=
 =?UTF-8?q?=E5=86=99=E7=94=A8=E6=88=B7=E3=80=81=E6=9C=BA=E6=9E=84=E3=80=81?=
 =?UTF-8?q?=E8=A7=92=E8=89=B2=E3=80=81=E8=81=8C=E4=BD=8D=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=EF=BC=8C=E5=8A=A0=E5=85=A5v-model=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=E5=BD=A2=E5=BC=8F=EF=BC=8C=E4=B8=9A=E5=8A=A1=E5=86=85=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/XnOrgSelector/README.md    |  36 ++
 .../src/components/XnOrgSelector/index.vue    | 579 +++++++++++++++++
 .../components/XnPositionSelector/README.md   |  36 ++
 .../components/XnPositionSelector/index.vue   | 579 +++++++++++++++++
 .../src/components/XnRoleSelector/README.md   |  36 ++
 .../src/components/XnRoleSelector/index.vue   | 607 ++++++++++++++++++
 .../src/components/XnUserSelector/index.vue   |  59 +-
 snowy-admin-web/src/style/index.less          |   2 +
 snowy-admin-web/src/views/biz/org/form.vue    |   7 -
 snowy-admin-web/src/views/biz/user/index.vue  |  15 +-
 .../src/views/dev/message/form.vue            |   7 -
 snowy-admin-web/src/views/sys/org/form.vue    |   7 -
 snowy-admin-web/src/views/sys/role/index.vue  |   7 -
 snowy-admin-web/src/views/sys/user/index.vue  |  16 +-
 14 files changed, 1914 insertions(+), 79 deletions(-)
 create mode 100644 snowy-admin-web/src/components/XnOrgSelector/README.md
 create mode 100644 snowy-admin-web/src/components/XnOrgSelector/index.vue
 create mode 100644 snowy-admin-web/src/components/XnPositionSelector/README.md
 create mode 100644 snowy-admin-web/src/components/XnPositionSelector/index.vue
 create mode 100644 snowy-admin-web/src/components/XnRoleSelector/README.md
 create mode 100644 snowy-admin-web/src/components/XnRoleSelector/index.vue

diff --git a/snowy-admin-web/src/components/XnOrgSelector/README.md b/snowy-admin-web/src/components/XnOrgSelector/README.md
new file mode 100644
index 00000000..47d6aa04
--- /dev/null
+++ b/snowy-admin-web/src/components/XnOrgSelector/README.md
@@ -0,0 +1,36 @@
+## 小诺机构选择器
+
+### 说明
+
+改组件为小诺机构选择器，可返回id用逗号隔离的字符串或id数组类型的数据格式
+
+@author yubaoshan
+
+@data 2024年7月5日23:59:23
+
+### props定义
+
+| 序号  | 编码                      | 类型            | 说明                           | 默认     |
+|-----|-------------------------|---------------|------------------------------|--------|
+| 1   | radioModel              | Boolean       | 是否单选；与addShow隐藏同时可用          | false  |
+| 2   | dataIsConverterFlw      | Boolean       | 是否为工作流格式                     | false  |
+| 3   | orgTreeApi              | function      | 机构树接口                        | -      |
+| 4   | orgPageApi              | function      | 机构分页接口                       | -      |
+| 5   | orgListByIdListApi | function      | 通过id数组查询list数据接口             | 已配置    |
+| 6   | value                   | object或string | 通过v-model:value绑定数据          | -      |
+| 7   | dataType                | string        | 数据类型object或string            | string |
+| 8   | show                    | Boolean       | 是否显示已选择机构（非表单内、单纯的选择机构需要隐藏）  | true   |
+| 9   | addShow                 | Boolean       | 是否默认的增加人员按钮，与radioModel为或的关系 | true   |
+
+### emits定义
+
+| 序号 | 方法名    | 参数类型           | 说明                              |
+|----|--------|----------------|---------------------------------|
+| 1  | value  | 根据 dataType 而定         | 当选择机构后通过v-model:value绑定到组件上     |
+| 2  | onBack | 根据 dataType 而定 | 通过@onBack 方法返回选中的数据，触发点为选中或删除机构 |
+
+### slot定义
+
+| 序号 | 插槽名    | 用途                | 用途                |
+|----|--------|-------------------|-------------------|
+| 1  | button | 在机构新增按钮后可以插入自定义按钮 | 不满足新增机构按钮样式，可以自定义 |
diff --git a/snowy-admin-web/src/components/XnOrgSelector/index.vue b/snowy-admin-web/src/components/XnOrgSelector/index.vue
new file mode 100644
index 00000000..c5df64e0
--- /dev/null
+++ b/snowy-admin-web/src/components/XnOrgSelector/index.vue
@@ -0,0 +1,579 @@
+<template>
+	<!-- 这是引入后展示的样式 -->
+	<div v-if="props.show">
+		<a-tag v-for="data in dataArray" closable @close="deleteObj(data)" :key="data.id" class="mb-1">{{
+			data.name
+		}}</a-tag>
+		<a-button
+			type="primary"
+			size="small"
+			@click="openModal"
+			v-if="(props.radioModel ? dataArray.length !== 1 : true) && addShow"
+		>
+			<slot name="button"></slot>
+			<span v-if="!hasContent('button')">
+				<plus-outlined />
+				选择
+			</span>
+		</a-button>
+	</div>
+	<!-- 以下是弹窗内容 -->
+	<a-modal
+		v-model:open="visible"
+		title="机构选择"
+		:width="1000"
+		:mask-closable="false"
+		:destroy-on-close="true"
+		@ok="handleOk"
+		@cancel="handleClose"
+	>
+		<a-row :gutter="10">
+			<a-col :span="7">
+				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+					<a-tree
+						v-if="treeData"
+						v-model:expandedKeys="defaultExpandedKeys"
+						:tree-data="treeData"
+						:field-names="treeFieldNames"
+						@select="treeSelect"
+					>
+					</a-tree>
+				</a-card>
+			</a-col>
+			<a-col :span="11">
+				<div class="table-operator xn-mb10">
+					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+						<a-row :gutter="24">
+							<a-col :span="12">
+								<a-form-item name="searchKey">
+									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名" />
+								</a-form-item>
+							</a-col>
+							<a-col :span="12">
+								<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
+								<a-button @click="reset()"> 重置 </a-button>
+							</a-col>
+						</a-row>
+					</a-form>
+				</div>
+				<div class="selector-table">
+					<a-table
+						ref="tableRef"
+						size="small"
+						:columns="commons"
+						:data-source="tableData"
+						:expand-row-by-click="true"
+						:loading="pageLoading"
+						bordered
+						:pagination="false"
+					>
+						<template #title>
+							<span>待选择列表 {{ tableRecordNum }} 条</span>
+							<div v-if="!radioModel" class="xn-fdr">
+								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+							</div>
+						</template>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'action'">
+								<a-button type="dashed" size="small" @click="addRecord(record)"><PlusOutlined /></a-button>
+							</template>
+							<template v-if="column.dataIndex === 'category'">
+								{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
+							</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">
+				<div class="selector-table">
+					<a-table
+						ref="selectedTable"
+						size="small"
+						:columns="selectedCommons"
+						:data-source="selectedData"
+						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
+						bordered
+					>
+						<template #title>
+							<span>已选择: {{ selectedData.length }}</span>
+							<div v-if="!radioModel" class="xn-fdr">
+								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+							</div>
+						</template>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'action'">
+								<a-button type="dashed" danger size="small" @click="delRecord(record)"><MinusOutlined /></a-button>
+							</template>
+						</template>
+					</a-table>
+				</div>
+			</a-col>
+		</a-row>
+	</a-modal>
+</template>
+
+<script setup name="orgSelector">
+	import { message } from 'ant-design-vue'
+	import { remove, isEmpty, cloneDeep } from 'lodash-es'
+	import userCenterApi from '@/api/sys/userCenterApi'
+	import { useSlots } from 'vue'
+	// 弹窗是否打开
+	const visible = ref(false)
+	// 主表格common
+	const commons = [
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			ellipsis: true
+		},
+		{
+			title: '分类',
+			dataIndex: 'category'
+		}
+	]
+	// 选中表格的表格common
+	const selectedCommons = [
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			ellipsis: true
+		}
+	]
+	const props = defineProps({
+		radioModel: {
+			type: Boolean,
+			default: () => false
+		},
+		dataIsConverterFlw: {
+			type: Boolean,
+			default: () => false
+		},
+		orgTreeApi: {
+			type: Function
+		},
+		orgPageApi: {
+			type: Function
+		},
+		orgListByIdListApi: {
+			type: Function
+		},
+		value: {
+			default: () => ''
+		},
+		dataType: {
+			type: String,
+			default: () => 'array'
+		},
+		show: {
+			type: Boolean,
+			default: () => true
+		},
+		addShow: {
+			type: Boolean,
+			default: () => true
+		}
+	})
+	// 主表格的ref 名称
+	const tableRef = ref()
+	// 选中表格的ref 名称
+	const selectedTable = ref()
+	const tableRecordNum = ref()
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
+	const slots = useSlots()
+	// 替换treeNode 中 title,key,children
+	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
+	// 获取机构树数据
+	const treeData = ref()
+	//  默认展开二级树的节点id
+	const defaultExpandedKeys = ref([])
+	const emit = defineEmits(['update:value', 'onBack'])
+	const tableData = ref([])
+	const selectedData = ref([])
+	const recordIds = ref([])
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(10) // 每页条数
+	const total = ref(0) // 数据总数
+	const hasContent = (slotName) => {
+		return !!(slots[slotName] && slots[slotName]().length > 0)
+	}
+	// 打开弹框
+	const showModel = (ids = []) => {
+		const data = goDataConverter(ids)
+		recordIds.value = data
+		getDataNameById(data)
+		openModal()
+	}
+	// 获取机构树的api
+	const orgTree = (param) => {
+		if (typeof props.orgTreeApi === 'function') {
+			return props.orgTreeApi(param)
+		} else {
+			message.warning('未配置机构树API')
+			return Promise.resolve([])
+		}
+	}
+	// 获取列表的api
+	const orgPage = (param) => {
+		if (typeof props.orgPageApi === 'function') {
+			return props.orgPageApi(param)
+		} else {
+			message.warning('未配置机构选择器API')
+			return Promise.resolve([])
+		}
+	}
+	// 获取选中列表的api
+	const orgListByIdList = (param) => {
+		if (typeof props.orgListByIdListApi === 'function') {
+			return props.orgListByIdListApi(param)
+		} else {
+			return userCenterApi.userCenterGetOrgListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
+	const openModal = () => {
+		if (typeof props.orgTreeApi !== 'function' || typeof props.orgPageApi !== 'function') {
+			message.warning('未配置机构选择器API')
+			return
+		}
+		visible.value = true
+		// 获取机构树
+		orgTree()
+			.then((data) => {
+				if (!isEmpty(data)) {
+					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)
+								})
+							}
+						}
+					})
+				}
+			})
+			.finally(() => {
+				cardLoading.value = false
+			})
+		searchFormState.value.size = pageSize.value
+		loadData()
+		if (isEmpty(recordIds.value)) {
+			return
+		}
+		const param = {
+			idList: recordIds.value
+		}
+		selectedTableListLoading.value = true
+		orgListByIdList(param)
+			.then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+	}
+	// 点击删除
+	const deleteObj = (obj) => {
+		// 删除显示的
+		remove(dataArray.value, (item) => item.id === obj.id)
+		// 删除缓存的
+		remove(recordIds.value, (item) => item === obj.id)
+		const value = []
+		const showData = []
+		dataArray.value.forEach((item) => {
+			const obj = {
+				id: item.id,
+				name: item.name
+			}
+			value.push(item.id)
+			// 拷贝一份obj数据
+			const objClone = cloneDeep(obj)
+			showData.push(objClone)
+		})
+		dataArray.value = showData
+		// 判断是否做数据的转换为工作流需要的
+		const resultData = outDataConverter(value)
+		emit('update:value', resultData)
+		emit('onBack', resultData)
+	}
+	// 查询主表格数据
+	const loadData = () => {
+		pageLoading.value = true
+		orgPage(searchFormState.value)
+			.then((data) => {
+				current.value = data.current
+				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
+			})
+	}
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		searchFormState.value.current = page
+		searchFormState.value.size = pageSize
+		loadData()
+	}
+	const judge = () => {
+		return !(props.radioModel && selectedData.value.length > 0)
+	}
+	// 添加记录
+	const addRecord = (record) => {
+		if (!judge()) {
+			message.warning('只可选择一条')
+			return
+		}
+		const selectedRecord = selectedData.value.filter((item) => item.id === record.id)
+		if (selectedRecord.length === 0) {
+			selectedData.value.push(record)
+		} else {
+			message.warning('该记录已存在')
+		}
+	}
+	// 添加全部
+	const addAllPageRecord = () => {
+		let newArray = selectedData.value.concat(tableData.value)
+		let list = []
+		for (let item1 of newArray) {
+			let flag = true
+			for (let item2 of list) {
+				if (item1.id === item2.id) {
+					flag = false
+				}
+			}
+			if (flag) {
+				list.push(item1)
+			}
+		}
+		selectedData.value = list
+	}
+	// 删减记录
+	const delRecord = (record) => {
+		remove(selectedData.value, (item) => item.id === record.id)
+	}
+	// 删减记录
+	const delAllRecord = () => {
+		selectedData.value = []
+	}
+	// 点击树查询
+	const treeSelect = (selectedKeys) => {
+		searchFormState.value.current = 0
+		if (selectedKeys.length > 0) {
+			searchFormState.value.parentId = selectedKeys.toString()
+		} else {
+			delete searchFormState.value.parentId
+		}
+		loadData()
+	}
+	const dataArray = ref([])
+	// 确定
+	const handleOk = () => {
+		dataArray.value = []
+		const value = []
+		const showData = []
+		selectedData.value.forEach((item) => {
+			const obj = {
+				id: item.id,
+				name: item.name
+			}
+			value.push(item.id)
+			// 拷贝一份obj数据
+			const objClone = cloneDeep(obj)
+			showData.push(objClone)
+		})
+		dataArray.value = showData
+		// 判断是否做数据的转换为工作流需要的
+		const resultData = outDataConverter(value)
+		emit('update:value', resultData)
+		emit('onBack', resultData)
+		handleClose()
+	}
+	// 重置
+	const reset = () => {
+		delete searchFormState.value.searchKey
+		loadData()
+	}
+	const handleClose = () => {
+		searchFormState.value = {}
+		tableRecordNum.value = 0
+		tableData.value = []
+		current.value = 0
+		pageSize.value = 20
+		total.value = 0
+		selectedData.value = []
+		// dataArray.value = []
+		visible.value = false
+	}
+	// 数据进入后转换
+	const goDataConverter = (data) => {
+		if (props.dataIsConverterFlw) {
+			const resultData = []
+			// 处理对象
+			if (!isEmpty(data.value)) {
+				const values = data.value.split(',')
+				if (values.length > 0) {
+					values.forEach((id) => {
+						resultData.push(id)
+					})
+				} else {
+					resultData.push(data.value)
+				}
+			} else {
+				// 处理数组
+				if (!isEmpty(data) && !isEmpty(data[0]) && !isEmpty(data[0].value)) {
+					const values = data[0].value.split(',')
+					for (let i = 0; i < values.length; i++) {
+						resultData.push(values[i])
+					}
+				}
+			}
+			return resultData
+		} else {
+			if (getValueType() !== 'string') {
+				return data
+			}
+			if (data.length > 1) {
+				const resultData = []
+				data.split(',').forEach((id) => {
+					resultData.push(id)
+				})
+				return resultData
+			} else {
+				return data
+			}
+		}
+	}
+	// 数据出口转换器
+	const outDataConverter = (data) => {
+		if (props.dataIsConverterFlw) {
+			data = dataArray.value
+			const obj = {}
+			let label = ''
+			let value = ''
+			for (let i = 0; i < data.length; i++) {
+				if (data.length === i + 1) {
+					label = label + data[i].name
+					value = value + data[i].id
+				} else {
+					label = label + data[i].name + ','
+					value = value + data[i].id + ','
+				}
+			}
+			obj.key = 'ORG'
+			obj.label = label
+			obj.value = value
+			obj.extJson = ''
+			return obj
+		} else {
+			if (getValueType() !== 'string') {
+				return data
+			}
+			let resultData = ''
+			data.forEach((id) => {
+				resultData = resultData + ',' + id
+			})
+			resultData = resultData.substring(1, resultData.length)
+			return resultData
+		}
+	}
+	// 获取数据类型
+	const getValueType = () => {
+		if (props.dataType) {
+			return props.dataType
+		} else {
+			if (props.radioModel) {
+				return 'string'
+			}
+			return typeof typeof props.value
+		}
+	}
+	const getDataNameById = (ids) => {
+		if (isEmpty(dataArray.value) && !isEmpty(ids)) {
+			const param = {
+				idList: recordIds.value
+			}
+			// 这里必须转为数组类型的
+			orgListByIdList(param).then((data) => {
+				dataArray.value = data
+			})
+		}
+	}
+	watch(
+		() => props.value,
+		(newValue) => {
+			if (!isEmpty(props.value)) {
+				const ids = goDataConverter(newValue)
+				recordIds.value = ids
+				getDataNameById(ids)
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
+	defineExpose({
+		showModel
+	})
+</script>
+<style lang="less" scoped>
+	.xn-mr-5 {
+		margin-right: 5px;
+	}
+	.xn-mr-10 {
+		margin-right: 10px;
+	}
+	.selectorTreeDiv {
+		max-height: 500px;
+		overflow: auto;
+	}
+	.ant-form-item {
+		margin-bottom: 0 !important;
+	}
+	.selector-table {
+		overflow: auto;
+		max-height: 450px;
+	}
+</style>
diff --git a/snowy-admin-web/src/components/XnPositionSelector/README.md b/snowy-admin-web/src/components/XnPositionSelector/README.md
new file mode 100644
index 00000000..2964be34
--- /dev/null
+++ b/snowy-admin-web/src/components/XnPositionSelector/README.md
@@ -0,0 +1,36 @@
+## 小诺职位选择器
+
+### 说明
+
+改组件为小诺职位选择器，可返回id用逗号隔离的字符串或id数组类型的数据格式
+
+@author yubaoshan
+
+@data 2024年7月5日23:59:23
+
+### props定义
+
+| 序号  | 编码                  | 类型            | 说明                           | 默认     |
+|-----|---------------------|---------------|------------------------------|--------|
+| 1   | radioModel          | Boolean       | 是否单选；与addShow隐藏同时可用          | false  |
+| 2   | dataIsConverterFlw  | Boolean       | 是否为工作流格式                     | false  |
+| 3   | orgTreeApi          | function      | 机构树接口                        | -      |
+| 4   | positionPageApi     | function      | 职位分页接口                       | -      |
+| 5   | positionListByIdListApi | function      | 通过id数组查询list数据接口             | 已配置    |
+| 6   | value               | object或string | 通过v-model:value绑定数据          | -      |
+| 7   | dataType            | string        | 数据类型object或string            | string |
+| 8   | show                | Boolean       | 是否显示已选择职位（非表单内、单纯的选择职位需要隐藏）  | true   |
+| 9   | addShow             | Boolean       | 是否默认的增加人员按钮，与radioModel为或的关系 | true   |
+
+### emits定义
+
+| 序号 | 方法名    | 参数类型           | 说明                              |
+|----|--------|----------------|---------------------------------|
+| 1  | value  | 根据 dataType 而定         | 当选择职位后通过v-model:value绑定到组件上     |
+| 2  | onBack | 根据 dataType 而定 | 通过@onBack 方法返回选中的数据，触发点为选中或删除职位 |
+
+### slot定义
+
+| 序号 | 插槽名    | 用途                | 用途                |
+|----|--------|-------------------|-------------------|
+| 1  | button | 在职位新增按钮后可以插入自定义按钮 | 不满足新增职位按钮样式，可以自定义 |
diff --git a/snowy-admin-web/src/components/XnPositionSelector/index.vue b/snowy-admin-web/src/components/XnPositionSelector/index.vue
new file mode 100644
index 00000000..81aa5875
--- /dev/null
+++ b/snowy-admin-web/src/components/XnPositionSelector/index.vue
@@ -0,0 +1,579 @@
+<template>
+	<!-- 这是引入后展示的样式 -->
+	<div v-if="props.show">
+		<a-tag v-for="data in dataArray" closable @close="deleteObj(data)" :key="data.id" class="mb-1">{{
+			data.name
+		}}</a-tag>
+		<a-button
+			type="primary"
+			size="small"
+			@click="openModal"
+			v-if="(props.radioModel ? dataArray.length !== 1 : true) && addShow"
+		>
+			<slot name="button"></slot>
+			<span v-if="!hasContent('button')">
+				<plus-outlined />
+				选择
+			</span>
+		</a-button>
+	</div>
+	<!-- 以下是弹窗内容 -->
+	<a-modal
+		v-model:open="visible"
+		title="职位选择"
+		:width="1000"
+		:mask-closable="false"
+		:destroy-on-close="true"
+		@ok="handleOk"
+		@cancel="handleClose"
+	>
+		<a-row :gutter="10">
+			<a-col :span="7">
+				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+					<a-tree
+						v-if="treeData"
+						v-model:expandedKeys="defaultExpandedKeys"
+						:tree-data="treeData"
+						:field-names="treeFieldNames"
+						@select="treeSelect"
+					>
+					</a-tree>
+				</a-card>
+			</a-col>
+			<a-col :span="11">
+				<div class="table-operator xn-mb10">
+					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+						<a-row :gutter="24">
+							<a-col :span="12">
+								<a-form-item name="searchKey">
+									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
+								</a-form-item>
+							</a-col>
+							<a-col :span="12">
+								<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
+								<a-button @click="reset()"> 重置 </a-button>
+							</a-col>
+						</a-row>
+					</a-form>
+				</div>
+				<div class="selector-table">
+					<a-table
+						ref="tableRef"
+						size="small"
+						:columns="commons"
+						:data-source="tableData"
+						:expand-row-by-click="true"
+						:loading="pageLoading"
+						bordered
+						:pagination="false"
+					>
+						<template #title>
+							<span>待选择列表 {{ tableRecordNum }} 条</span>
+							<div v-if="!radioModel" class="xn-fdr">
+								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+							</div>
+						</template>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'action'">
+								<a-button type="dashed" size="small" @click="addRecord(record)"><PlusOutlined /></a-button>
+							</template>
+							<template v-if="column.dataIndex === 'category'">
+								{{ $TOOL.dictTypeData('POSITION_CATEGORY', record.category) }}
+							</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">
+				<div class="selector-table">
+					<a-table
+						ref="selectedTable"
+						size="small"
+						:columns="selectedCommons"
+						:data-source="selectedData"
+						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
+						bordered
+					>
+						<template #title>
+							<span>已选择: {{ selectedData.length }}</span>
+							<div v-if="!radioModel" class="xn-fdr">
+								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+							</div>
+						</template>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'action'">
+								<a-button type="dashed" danger size="small" @click="delRecord(record)"><MinusOutlined /></a-button>
+							</template>
+						</template>
+					</a-table>
+				</div>
+			</a-col>
+		</a-row>
+	</a-modal>
+</template>
+
+<script setup name="positionSelector">
+	import { message } from 'ant-design-vue'
+	import { remove, isEmpty, cloneDeep } from 'lodash-es'
+	import userCenterApi from '@/api/sys/userCenterApi'
+	import { useSlots } from 'vue'
+	// 弹窗是否打开
+	const visible = ref(false)
+	// 主表格common
+	const commons = [
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			ellipsis: true
+		},
+		{
+			title: '分类',
+			dataIndex: 'category'
+		}
+	]
+	// 选中表格的表格common
+	const selectedCommons = [
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			ellipsis: true
+		}
+	]
+	const props = defineProps({
+		radioModel: {
+			type: Boolean,
+			default: () => false
+		},
+		dataIsConverterFlw: {
+			type: Boolean,
+			default: () => false
+		},
+		orgTreeApi: {
+			type: Function
+		},
+		positionPageApi: {
+			type: Function
+		},
+		positionListByIdListApi: {
+			type: Function
+		},
+		value: {
+			default: () => ''
+		},
+		dataType: {
+			type: String,
+			default: () => 'array'
+		},
+		show: {
+			type: Boolean,
+			default: () => true
+		},
+		addShow: {
+			type: Boolean,
+			default: () => true
+		}
+	})
+	// 主表格的ref 名称
+	const tableRef = ref()
+	// 选中表格的ref 名称
+	const selectedTable = ref()
+	const tableRecordNum = ref()
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
+	const slots = useSlots()
+	// 替换treeNode 中 title,key,children
+	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
+	// 获取职位树数据
+	const treeData = ref()
+	//  默认展开二级树的节点id
+	const defaultExpandedKeys = ref([])
+	const emit = defineEmits(['update:value', 'onBack'])
+	const tableData = ref([])
+	const selectedData = ref([])
+	const recordIds = ref([])
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(10) // 每页条数
+	const total = ref(0) // 数据总数
+	const hasContent = (slotName) => {
+		return !!(slots[slotName] && slots[slotName]().length > 0)
+	}
+	// 打开弹框
+	const showModel = (ids = []) => {
+		const data = goDataConverter(ids)
+		recordIds.value = data
+		getDataNameById(data)
+		openModal()
+	}
+	// 获取机构树的api
+	const orgTree = (param) => {
+		if (typeof props.orgTreeApi === 'function') {
+			return props.orgTreeApi(param)
+		} else {
+			message.warning('未配置机构树API')
+			return Promise.resolve([])
+		}
+	}
+	// 获取列表的api
+	const positionPage = (param) => {
+		if (typeof props.positionPageApi === 'function') {
+			return props.positionPageApi(param)
+		} else {
+			message.warning('未配置职位选择器API')
+			return Promise.resolve([])
+		}
+	}
+	// 获取选中列表的api
+	const positionListByIdList = (param) => {
+		if (typeof props.positionListByIdListApi === 'function') {
+			return props.positionListByIdListApi(param)
+		} else {
+			return userCenterApi.userCenterGetPositionListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
+	const openModal = () => {
+		if (typeof props.orgTreeApi !== 'function' || typeof props.positionPageApi !== 'function') {
+			message.warning('未配置职位选择器API')
+			return
+		}
+		visible.value = true
+		// 获取机构树
+		orgTree()
+			.then((data) => {
+				if (!isEmpty(data)) {
+					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)
+								})
+							}
+						}
+					})
+				}
+			})
+			.finally(() => {
+				cardLoading.value = false
+			})
+		searchFormState.value.size = pageSize.value
+		loadData()
+		if (isEmpty(recordIds.value)) {
+			return
+		}
+		const param = {
+			idList: recordIds.value
+		}
+		selectedTableListLoading.value = true
+		positionListByIdList(param)
+			.then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+	}
+	// 点击删除
+	const deleteObj = (obj) => {
+		// 删除显示的
+		remove(dataArray.value, (item) => item.id === obj.id)
+		// 删除缓存的
+		remove(recordIds.value, (item) => item === obj.id)
+		const value = []
+		const showData = []
+		dataArray.value.forEach((item) => {
+			const obj = {
+				id: item.id,
+				name: item.name
+			}
+			value.push(item.id)
+			// 拷贝一份obj数据
+			const objClone = cloneDeep(obj)
+			showData.push(objClone)
+		})
+		dataArray.value = showData
+		// 判断是否做数据的转换为工作流需要的
+		const resultData = outDataConverter(value)
+		emit('update:value', resultData)
+		emit('onBack', resultData)
+	}
+	// 查询主表格数据
+	const loadData = () => {
+		pageLoading.value = true
+		positionPage(searchFormState.value)
+			.then((data) => {
+				current.value = data.current
+				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
+			})
+	}
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		searchFormState.value.current = page
+		searchFormState.value.size = pageSize
+		loadData()
+	}
+	const judge = () => {
+		return !(props.radioModel && selectedData.value.length > 0)
+	}
+	// 添加记录
+	const addRecord = (record) => {
+		if (!judge()) {
+			message.warning('只可选择一条')
+			return
+		}
+		const selectedRecord = selectedData.value.filter((item) => item.id === record.id)
+		if (selectedRecord.length === 0) {
+			selectedData.value.push(record)
+		} else {
+			message.warning('该记录已存在')
+		}
+	}
+	// 添加全部
+	const addAllPageRecord = () => {
+		let newArray = selectedData.value.concat(tableData.value)
+		let list = []
+		for (let item1 of newArray) {
+			let flag = true
+			for (let item2 of list) {
+				if (item1.id === item2.id) {
+					flag = false
+				}
+			}
+			if (flag) {
+				list.push(item1)
+			}
+		}
+		selectedData.value = list
+	}
+	// 删减记录
+	const delRecord = (record) => {
+		remove(selectedData.value, (item) => item.id === record.id)
+	}
+	// 删减记录
+	const delAllRecord = () => {
+		selectedData.value = []
+	}
+	// 点击树查询
+	const treeSelect = (selectedKeys) => {
+		searchFormState.value.current = 0
+		if (selectedKeys.length > 0) {
+			searchFormState.value.orgId = selectedKeys.toString()
+		} else {
+			delete searchFormState.value.orgId
+		}
+		loadData()
+	}
+	const dataArray = ref([])
+	// 确定
+	const handleOk = () => {
+		dataArray.value = []
+		const value = []
+		const showData = []
+		selectedData.value.forEach((item) => {
+			const obj = {
+				id: item.id,
+				name: item.name
+			}
+			value.push(item.id)
+			// 拷贝一份obj数据
+			const objClone = cloneDeep(obj)
+			showData.push(objClone)
+		})
+		dataArray.value = showData
+		// 判断是否做数据的转换为工作流需要的
+		const resultData = outDataConverter(value)
+		emit('update:value', resultData)
+		emit('onBack', resultData)
+		handleClose()
+	}
+	// 重置
+	const reset = () => {
+		delete searchFormState.value.searchKey
+		loadData()
+	}
+	const handleClose = () => {
+		searchFormState.value = {}
+		tableRecordNum.value = 0
+		tableData.value = []
+		current.value = 0
+		pageSize.value = 20
+		total.value = 0
+		selectedData.value = []
+		// dataArray.value = []
+		visible.value = false
+	}
+	// 数据进入后转换
+	const goDataConverter = (data) => {
+		if (props.dataIsConverterFlw) {
+			const resultData = []
+			// 处理对象
+			if (!isEmpty(data.value)) {
+				const values = data.value.split(',')
+				if (values.length > 0) {
+					values.forEach((id) => {
+						resultData.push(id)
+					})
+				} else {
+					resultData.push(data.value)
+				}
+			} else {
+				// 处理数组
+				if (!isEmpty(data) && !isEmpty(data[0]) && !isEmpty(data[0].value)) {
+					const values = data[0].value.split(',')
+					for (let i = 0; i < values.length; i++) {
+						resultData.push(values[i])
+					}
+				}
+			}
+			return resultData
+		} else {
+			if (getValueType() !== 'string') {
+				return data
+			}
+			if (data.length > 1) {
+				const resultData = []
+				data.split(',').forEach((id) => {
+					resultData.push(id)
+				})
+				return resultData
+			} else {
+				return data
+			}
+		}
+	}
+	// 数据出口转换器
+	const outDataConverter = (data) => {
+		if (props.dataIsConverterFlw) {
+			data = dataArray.value
+			const obj = {}
+			let label = ''
+			let value = ''
+			for (let i = 0; i < data.length; i++) {
+				if (data.length === i + 1) {
+					label = label + data[i].name
+					value = value + data[i].id
+				} else {
+					label = label + data[i].name + ','
+					value = value + data[i].id + ','
+				}
+			}
+			obj.key = 'POSITION'
+			obj.label = label
+			obj.value = value
+			obj.extJson = ''
+			return obj
+		} else {
+			if (getValueType() !== 'string') {
+				return data
+			}
+			let resultData = ''
+			data.forEach((id) => {
+				resultData = resultData + ',' + id
+			})
+			resultData = resultData.substring(1, resultData.length)
+			return resultData
+		}
+	}
+	// 获取数据类型
+	const getValueType = () => {
+		if (props.dataType) {
+			return props.dataType
+		} else {
+			if (props.radioModel) {
+				return 'string'
+			}
+			return typeof typeof props.value
+		}
+	}
+	const getDataNameById = (ids) => {
+		if (isEmpty(dataArray.value) && !isEmpty(ids)) {
+			const param = {
+				idList: recordIds.value
+			}
+			// 这里必须转为数组类型的
+			positionListByIdList(param).then((data) => {
+				dataArray.value = data
+			})
+		}
+	}
+	watch(
+		() => props.value,
+		(newValue) => {
+			if (!isEmpty(props.value)) {
+				const ids = goDataConverter(newValue)
+				recordIds.value = ids
+				getDataNameById(ids)
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
+	defineExpose({
+		showModel
+	})
+</script>
+<style lang="less" scoped>
+	.xn-mr-5 {
+		margin-right: 5px;
+	}
+	.xn-mr-10 {
+		margin-right: 10px;
+	}
+	.selectorTreeDiv {
+		max-height: 500px;
+		overflow: auto;
+	}
+	.ant-form-item {
+		margin-bottom: 0 !important;
+	}
+	.selector-table {
+		overflow: auto;
+		max-height: 450px;
+	}
+</style>
diff --git a/snowy-admin-web/src/components/XnRoleSelector/README.md b/snowy-admin-web/src/components/XnRoleSelector/README.md
new file mode 100644
index 00000000..0b26be8f
--- /dev/null
+++ b/snowy-admin-web/src/components/XnRoleSelector/README.md
@@ -0,0 +1,36 @@
+## 小诺角色选择器
+
+### 说明
+
+改组件为小诺角色选择器，可返回id用逗号隔离的字符串或id数组类型的数据格式
+
+@author yubaoshan
+
+@data 2024年7月5日23:59:23
+
+### props定义
+
+| 序号  | 编码                  | 类型            | 说明                           | 默认     |
+|-----|---------------------|---------------|------------------------------|--------|
+| 1   | radioModel          | Boolean       | 是否单选；与addShow隐藏同时可用          | false  |
+| 2   | dataIsConverterFlw  | Boolean       | 是否为工作流格式                     | false  |
+| 3   | orgTreeApi          | function      | 机构树接口                        | -      |
+| 4   | rolePageApi         | function      | 角色分页接口                       | -      |
+| 5   | roleListByIdListApi | function      | 通过id数组查询list数据接口             | 已配置    |
+| 6   | value               | object或string | 通过v-model:value绑定数据          | -      |
+| 7   | dataType            | string        | 数据类型object或string            | string |
+| 8   | show                | Boolean       | 是否显示已选择角色（非表单内、单纯的选择角色需要隐藏）  | true   |
+| 9   | addShow             | Boolean       | 是否默认的增加人员按钮，与radioModel为或的关系 | true   |
+
+### emits定义
+
+| 序号 | 方法名    | 参数类型           | 说明                              |
+|----|--------|----------------|---------------------------------|
+| 1  | value  | 根据 dataType 而定         | 当选择角色后通过v-model:value绑定到组件上     |
+| 2  | onBack | 根据 dataType 而定 | 通过@onBack 方法返回选中的数据，触发点为选中或删除角色 |
+
+### slot定义
+
+| 序号 | 插槽名    | 用途                | 用途                |
+|----|--------|-------------------|-------------------|
+| 1  | button | 在角色新增按钮后可以插入自定义按钮 | 不满足新增角色按钮样式，可以自定义 |
diff --git a/snowy-admin-web/src/components/XnRoleSelector/index.vue b/snowy-admin-web/src/components/XnRoleSelector/index.vue
new file mode 100644
index 00000000..86c55279
--- /dev/null
+++ b/snowy-admin-web/src/components/XnRoleSelector/index.vue
@@ -0,0 +1,607 @@
+<template>
+	<!-- 这是引入后展示的样式 -->
+	<div v-if="props.show">
+		<a-tag v-for="data in dataArray" closable @close="deleteObj(data)" :key="data.id" class="mb-1">{{
+			data.name
+		}}</a-tag>
+		<a-button
+			type="primary"
+			size="small"
+			@click="openModal"
+			v-if="(props.radioModel ? dataArray.length !== 1 : true) && addShow"
+		>
+			<slot name="button"></slot>
+			<span v-if="!hasContent('button')">
+				<plus-outlined />
+				选择
+			</span>
+		</a-button>
+	</div>
+	<!-- 以下是弹窗内容 -->
+	<a-modal
+		v-model:open="visible"
+		title="角色选择"
+		:width="1000"
+		:mask-closable="false"
+		:destroy-on-close="true"
+		@ok="handleOk"
+		@cancel="handleClose"
+	>
+		<a-row :gutter="10">
+			<a-col :span="7">
+				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+					<a-tree
+						v-if="treeData"
+						v-model:expandedKeys="defaultExpandedKeys"
+						:tree-data="treeData"
+						:field-names="treeFieldNames"
+						@select="treeSelect"
+					>
+					</a-tree>
+				</a-card>
+			</a-col>
+			<a-col :span="11">
+				<div class="table-operator xn-mb10">
+					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+						<a-row :gutter="24">
+							<a-col :span="12">
+								<a-form-item name="searchKey">
+									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
+								</a-form-item>
+							</a-col>
+							<a-col :span="12">
+								<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
+								<a-button @click="reset()"> 重置 </a-button>
+							</a-col>
+						</a-row>
+					</a-form>
+				</div>
+				<div class="selector-table">
+					<a-table
+						ref="tableRef"
+						size="small"
+						:columns="commons"
+						:data-source="tableData"
+						:expand-row-by-click="true"
+						:loading="pageLoading"
+						bordered
+						:pagination="false"
+					>
+						<template #title>
+							<span>待选择列表 {{ tableRecordNum }} 条</span>
+							<div v-if="!radioModel" class="xn-fdr">
+								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+							</div>
+						</template>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'action'">
+								<a-button type="dashed" size="small" @click="addRecord(record)"><PlusOutlined /></a-button>
+							</template>
+							<template v-if="column.dataIndex === 'category'">
+								{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
+							</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">
+				<div class="selector-table">
+					<a-table
+						ref="selectedTable"
+						size="small"
+						:columns="selectedCommons"
+						:data-source="selectedData"
+						:expand-row-by-click="true"
+						:loading="selectedTableListLoading"
+						bordered
+					>
+						<template #title>
+							<span>已选择: {{ selectedData.length }}</span>
+							<div v-if="!radioModel" class="xn-fdr">
+								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+							</div>
+						</template>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'action'">
+								<a-button type="dashed" danger size="small" @click="delRecord(record)"><MinusOutlined /></a-button>
+							</template>
+						</template>
+					</a-table>
+				</div>
+			</a-col>
+		</a-row>
+	</a-modal>
+</template>
+
+<script setup name="roleSelector">
+	import { message } from 'ant-design-vue'
+	import { remove, isEmpty, cloneDeep } from 'lodash-es'
+	import userCenterApi from '@/api/sys/userCenterApi'
+	import { useSlots } from 'vue'
+	// 弹窗是否打开
+	const visible = ref(false)
+	// 主表格common
+	const commons = [
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			ellipsis: true
+		},
+		{
+			title: '分类',
+			dataIndex: 'category'
+		}
+	]
+	// 选中表格的表格common
+	const selectedCommons = [
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			ellipsis: true
+		}
+	]
+	const props = defineProps({
+		radioModel: {
+			type: Boolean,
+			default: () => false
+		},
+		dataIsConverterFlw: {
+			type: Boolean,
+			default: () => false
+		},
+		orgTreeApi: {
+			type: Function
+		},
+		rolePageApi: {
+			type: Function
+		},
+		roleListByIdListApi: {
+			type: Function
+		},
+		value: {
+			default: () => ''
+		},
+		dataType: {
+			type: String,
+			default: () => 'array'
+		},
+		show: {
+			type: Boolean,
+			default: () => true
+		},
+		addShow: {
+			type: Boolean,
+			default: () => true
+		},
+		// 是否展示‘全局’这个节点
+		roleGlobal: {
+			type: Boolean,
+			default: true,
+			required: false
+		}
+	})
+	// 主表格的ref 名称
+	const tableRef = ref()
+	// 选中表格的ref 名称
+	const selectedTable = ref()
+	const tableRecordNum = ref()
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const cardLoading = ref(true)
+	const pageLoading = ref(false)
+	const selectedTableListLoading = ref(false)
+	const slots = useSlots()
+	// 替换treeNode 中 title,key,children
+	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
+	// 获取职位树数据
+	const treeData = ref()
+	//  默认展开二级树的节点id
+	const defaultExpandedKeys = ref([])
+	const emit = defineEmits(['update:value', 'onBack'])
+	const tableData = ref([])
+	const selectedData = ref([])
+	const recordIds = ref([])
+	// 分页相关
+	const current = ref(0) // 当前页数
+	const pageSize = ref(10) // 每页条数
+	const total = ref(0) // 数据总数
+	const hasContent = (slotName) => {
+		return !!(slots[slotName] && slots[slotName]().length > 0)
+	}
+	// 打开弹框
+	const showModel = (ids = []) => {
+		const data = goDataConverter(ids)
+		recordIds.value = data
+		getDataNameById(data)
+		openModal()
+	}
+	// 获取机构树的api
+	const orgTree = (param) => {
+		if (typeof props.orgTreeApi === 'function') {
+			return props.orgTreeApi(param)
+		} else {
+			message.warning('未配置机构树API')
+			return Promise.resolve([])
+		}
+	}
+	// 获取列表的api
+	const rolePage = (param) => {
+		if (typeof props.rolePageApi === 'function') {
+			return props.rolePageApi(param)
+		} else {
+			message.warning('未配置角色选择器API')
+			return Promise.resolve([])
+		}
+	}
+	// 获取选中列表的api
+	const roleListByIdList = (param) => {
+		if (typeof props.roleListByIdListApi === 'function') {
+			return props.roleListByIdListApi(param)
+		} else {
+			return userCenterApi.userCenterGetRoleListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
+	const openModal = () => {
+		if (typeof props.orgTreeApi !== 'function' || typeof props.rolePageApi !== 'function') {
+			message.warning('未配置角色选择器API')
+			return
+		}
+		visible.value = true
+		// 获取机构树
+		orgTree()
+			.then((data) => {
+				if (!isEmpty(data)) {
+					treeData.value = data
+					// 树中插入全局角色类型
+					if (props.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)
+								})
+							}
+						}
+					})
+				}
+			})
+			.finally(() => {
+				cardLoading.value = false
+			})
+		searchFormState.value.size = pageSize.value
+		loadData()
+		if (isEmpty(recordIds.value)) {
+			return
+		}
+		const param = {
+			idList: recordIds.value
+		}
+		selectedTableListLoading.value = true
+		roleListByIdList(param)
+			.then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
+	}
+	// 点击删除
+	const deleteObj = (obj) => {
+		// 删除显示的
+		remove(dataArray.value, (item) => item.id === obj.id)
+		// 删除缓存的
+		remove(recordIds.value, (item) => item === obj.id)
+		const value = []
+		const showData = []
+		dataArray.value.forEach((item) => {
+			const obj = {
+				id: item.id,
+				name: item.name
+			}
+			value.push(item.id)
+			// 拷贝一份obj数据
+			const objClone = cloneDeep(obj)
+			showData.push(objClone)
+		})
+		dataArray.value = showData
+		// 判断是否做数据的转换为工作流需要的
+		const resultData = outDataConverter(value)
+		emit('update:value', resultData)
+		emit('onBack', resultData)
+	}
+	// 查询主表格数据
+	const loadData = () => {
+		// 如果不是用全局的，我们每次查询加上这个条件
+		if (!props.roleGlobal) {
+			searchFormState.value.category = 'ORG'
+		}
+		pageLoading.value = true
+		rolePage(searchFormState.value)
+			.then((data) => {
+				current.value = data.current
+				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
+			})
+	}
+	// pageSize改变回调分页事件
+	const paginationChange = (page, pageSize) => {
+		searchFormState.value.current = page
+		searchFormState.value.size = pageSize
+		loadData()
+	}
+	const judge = () => {
+		return !(props.radioModel && selectedData.value.length > 0)
+	}
+	// 添加记录
+	const addRecord = (record) => {
+		if (!judge()) {
+			message.warning('只可选择一条')
+			return
+		}
+		const selectedRecord = selectedData.value.filter((item) => item.id === record.id)
+		if (selectedRecord.length === 0) {
+			selectedData.value.push(record)
+		} else {
+			message.warning('该记录已存在')
+		}
+	}
+	// 添加全部
+	const addAllPageRecord = () => {
+		let newArray = selectedData.value.concat(tableData.value)
+		let list = []
+		for (let item1 of newArray) {
+			let flag = true
+			for (let item2 of list) {
+				if (item1.id === item2.id) {
+					flag = false
+				}
+			}
+			if (flag) {
+				list.push(item1)
+			}
+		}
+		selectedData.value = list
+	}
+	// 删减记录
+	const delRecord = (record) => {
+		remove(selectedData.value, (item) => item.id === record.id)
+	}
+	// 删减记录
+	const delAllRecord = () => {
+		selectedData.value = []
+	}
+	// 点击树查询
+	const treeSelect = (selectedKeys) => {
+		searchFormState.value.current = 0
+		if (selectedKeys.length > 0) {
+			if (selectedKeys[0] === 'GLOBAL') {
+				searchFormState.value.category = selectedKeys[0]
+				delete searchFormState.value.orgId
+			} else {
+				searchFormState.value.orgId = selectedKeys.toString()
+				delete searchFormState.value.category
+			}
+		} else {
+			delete searchFormState.value.category
+			delete searchFormState.value.orgId
+		}
+		loadData()
+	}
+	const dataArray = ref([])
+	// 确定
+	const handleOk = () => {
+		dataArray.value = []
+		const value = []
+		const showData = []
+		selectedData.value.forEach((item) => {
+			const obj = {
+				id: item.id,
+				name: item.name
+			}
+			value.push(item.id)
+			// 拷贝一份obj数据
+			const objClone = cloneDeep(obj)
+			showData.push(objClone)
+		})
+		dataArray.value = showData
+		// 判断是否做数据的转换为工作流需要的
+		const resultData = outDataConverter(value)
+		emit('update:value', resultData)
+		emit('onBack', resultData)
+		handleClose()
+	}
+	// 重置
+	const reset = () => {
+		delete searchFormState.value.searchKey
+		loadData()
+	}
+	const handleClose = () => {
+		searchFormState.value = {}
+		tableRecordNum.value = 0
+		tableData.value = []
+		current.value = 0
+		pageSize.value = 20
+		total.value = 0
+		selectedData.value = []
+		// dataArray.value = []
+		visible.value = false
+	}
+	// 数据进入后转换
+	const goDataConverter = (data) => {
+		if (props.dataIsConverterFlw) {
+			const resultData = []
+			// 处理对象
+			if (!isEmpty(data.value)) {
+				const values = data.value.split(',')
+				if (values.length > 0) {
+					values.forEach((id) => {
+						resultData.push(id)
+					})
+				} else {
+					resultData.push(data.value)
+				}
+			} else {
+				// 处理数组
+				if (!isEmpty(data) && !isEmpty(data[0]) && !isEmpty(data[0].value)) {
+					const values = data[0].value.split(',')
+					for (let i = 0; i < values.length; i++) {
+						resultData.push(values[i])
+					}
+				}
+			}
+			return resultData
+		} else {
+			if (getValueType() !== 'string') {
+				return data
+			}
+			if (data.length > 1) {
+				const resultData = []
+				data.split(',').forEach((id) => {
+					resultData.push(id)
+				})
+				return resultData
+			} else {
+				return data
+			}
+		}
+	}
+	// 数据出口转换器
+	const outDataConverter = (data) => {
+		if (props.dataIsConverterFlw) {
+			data = dataArray.value
+			const obj = {}
+			let label = ''
+			let value = ''
+			for (let i = 0; i < data.length; i++) {
+				if (data.length === i + 1) {
+					label = label + data[i].name
+					value = value + data[i].id
+				} else {
+					label = label + data[i].name + ','
+					value = value + data[i].id + ','
+				}
+			}
+			obj.key = 'ROLE'
+			obj.label = label
+			obj.value = value
+			obj.extJson = ''
+			return obj
+		} else {
+			if (getValueType() !== 'string') {
+				return data
+			}
+			let resultData = ''
+			data.forEach((id) => {
+				resultData = resultData + ',' + id
+			})
+			resultData = resultData.substring(1, resultData.length)
+			return resultData
+		}
+	}
+	// 获取数据类型
+	const getValueType = () => {
+		if (props.dataType) {
+			return props.dataType
+		} else {
+			if (props.radioModel) {
+				return 'string'
+			}
+			return typeof typeof props.value
+		}
+	}
+	const getDataNameById = (ids) => {
+		if (isEmpty(dataArray.value) && !isEmpty(ids)) {
+			const param = {
+				idList: recordIds.value
+			}
+			// 这里必须转为数组类型的
+			roleListByIdList(param).then((data) => {
+				dataArray.value = data
+			})
+		}
+	}
+	watch(
+		() => props.value,
+		(newValue) => {
+			if (!isEmpty(props.value)) {
+				const ids = goDataConverter(newValue)
+				recordIds.value = ids
+				getDataNameById(ids)
+			}
+		},
+		{
+			immediate: true // 立即执行
+		}
+	)
+	defineExpose({
+		showModel
+	})
+</script>
+<style lang="less" scoped>
+	.xn-mr-5 {
+		margin-right: 5px;
+	}
+	.xn-mr-10 {
+		margin-right: 10px;
+	}
+	.selectorTreeDiv {
+		max-height: 500px;
+		overflow: auto;
+	}
+	.ant-form-item {
+		margin-bottom: 0 !important;
+	}
+	.selector-table {
+		overflow: auto;
+		max-height: 450px;
+	}
+</style>
diff --git a/snowy-admin-web/src/components/XnUserSelector/index.vue b/snowy-admin-web/src/components/XnUserSelector/index.vue
index c183612b..3c6cb356 100644
--- a/snowy-admin-web/src/components/XnUserSelector/index.vue
+++ b/snowy-admin-web/src/components/XnUserSelector/index.vue
@@ -1,6 +1,6 @@
 <template>
 	<!-- 这是引入后展示的样式 -->
-	<div style="display: flex" v-if="props.userShow">
+	<a-flex wrap="wrap" gap="small" v-if="props.userShow">
 		<div
 			class="user-container"
 			v-for="(user, index) in userObj"
@@ -22,7 +22,7 @@
 			<PlusOutlined />
 		</a-button>
 		<slot name="button"></slot>
-	</div>
+	</a-flex>
 
 	<!-- 以下是弹窗内容 -->
 	<a-modal
@@ -137,6 +137,7 @@
 <script setup name="userSelector">
 	import { message } from 'ant-design-vue'
 	import { remove, isEmpty, cloneDeep } from 'lodash-es'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	// 弹窗是否打开
 	const visible = ref(false)
 	const deleteShow = ref('')
@@ -187,16 +188,13 @@
 			default: () => false
 		},
 		orgTreeApi: {
-			type: Function,
-			default: () => undefined
+			type: Function
 		},
 		userPageApi: {
-			type: Function,
-			default: () => undefined
+			type: Function
 		},
 		userListByIdListApi: {
-			type: Function,
-			default: () => undefined
+			type: Function
 		},
 		value: {
 			default: () => ''
@@ -238,6 +236,16 @@
 	const current = ref(0) // 当前页数
 	const pageSize = ref(20) // 每页条数
 	const total = ref(0) // 数据总数
+	// 获取选中列表的api
+	const userListByIdList = (param) => {
+		if (typeof props.userListByIdListApi === 'function') {
+			return props.userListByIdListApi(param)
+		} else {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
 	// 打开弹框
 	const showUserPlusModal = (ids = []) => {
 		const data = goDataConverter(ids)
@@ -260,10 +268,6 @@
 			message.warning('未配置选择器需要的userPageApi接口')
 			return
 		}
-		if (typeof props.userListByIdListApi !== 'function') {
-			message.warning('未配置选择器需要的userListByIdListApi接口')
-			return
-		}
 		visible.value = true
 		// 获取机构树
 		props
@@ -291,23 +295,20 @@
 			})
 		searchFormState.value.size = pageSize.value
 		loadData()
-		if (props.userListByIdListApi) {
-			if (isEmpty(recordIds.value)) {
-				return
-			}
-			const param = {
-				idList: recordIds.value
-			}
-			selectedTableListLoading.value = true
-			props
-				.userListByIdListApi(param)
-				.then((data) => {
-					selectedData.value = data
-				})
-				.finally(() => {
-					selectedTableListLoading.value = false
-				})
+		if (isEmpty(recordIds.value)) {
+			return
 		}
+		const param = {
+			idList: recordIds.value
+		}
+		selectedTableListLoading.value = true
+		userListByIdList(param)
+			.then((data) => {
+				selectedData.value = data
+			})
+			.finally(() => {
+				selectedTableListLoading.value = false
+			})
 	}
 	// 点击头像删除用户
 	const deleteUser = (user) => {
@@ -543,7 +544,7 @@
 				idList: recordIds.value
 			}
 			// 这里必须转为数组类型的
-			props.userListByIdListApi(param).then((data) => {
+			userListByIdList(param).then((data) => {
 				userObj.value = data
 			})
 		}
diff --git a/snowy-admin-web/src/style/index.less b/snowy-admin-web/src/style/index.less
index 2c7f5cb0..b866230b 100644
--- a/snowy-admin-web/src/style/index.less
+++ b/snowy-admin-web/src/style/index.less
@@ -363,6 +363,8 @@ body,
 .gen-preview-content,
 .ant-menu,
 .ant-tabs-dropdown-menu,
+.xn-table,
+.selector-table,
 
 .admin-ui-main{
 	&::-webkit-scrollbar {
diff --git a/snowy-admin-web/src/views/biz/org/form.vue b/snowy-admin-web/src/views/biz/org/form.vue
index 85d8e809..537e5beb 100644
--- a/snowy-admin-web/src/views/biz/org/form.vue
+++ b/snowy-admin-web/src/views/biz/org/form.vue
@@ -43,7 +43,6 @@
 				<xn-user-selector
 					:org-tree-api="selectorApiFunction.orgTreeApi"
 					:user-page-api="selectorApiFunction.userPageApi"
-					:user-list-by-id-list-api="selectorApiFunction.checkedUserListApi"
 					:radio-model="true"
 					v-model:value="formData.directorId"
 				/>
@@ -59,7 +58,6 @@
 <script setup name="bizOrgForm">
 	import { required } from '@/utils/formRules'
 	import bizOrgApi from '@/api/biz/bizOrgApi'
-	import userCenterApi from '@/api/sys/userCenterApi'
 	import tool from '@/utils/tool'
 
 	// 定义emit事件
@@ -144,11 +142,6 @@
 			return bizOrgApi.orgUserSelector(param).then((data) => {
 				return Promise.resolve(data)
 			})
-		},
-		checkedUserListApi: (param) => {
-			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
-				return Promise.resolve(data)
-			})
 		}
 	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
diff --git a/snowy-admin-web/src/views/biz/user/index.vue b/snowy-admin-web/src/views/biz/user/index.vue
index 0ba39240..522efd78 100644
--- a/snowy-admin-web/src/views/biz/user/index.vue
+++ b/snowy-admin-web/src/views/biz/user/index.vue
@@ -145,11 +145,11 @@
 		</a-col>
 	</a-row>
 	<Form ref="formRef" @successful="tableRef.refresh()" />
-	<role-selector-plus
+	<xn-role-selector
 		ref="RoleSelectorPlusRef"
 		:org-tree-api="selectorApiFunction.orgTreeApi"
 		:role-page-api="selectorApiFunction.rolePageApi"
-		:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
+		:add-show="false"
 		:role-global="true"
 		@onBack="roleBack"
 	/>
@@ -161,8 +161,6 @@
 	import downloadUtil from '@/utils/downloadUtil'
 	import bizUserApi from '@/api/biz/bizUserApi'
 	import bizOrgApi from '@/api/biz/bizOrgApi'
-	import userCenterApi from '@/api/sys/userCenterApi'
-	import RoleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
 
 	const columns = [
@@ -369,7 +367,7 @@
 			id: record.id
 		}
 		bizUserApi.userOwnRole(param).then((data) => {
-			RoleSelectorPlusRef.value.showRolePlusModal(data)
+			RoleSelectorPlusRef.value.showModel(data)
 		})
 	}
 	// 角色选择回调
@@ -380,7 +378,7 @@
 		}
 		if (value.length > 0) {
 			value.forEach((item) => {
-				params.roleIdList.push(item.id)
+				params.roleIdList.push(item)
 			})
 		}
 		bizUserApi.grantRole(params).then(() => {})
@@ -409,11 +407,6 @@
 			return bizUserApi.userRoleSelector(param).then((data) => {
 				return Promise.resolve(data)
 			})
-		},
-		checkedRoleListApi: (param) => {
-			return userCenterApi.userCenterGetRoleListByIdList(param).then((data) => {
-				return Promise.resolve(data)
-			})
 		}
 	}
 </script>
diff --git a/snowy-admin-web/src/views/dev/message/form.vue b/snowy-admin-web/src/views/dev/message/form.vue
index ffd5e3f2..1811b99e 100644
--- a/snowy-admin-web/src/views/dev/message/form.vue
+++ b/snowy-admin-web/src/views/dev/message/form.vue
@@ -19,7 +19,6 @@
 				<xn-user-selector
 					:org-tree-api="selectorApiFunction.orgTreeApi"
 					:user-page-api="selectorApiFunction.userPageApi"
-					:user-list-by-id-list-api="selectorApiFunction.checkedUserListApi"
 					data-type="object"
 					v-model:value="formData.receiverIdList"
 				/>
@@ -37,7 +36,6 @@
 	import { message } from 'ant-design-vue'
 	import messageApi from '@/api/dev/messageApi'
 	import userApi from '@/api/sys/userApi'
-	import userCenterApi from '@/api/sys/userCenterApi'
 	import tool from '@/utils/tool'
 
 	const sendLoading = ref(false)
@@ -94,11 +92,6 @@
 			return userApi.userSelector(param).then((data) => {
 				return Promise.resolve(data)
 			})
-		},
-		checkedUserListApi: (param) => {
-			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
-				return Promise.resolve(data)
-			})
 		}
 	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
diff --git a/snowy-admin-web/src/views/sys/org/form.vue b/snowy-admin-web/src/views/sys/org/form.vue
index d711bcff..c98fe299 100644
--- a/snowy-admin-web/src/views/sys/org/form.vue
+++ b/snowy-admin-web/src/views/sys/org/form.vue
@@ -43,7 +43,6 @@
 				<xn-user-selector
 					:org-tree-api="selectorApiFunction.orgTreeApi"
 					:user-page-api="selectorApiFunction.userPageApi"
-					:user-list-by-id-list-api="selectorApiFunction.checkedUserListApi"
 					:radio-model="true"
 					v-model:value="formData.directorId"
 				/>
@@ -59,7 +58,6 @@
 <script setup name="orgForm">
 	import { required } from '@/utils/formRules'
 	import orgApi from '@/api/sys/orgApi'
-	import userCenterApi from '@/api/sys/userCenterApi'
 	import tool from '@/utils/tool'
 
 	// 定义emit事件
@@ -144,11 +142,6 @@
 			return orgApi.orgUserSelector(param).then((data) => {
 				return Promise.resolve(data)
 			})
-		},
-		checkedUserListApi: (param) => {
-			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
-				return Promise.resolve(data)
-			})
 		}
 	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
diff --git a/snowy-admin-web/src/views/sys/role/index.vue b/snowy-admin-web/src/views/sys/role/index.vue
index 3b2fae07..ede65e10 100644
--- a/snowy-admin-web/src/views/sys/role/index.vue
+++ b/snowy-admin-web/src/views/sys/role/index.vue
@@ -106,7 +106,6 @@
 		ref="userSelectorPlusRef"
 		:org-tree-api="selectorApiFunction.orgTreeApi"
 		:user-page-api="selectorApiFunction.userPageApi"
-		:user-list-by-id-list-api="selectorApiFunction.checkedUserListApi"
 		data-type="object"
 		:user-show="false"
 		@onBack="userCallBack"
@@ -118,7 +117,6 @@
 	import { isEmpty } from 'lodash-es'
 	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'
@@ -290,11 +288,6 @@
 			return roleApi.roleUserSelector(param).then((data) => {
 				return Promise.resolve(data)
 			})
-		},
-		checkedUserListApi: (param) => {
-			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
-				return Promise.resolve(data)
-			})
 		}
 	}
 </script>
diff --git a/snowy-admin-web/src/views/sys/user/index.vue b/snowy-admin-web/src/views/sys/user/index.vue
index 311f267d..976e2303 100644
--- a/snowy-admin-web/src/views/sys/user/index.vue
+++ b/snowy-admin-web/src/views/sys/user/index.vue
@@ -140,11 +140,12 @@
 		</a-col>
 	</a-row>
 	<Form ref="formRef" @successful="tableRef.refresh()" />
-	<role-selector-plus
+	<xn-role-selector
 		ref="RoleSelectorPlusRef"
 		:org-tree-api="selectorApiFunction.orgTreeApi"
 		:role-page-api="selectorApiFunction.rolePageApi"
-		:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
+		:add-show="false"
+		:role-global="true"
 		@onBack="roleBack"
 	/>
 	<ImpExp ref="ImpExpRef" />
@@ -159,8 +160,6 @@
 	import downloadUtil from '@/utils/downloadUtil'
 	import userApi from '@/api/sys/userApi'
 	import orgApi from '@/api/sys/orgApi'
-	import userCenterApi from '@/api/sys/userCenterApi'
-	import RoleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
 	import ImpExp from './impExp.vue'
 	import GrantResourceForm from './grantResourceForm.vue'
@@ -365,7 +364,7 @@
 			id: record.id
 		}
 		userApi.userOwnRole(param).then((data) => {
-			RoleSelectorPlusRef.value.showRolePlusModal(data)
+			RoleSelectorPlusRef.value.showModel(data)
 		})
 	}
 	// 角色选择回调
@@ -376,7 +375,7 @@
 		}
 		if (value.length > 0) {
 			value.forEach((item) => {
-				params.roleIdList.push(item.id)
+				params.roleIdList.push(item)
 			})
 		}
 		userApi.grantRole(params).then(() => {})
@@ -405,11 +404,6 @@
 			return userApi.userRoleSelector(param).then((data) => {
 				return Promise.resolve(data)
 			})
-		},
-		checkedRoleListApi: (param) => {
-			return userCenterApi.userCenterGetRoleListByIdList(param).then((data) => {
-				return Promise.resolve(data)
-			})
 		}
 	}
 </script>