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.Group
          name="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 permission
    if (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 changes

  return { 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 (
    <ProForm
      initialValues={{
        ...values,
        roles: values?.roles?.map((role: { _id: string }) => role._id),
      }}
      onFinish={async (values) => {
        await onFinish({
          ...values,
        });
      }}
    >
      <ProForm.Group>
        <ProFormText
          rules={[{ required: true, message: intl.formatMessage({ id: 'enter_name' }) }]}
          width="md"
          label={intl.formatMessage({ id: 'name' })}
          name="name"
        />
        <ProFormText
          rules={[{ required: true, message: intl.formatMessage({ id: 'enter_email' }) }]}
          width="md"
          label={intl.formatMessage({ id: 'email' })}
          name="email"
        />
        <ProFormText
          rules={[{ required: newRecord, message: intl.formatMessage({ id: 'enter_password' }) }]}
          width="md"
          label={intl.formatMessage({ id: 'password' })}
          name="password"
        />

        <ProFormCheckbox.Group
          name="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.mfbz.cn/a/872020.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自带灭火电池?深蓝SL03托底事故揭秘

近日&#xff0c;网络上的一段热传视频&#xff0c;让不少网友看得先是惊心动魄&#xff0c;然后却又啧啧称奇。 该视频显示&#xff0c;8月18日晚上19点28分&#xff0c;一辆深蓝SL03在行驶中意外遭遇严重托底事故&#xff0c;车辆瞬间腾空跳跃&#xff0c;紧接着底盘出现明火…

禁止浏览器默认填充密码 vue

禁止浏览器默认填充密码会和我的样式冲突 所以禁止 第一种&#xff1a; 通过给表单元素添加 autocomplete"off" 属性&#xff0c; 可以防止浏览器自动填充表单中的账号和密码。可以在 input 标签或整个 form 标签上使用&#xff1a; <template><a-form&g…

向量数据库中的PQ(Procduct Quantization)

为了加快向量之间距离计算和比较速度&#xff0c;有人发明的Product Quantization方法&#xff0c;这个方法并不是一种索引&#xff0c;所以它并不能减少目标向量&#xff08;要查找的向量&#xff09;&#xff0c;与数据库中向量的比较次数&#xff0c;但是它可以加快与每个数…

(第三十三天)

1. 设置主从从 mysql57 服务器 &#xff08; 1 &#xff09;配置主数据库 [rootmsater_5 ~] # systemctl stop filewalld [rootmsater_5 ~] # setenforce 0 [rootmsater_5 ~] # systemctl disable filewalld [rootmsater_5 ~] # ls anaconda-ks.cfg mysql-5.7.44-linux-g…

uniapp 页面跳转传参:父页面监听子页面传过来的数据

父页面 监听events事件 uni.navigateTo({url: "/components/watermark-camera",events: { // 重点重点重点重点重点重点重点重点getImages(data) { // 接收子页面抛出的 getImages 事件console.log("水印相机的照片&#xff1a;", data)}}})子页面 const …

<数据集>航拍牧场奶牛识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1805张 标注数量(xml文件个数)&#xff1a;1805 标注数量(txt文件个数)&#xff1a;1805 标注类别数&#xff1a;1 标注类别名称&#xff1a;[cow] 序号类别名称图片数框数1cow1805141337 使用标注工具&#xff…

World of Warcraft [CLASSIC] the Eye of Eternity [EOE] P1-P2

World of Warcraft [CLASSIC] the Eye of Eternity [EOE] 永恒之眼&#xff08;蓝龙&#xff09; 第一阶段 第二阶段 第三阶段 载具1-6技能介绍 World of Warcraft [CLASSIC] the Eye of Eternity [EOE]_永恒之眼 eoe-CSDN博客 永恒之眼怎么出副本呢&#xff0c;战斗结束&am…

makefile文件基本语法

一、makefile文件基本介绍 Makefile 文件是 make 工具使用的配置文件&#xff0c;它定义了如何自动化构建项目的规则和命令。Makefile 文件的主要作用是指定如何编译和链接程序&#xff0c;以及管理文件之间的依赖关系&#xff0c;从而实现高效的构建过程。 1.1 Makefile 的基…

uniapp微信小程序 分享功能

uniapp https://zh.uniapp.dcloud.io/api/plugins/share.html#onshareappmessage export default {onShareAppMessage(res) {if (res.from button) {// 来自页面内分享按钮console.log(res.target)}return {title: 自定义分享标题,path: /pages/test/test?id123}} }需要再真机…

Appium定位元素

使用工具&#xff1a; 报错: Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn‘t 参考链接&#xff1a;Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn‘t-CSD…

Centos安装Jenkins教程详解版(JDK8+Jenkins2.346.1)

本教程基于 JDK8 和 Jenkins2.346.1 JDK安装 下载OpenJDK8文件 wget https://mirrors.tuna.tsinghua.edu.cn/Adoptium/8/jdk/x64/linux/OpenJDK8U-jdk_x64_linux_hotspot_8u422b05.tar.gz解压到指定目录 # 创建目录 mkdir -p /usr/local/software# 解压文件到指定目录&#…

Eclipse部署一个项目到Tomcat和部署多个项目到Tomcat

Eclipse部署一个项目到Tomcat&#xff1a; https://blog.csdn.net/weixin_42334396/article/details/105902994 Eclipse部署多个项目到Tomcat&#xff1a; https://blog.csdn.net/zhanglin1220/article/details/82056185 使用cmd方法强制关闭端口&#xff0c;解除端口占用方法&…

多元统计分析——基于R语言的单车使用情况可视化分析

注&#xff1a;基于R语言的单车使用情况可视化分析为实验记录&#xff0c;存在不足&#xff0c;自行改进。 一、提出问题&#xff08;要解决或分析的问题&#xff09; 1 、用户对共享单车的使用习惯&#xff0c;环境对共享单车运营带来的影响&#xff1f; 2 、共享单车的租赁…

stripe Element 如何使用

这里要准备好几个东西&#xff1a; 一个支付成功过后的回调 还有一个下单的接口 一旦进入这个下单界面&#xff0c;就要去调下单的接口的&#xff0c;用 post, 这个 接口你自己写&#xff0c;可以写在后端中&#xff0c;也可以放到 nextjs 的 api 中。 首先说的是这个下单…

聚星文社——绘唐科技Ai推文软件

聚星文社——绘唐科技Ai推文软件 聚星文社--绘唐科技Ai推文软件https://iimenvrieak.feishu.cn/docx/ZhRNdEWT6oGdCwxdhOPcdds7nof AI推文软件是一种利用人工智能技术帮助用户自动生成推文内容的工具。 该软件会分析用户提供的相关信息和目标群体&#xff0c; 然后使用机器学习…

闲置物品交易平台网站商城-计算机毕设Java|springboot实战项目

&#x1f393; 作者&#xff1a;计算机毕设小月哥 | 软件开发专家 &#x1f5a5;️ 简介&#xff1a;8年计算机软件程序开发经验。精通Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等技术栈。 &#x1f6e0;️ 专业服务 &#x1f6e0;️ 需求定制化开发源码提…

【运维高级内容--MySQL】

目录 一、mysql安装 二、MySQL主从复制 一、mysql安装 yum install cmake gcc-c openssl-devel ncurses-devel.x86_64 rpcgen.x86_64 #安装依赖性 #在root路径下下载mysql-boost-5.7.44、libtirpc-devel-1.3.3-8.el9_4.x86_64.rpm安装包 yum install libtirpc-devel…

MFC之word操作

MFC对word操作 背景说明 当对程序的内容进行输出时&#xff0c;比如自定义对象属性描述或者注释&#xff08;详细设计&#xff09;生成文档时&#xff0c;如果采用手动输入会比较麻烦&#xff0c;并且当程序变动时&#xff0c;需要再一次修改对应文档&#xff0c;作为程序员做…

ASP.NET Core 入门教程一 创建最小 API

构建最小 API&#xff0c;以创建具有最小依赖项的 HTTP API。 它们非常适合需要在 ASP.NET Core 中仅包括最少文件、功能和依赖项的微服务和应用。 本教程介绍使用 ASP.NET Core 生成最小 API 的基础知识。 启动 Visual Studio 2022 并选择“创建新项目”。 在“创建新项目”…

移情别恋c++ ദ്ദി˶ー̀֊ー́ ) ——6.vector(模拟实现)

1.存储结构 namespace zone {template<class T> //需要模板class vector{public:private:iterator _start;iterator _finish;iterator _endofstorage;}; } 可见&#xff0c;vector内核是由三个指针实现的 2.默认成员函数 2.1.构造函数 1.初始化列表 vector() :_star…