import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Table, Button, Modal } from 'antd'
|
|
import MenuForm from '../menuform'
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
class SubTable extends Component {
|
static propTpyes = {
|
menus: PropTypes.object, // 卡片行信息
|
}
|
|
state = {
|
data: [],
|
columns: [
|
{ title: 'Date', dataIndex: 'date', key: 'date' },
|
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
{
|
title: 'Status',
|
key: 'state',
|
render: () => (
|
<span>
|
Finished
|
</span>
|
),
|
},
|
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
{
|
title: 'Action',
|
dataIndex: 'operation',
|
key: 'operation',
|
render: () => (
|
<span className="table-operation">
|
<a href>Pause</a>
|
<a href>Stop</a>
|
</span>
|
),
|
},
|
]
|
}
|
|
UNSAFE_componentWillMount () {
|
// const { data } = this.props
|
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
handleSubmit = (e) => {
|
e.preventDefault()
|
|
if (this.props.inputSubmit) {
|
this.props.inputSubmit()
|
}
|
}
|
|
render() {
|
const { columns, data } = this.state
|
|
return (
|
<Table
|
className="components-table-demo-nested"
|
columns={columns}
|
dataSource={data}
|
/>
|
)
|
}
|
}
|
|
class MenuTable extends Component {
|
static propTpyes = {
|
menus: PropTypes.object, // 卡片行信息
|
}
|
|
state = {
|
data: [],
|
editMenu: null,
|
columns: [
|
{ title: '菜单名称', dataIndex: 'name', key: 'name' },
|
{ title: '属性', dataIndex: 'property', key: 'property', render: text => {
|
if (text === 'menu') {
|
return '菜单'
|
} else {
|
return '分类'
|
}
|
}},
|
{ title: 'Action', key: 'operation', render: () => <a href="#d">Publish</a> },
|
]
|
}
|
|
UNSAFE_componentWillMount () {
|
const { menus } = this.props
|
|
this.setState({data: fromJS(menus).toJS()})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
plusMenu = () => {
|
let _menu = {
|
name: '菜单',
|
property: 'classify',
|
level: 1,
|
children: []
|
}
|
|
this.setState({editMenu: _menu, visible: true})
|
}
|
|
menuSubmit = () => {
|
const { editMenu, data } = this.state
|
|
this.menuRef.handleConfirm().then(res => {
|
let _menu = {...editMenu, ...res}
|
if (!_menu.uuid) {
|
_menu.uuid = Utils.getuuid()
|
this.setState({data: [...data, _menu]})
|
} else {
|
this.setState({data: data.map(item => {
|
if (item.uuid === _menu.uuid) {
|
return _menu
|
} else {
|
return item
|
}
|
})})
|
}
|
})
|
}
|
|
render() {
|
const { columns, data, visible, editMenu } = this.state
|
|
return (
|
<div className="menu-control-wrap">
|
<Button className="menu-plus mk-green" onClick={this.plusMenu}>添加</Button>
|
<Table
|
className="components-table-demo-nested"
|
columns={columns}
|
expandedRowRender={<SubTable />}
|
dataSource={data}
|
/>
|
<Modal
|
title="编辑"
|
visible={visible}
|
width={600}
|
maskClosable={false}
|
onOk={this.menuSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={editMenu}
|
inputSubmit={this.menuSubmit}
|
wrappedComponentRef={(inst) => this.menuRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default MenuTable
|
