import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
// import { is, fromJS } from 'immutable'
|
import { Table, message, Affix } from 'antd'
|
import './index.scss'
|
|
export default class MainTable extends Component {
|
static propTpyes = {
|
MenuNo: PropTypes.string, // 菜单参数
|
loading: PropTypes.bool,
|
total: PropTypes.number,
|
selectable: PropTypes.bool,
|
dict: PropTypes.object, // 字典项
|
columns: PropTypes.array, // 表格列
|
data: PropTypes.oneOfType([
|
PropTypes.object,
|
PropTypes.array
|
])
|
}
|
|
state = {
|
fixed: false, // 表格头部是否固定于页面上方
|
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,
|
sorter: item.IsSort === 'true',
|
width: _width,
|
render: (text, record) => (
|
<div style={{ wordWrap: 'break-word', wordBreak: 'break-word', minWidth: _width + 'px' }}>
|
{item.Type === 'image' ? text : text}
|
</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: []
|
})
|
}
|
|
componentDidMount () {
|
let boxwidth = document.body.clientWidth - 275
|
let columnsWidth = this.props.selectable ? 60 : 0
|
this.state.columns.forEach(column => {
|
columnsWidth += column.width
|
})
|
if (boxwidth > columnsWidth) {
|
this.setState({
|
fixed: true
|
})
|
}
|
}
|
|
render() {
|
let { selectedRowKeys } = this.state
|
let rowSelection = null
|
if (this.props.selectable) {
|
rowSelection = {
|
selectedRowKeys,
|
type: 'checkbox',
|
onChange: this.onSelectChange
|
}
|
}
|
return (
|
<div className="main-table">
|
{this.state.fixed && <Affix offsetTop={105} className="fix-header">
|
<Table
|
bordered={true}
|
rowSelection={rowSelection}
|
size="middle"
|
columns={this.state.columns}
|
/>
|
</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>
|
)
|
}
|
}
|
