项目实战-角色列表

news2025/4/3 23:43:57

抄上一次写过的代码：

import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Button, Table, Modal } from 'antd';
import { BarsOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

function RoleList() {
    const [dataSource, setdataSource] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:3000/roles').then(res => {
            setdataSource(res.data);
        });
    }, []);

    const confirmMethod = (record) => {
        confirm({
            title: '确定要删除这个角色吗？',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(record);
            },
            onCancel() {
                console.log('取消删除');
            },
        });
    };

    const deleteMethod = (record) => {
        // 先更新本地状态
        setdataSource(dataSource.filter(item => item.id !== record.id));
        // 发送删除请求
        axios.delete(`http://localhost:3000/roles/${record.id}`);
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => <b>{id}</b>,
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
        },
        {
            title: "操作",
            render: (item) => (
                <div>
                    <Button type="primary" shape="circle" icon={<BarsOutlined />} />
                    <Button 
                        danger 
                        type="primary" 
                        shape="circle" 
                        icon={<DeleteOutlined />} 
                        onClick={() => confirmMethod(item)}
                    />
                </div>
            ),
        }
    ];

    return (
        <div>
            <Table 
                dataSource={dataSource} 
                columns={columns} 
                rowKey={(item) => item.id} 
            />
        </div>
    );
}

export default RoleList;

就可以实现一个和后端数据也可以同步的功能了：

我们需要用到树形控件：

还要实现这个弹出框的效果 

import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Button, Table, Modal } from 'antd';
import { BarsOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

function RoleList() {
    const [dataSource, setdataSource] = useState([]);
    const [isModalVisible, setIsModalVisible] = useState(false);

    useEffect(() => {
        axios.get('http://localhost:3000/roles').then(res => {
            setdataSource(res.data);
        });
    }, []);

    const confirmMethod = (record) => {
        confirm({
            title: '确定要删除这个角色吗？',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(record);
            },
            onCancel() {
                console.log('取消删除');
            },
        });
    };

    const deleteMethod = (record) => {
        setdataSource(dataSource.filter(item => item.id !== record.id));
        axios.delete(`http://localhost:3000/roles/${record.id}`);
    };

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        console.log("点击了确认");
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        console.log("点击了取消");
        setIsModalVisible(false);
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => <b>{id}</b>,
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
        },
        {
            title: "操作",
            render: (item) => (
                <div>
                    <Button type="primary" shape="circle" icon={<BarsOutlined />} onClick={showModal} />
                    <Button 
                        danger 
                        type="primary" 
                        shape="circle" 
                        icon={<DeleteOutlined />} 
                        onClick={() => confirmMethod(item)}
                    />
                </div>
            ),
        }
    ];

    return (
        <div>
            <Table 
                dataSource={dataSource} 
                columns={columns} 
                rowKey={(item) => item.id} 
            />
            {/* Modal 组件 */}
            <Modal 
                title="权限分配" 
                open={isModalVisible} 
                onOk={handleOk} 
                onCancel={handleCancel}
            >
                <p>这里可以放权限分配的内容</p>
                <p>比如角色权限列表</p>
                <p>或者其他选项</p>
            </Modal>
        </div>
    );
}

export default RoleList;

能显示modal对话框，下一步实现树形结构

tree的使用就是引入一个tree组件，然后数据满足树形结构

