feat(20250103-role): 增加角色批量授权用户

web/src/views/system/role/components/RoleDrawer.vue

@@ -11,38 +11,56 @@
 		<template #header>
 			<div>
 				当前授权角色：
-				<el-tag>{{ RoleDrawer.roleName }}</el-tag>
+				<el-tag style="margin-right: 20px">{{ RoleDrawer.roleName }}</el-tag>
+				授权人员：
+				<el-button size="small" :icon="UserFilled" @click="handleUsers">{{ RoleDrawer.users.length }}</el-button>
 			</div>
 		</template>
 		<splitpanes class="default-theme" style="height: 100%">
 			<pane min-size="20" size="22">
 				<div class="pane-box">
-					<MenuTree />
+					<MenuTreeCom />
 				</div>
 			</pane>
 			<pane min-size="20">
 				<div class="pane-box">
 					<el-tabs v-model="activeName" class="demo-tabs">
-						<el-tab-pane label="接口权限" name="first"><MenuBtn /></el-tab-pane>
-						<el-tab-pane label="列字段权限" name="second"><MenuField /></el-tab-pane>
+						<el-tab-pane label="接口权限" name="first"><MenuBtnCom /></el-tab-pane>
+						<el-tab-pane label="列字段权限" name="second"><MenuFieldCom /></el-tab-pane>
 					</el-tabs>
 				</div>
 			</pane>
 		</splitpanes>
 	</el-drawer>
+
+	<el-dialog v-model="dialogVisible" title="授权用户" width="700px" :close-on-click-modal="false">
+		<RoleUsersCom />
+	</el-dialog>
 </template>
 
 <script setup lang="ts">
 import { Splitpanes, Pane } from 'splitpanes';
 import 'splitpanes/dist/splitpanes.css';
+import { UserFilled } from '@element-plus/icons-vue';
 import { RoleDrawerStores } from '../stores/RoleDrawerStores';
 import { defineAsyncComponent, ref } from 'vue';
+import { RoleUsersStores } from '../stores/RoleUsersStores';
 
-const MenuTree = defineAsyncComponent(() => import('./RoleMenuTree.vue'));
-const MenuBtn = defineAsyncComponent(() => import('./RoleMenuBtn.vue'));
-const MenuField = defineAsyncComponent(() => import('./RoleMenuField.vue'));
+const MenuTreeCom = defineAsyncComponent(() => import('./RoleMenuTree.vue'));
+const MenuBtnCom = defineAsyncComponent(() => import('./RoleMenuBtn.vue'));
+const MenuFieldCom = defineAsyncComponent(() => import('./RoleMenuField.vue'));
+const RoleUsersCom = defineAsyncComponent(() => import('./RoleUsers.vue'));
 const RoleDrawer = RoleDrawerStores(); // 抽屉参数
+const RoleUsers = RoleUsersStores(); // 角色-用户
 const activeName = ref('first');
+
+const dialogVisible = ref(false);
+
+const handleUsers = () => {
+	dialogVisible.value = true;
+	RoleUsers.get_all_users(); // 获取所有用户
+	RoleUsers.set_right_users(RoleDrawer.$state.users); // 设置已选中用户
+};
 </script>
 
 <style lang="scss" scoped>

web/src/views/system/role/components/RoleUsers.vue

@@ -0,0 +1,35 @@
+<template>
+	<el-transfer
+		v-model="RoleUsers.$state.right_users"
+		filterable
+		:titles="['未授权用户', '已授权用户']"
+		:data="RoleUsers.$state.all_users"
+		:props="{
+			key: 'id',
+			label: 'name',
+		}"
+		@change="handleChange"
+	/>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+import { RoleDrawerStores } from '../stores/RoleDrawerStores';
+import { RoleUsersStores } from '../stores/RoleUsersStores';
+import { setRoleUsers } from './api';
+const RoleDrawer = RoleDrawerStores(); // 抽屉参数
+const RoleUsers = RoleUsersStores(); // 角色-用户
+
+/**
+ *
+ * @param value 当前右侧选中的用户
+ * @param direction 移动的方向
+ * @param movedKeys 移动的用户
+ */
+const handleChange = (value: number[] | string[], direction: 'left' | 'right', movedKeys: string[] | number[]) => {
+	setRoleUsers(RoleDrawer.$state.roleId, { direction, movedKeys }).then((res:any) => {
+		RoleDrawer.set_state(res.data)
+		ElMessage({ message: res.msg, type: 'success' });
+	});
+};
+</script>

web/src/views/system/role/components/api.ts

@@ -86,3 +86,36 @@ export function getRoleToDeptAll(query: object) {
 		params: query,
 	});
 }
