|
|
@@ -1,6 +1,4 @@
|
|
|
import React, { PureComponent } from 'react';
|
|
|
-import Debounce from 'lodash-decorators/debounce';
|
|
|
-import Bind from 'lodash-decorators/bind';
|
|
|
import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
|
|
|
import styles from './style.less';
|
|
|
|
|
|
@@ -10,6 +8,7 @@ export default class TableForm extends PureComponent {
|
|
|
|
|
|
this.state = {
|
|
|
data: props.value,
|
|
|
+ loading: false,
|
|
|
};
|
|
|
}
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
@@ -35,9 +34,7 @@ export default class TableForm extends PureComponent {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- @Bind()
|
|
|
- @Debounce(400)
|
|
|
- toggleEditable(e, key) {
|
|
|
+ toggleEditable=(e, key) => {
|
|
|
e.preventDefault();
|
|
|
const newData = this.state.data.map(item => ({ ...item }));
|
|
|
const target = this.getRowByKey(key, newData);
|
|
|
@@ -83,6 +80,9 @@ export default class TableForm extends PureComponent {
|
|
|
}
|
|
|
saveRow(e, key) {
|
|
|
e.persist();
|
|
|
+ this.setState({
|
|
|
+ loading: true,
|
|
|
+ });
|
|
|
// save field when blur input
|
|
|
setTimeout(() => {
|
|
|
if (document.activeElement.tagName === 'INPUT' &&
|
|
|
@@ -102,7 +102,10 @@ export default class TableForm extends PureComponent {
|
|
|
delete target.isNew;
|
|
|
this.toggleEditable(e, key);
|
|
|
this.props.onChange(this.state.data);
|
|
|
- }, 10);
|
|
|
+ this.setState({
|
|
|
+ loading: false,
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
}
|
|
|
cancel(e, key) {
|
|
|
this.clickedCancel = true;
|
|
|
@@ -179,6 +182,9 @@ export default class TableForm extends PureComponent {
|
|
|
title: '操作',
|
|
|
key: 'action',
|
|
|
render: (text, record) => {
|
|
|
+ if (!!record.editable && this.state.loading) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
if (record.editable) {
|
|
|
if (record.isNew) {
|
|
|
return (
|
|
|
@@ -214,6 +220,7 @@ export default class TableForm extends PureComponent {
|
|
|
return (
|
|
|
<div>
|
|
|
<Table
|
|
|
+ loading={this.state.loading}
|
|
|
columns={columns}
|
|
|
dataSource={this.state.data}
|
|
|
pagination={false}
|