import React, {Component} from 'react'
|
import { Table, Input, Button, Popconfirm, Form, Icon } from 'antd'
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
const EditableContext = React.createContext()
|
|
const EditableRow = ({ form, index, ...props }) => (
|
<EditableContext.Provider value={form}>
|
<tr {...props} />
|
</EditableContext.Provider>
|
)
|
|
const EditableFormRow = Form.create()(EditableRow)
|
|
class EditableCell extends Component {
|
state = {
|
editing: false
|
}
|
|
toggleEdit = () => {
|
const editing = !this.state.editing
|
this.setState({ editing }, () => {
|
if (editing) {
|
this.input.focus()
|
}
|
})
|
}
|
|
save = e => {
|
const { record, handleSave } = this.props
|
this.form.validateFields((error, values) => {
|
handleSave({ ...record, ...values })
|
if (error && error[e.currentTarget.id]) {
|
return
|
}
|
this.toggleEdit()
|
// handleSave({ ...record, ...values })
|
})
|
}
|
|
renderCell = form => {
|
this.form = form
|
const { children, dataIndex, record } = this.props
|
const { editing } = this.state
|
return editing ? (
|
<Form.Item style={{ margin: 0 }}>
|
{form.getFieldDecorator(dataIndex, {
|
rules: [
|
{
|
required: true,
|
message: 'NOT NULL.',
|
},
|
],
|
initialValue: record[dataIndex]
|
})(<Input ref={node => (this.input = node)} autoComplete="off" onPressEnter={this.save} onBlur={this.save} />)}
|
</Form.Item>
|
) : (
|
<div
|
className="editable-cell-value-wrap"
|
onClick={this.toggleEdit}
|
>
|
{children}
|
</div>
|
)
|
}
|
|
render() {
|
const {
|
editable,
|
dataIndex,
|
title,
|
record,
|
index,
|
handleSave,
|
children,
|
...restProps
|
} = this.props
|
return (
|
<td {...restProps}>
|
{editable ? (
|
<EditableContext.Consumer style={{padding: 0}}>{this.renderCell}</EditableContext.Consumer>
|
) : (
|
children
|
)}
|
</td>
|
)
|
}
|
}
|
|
class EditTable extends Component {
|
constructor(props) {
|
super(props)
|
let columns = [
|
{
|
title: 'Value',
|
dataIndex: 'Value',
|
width: props.type === 'link' ? '27%' : '40%',
|
editable: true
|
},
|
{
|
title: 'Text',
|
dataIndex: 'Text',
|
width: props.type === 'link' ? '27%' : '40%',
|
editable: true
|
},
|
{
|
title: '操作',
|
align: 'center',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
this.state.dataSource.length >= 1 ? (
|
<Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
|
<span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
) : null,
|
}
|
]
|
|
if (props.type === 'link') {
|
columns.unshift({
|
title: 'ParentID',
|
dataIndex: 'ParentID',
|
width: '27%',
|
editable: true
|
})
|
}
|
|
this.state = {
|
columns: columns,
|
dataSource: props.data,
|
count: props.data.length,
|
type: props.type
|
}
|
}
|
|
handleDelete = key => {
|
const dataSource = [...this.state.dataSource]
|
this.setState({ dataSource: dataSource.filter(item => item.key !== key) })
|
}
|
|
handleAdd = () => {
|
const { type, count, dataSource } = this.state
|
const newData = {
|
key: Utils.getuuid(),
|
Value: `${count}`,
|
Text: `${count}`
|
}
|
if (type === 'link') {
|
newData.ParentID = `${count}`
|
}
|
this.setState({
|
dataSource: [...dataSource, newData],
|
count: count + 1
|
})
|
}
|
|
handleSave = row => {
|
const newData = [...this.state.dataSource]
|
const index = newData.findIndex(item => row.key === item.key)
|
const item = newData[index]
|
newData.splice(index, 1, {
|
...item,
|
...row
|
})
|
this.setState({ dataSource: newData })
|
}
|
|
resetColumn = (type) => {
|
let columns = [
|
{
|
title: 'Value',
|
dataIndex: 'Value',
|
width: type === 'link' ? '27%' : '40%',
|
editable: true
|
},
|
{
|
title: 'Text',
|
dataIndex: 'Text',
|
width: type === 'link' ? '27%' : '40%',
|
editable: true
|
},
|
{
|
title: '操作',
|
align: 'center',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
this.state.dataSource.length >= 1 ? (
|
<Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
|
<span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
|
</Popconfirm>
|
) : null,
|
}
|
]
|
|
if (type === 'link') {
|
columns.unshift({
|
title: 'ParentID',
|
dataIndex: 'ParentID',
|
width: '27%',
|
editable: true
|
})
|
}
|
|
this.setState({
|
columns: columns,
|
type: type
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (this.props.type !== nextProps.type) {
|
this.resetColumn(nextProps.type)
|
}
|
}
|
|
render() {
|
const { dataSource } = this.state
|
const components = {
|
body: {
|
row: EditableFormRow,
|
cell: EditableCell
|
}
|
}
|
const columns = this.state.columns.map(col => {
|
if (!col.editable) {
|
return col
|
}
|
return {
|
...col,
|
onCell: record => ({
|
record,
|
editable: col.editable,
|
dataIndex: col.dataIndex,
|
title: col.title,
|
handleSave: this.handleSave,
|
})
|
}
|
})
|
return (
|
<div className="common-modal-edit-table">
|
<Button onClick={this.handleAdd} type="primary" className="add-row">
|
添加
|
</Button>
|
<Table
|
components={components}
|
rowClassName={() => 'editable-row'}
|
bordered
|
dataSource={dataSource}
|
columns={columns}
|
pagination={false}
|
/>
|
</div>
|
)
|
}
|
}
|
|
export default EditTable
|
