import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Table, Button, Modal } from 'antd'
|
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
|
|
import MenuForm from '../menuform'
|
import Utils from '@/utils/utils.js'
|
import MkIcon from '@/components/mk-icon'
|
// import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class MenuTable extends Component {
|
static propTpyes = {
|
menus: PropTypes.array, // 卡片行信息
|
cols: PropTypes.array, // 字段集
|
}
|
|
state = {
|
data: [],
|
editMenu: null,
|
columns: [
|
{ title: '菜单名称', dataIndex: 'name', key: 'name' },
|
{ title: '菜单参数', dataIndex: 'MenuNo', key: 'MenuNo' },
|
{ title: '菜单属性', dataIndex: 'property', key: 'property', render: text => {
|
const trans = {menu: '菜单', link: '链接', linkmenu: '关联菜单', sysmenu: '系统页'}
|
|
return trans[text]
|
}},
|
{ title: '图标', dataIndex: 'icon', key: 'icon', render: (text, record) => {
|
return text ? <MkIcon type={text} /> : ''
|
}},
|
{ title: '是否隐藏', dataIndex: 'hidden', key: 'hidden', render: (text, record) => {
|
const trans = {'true': '是', 'false': '否'}
|
return trans[text] || '否'
|
}},
|
{ title: '操作', key: 'operation', align: 'center', width: '190px', render: (text, record) =>
|
(<div>
|
<Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>编辑</Button>
|
<Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>删除</Button>
|
<ArrowUpOutlined style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/>
|
<ArrowDownOutlined style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount () {
|
const { menus } = this.props
|
|
this.setState({data: fromJS(menus).toJS()})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
moveUp = (record) => {
|
let data = fromJS(this.state.data).toJS()
|
|
let dragIndex = data.findIndex(c => c.MenuID === record.MenuID)
|
let hoverIndex = dragIndex - 1
|
|
if (hoverIndex === -1) return
|
|
data.splice(hoverIndex, 0, ...data.splice(dragIndex, 1))
|
this.setState({data})
|
}
|
|
moveDown = (record) => {
|
let data = fromJS(this.state.data).toJS()
|
|
let dragIndex = data.findIndex(c => c.MenuID === record.MenuID)
|
let hoverIndex = dragIndex + 1
|
|
if (hoverIndex === data.length) return
|
|
data.splice(hoverIndex, 0, ...data.splice(dragIndex, 1))
|
this.setState({data})
|
}
|
|
delMenu = (record) => {
|
const { data } = this.state
|
const _this = this
|
|
confirm({
|
title: '确定删除吗？',
|
content: '',
|
onOk() {
|
_this.setState({data: data.filter(item => item.MenuID !== record.MenuID)})
|
},
|
onCancel() {}
|
})
|
}
|
|
editMenu = (record) => {
|
this.setState({editMenu: record, visible: true})
|
}
|
|
plusMenu = () => {
|
let _menu = {
|
name: '菜单',
|
property: 'menu'
|
}
|
|
this.setState({editMenu: _menu, visible: true})
|
}
|
|
menuSubmit = () => {
|
const { editMenu, data } = this.state
|
|
this.menuRef.handleConfirm().then(res => {
|
let _menu = {...editMenu, ...res}
|
let _data = fromJS(data).toJS()
|
|
if (!_menu.MenuID) {
|
_menu.MenuID = Utils.getuuid()
|
_data.push(_menu)
|
} else {
|
_data = _data.map(item => {
|
if (item.MenuID === _menu.MenuID) {
|
return _menu
|
} else {
|
return item
|
}
|
})
|
}
|
|
if (editMenu.MenuID && editMenu.property === 'menu' && _menu.property !== 'menu') {
|
const _this = this
|
confirm({
|
content: '菜单将被重置，确定修改吗？',
|
onOk() {
|
_data = _data.map(item => {
|
if (item.MenuID === _menu.MenuID) {
|
item.MenuID = Utils.getuuid()
|
}
|
return item
|
})
|
_this.setState({data: _data, editMenu: null, visible: false})
|
},
|
onCancel() {}
|
})
|
} else {
|
this.setState({data: _data, editMenu: null, visible: false})
|
}
|
})
|
}
|
|
menuUpdate = (res) => {
|
const { data } = this.state
|
|
this.setState({
|
data: data.map(item => {
|
if (item.MenuID === res.MenuID) {
|
return res
|
} else {
|
return item
|
}
|
})
|
})
|
}
|
|
render() {
|
const { cols } = this.props
|
const { columns, data, visible, editMenu } = this.state
|
|
return (
|
<div className="menu-control-wrap">
|
<Button className="menu-plus mk-green" onClick={this.plusMenu}>添加</Button>
|
<Table
|
rowKey="MenuID"
|
columns={columns}
|
dataSource={data}
|
pagination={false}
|
/>
|
<Modal
|
title="编辑"
|
visible={visible}
|
width={900}
|
maskClosable={false}
|
onOk={this.menuSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={editMenu}
|
cols={cols}
|
inputSubmit={this.menuSubmit}
|
wrappedComponentRef={(inst) => this.menuRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default MenuTable
|
