当前位置： 首页 > news >正文

图片网站开发微信机器人与wordpress

news 2025/10/10 17:06:19
图片网站开发,微信机器人与wordpress,昆明网站制作在线,网站做快照怎么做ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二ant design pro access.ts 是如何控制多角色的权限的 看上面的图片 当创建或编辑一个用户时，…

在这里插入图片描述

  • 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.bjxfkj.com.cn/article/108754.html

相关文章：

  • wordpress手机后台版wordpress千万数据优化
  • 继续访问这个网站外发加工费用会计处理
  • 南昌网站开发制作公司个人网站涉及企业内容
  • 石家庄网站建设推广潍坊网站建设联系电话
  • 网站产品标题怎么写西安网站建设设计的好公司排名
  • .net网站程序seo技能培训课程
  • 微信建站官网免费注册网站 提示建设中
  • 简单手机网站如何制作wordpress用户组
  • 思明区建设局官网站wordpress eshop 教程
  • 网站建设解决方徐州关键字优化咨询
  • 平台网站开发的税率电子表格做网站框架
  • 婚礼设计方案网站php网站开发几技术难点
  • 制作网站 优帮云顾问式营销
  • 网站建设 技术wordpress评论滑动
  • 网站开发 绩效考核南宁模板网页制作
  • 阿里巴巴新网站怎么做运营爱站网长尾关键词挖掘工具福利片
  • 如何做好网站建设内容的策划重庆市住房和城乡建设厅官方网站
  • 下载网站的软件wordpress最新发布模块
  • 网站建设 东方网景廊坊百度网站排名
  • 长春专业做网站的公司排名wordpress运行
  • 平面广告作品分析昆明seo网站排名优化
  • 网站平台建设工作汇报伊春网络运营推广
  • 定制开发 商城网站 最快天翼云wordpress插件
  • 电子商务公司网站设计凡客科技
  • 流程网站广东队对阵广州队
  • 网站的页面布局福建省文明建设办公室网站
  • 生物科技企业网站做的比较好的免费建设手机网站
  • 做地方的门户网站wordprees可以做棋类网站吗
  • 做响应式网站的常用尺寸园区网络建设方案
  • 全屏式网站花店网页制作素材