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

news2024/9/24 21:19:08

在这里插入图片描述

  • 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.coloradmin.cn/o/2053428.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3里面的组件实例类型(包括原生的html标签类型)

在 通过 ref&#xff08;null&#xff09;获取组件的时候&#xff0c;我们想要为 组件标注组件类型&#xff0c;可以通过 any 类型来进行标注&#xff0c;但是很明显&#xff0c;这些的代码很不优雅&#xff0c;所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注 这是…

基于STM32开发的智能窗帘控制系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 系统初始化光照检测与窗帘控制手动控制与状态指示Wi-Fi通信与远程控制应用场景 家庭智能窗帘办公室环境控制常见问题及解决方案 常见问题解决方案结论 1. 引言 智能窗帘控制系统通过集成光照…

去中心的投票平台

项目介绍&#xff1a; 前端&#xff1a; vue3vant4 工具&#xff1a; vscode和vant在线平台&#xff1a;Vant - Mobile UI Components 交互&#xff1a; Web3.js库 工具&#xff1a;小狐狸钱包&#xff08;MetaMask&#xff09; 后端&#xff1a; solisity 工具&#xff1…

Java并发必杀技!线程池让你的程序速度飙升不止一点点!

文章目录 1 线程池的工作机制是什么&#xff1f;2 线程池的任务出现异常该怎么解决&#xff1f;3 线程池的内存泄露该如何解决&#xff1f; 近期迷上了举例子来结合知识点学习&#xff0c;尽量减少枯燥&#xff0c;如有错见谅哈~ 1 线程池的工作机制是什么&#xff1f; 线程池…

登录方式(c语言)

1.//描述 //有个软件系统登录的用户名和密码为&#xff08;用户名&#xff1a;admin&#xff0c;密码&#xff1a;admin&#xff09;&#xff0c;用户输入用户名和密码&#xff0c;判断是否登录成功。 //输入描述&#xff1a; //多组测试数据&#xff0c;每行有两个用空格分开的…

Java语言程序设计——篇十五(1)

&#x1f33f;&#x1f33f;&#x1f33f;跟随博主脚步&#xff0c;从这里开始→博主主页&#x1f33f;&#x1f33f;&#x1f33f; 欢迎大家&#xff1a;这里是我的学习笔记、总结知识的地方&#xff0c;喜欢的话请三连&#xff0c;有问题可以私信&#x1f333;&#x1f333;&…

K8s节点状态 NotReady排查

k8s节点由 Ready变成 NotReady izbp12ghzy6koox6fqt0suz NotReady slave 97d v1.23.3 izbp12ghzy6koox6fqt0svz Ready control-plane,master 98d v1.23.3节点进入 NotReady 状态可能是由于多种原因引起的&#xff0c;尤其是在资源过量分配&am…

CSS+JS实现一个鼠标移动的高亮边框效果

一、过程分析 先上效果&#xff1a; 在Windows系统里有一个很棒的细节效果&#xff0c;元素的渐变高亮边框是可以感知鼠标的&#xff0c;边框的高亮部分会跟随鼠标的移动而移动。 这种效果也是比较常见的&#xff0c;但是实现起来还是需要一点时间和思路的。 首先&#xff0…

花裤衩 vue 前后端登录

从官网复制地址, idea中打开打开后输入 npm i 编译下载修改配置 找到 vue.config.js打开后,找到第39行 删除代码, 把可粘贴粘上 可粘贴: proxy: { [process.env.VUE_APP_BASE_API]: { target: http://127.0.0.1:18080, changeOrigin: true, pathRewrite…

使用托管竞价实例在Amazon SageMaker上运行机器学习训练

这是本系列文章的第二篇&#xff0c;旨在通过动手实践&#xff0c;帮助大家学习亚马逊云科技的生成式AI相关技能。通过这些文章&#xff0c;大家将掌握如何利用亚马逊云科技的各类服务来应用AI技术。 那么让我们开始今天的内容吧&#xff01; 介绍 什么是Amazon SageMaker …

ant design pro access.ts 是如何控制多角色的权限的

ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二 看上面的图片&#xff0c;在前端中如何控制这些权限&#xff0c;比如控制按钮的显示&#xff0c;还有菜单…

Stable diffusion模型分几种?一文详解,入门必看!

在Stable Diffusion中&#xff0c;模型并不只有一种&#xff0c;不同插件有不同的模型&#xff0c;分别作用于不同的功能。今天就带大家一起来学习一下&#xff5e; 01 大模型 也就是stable diffusion模型&#xff0c;在默认界面中&#xff0c;它位于web页面的左上角&#x…

[数据结构] RBTree 模拟实现RBTree

标题&#xff1a;[数据结构] RBTree && 模拟实现RBTree 水墨不写bug 目录 一、红黑树的概念 二、map和set的封装 三、红黑树的实现 1、红黑树节点的定义 2、红黑树的结构 3、红黑树的插入 1.名称 2.插入节点的颜色 红黑树的insert 实现 情况一&#xff1a;不…

微信自动化管理了解下

微信作为一款广泛使用的社交软件&#xff0c;已经成为人们日常生活中不可或缺的通讯工具。不仅个人用户频繁使用&#xff0c;许多企业也依赖微信进行业务沟通和客户服务。 然而&#xff0c;对于企业用户来说&#xff0c;管理多个微信账户往往带来诸多繁琐和不便之处。这些问题…

Django+anaconda

一、搭建django虚拟环境 打开anaconda prompt 输入&#xff1a;conda create -n mydjango_env 判断&#xff08;y/n&#xff09;:y 查看虚拟环境 conda env list *号表示当前使用的环境 激活创建的虚拟环境 activate mydjango_env 二、安装Django 在新环境激活的状态下安装…

Nature|通过范德华层压实现三维单片集成系统 (半导体器件/集成电路)

2024年5月22日,湖南大学刘渊(Yuan Liu)教授课题组,在《Nature》上发布了一篇题为“Monolithic three-dimensional tier-by-tier integration via van der Waals lamination”的论文。第一作者为湖南大学物理与微电子科学学院陆冬林(Donglin Lu)博士。论文内容如下: 一、 …

Stable Diffusion 的采样器

一图 不推荐使用的采样器 PLMS LMS LMS Karras DPM fast DPM2 DPM2a DPM2 Karras DPM2 a Karras 可以在设置里把采样器去掉

同态加密和SEAL库的介绍(十)CKKS 参数心得 2

写在前面&#xff1a; 本篇继续上篇的测试&#xff0c;首先针对密文深度乘法情况&#xff0c;虽然密文乘法本就是应该尽量避免的&#xff08;时间和内存成本过高&#xff09;&#xff0c;更不用说深度乘法了&#xff0c;但是为了测试的完整性&#xff0c;还是做一下方便大家比对…

CVE-2021-21315漏洞复现

一、基本信息 攻击机&#xff1a;kali IP:192.168.100.60 靶机&#xff1a;CentOS7 IP:192.168.100.40 二、攻击过程 下载node.js环境 wget https://nodejs.org/dist/v12.18.4/node-v12.18.4-linux-x64.tar.xz tar -xvf node-v12.18.4-linux-x64.tar.xz mv node-v12.18.4-…

89.WEB渗透测试-信息收集-Google语法(3)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;88.WEB渗透测试-信息收集-Google语法&#xff08;2&#xff09; 常用的 Google 语法的作用…