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
}}
rowKey={item => item.id} />
</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
// }
// ]
// }
// ]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
