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 LinkForm from '../linkform'
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class LinkTable extends Component {
|
static propTpyes = {
|
links: PropTypes.object, // 卡片行信息
|
}
|
|
state = {
|
data: [],
|
editMenu: null,
|
columns: [
|
{ title: '链接名称', dataIndex: 'name', key: 'name' },
|
{ title: '链接属性', dataIndex: 'property', key: 'property', render: text => {
|
const trans = {link: '链接', linkmenu: '关联菜单'}
|
|
return trans[text]
|
}},
|
{ title: '链接地址', dataIndex: 'link', key: 'link'},
|
{ title: '打开方式', dataIndex: 'open', key: 'open', render: (text, record) => {
|
const trans = {blank: '新窗口', self: '当前窗口'}
|
|
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 { links } = this.props
|
|
this.setState({data: fromJS(links).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 that = this
|
|
confirm({
|
title: '确定删除吗？',
|
content: '',
|
onOk() {
|
that.setState({data: data.filter(item => item.MenuID !== record.MenuID)})
|
},
|
onCancel() {}
|
})
|
}
|
|
editMenu = (record) => {
|
this.setState({editMenu: record, visible: true})
|
}
|
|
plusMenu = () => {
|
let _menu = {
|
name: '链接'
|
}
|
|
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
|
}
|
})
|
})
|
}
|
})
|
}
|
|
render() {
|
const { columns, data, visible, editMenu } = this.state
|
|
return (
|
<div className="link-control-wrap">
|
<Button className="link-plus mk-green" onClick={this.plusMenu}>添加</Button>
|
<Table
|
rowKey="MenuID"
|
columns={columns}
|
dataSource={data}
|
pagination={false}
|
/>
|
<Modal
|
title="编辑"
|
visible={visible}
|
width={600}
|
maskClosable={false}
|
onOk={this.menuSubmit}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<LinkForm
|
menu={editMenu}
|
inputSubmit={this.menuSubmit}
|
wrappedComponentRef={(inst) => this.menuRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default LinkTable
|
