增加角色批量授权用户

（cherry picked commit from <gitee.com//lxy0722/django-vue3-admin/commit/702eb7d7aeb2a9c30416a8ebb503a4b8e3367492>

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

@@ -0,0 +1,44 @@
+import { request } from '/@/utils/service';
+import { UserPageQuery} from '@fast-crud/fast-crud';
+
+/**
+ * 当前角色查询授权的用户
+ * @param query 查询条件 需要有角色id
+ * @returns
+ */
+export function getRoleUsersAuthorized(query: UserPageQuery) {
+	query["authorized"] = 1;  // 授权的用户
+	return request({
+		url: '/api/system/role/get_role_users/',
+		method: 'get',
+		params: query,
+	});
+}
+/**
+ * 当前角色删除授权的用户
+ * @param role_id 角色id
+ * @param user_id 用户id数组
+ * @returns
+ */
+export function removeRoleUser(role_id: number, user_id: Array<number>) {
+	return request({
+		url: `/api/system/role/${role_id}/remove_role_user/`,
+		method: 'delete',
+		data: {user_id: user_id},
+	});
+}
+
+
+/**
+ * 当前用户角色添加用户
+ * @param role_id 角色id
+ * @param data 用户id数组
+ * @returns
+ */
+export function addRoleUsers(role_id: number, data: Array<Number>) {
+	return request({ 
+		url: `/api/system/role/${role_id}/add_role_users/`,
+		method: 'post',
+		data: {users_id: data},
+	});
+}

web/src/views/system/role/components/searchUsers/crud.tsx

@@ -0,0 +1,193 @@
+import {getRoleUsersAuthorized, removeRoleUser} from './api';
+import {
+  compute,
+  dict,
+  UserPageQuery,
+  AddReq,
+  DelReq,
+  EditReq,
+  CrudOptions,
+  CreateCrudOptionsProps,
+  CreateCrudOptionsRet
+} from '@fast-crud/fast-crud';
+
+import {auth} from "/@/utils/authFunction";
+import { ref , nextTick} from 'vue';
+import XEUtils from 'xe-utils';
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery) => {
+    return await getRoleUsersAuthorized(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    return undefined;
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await removeRoleUser(crudExpose.crudRef.value.getSearchFormData().role_id, [row.id]);
+  };
+  const addRequest = async ({ form }: AddReq) => {
+    return undefined;
+  };
+
+  // 记录选中的行
+	const selectedRows = ref<any>([]);
+
+	const onSelectionChange = (changed: any) => {
+		const tableData = crudExpose.getTableData();
+		const unChanged = tableData.filter((row: any) => !changed.includes(row));
+		// 添加已选择的行
+		XEUtils.arrayEach(changed, (item: any) => {
+			const ids = XEUtils.pluck(selectedRows.value, 'id');
+			if (!ids.includes(item.id)) {
+				selectedRows.value = XEUtils.union(selectedRows.value, [item]);
+			}
+		});
+		// 剔除未选择的行
+		XEUtils.arrayEach(unChanged, (unItem: any) => {
+			selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
+		});
+	};
+	const toggleRowSelection = () => {
+		// 多选后，回显默认勾选
+		const tableRef = crudExpose.getBaseTableRef();
+		const tableData = crudExpose.getTableData();
+		const selected = XEUtils.filter(tableData, (item: any) => {
+			const ids = XEUtils.pluck(selectedRows.value, 'id');
+			return ids.includes(item.id);
+		});
+
+		nextTick(() => {
+			XEUtils.arrayEach(selected, (item) => {
+				tableRef.toggleRowSelection(item, true);
+			});
+		});
+	};
+  
+  return {
+    selectedRows, 
+    crudOptions: {
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest,
+      },
+      actionbar: {
+        buttons: {
+          add: {
+            show: auth('role:AuthorizedAdd'),
+            click: (ctx: any) => {
+              context!.subUserRef.value.dialog = true;
+							nextTick(() => {
+								context!.subUserRef.value.setSearchFormData({ form: { role_id: crudExpose.crudRef.value.getSearchFormData().role_id } });
+								context!.subUserRef.value.doRefresh();
+							});
+						},
+          },
+        },
+        
+      },
+      rowHandle: {
+        //固定右侧
+        fixed: 'left',
+        width: 120,
+        show: auth('role:AuthorizedDel'),
+        buttons: {
+          view: {
+            show: false,
+          },
+          edit: {
+            show: false,
+          },
+          remove: {
+            iconRight: 'Delete',
+            show: true,
+          },
+        },
+      },
+      table: {
+				rowKey: "id",
+        onSelectionChange,
+        onRefreshed: () => toggleRowSelection(),
+			},
+      columns: {
+        $checked: {
+					title: "选择",
+					form: { show: false},
+					column: {
+						show: auth('role:AuthorizedDel'),
+						type: "selection",
+						align: "center",
+						width: "55px",
+						columnSetDisabled: true, //禁止在列设置中选择
+					}
+				  },
+        _index: {
+          title: '序号',
+          form: { show: false },
+          column: {
+            //type: 'index',
+            align: 'center',
+            width: '70px',
+            columnSetDisabled: true, //禁止在列设置中选择
+            formatter: (context) => {
+              //计算序号,你可以自定义计算规则，此处为翻页累加
+              let index = context.index ?? 1;
+              let pagination = crudExpose!.crudBinding.value.pagination;
+              // @ts-ignore
+              return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+            },
+          },
+        },
+        name: {
+          title: '用户名',
+          search: {
+            show: true,
+            component: {
+              props: {
+                clearable: true,
+              },
+            },
+          },
+          type: 'text',
+          form: {
+            show: false,
+          },
+        },
+        dept: {
+          title: '部门',
+          show: true,
+          type: 'dict-tree',
+          column: {
+            name: 'text',
+            formatter({value,row,index}){
+                return row.dept__name
+            }
+          },
+          search: {
+            show: true,
+            disabled: true,
+            col:{span: 6},
+            component: {
+              multiple: false,
+              props: {
+                checkStrictly: true,
+                clearable: true,
+                filterable: true,
+              },
+            },
+          },
+          form: {
+            show: false
+          },
+          dict: dict({
+            isTree: true,
+            url: '/api/system/dept/all_dept/',
+            value: 'id',
+            label: 'name'
+          }),
+        },
+      },
+    },
+  };
+};

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