这太棒了

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Button, Table, Modal,Tree } from 'antd'
import {
  BarsOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'

const { confirm } = Modal

function RoleList() {
  const [dataSource, setdataSource] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [rightList, setRightList] = useState([])

  useEffect(() => {
    axios.get('http://localhost:3000/roles').then((res) => {
      setdataSource(res.data)
    })
  }, [])

  useEffect(() => {
    axios.get('http://localhost:3000/rights?_embed=children').then((res) => {
      setRightList(res.data)
    })
  }, [])

  const confirmMethod = (record) => {
    confirm({
      title: '确定要删除这个角色吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(record)
      },
      onCancel() {
        console.log('取消删除')
      },
    })
  }

  const deleteMethod = (record) => {
    setdataSource(dataSource.filter((item) => item.id !== record.id))
    axios.delete(`http://localhost:3000/roles/${record.id}`)
  }

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleOk = () => {
    console.log('点击了确认')
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    console.log('点击了取消')
    setIsModalVisible(false)
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => <b>{id}</b>,
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (item) => (
        <div>
          <Button
            type="primary"
            shape="circle"
            icon={<BarsOutlined />}
            onClick={showModal}
          />
          <Button
            danger
            type="primary"
            shape="circle"
            icon={<DeleteOutlined />}
            onClick={() => confirmMethod(item)}
          />
        </div>
      ),
    },
  ]

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
      />
      {/* Modal 组件 */}
      <Modal
        title="权限分配"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Tree
          checkable treeData={rightList}/>
      </Modal>
    </div>
  )
}

export default RoleList

此后想要实现页面同步和后端的同步：

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Button, Table, Modal,Tree } from 'antd'
import {
  BarsOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'

const { confirm } = Modal

function RoleList() {
  const [dataSource, setdataSource] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [rightList, setRightList] = useState([])
  //默认选中
  const [currentRights, setCurrentRights] = useState([])
  const [currentId,setCurrentId] = useState(0)

  useEffect(() => {
    axios.get('http://localhost:3000/roles').then((res) => {
      setdataSource(res.data)
    })
  }, [])

  useEffect(() => {
    axios.get('http://localhost:3000/rights?_embed=children').then((res) => {
      setRightList(res.data)
    })
  }, [])

  const confirmMethod = (record) => {
    confirm({
      title: '确定要删除这个角色吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(record)
      },
      onCancel() {
        console.log('取消删除')
      },
    })
  }

  const deleteMethod = (record) => {
    setdataSource(dataSource.filter((item) => item.id !== record.id))
    axios.delete(`http://localhost:3000/roles/${record.id}`)
  }

  const showModal = () => {
    setIsModalVisible(true)
    //dataSource重新映射
  }

  const handleOk = () => {
    console.log('点击了确认')
    setIsModalVisible(false)
    setdataSource(dataSource.map(item=>{
        if(item.id === currentId){
            return{
                ...item,
                rights:currentRights
            }
        }
        else{
            return item
        }
    }))
    //patch
    axios.patch(`http://localhost:3000/roles/${currentId}`,{
        rights:currentRights
    })
  }

  const handleCancel = () => {
    console.log('点击了取消')
    setIsModalVisible(false)
  }

  // 选中的权限
  const onCheck = (checkedKeys, checkedInfo) => {
    setCurrentRights(checkedKeys)
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => <b>{id}</b>,
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (item) => (
        <div>
          <Button
            type="primary"
            shape="circle"
            icon={<BarsOutlined />}
            onClick={()=>{
                setIsModalVisible(true)
                setCurrentRights(item.rights)
                setCurrentId(item.id)
            }}
          />
          <Button
            danger
            type="primary"
            shape="circle"
            icon={<DeleteOutlined />}
            onClick={() => confirmMethod(item)}
          />
        </div>
      ),
    },
  ]

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
      />
      {/* Modal 组件 */}
      <Modal
        title="权限分配"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Tree
          checkable 
          treeData={rightList}
          checkedKeys={currentRights}
          checkStrictly = {true} 
          onCheck={onCheck}
          />
      </Modal>
    </div>
  )
}

export default RoleList

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

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

相关文章

26_ajax

26_ajax

目录 了解 接口 前后端交互 一、安装服务器环境 nodejs ajax发起请求 渲染响应结果 get方式传递参数 post方式传递参数 封装ajax_上 封装ajax下 了解 清楚前后端交互就可以写一些后端代码了。小项目 现在写项目开发的时候都是前后端分离 之前都没有前端这个东西&a…
阅读更多...
Kafka中的消息是如何存储的？

Kafka中的消息是如何存储的？

大家好&#xff0c;我是锋哥。今天分享关于【Kafka中的消息是如何存储的&#xff1f;】面试题。希望对大家有帮助&#xff1b; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#xff0c;消息是通过 日志&#xff08;Log&#xff09; 的方式进行存储的。…
阅读更多...
Altium Designer——同时更改多个元素的属性（名称、网络标签、字符串标识）

