增加角色批量授权用户

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

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'
+          }),
+        },
+      },
+    },
+  };
+};