From 2f3d2e73d073d255320694fb2e334e50655a4e0e Mon Sep 17 00:00:00 2001
From: zuohuaijun <zuohuaijun@163.com>
Date: Wed, 5 Feb 2025 02:27:07 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=98=8E=E5=A2=9E=E5=8A=A0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E3=80=81=E8=A7=92=E8=89=B2=E3=80=81=E8=81=8C=E4=BD=8D?=
 =?UTF-8?q?=E3=80=81=E9=83=A8=E9=97=A8=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/selector/orgSelectorDialog.vue | 200 ++++++++++++++++
 .../components/selector/posSelectorDialog.vue | 219 +++++++++++++++++
 .../selector/roleSelectorDialog.vue           | 222 +++++++++++++++++
 .../selector/userSelectorDialog.vue           | 225 ++++++++++++++++++
 4 files changed, 866 insertions(+)
 create mode 100644 Web/src/components/selector/orgSelectorDialog.vue
 create mode 100644 Web/src/components/selector/posSelectorDialog.vue
 create mode 100644 Web/src/components/selector/roleSelectorDialog.vue
 create mode 100644 Web/src/components/selector/userSelectorDialog.vue

diff --git a/Web/src/components/selector/orgSelectorDialog.vue b/Web/src/components/selector/orgSelectorDialog.vue
new file mode 100644
index 00000000..f3df22c0
--- /dev/null
+++ b/Web/src/components/selector/orgSelectorDialog.vue
@@ -0,0 +1,200 @@
+<template>
+	<el-dialog draggable v-model="visibleDialog" style="width: 70vw" append-to-body>
+		<template #header>
+			<div style="color: #fff">
+				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
+				<span> 选择部门 </span>
+			</div>
+		</template>
+		<el-row :gutter="10">
+			<el-col :span="6">
+				<p class="tip">部门</p>
+				<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" class="boxHeight" />
+			</el-col>
+			<el-col :span="12">
+				<p class="tip">部门列表</p>
+				<div style="margin-top: 10px">
+					<el-form :model="state.queryParams" ref="queryRef" :inline="true">
+						<el-form-item label="部门名称" prop="name">
+							<el-input v-model="state.queryParams.name" placeholder="请输入部门名称" clearable style="width: 150px" @keyup.enter="handleQuery" />
+						</el-form-item>
+						<el-form-item>
+							<el-button-group>
+								<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+							</el-button-group>
+						</el-form-item>
+					</el-form>
+					<el-card class="full-table" shadow="hover" style="margin-top: 5px">
+						<el-table ref="refTable" :data="userList" style="height: calc(60vh - 100px)" row-key="id" :tree-props="{ children: 'children' }">
+							<el-table-column label="子级" width="100" />
+							<el-table-column label="操作" width="80" align="center">
+								<template #default="scope">
+									<el-button link type="primary" @click="handleSelectUser(scope.row)">
+										<el-icon><ele-Plus /></el-icon>
+									</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column label="部门名称" prop="name" minWidth="200" :show-overflow-tooltip="true" />
+						</el-table>
+					</el-card>
+				</div>
+			</el-col>
+			<el-col :span="6">
+				<p class="tip">已选中列表</p>
+				<el-table ref="selectedTable" :data="checkedUsersList" border style="height: 60vh">
+					<el-table-column label="操作" width="60" align="center">
+						<template #default="scope">
+							<div @click="handleRemove(scope.row)" style="border: 1px dashed red">
+								<el-icon color="red" style="transform: translateY(2px)"><ele-Minus /></el-icon>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column label="部门名称" prop="name" :show-overflow-tooltip="true" />
+				</el-table>
+			</el-col>
+		</el-row>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button type="primary" @click="saveDialog">确 定</el-button>
+				<el-button @click="closeDialog">取 消</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import OrgTree from '/@/views/system/org/component/orgTree.vue';
+
+import { getAPI } from '/@/utils/axios-utils';
+import { SysOrgApi } from '/@/api-services/api';
+
+let emits = defineEmits(['update:visible', 'change']);
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	data: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const userList = ref([] as any);
+let checkedUsersList = ref([] as any);
+const state = reactive({
+	queryParams: {
+		id: 0,
+	} as any,
+});
+
+let visibleDialog = computed({
+	get() {
+		return props.visible;
+	},
+	set() {
+		closeDialog();
+	},
+});
+
+watch(
+	() => props.visible,
+	(newVal) => {
+		if (newVal) {
+			checkedUsersList.value = props.data.map((item: any) => {
+				return {
+					id: item.targetId,
+					name: item.name,
+				};
+			});
+		}
+	}
+);
+
+// 页面初始化
+onMounted(async () => {
+	await getOrgList();
+});
+
+// 重置操作
+const resetQuery = () => {
+	state.queryParams = {
+		id: 0,
+	};
+	handleQuery();
+};
+
+// 树组件点击
+const handleNodeChange = async (node: any) => {
+	state.queryParams.id = node.id;
+	await handleQuery();
+};
+
+// 获取机构数据
+const getOrgList = async () => {
+	const params = Object.assign(state.queryParams);
+	let res = await getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
+	userList.value = res.data.result ?? [];
+};
+
+// 搜索按钮操作
+async function handleQuery() {
+	state.queryParams.pageNum = 1;
+	await getOrgList();
+}
+
+// 选择授权部门操作
+function handleSelectUser(row: { id: string }) {
+	if (!row || row.id == '') {
+		ElMessage.error('请选择部门');
+		return;
+	}
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		ElMessage.error('部门已被选中');
+	} else {
+		checkedUsersList.value.push(row);
+	}
+}
+// 移除选中部门操作
+function handleRemove(row: { id: any }) {
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		checkedUsersList.value = checkedUsersList.value.filter((item: { id: any }) => item.id != row.id);
+	} else {
+		ElMessage.error('部门已被移除');
+	}
+}
+
+// 确认/保存
+let saveDialog = () => {
+	let checkedList = [...checkedUsersList.value].map((item) => ({
+		type: 1,
+		targetId: item.id,
+		name: item.name,
+	}));
+	emits('change', checkedList);
+};
+
+// 关闭弹窗
+const closeDialog = () => {
+	checkedUsersList.value = [];
+	emits('update:visible', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.tip {
+	padding: 8px 16px;
+	background-color: rgb(197.7, 225.9, 255);
+	border-left: 5px solid #409eff;
+}
+
+.boxHeight {
+	height: 60vh;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>
diff --git a/Web/src/components/selector/posSelectorDialog.vue b/Web/src/components/selector/posSelectorDialog.vue
new file mode 100644
index 00000000..c961489e
--- /dev/null
+++ b/Web/src/components/selector/posSelectorDialog.vue
@@ -0,0 +1,219 @@
+<template>
+	<el-dialog draggable v-model="visibleDialog" style="width: 70vw" append-to-body>
+		<template #header>
+			<div style="color: #fff">
+				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
+				<span> 选择职位 </span>
+			</div>
+		</template>
+		<el-row :gutter="10">
+			<el-col :span="16">
+				<p class="tip">职位列表</p>
+				<div style="margin-top: 10px">
+					<el-form :model="state.queryParams" ref="queryRef" :inline="true">
+						<el-form-item label="职位名称">
+							<el-input v-model="state.queryParams.name" placeholder="请输入职位名称" clearable style="width: 150px" @keyup.enter="handleQuery" />
+						</el-form-item>
+						<el-form-item>
+							<el-button-group>
+								<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+							</el-button-group>
+						</el-form-item>
+					</el-form>
+					<el-card class="full-table" shadow="hover" style="margin-top: 5px">
+						<el-table ref="refTable" :data="userList" style="height: calc(60vh - 100px)">
+							<el-table-column label="操作" width="60" align="center">
+								<template #default="scope">
+									<el-button link type="primary" @click="handleSelectUser(scope.row)">
+										<el-icon><ele-Plus /></el-icon>
+									</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column label="职位名称" prop="name" width="100" align="center" :show-overflow-tooltip="true" />
+							<el-table-column label="职位编码" prop="code" width="120" align="center" :show-overflow-tooltip="true" />
+							<el-table-column label="在职人数" width="120" align="center" :show-overflow-tooltip="true">
+								<template #default="scope">
+									<el-button link type="primary">
+										{{ scope.row.userList?.length }}
+									</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+
+						<el-pagination
+							:currentPage="state.queryParams.page"
+							:page-size="state.queryParams.pageSize"
+							:total="state.queryParams.total"
+							:page-sizes="[10, 20, 50, 100]"
+							background
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+							layout="total, sizes, prev, pager, next, jumper"
+						/>
+					</el-card>
+				</div>
+			</el-col>
+			<el-col :span="7">
+				<p class="tip">已选中列表</p>
+				<el-table ref="selectedTable" :data="checkedUsersList" border style="height: 60vh">
+					<el-table-column label="操作" width="60" align="center" class-name="small-padding fixed-width">
+						<template #default="scope">
+							<div @click="handleRemove(scope.row)" style="border: 1px dashed red">
+								<el-icon color="red" style="transform: translateY(2px)"><ele-Minus /></el-icon>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column label="职位名称" prop="name" :show-overflow-tooltip="true" />
+				</el-table>
+			</el-col>
+		</el-row>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button type="primary" @click="saveDialog">确 定</el-button>
+				<el-button @click="closeDialog">取 消</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { getAPI } from '/@/utils/axios-utils';
+import { SysPosApi } from '/@/api-services/api';
+
+let emits = defineEmits(['update:visible', 'change']);
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	data: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const userList = ref([] as any);
+let checkedUsersList = ref([] as any);
+const state = reactive({
+	total: 0,
+	queryParams: {
+		orgId: -1,
+		page: 1,
+		pageSize: 50,
+	} as any,
+});
+
+let visibleDialog = computed({
+	get() {
+		return props.visible;
+	},
+	set() {
+		closeDialog();
+	},
+});
+
+watch(
+	() => props.visible,
+	(newVal) => {
+		if (newVal) {
+			checkedUsersList.value = props.data.map((item: any) => {
+				return {
+					id: item.targetId,
+					name: item.name,
+				};
+			});
+		}
+	}
+);
+
+// 页面初始化
+onMounted(async () => {
+	await getPosList();
+});
+
+// 重置操作
+const resetQuery = () => {
+	state.queryParams = {};
+	handleQuery();
+};
+
+// 获取职位数据
+const getPosList = async () => {
+	let res = await getAPI(SysPosApi).apiSysPosPagePost(state.queryParams);
+	userList.value = res.data.result?.items ?? [];
+	state.queryParams.total = res.data.result?.total ?? 0;
+};
+
+// 搜索按钮操作
+async function handleQuery() {
+	state.queryParams.pageNum = 1;
+	await getPosList();
+}
+
+// 选择授权职位操作
+function handleSelectUser(row: { id: string }) {
+	if (!row || row.id == '') {
+		ElMessage.error('请选择职位');
+		return;
+	}
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		ElMessage.error('职位已被选中');
+	} else {
+		checkedUsersList.value.push(row);
+	}
+}
+// 移除选中职位操作
+function handleRemove(row: { id: any }) {
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		checkedUsersList.value = checkedUsersList.value.filter((item: { id: any }) => item.id != row.id);
+	} else {
+		ElMessage.error('职位已被移除');
+	}
+}
+
+// 确认/保存
+let saveDialog = () => {
+	let checkedList = [...checkedUsersList.value].map((item) => ({
+		type: 1,
+		targetId: item.id,
+		name: item.name,
+	}));
+	emits('change', checkedList);
+};
+
+// 改变页面容量
+const handleSizeChange = (val: number) => {
+	state.queryParams.pageSize = val;
+	handleQuery();
+};
+
+// 改变页码序号
+const handleCurrentChange = (val: number) => {
+	state.queryParams.page = val;
+	handleQuery();
+};
+
+// 关闭弹窗
+const closeDialog = () => {
+	checkedUsersList.value = [];
+	emits('update:visible', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.tip {
+	padding: 8px 16px;
+	background-color: rgb(197.7, 225.9, 255);
+	border-left: 5px solid #409eff;
+}
+
+.boxHeight {
+	height: 60vh;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>
diff --git a/Web/src/components/selector/roleSelectorDialog.vue b/Web/src/components/selector/roleSelectorDialog.vue
new file mode 100644
index 00000000..2e75571f
--- /dev/null
+++ b/Web/src/components/selector/roleSelectorDialog.vue
@@ -0,0 +1,222 @@
+<template>
+	<el-dialog draggable v-model="visibleDialog" style="width: 70vw" append-to-body>
+		<template #header>
+			<div style="color: #fff">
+				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
+				<span> 选择角色 </span>
+			</div>
+		</template>
+		<el-row :gutter="10">
+			<el-col :span="16">
+				<p class="tip">角色列表</p>
+				<div style="margin-top: 10px">
+					<el-form :model="state.queryParams" ref="queryRef" :inline="true">
+						<el-form-item label="角色名称" prop="name">
+							<el-input v-model="state.queryParams.name" placeholder="请输入角色名称" clearable style="width: 150px" />
+						</el-form-item>
+						<el-form-item>
+							<el-button-group>
+								<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+							</el-button-group>
+						</el-form-item>
+					</el-form>
+					<el-card class="full-table" shadow="hover" style="margin-top: 5px">
+						<el-table ref="refTable" :data="userList" style="height: calc(60vh - 100px)">
+							<el-table-column label="操作" width="60" align="center">
+								<template #default="scope">
+									<el-button link type="primary" @click="handleSelectUser(scope.row)">
+										<el-icon><ele-Plus /></el-icon>
+									</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column label="角色名称" prop="name" width="150" align="center" :show-overflow-tooltip="true" />
+							<el-table-column label="角色编码" prop="code" width="120" align="center" :show-overflow-tooltip="true" />
+							<el-table-column label="数据范围" prop="roleName" align="center">
+								<template #default="scope">
+									<el-tag v-if="scope.row.dataScope === 1">全部数据</el-tag>
+									<el-tag v-else-if="scope.row.dataScope === 2">本部门及以下数据</el-tag>
+									<el-tag v-else-if="scope.row.dataScope === 3">本部门数据</el-tag>
+									<el-tag v-else-if="scope.row.dataScope === 4">仅本人数据</el-tag>
+									<el-tag v-else-if="scope.row.dataScope === 5">自定义数据</el-tag>
+								</template>
+							</el-table-column>
+							<el-table-column label="租户名称" prop="tenantName" />
+						</el-table>
+
+						<el-pagination
+							:currentPage="state.queryParams.page"
+							:page-size="state.queryParams.pageSize"
+							:total="state.queryParams.total"
+							:page-sizes="[10, 20, 50, 100]"
+							background
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+							layout="total, sizes, prev, pager, next, jumper"
+						/>
+					</el-card>
+				</div>
+			</el-col>
+			<el-col :span="8">
+				<p class="tip">已选中列表</p>
+				<el-table ref="selectedTable" :data="checkedUsersList" border style="height: 60vh">
+					<el-table-column label="操作" width="60" align="center" class-name="small-padding fixed-width">
+						<template #default="scope">
+							<div @click="handleRemove(scope.row)" style="border: 1px dashed red">
+								<el-icon color="red" style="transform: translateY(2px)"><ele-Minus /></el-icon>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" />
+				</el-table>
+			</el-col>
+		</el-row>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button type="primary" @click="saveDialog">确 定</el-button>
+				<el-button @click="closeDialog">取 消</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { getAPI } from '/@/utils/axios-utils';
+import { SysRoleApi } from '/@/api-services/api';
+
+let emits = defineEmits(['update:visible', 'change']);
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	data: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const userList = ref([] as any);
+let checkedUsersList = ref([] as any);
+const state = reactive({
+	total: 0,
+	queryParams: {
+		orgId: -1,
+		page: 1,
+		pageSize: 50,
+	} as any,
+});
+
+let visibleDialog = computed({
+	get() {
+		return props.visible;
+	},
+	set() {
+		closeDialog();
+	},
+});
+
+watch(
+	() => props.visible,
+	(newVal) => {
+		if (newVal) {
+			checkedUsersList.value = props.data.map((item: any) => {
+				return {
+					id: item.targetId,
+					name: item.name,
+				};
+			});
+		}
+	}
+);
+
+// 页面初始化
+onMounted(async () => {
+	await getRoleList();
+});
+
+// 重置操作
+const resetQuery = () => {
+	state.queryParams = {};
+	handleQuery();
+};
+
+// 获取角色数据
+const getRoleList = async () => {
+	let res = await getAPI(SysRoleApi).apiSysRolePagePost(state.queryParams);
+	userList.value = res.data.result?.items ?? [];
+	state.queryParams.total = res.data.result?.total ?? 0;
+};
+
+// 搜索按钮操作
+async function handleQuery() {
+	state.queryParams.pageNum = 1;
+	await getRoleList();
+}
+
+// 选择授权角色操作
+function handleSelectUser(row: { id: string }) {
+	if (!row || row.id == '') {
+		ElMessage.error('请选择角色');
+		return;
+	}
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		ElMessage.error('角色已被选中');
+	} else {
+		checkedUsersList.value.push(row);
+	}
+}
+// 移除选中角色操作
+function handleRemove(row: { id: any }) {
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		checkedUsersList.value = checkedUsersList.value.filter((item: { id: any }) => item.id != row.id);
+	} else {
+		ElMessage.error('角色已被移除');
+	}
+}
+
+// 确认/保存
+let saveDialog = () => {
+	let checkedList = [...checkedUsersList.value].map((item) => ({
+		type: 1,
+		targetId: item.id,
+		name: item.name,
+	}));
+	emits('change', checkedList);
+};
+
+// 改变页面容量
+const handleSizeChange = (val: number) => {
+	state.queryParams.pageSize = val;
+	handleQuery();
+};
+
+// 改变页码序号
+const handleCurrentChange = (val: number) => {
+	state.queryParams.page = val;
+	handleQuery();
+};
+
+// 关闭弹窗
+const closeDialog = () => {
+	checkedUsersList.value = [];
+	emits('update:visible', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.tip {
+	padding: 8px 16px;
+	background-color: rgb(197.7, 225.9, 255);
+	border-left: 5px solid #409eff;
+}
+
+.boxHeight {
+	height: 60vh;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>
diff --git a/Web/src/components/selector/userSelectorDialog.vue b/Web/src/components/selector/userSelectorDialog.vue
new file mode 100644
index 00000000..29ea9ad6
--- /dev/null
+++ b/Web/src/components/selector/userSelectorDialog.vue
@@ -0,0 +1,225 @@
+<template>
+	<el-dialog draggable v-model="visibleDialog" style="width: 70vw" append-to-body>
+		<template #header>
+			<div style="color: #fff">
+				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
+				<span> 选择用户 </span>
+			</div>
+		</template>
+		<el-row :gutter="10">
+			<el-col :span="6">
+				<p class="tip">机构</p>
+				<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" class="boxHeight" />
+			</el-col>
+			<el-col :span="12">
+				<p class="tip">用户列表</p>
+				<div style="margin-top: 10px">
+					<el-form :model="state.queryParams" ref="queryRef" :inline="true">
+						<el-form-item label="用户名称" prop="realName">
+							<el-input v-model="state.queryParams.realName" placeholder="请输入用户名称" clearable style="width: 150px" @keyup.enter="handleQuery" />
+						</el-form-item>
+						<el-form-item>
+							<el-button-group>
+								<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+							</el-button-group>
+						</el-form-item>
+					</el-form>
+					<el-card class="full-table" shadow="hover" style="margin-top: 5px">
+						<el-table ref="refTable" :data="userList" style="height: calc(60vh - 100px)">
+							<el-table-column label="操作" width="60" align="center">
+								<template #default="scope">
+									<el-button link type="primary" @click="handleSelectUser(scope.row)">
+										<el-icon><ele-Plus /></el-icon>
+									</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column label="用户名称" prop="realName" width="100" align="center" :show-overflow-tooltip="true" />
+							<el-table-column label="联系方式" prop="phone" width="120" align="center" :show-overflow-tooltip="true" />
+							<el-table-column label="账号类型" prop="roleName" />
+						</el-table>
+
+						<el-pagination
+							:currentPage="state.queryParams.page"
+							:page-size="state.queryParams.pageSize"
+							:total="state.queryParams.total"
+							:page-sizes="[10, 20, 50, 100]"
+							background
+							@size-change="handleSizeChange"
+							@current-change="handleCurrentChange"
+							layout="total, sizes, prev, pager, next, jumper"
+						/>
+					</el-card>
+				</div>
+			</el-col>
+			<el-col :span="6">
+				<p class="tip">已选中列表</p>
+				<el-table ref="selectedTable" :data="checkedUsersList" border style="height: 60vh">
+					<el-table-column label="操作" width="60" align="center" class-name="small-padding fixed-width">
+						<template #default="scope">
+							<div @click="handleRemove(scope.row)" style="border: 1px dashed red">
+								<el-icon color="red" style="transform: translateY(2px)"><ele-Minus /></el-icon>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column label="用户名称" prop="realName" :show-overflow-tooltip="true" />
+				</el-table>
+			</el-col>
+		</el-row>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button type="primary" @click="saveDialog">确 定</el-button>
+				<el-button @click="closeDialog">取 消</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import OrgTree from '/@/views/system/org/component/orgTree.vue';
+
+import { getAPI } from '/@/utils/axios-utils';
+import { SysUserApi } from '/@/api-services/api';
+
+let emits = defineEmits(['update:visible', 'change']);
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	data: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const userList = ref([] as any);
+let checkedUsersList = ref([] as any);
+const state = reactive({
+	total: 0,
+	queryParams: {
+		orgId: -1,
+		page: 1,
+		pageSize: 50,
+	} as any,
+});
+
+let visibleDialog = computed({
+	get() {
+		return props.visible;
+	},
+	set() {
+		closeDialog();
+	},
+});
+
+watch(
+	() => props.visible,
+	(newVal) => {
+		if (newVal) {
+			checkedUsersList.value = props.data.map((item: any) => {
+				return {
+					id: item.targetId,
+					realName: item.name,
+				};
+			});
+		}
+	}
+);
+
+// 页面初始化
+onMounted(async () => {
+	await getUserList();
+});
+
+// 重置操作
+const resetQuery = () => {
+	state.queryParams = {};
+	handleQuery();
+};
+
+// 树组件点击
+const handleNodeChange = async (node: any) => {
+	state.queryParams.orgId = node.id;
+	await handleQuery();
+};
+
+// 获取用户数据
+const getUserList = async () => {
+	let res = await getAPI(SysUserApi).apiSysUserPagePost(state.queryParams);
+	userList.value = res.data.result?.items ?? [];
+	state.queryParams.total = res.data.result?.total ?? 0;
+};
+
+// 搜索按钮操作
+async function handleQuery() {
+	state.queryParams.pageNum = 1;
+	await getUserList();
+}
+
+// 选择授权用户操作
+function handleSelectUser(row: { id: string }) {
+	if (!row || row.id == '') {
+		ElMessage.error('请选择用户');
+		return;
+	}
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		ElMessage.error('用户已被选中');
+	} else {
+		checkedUsersList.value.push(row);
+	}
+}
+// 移除选中用户操作
+function handleRemove(row: { id: any }) {
+	if (checkedUsersList.value.some((c: { id: any }) => c.id == row.id)) {
+		checkedUsersList.value = checkedUsersList.value.filter((item: { id: any }) => item.id != row.id);
+	} else {
+		ElMessage.error('用户已被移除');
+	}
+}
+
+// 确认/保存
+let saveDialog = () => {
+	let checkedList = [...checkedUsersList.value].map((item) => ({
+		type: 1,
+		targetId: item.id,
+		name: item.realName,
+	}));
+	emits('change', checkedList);
+};
+
+// 改变页面容量
+const handleSizeChange = (val: number) => {
+	state.queryParams.pageSize = val;
+	handleQuery();
+};
+
+// 改变页码序号
+const handleCurrentChange = (val: number) => {
+	state.queryParams.page = val;
+	handleQuery();
+};
+
+// 关闭弹窗
+const closeDialog = () => {
+	checkedUsersList.value = [];
+	emits('update:visible', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.tip {
+	padding: 8px 16px;
+	background-color: rgb(197.7, 225.9, 255);
+	border-left: 5px solid #409eff;
+}
+
+.boxHeight {
+	height: 60vh;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>