import React, { Component } from 'react'
import {Button,Card,Table,Space} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Panel } from '../../../components'
import { connect } from 'react-redux'
import ModalFrom from './ModalForm'
class Menu extends Component {
constructor(props){
super(props);
this.state = {
dataSource:[]
}
}
onGetlist=()=>{
global.service.get('/api/menu/list').then(data=>{
console.log(data);
this.setState({dataSource:data.records})
})
}
componentDidMount(){
this.onGetlist()
}
onAdd=(record) =>{
//打开弹窗
return ()=>{
this.props.dispatch({
type:'showModalForm',
data:{
title:'新增', //弹窗标题
data:record?{name:record.name,pid:record.id}:{},//表单数据
refreshList:this.onGetlist
}
})
}
}
getTableProps = () =>{
return {
colums:[
{
title:'菜单',
dataIndex:'name',
},
{
title:'访问地址',
dataIndex:'linkUrl',
},
{
title:'操作',
render:(record) =>(
<Space>
<a>查看</a>
<a>编辑</a>
<a>删除</a>
<a onClick={this.onAdd}>新增</a>
</Space>
)
}
],
dataSource:this.state.dataSource||[],
rowKey:'id',
pagination:false
}
}
render() {
const {modalFrom} = this.props.menuState;
return (
<Panel title='菜单管理'>
<div className='m-operate'>
<Button type='primary' icon={<PlusOutlined/>} onClick={this.onAdd()}>新增</Button>
</div>
<Card>
{/* 列表组件 */}
<Table {...this.getTableProps()}/>
</Card>
{modalFrom&&<ModalFrom {...modalFrom} {...this.props}/>}
</Panel>
)
}
}
const mapStateToProps = (store) =>({menuState:store.menu})
const mapDispatchToProps = (dispatch) =>({dispatch})
export default connect(mapStateToProps,mapDispatchToProps)(Menu)
京公网安备 11011402011233号