import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
// import { is, fromJS } from 'immutable'
|
import { Table, Icon, message, Affix } from 'antd'
|
import './index.scss'
|
|
export default class MainTable extends Component {
|
static propTpyes = {
|
MenuNo: PropTypes.string, // 菜单参数
|
fixed: PropTypes.object, // 表格头部是否固定于页面上方
|
loading: PropTypes.bool,
|
total: PropTypes.number,
|
select: PropTypes.object,
|
dict: PropTypes.object, // 字典项
|
columns: PropTypes.array, // 表格列
|
data: PropTypes.oneOfType([
|
PropTypes.object,
|
PropTypes.array
|
])
|
}
|
|
state = {
|
selectedRowKeys: [],
|
pageIndex: 1,
|
pageSize: 10,
|
columns: this.props.columns.map((item, index) => {
|
let _width = parseInt(item.Width) || 50
|
return {
|
align: item.Align,
|
dataIndex: item.FieldName,
|
title: item.Label,
|
// fixed: index < 3,
|
sorter: item.IsSort === 'true',
|
filterMultiple: item.CDefine1 === 'true',
|
filters: item.CDefine2 && JSON.parse(item.CDefine2),
|
width: _width * 30,
|
render: (text, record) => (
|
<div style={{ wordWrap: 'break-word', wordBreak: 'break-word', minWidth: _width + 'px' }}>
|
{text}
|
{item.FieldName === 'MenuNo' ? <Icon onClick={(e) => {this.copycontent(e, record[item.FieldName])}} type="copy"/> : ''}
|
</div>
|
)
|
// onHeaderCell: () => ({style:{textAlign: 'center'}})
|
}
|
})
|
}
|
|
copycontent = (e, content) => {
|
// 表格中内容复制
|
e.stopPropagation()
|
let oInput = document.createElement('input')
|
oInput.value = content
|
document.body.appendChild(oInput)
|
oInput.select()
|
document.execCommand('Copy')
|
oInput.className = 'oInput'
|
oInput.style.display='none'
|
message.success(this.props.dict['main.copy.success'])
|
}
|
|
onSelectChange = selectedRowKeys => {
|
this.setState({ selectedRowKeys })
|
}
|
|
changeRow = (record, index) => {
|
// 点击整行，触发切换，判断是否可选，单选或多选，进行对应操作
|
if (!this.props.select || !this.props.select.selectable) return
|
|
let newkeys = JSON.parse(JSON.stringify(this.state.selectedRowKeys))
|
let _re = newkeys.includes(index)
|
|
if (this.props.select.selectType === 'radio') {
|
this.setState({ selectedRowKeys: [index] })
|
} else {
|
if (_re) {
|
newkeys = newkeys.filter(item => item !== index)
|
} else {
|
newkeys.push(index)
|
}
|
this.setState({ selectedRowKeys: newkeys })
|
}
|
}
|
|
changeTable = (pagination, filters, sorter) => {
|
this.setState({
|
pageIndex: pagination.current,
|
pageSize: pagination.pageSize,
|
selectedRowKeys: []
|
})
|
this.props.refreshdata(pagination, filters, sorter)
|
}
|
|
resetTable = () => {
|
this.setState({
|
pageIndex: 1,
|
selectedRowKeys: []
|
})
|
}
|
|
render() {
|
let { selectedRowKeys } = this.state
|
let rowSelection = null
|
if (this.props.select && this.props.select.selectable) {
|
rowSelection = {
|
selectedRowKeys,
|
type: this.props.select.selectType === 'radio' ? 'radio' : 'checkbox',
|
onChange: this.onSelectChange
|
}
|
}
|
let offset = null
|
if (this.props.fixed.fixtable) {
|
// 表格头部固定于顶部时，判断距顶部高度
|
if (!this.props.fixed.fixaction) {
|
offset = 48
|
} else {
|
let box = document.getElementById(this.props.MenuNo + 'mainaction')
|
if (box) {
|
offset = 48 + box.offsetHeight
|
} else {
|
offset = 105
|
}
|
}
|
}
|
return (
|
<div className="main-table">
|
{this.props.fixed.fixtable && <Affix offsetTop={offset} className="fix-header">
|
<Table
|
bordered={true}
|
rowSelection={rowSelection}
|
size="middle"
|
columns={this.state.columns.map(column => {
|
return {
|
align: column.align,
|
dataIndex: column.dataIndex,
|
title: column.title,
|
width: column.width
|
}
|
})}
|
/>
|
</Affix>}
|
<Table
|
bordered={true}
|
rowSelection={rowSelection}
|
size="middle"
|
columns={this.state.columns}
|
dataSource={this.props.data ? this.props.data : []}
|
loading={this.props.loading}
|
scroll={{ x: '100%', y: false }}
|
onRow={(record, index) => {
|
return {
|
onClick: () => {this.changeRow(record, index)}
|
}
|
}}
|
onChange={this.changeTable}
|
pagination={{
|
current: this.state.pageIndex,
|
pageSize: this.state.pageSize,
|
pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
|
showSizeChanger: true,
|
total: this.props.total,
|
showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}`
|
}}
|
/>
|
</div>
|
)
|
}
|
}
|
