106 lines
2.7 KiB
JavaScript
106 lines
2.7 KiB
JavaScript
import { Table, Input, Icon, Button, Popconfirm, Popover, Tooltip } from 'antd';
|
|
import "./index.less"
|
|
|
|
export class EditableCell extends React.Component {
|
|
state = {
|
|
value: this.props.value,
|
|
record: this.props.record
|
|
}
|
|
handleChange = (e) => {
|
|
const value = e.target.value;
|
|
this.setState({ value });
|
|
this.props.onChange(value);
|
|
}
|
|
render() {
|
|
const { value, editable } = this.state;
|
|
return (
|
|
|
|
<div className="editable-cell">
|
|
<div className="editable-cell-input-wrapper">
|
|
<Input
|
|
value={value}
|
|
onChange={this.handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
}
|
|
|
|
export default class EditableTable extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
const { columns } = this.props;
|
|
this.columns = columns;
|
|
this.columns.map(item => {
|
|
if (item.editable) {
|
|
item.render = (text, record) => (
|
|
<EditableCell
|
|
value={text}
|
|
record={record}
|
|
onChange={this.onCellChange(record.key, item.dataIndex)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if(item.popover) {
|
|
item.render = (text, record) => (
|
|
<Tooltip title={
|
|
<div className="popoverBtnWrapper">
|
|
<i className="icon-coms-Delete popBtnItem" onClick={() => {this.onItemDelete(record)}} />
|
|
</div>
|
|
}>
|
|
<div>{text}</div>
|
|
</Tooltip>
|
|
)
|
|
|
|
}
|
|
|
|
if (item.children) {
|
|
item.children.map(child => {
|
|
if (child.editable) {
|
|
child.render = (text, record) => (
|
|
<EditableCell
|
|
value={text}
|
|
onChange={this.onCellChange(record.key, child.dataIndex)}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
)
|
|
}
|
|
})
|
|
|
|
}
|
|
onCellChange = (key, dataIndex) => {
|
|
return (value) => {
|
|
const dataSource = [...this.props.dataSource];
|
|
const target = dataSource.find(item => item.key === key);
|
|
if (target) {
|
|
target[dataIndex] = value;
|
|
this.props.onDataSourceChange(dataSource)
|
|
}
|
|
|
|
};
|
|
}
|
|
|
|
onItemDelete = (record) => {
|
|
let dataSource = [...this.props.dataSource];
|
|
dataSource = dataSource.filter(item => item.indexNum != record.indexNum)
|
|
dataSource.map((item, index) => {item.indexNum = index + 1})
|
|
this.props.onDataSourceChange(dataSource)
|
|
}
|
|
render() {
|
|
const columns = this.columns;
|
|
return (
|
|
<div>
|
|
<div className="operateWrapper">
|
|
<i className="icon-coms-tianjia operateItem" onClick={() => { this.props.addItem() }} />
|
|
</div>
|
|
<Table columns={this.columns} dataSource={this.props.dataSource} {...this.props} />
|
|
</div>
|
|
);
|
|
}
|
|
}
|