import React, { Component } from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
|
import { Table, Form, Popover, Icon } from 'antd'
|
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import './index.scss'
|
|
const coldict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
|
const EditColumn = asyncIconComponent(() => import('./editColumn'))
|
|
class HeaderCol extends Component {
|
updateCol = (values) => {
|
const { column } = this.props
|
this.props.updateCol({...column, ...values})
|
}
|
|
deleteCol = () => {
|
this.props.deleteCol(this.props.column)
|
}
|
|
render() {
|
const { connectDragSource, connectDropTarget, moveCol, updateCol, deleteCol, index, column, fields, children, ...restProps } = this.props
|
|
if (index !== undefined) {
|
return connectDragSource(
|
connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move' }}>
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditColumn column={column} dict={coldict} fields={fields} updateCol={this.updateCol} deleteCol={this.deleteCol}/>
|
<Icon className="close" title="delete" type="delete" onClick={this.deleteCol} />
|
</div>
|
} trigger="hover">
|
{children}
|
</Popover>
|
</th>),
|
)
|
} else {
|
return (
|
<th {...restProps}>
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditColumn column={column} dict={coldict} fields={fields} updateCol={this.updateCol} deleteCol={this.deleteCol}/>
|
<Icon className="close" title="delete" type="delete" onClick={this.deleteCol} />
|
</div>
|
} trigger="hover">
|
{children}
|
</Popover>
|
</th>
|
)
|
}
|
}
|
}
|
|
const rowSource = {
|
beginDrag(props) {
|
return {
|
index: props.index,
|
}
|
}
|
}
|
|
const ColTarget = {
|
drop(props, monitor) {
|
const dragIndex = monitor.getItem().index
|
const hoverIndex = props.index
|
|
if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) {
|
return
|
}
|
|
props.moveCol(dragIndex, hoverIndex)
|
monitor.getItem().index = hoverIndex
|
},
|
}
|
|
const DragableHeaderCol = DropTarget('col', ColTarget, connect => ({
|
connectDropTarget: connect.dropTarget()
|
}))(
|
DragSource('col', rowSource, connect => ({
|
connectDragSource: connect.dragSource(),
|
}))(HeaderCol),
|
)
|
|
class EditableCell extends Component {
|
render() {
|
const { column, children, style } = this.props
|
|
if (column) {
|
return (
|
<td style={style}>
|
{column.field}
|
</td>
|
)
|
} else {
|
return (
|
<td style={style}>
|
{children}
|
</td>
|
)
|
}
|
}
|
}
|
|
class EditTable extends Component {
|
static propTpyes = {
|
actions: PropTypes.any, // 操作项
|
data: PropTypes.any, // 数据列表
|
columns: PropTypes.array, // 显示列
|
onChange: PropTypes.func // 数据变化
|
}
|
|
state = {
|
data: [{uuid: Utils.getuuid()}],
|
columns: [],
|
fields: []
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({
|
columns: fromJS(this.props.config.cols).toJS(),
|
fields: fromJS(this.props.config.columns).toJS()
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.state.columns), fromJS(nextProps.config.cols))) {
|
this.setState({columns: fromJS(nextProps.config.cols).toJS()})
|
} else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) {
|
this.setState({fields: fromJS(nextProps.config.columns).toJS()})
|
}
|
}
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
moveCol = (dragIndex, hoverIndex) => {
|
let _columns = fromJS(this.state.columns).toJS()
|
|
_columns.splice(hoverIndex, 0, ..._columns.splice(dragIndex, 1))
|
|
this.setState({
|
columns: _columns
|
}, () => {
|
// this.props.onChange(_data)
|
})
|
}
|
|
updateCol = (col) => {
|
|
}
|
|
deleteCol = (col) => {
|
|
}
|
|
render() {
|
const { fields } = this.state
|
const components = {
|
header: {
|
cell: DragableHeaderCol
|
},
|
body: {
|
cell: EditableCell
|
}
|
}
|
|
const columns = this.state.columns.map((col, index) => {
|
return {
|
title: col.label,
|
dataIndex: col.field,
|
align: 'right',
|
sorter: col.IsSort === 'true',
|
onCell: () => ({
|
column: col,
|
fields: fields
|
}),
|
children: col.subcols && col.subcols.length > 0 ? col.subcols.map(cell => ({
|
align: 'left',
|
title: cell.label,
|
key: cell.uuid,
|
onCell: () => ({
|
column: cell,
|
fields: fields
|
}),
|
onHeaderCell: () => ({
|
column: cell,
|
fields: fields,
|
updateCol: this.updateCol,
|
deleteCol: this.deleteCol,
|
})
|
})) : null,
|
onHeaderCell: () => ({
|
index,
|
column: col,
|
fields: fields,
|
moveCol: this.moveCol,
|
updateCol: this.updateCol,
|
deleteCol: this.deleteCol,
|
})
|
}
|
})
|
|
return (
|
<div className="normal-table-columns">
|
<DndProvider>
|
<Table
|
bordered
|
rowKey="uuid"
|
// bordered={false}
|
components={components}
|
dataSource={this.state.data}
|
rowSelection={{type: 'radio'}}
|
columns={columns}
|
rowClassName="editable-row"
|
pagination={{
|
current: 1,
|
pageSize: 10,
|
pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
|
showSizeChanger: true,
|
total: 58,
|
showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
|
}}
|
// onRow={(record, index) => ({
|
// index,
|
// moveRow: this.moveRow,
|
// })}
|
/>
|
</DndProvider>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(EditTable)
|