Altium Designer——同时更改多个元素的属性（名称、网络标签、字符串标识）

右键要更改的其中一个对象&#xff0c;选择查找相似… 进入到筛选界面&#xff0c;就是选择你要多选的对象的共同特点&#xff08;名字、大小等等&#xff09;&#xff0c;我这里要更改的是网络标签&#xff0c;所以我选择Text设置为一样。 点击应用就是应用该筛选调节&#…
阅读更多...
当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计

当模板方法模式遇上工厂模式：一道优雅的烹饪架构设计

当模板方法模式遇上工厂模式&#xff1a;一道优雅的烹饪架构设计 模式交响曲的实现模板方法模式搭建烹饪骨架&#xff08;抽象类&#xff09;具体菜品&#xff08;子类&#xff09; 工厂模式 模式协作的优势呈现扩展性演示运行时流程控制 完整代码 如果在学习 设计模式的过程中…
阅读更多...
企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

文章目录 一、引言二、主流产品与方案对比表三、自建方案 vs. 开源产品集成&#xff1a;技术路径对比3.1 自建方案3.2 开源产品集成方案 四、结论与个人观点 一、引言 在当今数据驱动的商业环境中&#xff0c;构建高质量的知识库已成为企业数字化转型的关键一环。本博客分别从…
阅读更多...
vue3项目配置别名

vue3项目配置别名

vue3项目配置别名 src别名的配置TypeScript 编译配置如果出现/别名引入报找不到的问题 src别名的配置 在开发项目的时候文件与文件关系可能很复杂&#xff0c;因此我们需要给src文件夹配置一个别名&#xff01;&#xff01;&#xff01; // vite.config.ts import {defineCon…
阅读更多...
[ C语言 ] | 从0到1？

[ C语言 ] | 从0到1？

目录 认识计算机语言 C语言 工欲善其事必先利其器 第一个C语言代码 这一些列 [ C语言 ] &#xff0c;就来分享一下 C语言 相关的知识点~ 认识计算机语言 我们说到计算机语言&#xff0c;语言&#xff0c;就是用来沟通的工具&#xff0c;计算机语言呢&#xff1f;就是我们…
阅读更多...
[Mac]利用Hexo+Github Pages搭建个人博客

[Mac]利用Hexo+Github Pages搭建个人博客

由于我这台Mac基本没啥环境&#xff0c;因此需要从零开始配置&#xff0c;供各位参考。 注意⚠️&#xff1a;MacBook (M4)使用/bin/zsh作为默认Shell&#xff0c;其对应的配置文件为~/.zshrc 参考文档&#xff1a; HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程 文…
阅读更多...
Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决

Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决

Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决&#xff08;保姆级教学&#xff01;&#xff09; 在使用Qt开发IMX6ULL嵌入式系统的过程中&#xff0c;我遇到了图片加载的常见问题。本文将分享问题排查的详细过程和解决方案&#xff0c;希望能帮助遇到类似困难的开发者。 问题…
阅读更多...
界面控件Telerik和Kendo UI 2025 Q1亮点——AI集成与数据可视化

界面控件Telerik和Kendo UI 2025 Q1亮点——AI集成与数据可视化

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库&#xff0c;加快开发速度。Telerik DevCraft提供完整的工具箱&#xff0c;用于构建现代和面向未来的业务应用程序&#xff0c;目前提供UI for ASP.NET MVC、Kendo…
阅读更多...
pycharm终端操作远程服务器

pycharm终端操作远程服务器

pycharm项目已经连接了远程服务器&#xff0c;但是打开终端&#xff0c;却依旧显示的是本地的那个环境&#xff0c;也就是说没有操作远程的那个环境。只能再使用Xshell去操作远程环境&#xff0c;很麻烦&#xff0c;找了下教程。 来源&#xff1a;https://blog.csdn.net/maolim…
阅读更多...
接口测试中数据库验证，怎么解决？

接口测试中数据库验证，怎么解决？