@@ -0,0 +1,98 @@
+<template>
+	<el-drawer size="70%" v-model="RoleUserDrawer.drawerVisible" direction="rtl" destroy-on-close :before-close="handleClose">
+	<template #header>
+		<div>
+			当前授权角色：
+			<el-tag>{{ RoleUserDrawer.role_name }}</el-tag>
+		</div>
+	</template>
+    <fs-crud ref="crudRef" v-bind="crudBinding">
+		<template #pagination-right>
+				<el-popover placement="top" :width="200" trigger="click">
+					<template #reference>
+						<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
+					</template>
+					<el-table :data="selectedRows" size="small" :max-height="500" >
+						<!-- <el-table-column width="100" property="id" label="id" /> -->
+						<el-table-column width="100" property="name" label="用户名" />
+						<el-table-column fixed="right" label="操作" min-width="60">
+							<template #default="scope">
+								<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
+							</template>
+						</el-table-column>
+					</el-table>
+				</el-popover>
+			</template>
+		<template #pagination-left>
+			<el-tooltip content="批量删除所选择的用户权限">
+				<el-button v-show="selectedRowsCount > 0 && auth('role:AuthorizedDel')" type="danger"  @click="multipleDel" :icon="Delete">批量删除</el-button>
+			</el-tooltip>
+		</template>
+	 </fs-crud>
+	<subUser ref="subUserRef" :refreshCallback="refreshData"> </subUser>
+	</el-drawer>
+</template>
+
+<script lang="ts" setup>
+import {auth} from "/@/utils/authFunction";
+import { ref, onMounted, defineAsyncComponent, computed } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import { Close, Delete } from '@element-plus/icons-vue';
+import XEUtils from 'xe-utils';
+import {removeRoleUser} from "./api"
+import { ElMessageBox } from 'element-plus';
+import { errorMessage, successNotification } from '/@/utils/message';
+
+import { RoleUserStores } from '../../stores/RoleUserStores';
+const RoleUserDrawer = RoleUserStores(); // 授权用户抽屉参数
+
+const subUser = defineAsyncComponent(() => import('../addUsers/index.vue'));
+const subUserRef = ref();
+
+const refreshData = () => {
+  crudExpose.doRefresh();
+};
+
+//抽屉是否显示
+const drawer = ref(false);
+
+//抽屉关闭确认
+const handleClose = (done: () => void) => {
+	selectedRows.value = [];
+	done();
+};
+
+// 选中行的条数
+const selectedRowsCount = computed(() => {
+	return selectedRows.value.length;
+});
+
+const removeSelectedRows = (row: any) => {
+	const tableRef = crudExpose.getBaseTableRef();
+	const tableData = crudExpose.getTableData();
+	if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
+		tableRef.toggleRowSelection(row, false);
+	} else {
+		selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
+	}
+};
+
+const multipleDel = async ()  => {
+	if (selectedRows.value.length < 1) {
+		errorMessage("请先勾选用户");
+		return
+	} 
+	await ElMessageBox.confirm(`确定要删除这 “${selectedRows.value.length}” 位用户的权限吗`, "确认");
+		const req = await removeRoleUser(crudRef.value.getSearchFormData().role_id, XEUtils.pluck(selectedRows.value, 'id'));
+		selectedRows.value = [];
+		successNotification(req.msg)
+		crudExpose.doRefresh()
+}
+
+const { crudBinding, crudRef, crudExpose, selectedRows } = useFs({ createCrudOptions, context: {subUserRef} });
+const { setSearchFormData, doRefresh } = crudExpose;
+
+defineExpose({ drawer, setSearchFormData, doRefresh });
+
+</script>