122 lines
3.2 KiB
JavaScript
122 lines
3.2 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 } = this.state;
|
|
const { editable } = this.props;
|
|
return (
|
|
|
|
<div className="editable-cell">
|
|
<div className="editable-cell-input-wrapper">
|
|
{
|
|
editable ? <Input
|
|
type={this.props.type ? this.props.type : "text"}
|
|
value={value}
|
|
onChange={this.handleChange}
|
|
/> : value
|
|
}
|
|
</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
|
|
type={this.props.type ? this.props.type : "text"}
|
|
value={text}
|
|
record={record}
|
|
onChange={this.onCellChange(record.indexNum, item.dataIndex)}
|
|
editable={this.props.editable}
|
|
/>
|
|
)
|
|
}
|
|
|
|
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
|
|
type={this.props.type ? this.props.type : "text"}
|
|
value={text}
|
|
onChange={this.onCellChange(record.indexNum, child.dataIndex)}
|
|
editable={this.props.editable}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
)
|
|
}
|
|
})
|
|
|
|
}
|
|
onCellChange = (indexNum, dataIndex) => {
|
|
return (value) => {
|
|
const dataSource = [...this.props.dataSource];
|
|
const target = dataSource.find(item => item.indexNum === indexNum);
|
|
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;
|
|
const { editable } = this.props;
|
|
return (
|
|
<div>
|
|
{
|
|
editable && <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>
|
|
);
|
|
}
|
|
}
|