React 后台管理系统之权限列表——antd引入、树形表格、删除、配置

RightList.js

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'
import { DeleteOutlined, EditOutlined } from "@ant-design/icons"
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

export default function RightList() {
  const [dataSource, setdataSource] = useState([])
  //拿到table中的内容
  useEffect(() => {
    //表格支持树形数据的展示,当数据中有 children 字段时会自动展示为树形表格
    //如果不需要或配置为其他字段可以用 childrenColumnName 进行配置
    axios.get('http://localhost:3000/rights?_embed=children').then(
      res => {
        //使得home的children:[]改为“”,就不会有“可展开”的图标
        const list = res.data
        list.forEach(
          item => {
            if (item.children.length === 0) {
              item.children = ""
            }
          }
        )
        setdataSource(list)
      }
    )
  }, [])
  //来自antd dataIndex要和后端键名一致
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return {id}
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return {key}
      }
    },
    {
      title: '操作',
      //item就是此对象
      render: (item) => {
        return 
} title="Title" trigger={item.pagepermisson === undefined ? '' : 'click'}>
} } ]; //切换权限方法 const switchMethod = (item) => { //关闭变打开 打开变关闭 item.pagepermisson = item.pagepermisson === 1 ? 0 : 1 //渲染页面 setdataSource([...dataSource]) //后端更新 补丁方法 if (item.grade === 1) {//外层一级 axios.patch(`http://localhost:3000/rights/${item.id}`, { pagepermisson: item.pagepermisson }) } else {//内层二级 axios.patch(`http://localhost:3000/children/${item.id}`, { pagepermisson: item.pagepermisson }) } } //删除权限方法 const confirmMethod = (item) => { confirm({ title: '你确定要删除?', icon: , onOk() { deleteMethod(item) }, onCancel() { console.log('Cancel'); }, }); } //确定删除方法 const deleteMethod = (item) => { console.log(item); //一级——树形层级为最外层时候 if (item.grade === 1) { //当前页面同步状态 //.filter方法直接返回一个新的数组 setdataSource(dataSource.filter( data => data.id !== item.id//循环每一项的id,如果不等于点击的id,才过滤出来 )) //后端同步 axios.delete(`http://localhost:3000/rights/${item.id}`) } else { //二级——树形层级为内层时候 console.log(item.rightId);//打印出2 为第二项内层数据 let list = dataSource.filter( data => data.id === item.rightId //找到点击的最外层的id 返回的list是[{}]里面只有最外层这一项 ) //把找到的这最外层一级的children重新赋值 list[0].children = list[0].children.filter( childData => childData.id !== item.id //除了点击的内层的id那项 都返回到新数组 ) setdataSource([...dataSource])//等于dataSource的新数组 //后端同步 axios.delete(`http://localhost:3000/children/${item.id}`) } } return ( //antd的table自带分页pagination
item.id} /> ) } //http://localhost:3000/rights?_embed=children // [ // { // "id": 1, // "title": "首页", // "key": "/home", // "pagepermisson": 1, // "grade": 1, // "children": [] // }, // { // "id": 2, // "title": "用户管理", // "key": "/user-manage", // "pagepermisson": 1, // "grade": 1, // "children": [ // { // "id": 3, // "title": "添加用户", // "rightId": 2, // "key": "/user-manage/add", // "grade": 2 // }, // { // "id": 4, // "title": "删除用户", // "rightId": 2, // "key": "/user-manage/delete", // "grade": 2 // }, // { // "id": 5, // "title": "修改用户", // "rightId": 2, // "key": "/user-manage/update", // "grade": 2 // }, // { // "id": 6, // "title": "用户列表", // "rightId": 2, // "key": "/user-manage/list", // "pagepermisson": 1, // "grade": 2 // } // ] // }, // { // "id": 7, // "title": "权限管理", // "key": "/right-manage", // "pagepermisson": 1, // "grade": 1, // "children": [ // { // "id": 8, // "title": "角色列表", // "rightId": 7, // "key": "/right-manage/role/list", // "pagepermisson": 1, // "grade": 2 // }, // { // "id": 9, // "title": "权限列表", // "rightId": 7, // "key": "/right-manage/right/list", // "pagepermisson": 1, // "grade": 2 // }, // { // "id": 10, // "title": "修改角色", // "rightId": 7, // "key": "/right-manage/role/update", // "grade": 2 // }, // { // "id": 11, // "title": "删除角色", // "rightId": 7, // "key": "/right-manage/role/delete", // "grade": 2 // }, // { // "id": 12, // "title": "修改权限", // "rightId": 7, // "key": "/right-manage/right/update", // "grade": 2 // }, // { // "id": 13, // "title": "删除权限", // "rightId": 7, // "key": "/right-manage/right/delete", // "grade": 2 // } // ] // }, // { // "id": 14, // "title": "新闻管理", // "key": "/news-manage", // "pagepermisson": 1, // "grade": 1, // "children": [ // { // "id": 15, // "title": "新闻列表", // "rightId": 14, // "key": "/news-manage/list", // "grade": 2 // }, // { // "id": 16, // "title": "撰写新闻", // "rightId": 14, // "key": "/news-manage/add", // "grade": 2, // "pagepermisson": 1 // }, // { // "id": 17, // "title": "新闻更新", // "rightId": 14, // "key": "/news-manage/update/:id", // "grade": 2, // "routepermisson": 1 // }, // { // "id": 18, // "title": "新闻预览", // "rightId": 14, // "key": "/news-manage/preview/:id", // "grade": 2, // "routepermisson": 1 // }, // { // "id": 19, // "title": "草稿箱", // "rightId": 14, // "key": "/news-manage/draft", // "pagepermisson": 1, // "grade": 2 // }, // { // "id": 20, // "title": "新闻分类", // "rightId": 14, // "key": "/news-manage/category", // "pagepermisson": 1, // "grade": 2 // } // ] // }, // { // "id": 21, // "title": "审核管理", // "key": "/audit-manage", // "pagepermisson": 1, // "grade": 1, // "children": [ // { // "id": 22, // "title": "审核新闻", // "rightId": 21, // "key": "/audit-manage/audit", // "pagepermisson": 1, // "grade": 2 // }, // { // "id": 23, // "title": "审核列表", // "rightId": 21, // "key": "/audit-manage/list", // "pagepermisson": 1, // "grade": 2 // } // ] // }, // { // "id": 24, // "title": "发布管理", // "key": "/publish-manage", // "pagepermisson": 1, // "grade": 1, // "children": [ // { // "id": 25, // "title": "待发布", // "rightId": 24, // "key": "/publish-manage/unpublished", // "pagepermisson": 1, // "grade": 2 // }, // { // "id": 26, // "title": "已发布", // "rightId": 24, // "key": "/publish-manage/published", // "pagepermisson": 1, // "grade": 2 // }, // { // "id": 27, // "title": "已下线", // "rightId": 24, // "key": "/publish-manage/sunset", // "pagepermisson": 1, // "grade": 2 // } // ] // } // ]

你可能感兴趣的:(React,antd,react.js,javascript,antd)