项目实战-角色列表

抄上一次写过的代码：

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 } = Modalfunction 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><Buttontype="primary"shape="circle"icon={<BarsOutlined />}onClick={showModal}/><Buttondangertype="primary"shape="circle"icon={<DeleteOutlined />}onClick={() => confirmMethod(item)}/></div>),},]return (<div><TabledataSource={dataSource}columns={columns}rowKey={(item) => item.id}/>{/* Modal 组件 */}<Modaltitle="权限分配"open={isModalVisible}onOk={handleOk}onCancel={handleCancel}><Treecheckable 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 } = Modalfunction 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}}))//patchaxios.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><Buttontype="primary"shape="circle"icon={<BarsOutlined />}onClick={()=>{setIsModalVisible(true)setCurrentRights(item.rights)setCurrentId(item.id)}}/><Buttondangertype="primary"shape="circle"icon={<DeleteOutlined />}onClick={() => confirmMethod(item)}/></div>),},]return (<div><TabledataSource={dataSource}columns={columns}rowKey={(item) => item.id}/>{/* Modal 组件 */}<Modaltitle="权限分配"open={isModalVisible}onOk={handleOk}onCancel={handleCancel}><Treecheckable treeData={rightList}checkedKeys={currentRights}checkStrictly = {true} onCheck={onCheck}/></Modal></div>)
}export default RoleList