百度没有投放的网站点击,网站策划书哪个容易做,泊头做网站,第一素材网ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二ant design pro access.ts 是如何控制多角色的权限的
看上面的图片
当创建或编辑一个用户时#xff0c;…
ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二ant design pro access.ts 是如何控制多角色的权限的
看上面的图片
当创建或编辑一个用户时如何让它可以选择多个角色呢
创建时简单找到相应的组件放上去即可。
但是角色的数据是从后端拉取的。
所以首先第一步是要准备好一个角色列表的 api 的。
我这里已经有的 数据格式是这样的
{success: true,data: [{_id: 66b6d773b9ad87dfa985f6ef,name: 运营员,permissions: [{_id: 66b6d7a5b9ad87dfa985f749,name: 添加材料类目,path: /material-categories,action: POST,permissionGroup: 66adec30d647a4fde5546b1c,createdAt: 2024-08-10T02:59:49.106Z,updatedAt: 2024-08-10T07:36:39.702Z,__v: 0},{_id: 66b6d7b4b9ad87dfa985f75c,name: 删除材料类目,path: /material-categories,action: DELETE,permissionGroup: 66adec30d647a4fde5546b1c,createdAt: 2024-08-10T03:00:04.930Z,updatedAt: 2024-08-10T07:36:36.183Z,__v: 0},{_id: 66b6d7c4b9ad87dfa985f76f,name: 更新材料类目,path: /material-categories/:id,action: PUT,permissionGroup: 66adec30d647a4fde5546b1c,createdAt: 2024-08-10T03:00:20.075Z,updatedAt: 2024-08-10T07:36:32.789Z,__v: 0},{_id: 66b6d7d0b9ad87dfa985f782,name: 查看材料类目,path: /material-categories,action: GET,permissionGroup: 66adec30d647a4fde5546b1c,createdAt: 2024-08-10T03:00:32.932Z,updatedAt: 2024-08-10T08:02:59.634Z,__v: 0}],dataPermissions: [],createdAt: 2024-08-10T02:58:59.814Z,updatedAt: 2024-08-12T05:27:45.204Z,__v: 0},{_id: 66b6d74eb9ad87dfa985f6b1,name: 管理员,permissions: [{_id: 66adee8cd22d6d5b1ce00780,name: 更新权限,path: /permissions/:id,action: PUT,permissionGroup: 66b1b00bb5d937a0aef34034,createdAt: 2024-08-03T08:47:08.777Z,updatedAt: 2024-08-10T02:38:15.837Z,__v: 0},{_id: 66b1a12b0e10340bd8bbeba0,name: 删除权限,path: /permissions,action: DELETE,createdAt: 2024-08-06T04:06:03.752Z,updatedAt: 2024-08-10T02:31:07.287Z,__v: 0,permissionGroup: 66b1b00bb5d937a0aef34034},{_id: 66b1c55141364c27c464f858,name: 查看权限,path: /permissions,action: GET,permissionGroup: 66b1b00bb5d937a0aef34034,createdAt: 2024-08-06T06:40:17.991Z,updatedAt: 2024-08-10T08:03:27.245Z,__v: 0},{_id: 66b6cf51aa92a3526285b14d,name: 添加权限,path: /permissions,action: POST,createdAt: 2024-08-10T02:24:17.940Z,updatedAt: 2024-08-10T02:30:22.189Z,__v: 0,permissionGroup: 66b1b00bb5d937a0aef34034},{_id: 66b6d339b9ad87dfa985f3dd,name: 添加用户,path: /users,action: POST,permissionGroup: 66b6d2c9b9ad87dfa985f34f,createdAt: 2024-08-10T02:40:57.583Z,updatedAt: 2024-08-10T02:41:30.112Z,__v: 0},{_id: 66b6d352b9ad87dfa985f3f0,name: 查看用户,path: /users,action: GET,permissionGroup: 66b6d2c9b9ad87dfa985f34f,createdAt: 2024-08-10T02:41:22.895Z,updatedAt: 2024-08-10T08:03:22.477Z,__v: 0},{_id: 66b6d368b9ad87dfa985f416,name: 删除用户,path: /users,action: DELETE,permissionGroup: 66b6d2c9b9ad87dfa985f34f,createdAt: 2024-08-10T02:41:44.912Z,updatedAt: 2024-08-10T02:41:44.912Z,__v: 0},{_id: 66b6d37bb9ad87dfa985f429,name: 更新用户,path: /users/:id,action: PUT,permissionGroup: 66b6d2c9b9ad87dfa985f34f,createdAt: 2024-08-10T02:42:03.242Z,updatedAt: 2024-08-10T02:45:40.000Z,__v: 0},{_id: 66b6d440b9ad87dfa985f488,name: 添加菜单,path: /menus,action: POST,permissionGroup: 66b6d2ddb9ad87dfa985f362,createdAt: 2024-08-10T02:45:20.021Z,updatedAt: 2024-08-10T02:45:20.021Z,__v: 0},{_id: 66b6d46cb9ad87dfa985f4c1,name: 删除菜单,path: /menus,action: DELETE,permissionGroup: 66b6d2ddb9ad87dfa985f362,createdAt: 2024-08-10T02:46:04.896Z,updatedAt: 2024-08-10T02:46:04.896Z,__v: 0},{_id: 66b6d47db9ad87dfa985f4d4,name: 更新菜单,path: /menus/:id,action: PUT,permissionGroup: 66b6d2ddb9ad87dfa985f362,createdAt: 2024-08-10T02:46:21.612Z,updatedAt: 2024-08-10T02:46:52.140Z,__v: 0},{_id: 66b6d48bb9ad87dfa985f4e7,name: 查看菜单,path: /menus,action: GET,permissionGroup: 66b6d2ddb9ad87dfa985f362,createdAt: 2024-08-10T02:46:35.896Z,updatedAt: 2024-08-10T08:03:13.698Z,__v: 0},{_id: 66b6d39eb9ad87dfa985f43c,name: 添加角色,path: /roles,action: POST,permissionGroup: 66b6d2e9b9ad87dfa985f377,createdAt: 2024-08-10T02:42:38.531Z,updatedAt: 2024-08-10T02:42:38.531Z,__v: 0},{_id: 66b6d3dfb9ad87dfa985f44f,name: 删除角色,path: /roles,action: DELETE,permissionGroup: 66b6d2e9b9ad87dfa985f377,createdAt: 2024-08-10T02:43:43.882Z,updatedAt: 2024-08-10T02:43:43.882Z,__v: 0},{_id: 66b6d3fab9ad87dfa985f462,name: 更新角色,path: /roles/:id,action: PUT,permissionGroup: 66b6d2e9b9ad87dfa985f377,createdAt: 2024-08-10T02:44:10.845Z,updatedAt: 2024-08-10T02:45:31.647Z,__v: 0},{_id: 66b6d40db9ad87dfa985f475,name: 查看角色,path: /roles,action: GET,permissionGroup: 66b6d2e9b9ad87dfa985f377,createdAt: 2024-08-10T02:44:29.797Z,updatedAt: 2024-08-10T08:03:18.669Z,__v: 0},{_id: 66b6d544b9ad87dfa985f559,name: 添加数据权限,path: /data-permissions,action: POST,permissionGroup: 66b6d2fdb9ad87dfa985f38e,createdAt: 2024-08-10T02:49:40.379Z,updatedAt: 2024-08-10T02:49:40.379Z,__v: 0},{_id: 66b6d559b9ad87dfa985f56c,name: 删除数据权限,path: /data-permissions,action: DELETE,permissionGroup: 66b6d2fdb9ad87dfa985f38e,createdAt: 2024-08-10T02:50:01.137Z,updatedAt: 2024-08-10T02:50:01.137Z,__v: 0},{_id: 66b6d578b9ad87dfa985f57f,name: 更新数据权限,path: /data-permissions/:id,action: PUT,permissionGroup: 66b6d2fdb9ad87dfa985f38e,createdAt: 2024-08-10T02:50:32.533Z,updatedAt: 2024-08-10T02:50:32.533Z,__v: 0},{_id: 66b6d586b9ad87dfa985f592,name: 查看数据权限,path: /data-permissions,action: GET,permissionGroup: 66b6d2fdb9ad87dfa985f38e,createdAt: 2024-08-10T02:50:46.780Z,updatedAt: 2024-08-10T08:03:04.925Z,__v: 0},{_id: 66b9ad528554e602536acc84,name: 授权管理菜单,path: /auth,action: GET,permissionGroup: 66b9ad348554e602536acc67,createdAt: 2024-08-12T06:36:02.754Z,updatedAt: 2024-08-12T06:36:02.754Z,__v: 0},{_id: 66b6d4bdb9ad87dfa985f50d,name: 添加权限组,path: /permission-groups,action: POST,permissionGroup: 66b6d314b9ad87dfa985f3a7,createdAt: 2024-08-10T02:47:25.139Z,updatedAt: 2024-08-10T02:47:25.139Z,__v: 0},{_id: 66b6d500b9ad87dfa985f520,name: 删除权限组,path: /permission-groups,action: DELETE,permissionGroup: 66b6d314b9ad87dfa985f3a7,createdAt: 2024-08-10T02:48:32.481Z,updatedAt: 2024-08-10T02:48:32.481Z,__v: 0},{_id: 66b6d519b9ad87dfa985f533,name: 更新权限组,path: /permission-groups/:id,action: PUT,permissionGroup: 66b6d314b9ad87dfa985f3a7,createdAt: 2024-08-10T02:48:57.720Z,updatedAt: 2024-08-10T02:48:57.720Z,__v: 0},{_id: 66b6d52cb9ad87dfa985f546,name: 查看权限组,path: /permission-groups,action: GET,permissionGroup: 66b6d314b9ad87dfa985f3a7,createdAt: 2024-08-10T02:49:16.624Z,updatedAt: 2024-08-10T08:03:09.517Z,__v: 0}],dataPermissions: [],createdAt: 2024-08-10T02:58:22.168Z,updatedAt: 2024-08-12T06:57:27.434Z,__v: 0}]
}也就是说是个数组数组中的对象要有 name 和 _id.
name 是显示出来的_id 才是最终传给后端的
我们看下代码 ProFormCheckbox.Groupnameroleslayouthorizontallabel{intl.formatMessage({ id: role_choose })}options{roles?.map((role: { name: string; _id: string }) ({label: role.name,value: role._id,}))}fieldProps{{disabled: loading, // 确保在 loading 时禁用复选框}}//ProForm.Group这个是可有 可无的
fieldProps{{disabled: loading, // 确保在 loading 时禁用复选框}}主要还是 roles 的数据。
const { items: roles, loading } useQueryList(‘/roles’);
我后端请求得到的。之前有分享过 useQueryList 的源码的。
import { useEffect, useState } from react;
import { queryList } from /services/ant-design-pro/api;const useQueryList (url: string, hasPermission true) {const [items, setItems] useState([]);const [loading, setLoading] useState(false);const query async () {setLoading(true);// Only proceed with the API call if the user has permissionif (hasPermission) {const response (await queryList(url, { pageSize: 10000 })) as any;if (response.success) {setItems(response.data);}}setLoading(false);};useEffect(() {query().catch(console.error);}, [hasPermission]); // Adding hasPermission to the dependency array to re-run the effect if it changesreturn { items, setItems, loading };
};export default useQueryList;
最完整的表单代码是这样的
import { useIntl } from umijs/max;
import React from react;
import { ProForm, ProFormText, ProFormCheckbox } from ant-design/pro-components;
import { Form, Input } from antd;
import useQueryList from /hooks/useQueryList;interface Props {newRecord?: boolean;onFinish: (formData: any) Promisevoid;values?: any;
}const BasicForm: React.FCProps ({ newRecord, onFinish, values }) {const intl useIntl();const { items: roles, loading } useQueryList(/roles);return (ProForminitialValues{{...values,roles: values?.roles?.map((role: { _id: string }) role._id),}}onFinish{async (values) {await onFinish({...values,});}}ProForm.GroupProFormTextrules{[{ required: true, message: intl.formatMessage({ id: enter_name }) }]}widthmdlabel{intl.formatMessage({ id: name })}namename/ProFormTextrules{[{ required: true, message: intl.formatMessage({ id: enter_email }) }]}widthmdlabel{intl.formatMessage({ id: email })}nameemail/ProFormTextrules{[{ required: newRecord, message: intl.formatMessage({ id: enter_password }) }]}widthmdlabel{intl.formatMessage({ id: password })}namepassword/ProFormCheckbox.Groupnameroleslayouthorizontallabel{intl.formatMessage({ id: role_choose })}options{roles?.map((role: { name: string; _id: string }) ({label: role.name,value: role._id,}))}fieldProps{{disabled: loading, // 确保在 loading 时禁用复选框}}//ProForm.Group{!newRecord (Form.Item name_id label{false}Input typehidden //Form.Item)}/ProForm);
};export default BasicForm;
要让编辑的时候选中。
initialValues{{...values,roles: values?.roles?.map((role: { _id: string }) role._id),}}就是这里的代码发挥的作用
name“roles”
你只要填充好默认值即可。是个数组由 _id 组成。
所以你的用户列表一定要有 roles. 我的网站
