import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Table, Button, Modal, Icon } from 'antd'
|
|
import MenuForm from '../menuform'
|
import Utils from '@/utils/utils.js'
|
// import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class ThdTable extends Component {
|
static propTpyes = {
|
menus: PropTypes.object, // 卡片行信息
|
menuUpdate: PropTypes.func // 卡片行信息
|
}
|
|
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: '关联菜单', classify: '分类'}
|
|
return trans[text]
|
}},
|
{ title: '打开方式', dataIndex: 'open', key: 'open', render: (text, record) => {
|
if (record.property === 'classify') return ''
|
|
const trans = {blank: '新窗口', self: '当前窗口'}
|
|
return trans[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>
|
<Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/>
|
<Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount () {
|
const { menu } = this.props
|
this.setState({data: menu.sublist ? fromJS(menu.sublist).toJS() : []})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
moveUp = (record) => {
|
const { menu } = this.props
|
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})
|
this.props.menuUpdate({...menu, sublist: data})
|
}
|
|
moveDown = (record) => {
|
const { menu } = this.props
|
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})
|
this.props.menuUpdate({...menu, sublist: data})
|
}
|
|
delMenu = (record) => {
|
const { menu } = this.props
|
const _this = this
|
|
confirm({
|
title: '确定删除吗？',
|
content: '',
|
onOk() {
|
let _data = _this.state.data.filter(item => item.MenuID !== record.MenuID)
|
_this.setState({data: _data})
|
_this.props.menuUpdate({...menu, sublist: _data})
|
// MKEmitter.emit('delButtons', [record.MenuID])
|
},
|
onCancel() {}
|
})
|
}
|
|
editMenu = (record) => {
|
this.setState({editMenu: record, visible: true})
|
}
|
|
plusMenu = () => {
|
let _menu = {
|
name: '菜单',
|
property: 'menu',
|
level: 3,
|
sublist: []
|
}
|
|
this.setState({editMenu: _menu, visible: true})
|
}
|
|
menuSubmit = () => {
|
const { menu } = this.props
|
const { editMenu } = this.state
|
|
this.menuRef.handleConfirm().then(res => {
|
let _menu = {...editMenu, ...res}
|
let _data = this.state.data
|
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
|
}
|
})
|
}
|
this.setState({data: _data, editMenu: null, visible: false})
|
this.props.menuUpdate({...menu, sublist: _data})
|
})
|
}
|
|
render() {
|
const { columns, data, visible, editMenu } = this.state
|
|
return (
|
<div className="thdmenu-control-wrap">
|
<Icon type="plus" style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/>
|
<Table
|
rowKey="MenuID"
|
size="small"
|
columns={columns}
|
dataSource={data}
|
pagination={false}
|
/>
|
<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>
|
)
|
}
|
}
|
|
class SubTable extends Component {
|
static propTpyes = {
|
menu: PropTypes.object, // 卡片行信息
|
menuUpdate: PropTypes.func // 卡片行信息
|
}
|
|
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: '关联菜单', classify: '分类'}
|
|
return trans[text]
|
}},
|
{ title: '打开方式', dataIndex: 'open', key: 'open', render: (text, record) => {
|
if (record.property === 'classify') return ''
|
|
const trans = {blank: '新窗口', self: '当前窗口'}
|
|
return trans[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>
|
<Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/>
|
<Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/>
|
</div>)
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount () {
|
const { menu } = this.props
|
|
this.setState({data: menu.sublist ? fromJS(menu.sublist).toJS() : []})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
moveUp = (record) => {
|
const { menu } = this.props
|
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})
|
this.props.menuUpdate({...menu, sublist: data})
|
}
|
|
moveDown = (record) => {
|
const { menu } = this.props
|
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})
|
this.props.menuUpdate({...menu, sublist: data})
|
}
|
|
delMenu = (record) => {
|
const { menu } = this.props
|
const _this = this
|
|
confirm({
|
title: (record.property === 'classify' && record.sublist.length > 0 ? '菜单下含有子菜单，' : '') + '确定删除吗？',
|
content: '',
|
onOk() {
|
let _data = _this.state.data.filter(item => item.MenuID !== record.MenuID)
|
_this.setState({data: _data})
|
_this.props.menuUpdate({...menu, sublist: _data})
|
|
// let uuids = [record.MenuID]
|
// record.sublist && record.sublist.forEach(item => {
|
// uuids.push(item.MenuID)
|
// })
|
// MKEmitter.emit('delButtons', uuids)
|
},
|
onCancel() {}
|
})
|
}
|
|
editMenu = (record) => {
|
this.setState({editMenu: record, visible: true})
|
}
|
|
plusMenu = () => {
|
let _menu = {
|
name: '菜单',
|
property: 'classify',
|
level: 2,
|
sublist: []
|
}
|
|
this.setState({editMenu: _menu, visible: true})
|
}
|
|
menuSubmit = () => {
|
const { menu } = this.props
|
const { editMenu } = this.state
|
|
this.menuRef.handleConfirm().then(res => {
|
let _menu = {...editMenu, ...res}
|
let _data = this.state.data
|
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
|
}
|
})
|
}
|
this.setState({data: _data, editMenu: null, visible: false})
|
this.props.menuUpdate({...menu, sublist: _data})
|
})
|
}
|
|
menuUpdate = (res) => {
|
const { menu } = this.props
|
|
let _data = this.state.data.map(item => {
|
if (item.MenuID === res.MenuID) {
|
return res
|
} else {
|
return item
|
}
|
})
|
|
this.setState({data: _data})
|
this.props.menuUpdate({...menu, sublist: _data})
|
}
|
|
render() {
|
const { columns, data, visible, editMenu } = this.state
|
|
return (
|
<div className="submenu-control-wrap">
|
<Icon type="plus" style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/>
|
<Table
|
size="middle"
|
rowKey="MenuID"
|
columns={columns}
|
rowClassName={record => record.property}
|
expandedRowRender={record => <ThdTable menu={record} menuUpdate={this.menuUpdate} />}
|
dataSource={data}
|
pagination={false}
|
/>
|
<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>
|
)
|
}
|
}
|
|
class MenuTable extends Component {
|
static propTpyes = {
|
menus: PropTypes.object, // 卡片行信息
|
}
|
|
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: '关联菜单', classify: '分类'}
|
|
return trans[text]
|
}},
|
{ title: '打开方式', dataIndex: 'open', key: 'open', render: (text, record) => {
|
if (record.property === 'classify') return ''
|
|
const trans = {blank: '新窗口', self: '当前窗口'}
|
|
return trans[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>
|
<Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/>
|
<Icon type="arrow-down" 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: (record.property === 'classify' && record.sublist.length > 0 ? '菜单下含有子菜单，' : '') + '确定删除吗？',
|
content: '',
|
onOk() {
|
_this.setState({data: data.filter(item => item.MenuID !== record.MenuID)})
|
|
// let uuids = [record.MenuID]
|
// record.sublist && record.sublist.forEach(item => {
|
// uuids.push(item.MenuID)
|
|
// item.sublist && item.sublist.forEach(cell => {
|
// uuids.push(cell.MenuID)
|
// })
|
// })
|
// MKEmitter.emit('delButtons', uuids)
|
},
|
onCancel() {}
|
})
|
}
|
|
editMenu = (record) => {
|
this.setState({editMenu: record, visible: true})
|
}
|
|
plusMenu = () => {
|
let _menu = {
|
name: '菜单',
|
property: 'classify',
|
level: 1,
|
sublist: []
|
}
|
|
this.setState({editMenu: _menu, visible: true})
|
}
|
|
menuSubmit = () => {
|
const { editMenu, data } = this.state
|
|
this.menuRef.handleConfirm().then(res => {
|
let _menu = {...editMenu, ...res}
|
if (!_menu.MenuID) {
|
_menu.MenuID = Utils.getuuid()
|
this.setState({data: [...data, _menu], editMenu: null, visible: false})
|
} else {
|
this.setState({
|
editMenu: null,
|
visible: false,
|
data: data.map(item => {
|
if (item.MenuID === _menu.MenuID) {
|
return _menu
|
} else {
|
return item
|
}
|
})
|
})
|
}
|
})
|
}
|
|
menuUpdate = (res) => {
|
const { data } = this.state
|
|
this.setState({
|
data: data.map(item => {
|
if (item.MenuID === res.MenuID) {
|
return res
|
} 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
|
rowKey="MenuID"
|
columns={columns}
|
rowClassName={record => record.property}
|
expandedRowRender={record => <SubTable menu={record} menuUpdate={this.menuUpdate} />}
|
dataSource={data}
|
pagination={false}
|
/>
|
<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
|
