import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Modal, Button, Popconfirm, Table } from 'antd'
|
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class DataSource extends Component {
|
static propTpyes = {
|
btnlog: PropTypes.array,
|
handlelog: PropTypes.func
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
appType: sessionStorage.getItem('appType'),
|
visible: false,
|
data: [],
|
columns: [
|
{
|
title: '按钮名称',
|
dataIndex: 'label',
|
width: '40%'
|
},
|
{
|
title: '按钮类型',
|
dataIndex: 'OpenType',
|
width: '40%'
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '20%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div style={{textAlign: 'center'}}>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定恢复记录吗？"
|
onConfirm={() => this.revert(record)}
|
>
|
<span title="恢复" style={{color: '#26C281', fontSize: '16px', marginRight: '5px', cursor: 'pointer', padding: '5px'}}><Icon type="redo" /></span>
|
</Popconfirm>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定清除记录吗？"
|
onConfirm={() => this.handleDelete(record)}
|
>
|
<span title="清除" style={{color: '#ff4d4f', fontSize: '16px', cursor: 'pointer', padding: '5px'}}><Icon type="close" /></span>
|
</Popconfirm>
|
</div>)
|
}
|
],
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
trigger = () => {
|
this.setState({
|
visible: true,
|
data: fromJS(this.props.btnlog).toJS()
|
})
|
}
|
|
revert = (item) => {
|
const { appType } = this.state
|
const data = this.state.data.filter(d => d.uuid !== item.uuid)
|
|
this.setState({data})
|
this.props.handlelog('revert', data, item)
|
|
if (appType === 'mob' || (appType === 'pc' && item.OpenType !== 'popview')) return
|
|
MKEmitter.emit('thawButtons', item.uuid)
|
}
|
|
handleDelete = (item) => {
|
if (item) {
|
const data = this.state.data.filter(d => d.uuid !== item.uuid)
|
|
this.setState({data})
|
this.props.handlelog('delete', data, null)
|
} else {
|
const _this = this
|
|
confirm({
|
content: '确定清空记录吗？',
|
onOk() {
|
_this.setState({data: []})
|
_this.props.handlelog('delete', [], null)
|
},
|
onCancel() {}
|
})
|
}
|
}
|
|
render () {
|
const { visible, dict, data, columns } = this.state
|
|
return (
|
<div className="btn-log-wrap">
|
<Icon type="rollback" title="解除冻结" onClick={this.trigger} />
|
<Modal
|
wrapClassName="popview-modal"
|
title="历史记录"
|
visible={visible}
|
width={700}
|
maskClosable={false}
|
onCancel={() => { this.setState({ visible: false }) }}
|
footer={[
|
<Button key="close" onClick={() => { this.setState({ visible: false }) }}>{dict['model.close']}</Button>
|
]}
|
destroyOnClose
|
>
|
<Button disabled={data.length === 0} style={{float: 'right', marginBottom: '5px', position: 'relative', zIndex: 1}} onClick={() => this.handleDelete()} type="primary">清空</Button>
|
<Table bordered rowKey="uuid" dataSource={data} columns={columns} pagination={false}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default DataSource
|
