diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index d5494267b06d8271743221b71b6380b7f911fedf..c894517c5b0b2322d7dcff7247debf66a5bc03b0 100644 --- a/src/routes/Forms/TableForm.js +++ b/src/routes/Forms/TableForm.js @@ -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 (