[JavaScript知识库]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 <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color="lime">{key}</Tag>
      }
    },
    {
      title: '操作',
      //item就是此对象
      render: (item) => {
        return <div>
          <Button danger shape="circle" icon={<DeleteOutlined />} style={{ marginRight: "5px" }}
            onClick={() => confirmMethod(item)} />
          {/* trigger控制可点击触发popover disabled控制是否为灰色禁用 */}
          <Popover content=
            {<div style={{ textAlign: "center" }}>
              <Switch
                checked={item.pagepermisson}
                onClick={() => switchMethod(item)}></Switch>
            </div>}
            title="Title"
            trigger={item.pagepermisson === undefined ? '' : 'click'}>
            <Button type="primary" shape="circle" icon={<EditOutlined />}
              disabled={item.pagepermisson === undefined && true} />
          </Popover>
        </div>
      }
    }
  ];
  
  //切换权限方法
  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: <ExclamationCircleOutlined />,
      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
    <div>
      <Table dataSource={dataSource} columns={columns}
        pagination={{
          pageSize: 5
        }} />
    </div>
  )
}

//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
//       }
//     ]
//   }
// ]