ant design pro 中用户的表单如何控制多个角色

在这里插入图片描述

  • 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.Groupname="roles"layout="horizontal"label={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) => Promise<void>;values?: any;
}const BasicForm: React.FC<Props> = ({ 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.Group><ProFormTextrules={[{ required: true, message: intl.formatMessage({ id: 'enter_name' }) }]}width="md"label={intl.formatMessage({ id: 'name' })}name="name"/><ProFormTextrules={[{ required: true, message: intl.formatMessage({ id: 'enter_email' }) }]}width="md"label={intl.formatMessage({ id: 'email' })}name="email"/><ProFormTextrules={[{ required: newRecord, message: intl.formatMessage({ id: 'enter_password' }) }]}width="md"label={intl.formatMessage({ id: 'password' })}name="password"/><ProFormCheckbox.Groupname="roles"layout="horizontal"label={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 type="hidden" /></Form.Item>)}</ProForm>);
};export default BasicForm;

要让编辑的时候选中。

initialValues={{...values,roles: values?.roles?.map((role: { _id: string }) => role._id),}}

就是这里的代码发挥的作用

name=“roles”

你只要填充好默认值即可。是个数组，由 _id 组成。

所以你的用户列表，一定要有 roles.

在这里插入图片描述
我的网站

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/405720.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Mac文件需要分卷压缩怎么办 Mac上怎么解压分卷压缩的文件

Mac文件需要分卷压缩怎么办 Mac上怎么解压分卷压缩的文件

在处理大型文件的传输和存储的时候&#xff0c;Mac用户常面临文件大小超过限制的问题。为了有效管理这些大文件&#xff0c;分卷压缩成为一种必不可少的解决方案。Mac文件需要分卷压缩怎么办&#xff1f;Mac上怎么解压分卷压缩的文件&#xff1f;本文将向你介绍如何使用BetterZ…
阅读更多...
第R2周：LSTM-火灾温度预测

第R2周：LSTM-火灾温度预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、什么是LSTM 1.LSTM的本质 长短时记忆网络&#xff08;Long Short-Term Memory, LSTM&#xff09;的本质是一种特殊的循环神经网络&#xff08;Recurrent…
阅读更多...
使用Go语言将PDF文件转换为Base64编码

使用Go语言将PDF文件转换为Base64编码

使用 Go 语言将 Base64 编码转换为 PDF 文件-CSDN博客本文介绍了如何使用 Go 语言将 Base64 编码转换为 PDF 文件&#xff0c;并保存到指定路径。https://blog.csdn.net/qq_45519030/article/details/141225772 在现代编程中&#xff0c;数据转换和编码是常见的需求。本文将介绍…
阅读更多...
SX_gitlab可视化操作c语言知识_17

SX_gitlab可视化操作c语言知识_17

gitlab可视化操作技巧: Merge into current branch直接将远程wjc_GNSS分支的数据拉下来同步到本机当前的分支代码&#xff0c;执行的是合并操作&#xff0c;即多的模块会添加到本地分支&#xff0c;有冲突的地方不行得rebase覆盖才行 修改完代码先暂存更改再在暂存区写入备注&a…
阅读更多...
网络通信要素

网络通信要素

网络介绍 定义&#xff1a;将具有独立功能的多台计算机通过通信线路和通信设备连接起来&#xff0c;在网络管理软件及网络通信协议下&#xff0c;实现资源共享和信息传递的虚拟平台。 学习网络的目的&#xff1a; 能够编写基于网络通信的软件或程序&#xff0c;通常来说就是网…
阅读更多...
力扣面试经典算法150题：删除有序数组中的重复项 II

力扣面试经典算法150题：删除有序数组中的重复项 II

删除有序数组中的重复项 II 今天的题目是力扣面试经典150题中的数组的中等难度题: 删除有序数组中的重复项 II 题目链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-array-ii/description/?envTypestudy-plan-v2&envIdtop-interview-150 题…
阅读更多...
时间序列分析2|ARIMA模型|SARIMA模型

时间序列分析2|ARIMA模型|SARIMA模型

ARMA模型的定阶 自相关和偏自相关系数法 通过观察样本的自相关系数(ACF)和偏自相关系数(PACF)&#xff0c;进行大体的判断 模型定阶的经验方法 截尾&#xff1a; 最初的d阶样本(偏)自相关系数明显在2倍标准差范围外95%的(偏)自相关系数都落在2倍标准差的范围以内非零自相…
阅读更多...
【论文阅读】通用的语义-几何表征的机器人操作

【论文阅读】通用的语义-几何表征的机器人操作

文章目录 1. 【2023CoRL】A Universal Semantic-Geometric Representation for Robotic Manipulation针对痛点和贡献引言模型框架思考不足之处 2. Leveraging Locality to Boost Sample Efficiency in Robotic Manipulation摘要和结论引言模型框架实验思考不足之处 1. 【2023Co…
阅读更多...
ES6-ES13学习笔记

ES6-ES13学习笔记