+
+/**
+ * 获取所有用户
+ * @param query
+ * @returns
+ */
+export function getAllUsers() {
+	return request({
+		url: '/api/system/user/',
+		method: 'get',
+		params: { limit: 999 },
+	}).then((res: any) => {
+		return XEUtils.map(res.data, (item: any) => {
+			return {
+				id: item.id,
+				name: item.name,
+			};
+		});
+	});
+}
+
+/**
+ * 设置角色-用户
+ * @param query
+ * @returns
+ */
+export function setRoleUsers(roleId: string | number | undefined, data: object) {
+	return request({
+		url: `/api/system/role/${roleId}/set_role_users/`,
+		method: 'put',
+		data,
+	});
+}

web/src/views/system/role/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<fs-page>
 		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-		<PermissionDrawerCom ref="PermissionDrawerCom" />
+		<PermissionDrawerCom />
 	</fs-page>
 </template>
 
@@ -12,20 +12,25 @@ import { createCrudOptions } from './crud';
 import { RoleDrawerStores } from './stores/RoleDrawerStores';
 import { RoleMenuBtnStores } from './stores/RoleMenuBtnStores';
 import { RoleMenuFieldStores } from './stores/RoleMenuFieldStores';
+import { RoleUsersStores } from './stores/RoleUsersStores';
 
 const PermissionDrawerCom = defineAsyncComponent(() => import('./components/RoleDrawer.vue'));
 
-const RoleDrawer = RoleDrawerStores(); // 权限配置抽屉参数
+const RoleDrawer = RoleDrawerStores(); // 角色-抽屉
 const RoleMenuBtn = RoleMenuBtnStores(); // 角色-菜单
-const RoleMenuField = RoleMenuFieldStores();
+const RoleMenuField = RoleMenuFieldStores();// 角色-菜单-字段
+const RoleUsers = RoleUsersStores();// 角色-用户
 const { crudBinding, crudRef, crudExpose } = useFs({
 	createCrudOptions,
-	context: { RoleDrawer, RoleMenuBtn,RoleMenuField },
+	context: { RoleDrawer, RoleMenuBtn, RoleMenuField },
 });
 
 // 页面打开后获取列表数据
 onMounted(async () => {
 	// 刷新
 	crudExpose.doRefresh();
+	// 获取全部用户
+	RoleUsers.get_all_users();
+
 });
 </script>

web/src/views/system/role/stores/RoleDrawerStores.ts

@@ -7,6 +7,7 @@ const initialState: RoleDrawerType = {
 	drawerVisible: false,
 	roleId: undefined,
 	roleName: undefined,
+	users: [],
 };
 
 export const RoleDrawerStores = defineStore('RoleDrawerStores', {
@@ -19,8 +20,12 @@ export const RoleDrawerStores = defineStore('RoleDrawerStores', {
 		 */
 		handleDrawerOpen(row: any) {
 			this.drawerVisible = true;
+			this.set_state(row);
+		},
+		set_state(row: any) {
 			this.roleName = row.name;
 			this.roleId = row.id;
+			this.users = row.users;
 		},
 		/**
 		 * 关闭权限修改抽屉

web/src/views/system/role/stores/RoleUsersStores.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+import { RoleUsersType } from '../types';
+import { getAllUsers } from '../components/api';
+import XEUtils from 'xe-utils';
+/**
+ * 权限抽屉：角色-用户
+ */
+
+export const RoleUsersStores = defineStore('RoleUsersStores', {
+	state: (): RoleUsersType => ({
+		all_users: [],
+		right_users: [],
+	}),
+	actions: {
+		get_all_users() {
+			getAllUsers().then((res: any) => {
+				this.$state.all_users = res;
+			});
+		},
+		set_right_users(users: any) {
+			this.$state.right_users = XEUtils.map(users, (item: any) => item.id);
+		},
+	},
+});

web/src/views/system/role/types.ts

@@ -16,6 +16,15 @@ export interface RoleItemType {
 	creator: string;
 }
 
+export interface UsersType {
+	id: string | number;
+	name: string;
+}
+export interface RoleUsersType {
+	all_users: UsersType[];
+	right_users: UsersType[];
+}
+
 /**
  * 权限配置 抽屉组件参数数据类型
  */
@@ -26,6 +35,8 @@ export interface RoleDrawerType {
 	roleId: string | number | undefined;
 	/** 角色名称*/
 	roleName: string | undefined;
+	/** 用户*/
+	users: UsersType[];
 }
 
 /**
@@ -82,7 +93,7 @@ export interface RoleMenuFieldHeaderType {
 	/** 模型表字段名 */
 	label: string;
 	/** 字段显示名	*/
-	disabled: string ;
+	disabled: string;
 	/** 是否可查询 */
 	checked: boolean;
 }