在接口测试中&#xff0c;通常需要在接口调用前后查询数据库&#xff0c;以验证接口操作是否正确影响了数据库状态。​这可以通过数据库断言来实现&#xff0c;PyMySQL库常用于连接和操作MySQL数据库。​通过该库&#xff0c;可以在测试中执行SQL语句&#xff0c;查询或修改数据…
阅读更多...
Playwright从入门到实战：比Selenium更快的数据爬取案例实战

Playwright从入门到实战：比Selenium更快的数据爬取案例实战

摘要 Playwright 是微软开源的下一代浏览器自动化工具&#xff0c;凭借其高性能、跨浏览器支持和现代化设计&#xff0c;迅速成为 Web 自动化领域的热门选择。本文将从 安装配置 开始&#xff0c;通过 实战演练 展示其核心功能&#xff0c;并与 Selenium 深度对比&#xff0c;…
阅读更多...
day1_Flink基础

day1_Flink基础

文章目录 Flink基础今日课程内容目标为什么要学Flink技术更新迭代市场需求 流式计算批量计算概念特点 批量计算的优势和弊端流式计算生活中流场景流式计算的概念 Flink简介Flink历史Flink介绍 Flink架构体系已学过的框架技术Flink架构 Flink集群搭建Flink的集群模式Standalone模…
阅读更多...
使用FastExcel时的单个和批量插入的问题

使用FastExcel时的单个和批量插入的问题

在我们用excel表进行插入导出的时候&#xff0c;通常使用easyexcel或者FastExcel&#xff0c;而fastexcel是easy的升级版本&#xff0c;今天我们就对使用FastExcel时往数据库插入数据的业务场景做出一个详细的剖析 场景1 现在我们数据库有一张组织表&#xff0c;组织表的字段…
阅读更多...
交换技术综合实验

交换技术综合实验

一、实验拓扑 二、实验要求 内网IP地址使用172.16.0.0/16分配。 SW1和SW2之间互为备份。 VRRP/STP/VLAN/Eth-trunk均使用。 所有PC通过DHCP获取IP地址。 ISP只能配置IP地址。 所有电脑可以正常访问ISP路由器。 三、实验步骤 基于172.16.0.0/16进行划分 172.16.2.0/24&…
阅读更多...
记录Jmeter 利用BeanShell 脚本解析JSON字符串

记录Jmeter 利用BeanShell 脚本解析JSON字符串

下载org.json包(文档说明) #下载地址 https://www.json.org/ # github 地址 https://github.com/stleary/JSON-java # api 文档说明 https://resources.arcgis.com/en/help/arcobjects-java/api/arcobjects/com/esri/arcgis/server/json/JSONObject.htmlBeanShell脚本 import…
阅读更多...
深入解析音频：格式、同步及封装容器

深入解析音频：格式、同步及封装容器

物理音频和数字音频 物理音频 定义&#xff1a;物理音频就是声音在自然界中的物理表现形式&#xff0c;本质上是一种机械波&#xff0c;通过空气或其他介质传播。例如&#xff0c;当我们说话、乐器演奏或物体碰撞时&#xff0c;都会产生振动&#xff0c;这些振动会引起周围介…
阅读更多...
RPCGC阅读

RPCGC阅读

24年的MM 创新 现有点云压缩工作主要集中在保真度优化上。 而在实际应用中&#xff0c;压缩的目的是促进机器分析。例如&#xff0c;在自动驾驶中&#xff0c;有损压缩会显着丢失户外场景的详细信息。在三维重建中&#xff0c;压缩过程也会导致场景数据中语义信息(Contour)的…
阅读更多...
医疗CMS高效管理：简化更新维护流程

医疗CMS高效管理：简化更新维护流程

内容概要 医疗行业内容管理系统&#xff08;CMS&#xff09;的核心价值在于应对医疗信息管理的多维复杂性。面对诊疗指南的动态更新、科研数据的快速迭代以及多机构协作需求&#xff0c;传统管理模式往往面临效率瓶颈与合规风险。现代化医疗CMS通过构建结构化权限管理矩阵&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023