目录 初识ES6 变量声明 解构赋值 对象解构 ​编辑 数组解构 ​编辑模版字符串 字符串扩展 includes() repeat() startsWith() endsWith() 数值扩展 二进制和八进制表示法 &#xff08;Number.&#xff09;isFinite()与isNaN() Number.isInteger() Math.trunc …
阅读更多...
Leetcode JAVA刷刷站（69）x的平方根

Leetcode JAVA刷刷站（69）x的平方根

一、题目概述 二、思路方向 在Java中&#xff0c;计算一个非负整数x的算术平方根&#xff0c;并返回其整数部分&#xff0c;你可以使用二分查找法。这是因为平方根函数是单调递增的&#xff0c;所以我们可以利用二分查找在合理的时间复杂度内找到结果。 三、代码实现 public…
阅读更多...
Matplotlib入门与进阶：数据可视化的强大工具

Matplotlib入门与进阶：数据可视化的强大工具

Matplotlib入门与进阶&#xff1a;数据可视化的强大工具 在当今数据驱动的世界中&#xff0c;数据可视化成为了数据分析的重要一环。数据可视化不仅能够帮助开发者理解和分析数据&#xff0c;还能使数据展示更具说服力。本文将详细介绍Python中的2D绘图库——Matplotlib。通过…
阅读更多...
Python自准直仪双筒望远镜光学ABCD矩阵行为算法

Python自准直仪双筒望远镜光学ABCD矩阵行为算法

&#x1f3af;要点 &#x1f3af;平面&#xff1b;曲面&#xff1b;圆柱面&#xff1b;非球面光&#xff0c;双凸透镜&#xff1b;90 度棱镜&#xff1b;分束立方体&#xff0c;双透镜棱&#xff1b;镜分光镜光线&#xff1b;横置隔膜&#xff1b;全内反射&#xff1b;多个分束…
阅读更多...
作业08.21

作业08.21

服务器&#xff1a; #include <myhead.h>#define SER_PORT 6666 #define SER_IP "127.0.0.1"int find_client(int *client_arr, int len, int client) {for(int i0; i<len; i){if(client_arr[i] client){return i;}}return -1; }void remove_client(int *…
阅读更多...
python爬虫--pyquery解析库整理

python爬虫--pyquery解析库整理

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理python的爬虫解析库pyquery的语法 简洁快速的整理&#xff0c;建议有前端基础的人看 pyquery解析原理 pyquery的原理就是拿到网站的前端源码后&#xff0c;我们根据我们需求信息所在的标签进行筛选。 选…
阅读更多...
漏洞挖掘 | 记一次edusrc--轻松拿下中危信息泄露

漏洞挖掘 | 记一次edusrc--轻松拿下中危信息泄露

1.前言 也是一次漏洞挖掘的思路分享 上次我们讲过了关于小程序方面的一些小思路&#xff0c;即关于抓包更改id号造成的一个信息泄露&#xff0c;但是在小程序上的信息泄露很难涉及到公民三要素这是一个痛点&#xff0c;今天就来分享一下一次edu挖掘时挖到的一个涉及公民三要素…
阅读更多...
【云备份】项目总结

【云备份】项目总结

文章目录 项目总结项目总结项目扩展:常见问题: 项目总结 项目总结 搭建云备份服务器与客户端&#xff0c;客户端程序运行在客户机上自动将指定目录下的文件备份到服务器&#xff0c;并且能够支持浏览器查看与下载&#xff0c;其中下载支持断点续传功能&#xff0c;并且服务器端…
阅读更多...
kubernetes的pod基础

kubernetes的pod基础

kubernetes的pod基础 pod概念 pod&#xff08;豆荚&#xff09;&#xff0c;是k8s的最小管理单元。是一个或多个容器的组合&#xff0c;这些容器共享存储&#xff0c;网络和命名空间&#xff0c;以及运行规范&#xff0c;pod内的容器统一的进行安排和调度。pod是一组具有共享命…
阅读更多...
【TCP/IP】自定义应用层协议，常见端口号

【TCP/IP】自定义应用层协议，常见端口号

互联网中&#xff0c;主流的是 TCP/IP 五层协议 5G/4G 上网&#xff0c;是有自己的协议栈&#xff0c;要比 TCP/IP 更复杂&#xff08;能够把 TCP/IP 的一部分内容给包含进去了&#xff09; 应用层 可以代表我们所编写的应用程序&#xff0c;只要应用程序里面用到了网络通信…
阅读更多...
进程间的通信3——IPC对象通信-＞共享内存、网络通信

进程间的通信3——IPC对象通信-＞共享内存、网络通信

一、共享内存 1、原理 直接对实际物理内存进行操作&#xff0c;不用先拷贝到用户空间再到内核空间&#xff08;物理内存&#xff09;。 2、特点 &#xff08;1&#xff09;共享内存是一块内核预留的空间&#xff1b; &#xff08;2&#xff09;最高效的通信方式。 3、操作 产…
阅读更多...
springboot+Quartz通过数据库控制定时任务执行与时间

springboot+Quartz通过数据库控制定时任务执行与时间

前言 在我们的springboot项目中&#xff0c;有很多种实现定时任务的方式 有用最简单的 Scheduled 实现定时任务,即&#xff1a; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component;Component EnableScheduling p…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023