diff --git a/package.json b/package.json index 8750db9d404ffca0622462ea86db9d16fe8ec926..c59ae17e48a1ce91469f9a7877e512eaffc103e6 100755 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "enquire-js": "^0.2.1", "lodash": "^4.17.4", "lodash-decorators": "^6.0.0", + "lodash.isequal": "^4.5.0", "moment": "^2.22.0", "numeral": "^2.0.6", "omit.js": "^1.0.0", diff --git a/src/routes/Forms/TableForm.js b/src/routes/Forms/TableForm.js index b8e43bb818fdd48c3067e61515156b81b1609b90..068fe0154141069c712e81cfbec8786ad8bf7eb5 100644 --- a/src/routes/Forms/TableForm.js +++ b/src/routes/Forms/TableForm.js @@ -1,5 +1,6 @@ import React, { PureComponent, Fragment } from 'react'; import { Table, Button, Input, message, Popconfirm, Divider } from 'antd'; +import isEqual from 'lodash.isequal'; import styles from './style.less'; export default class TableForm extends PureComponent { @@ -13,17 +14,19 @@ export default class TableForm extends PureComponent { this.state = { data: props.value, loading: false, - editData: [], + /* eslint-disable-next-line react/no-unused-state */ + value: props.value, }; } - static getDerivedStateFromProps(nextProps) { - if ('value' in nextProps) { - return { - data: nextProps.value, - }; + static getDerivedStateFromProps(nextProps, preState) { + if (isEqual(nextProps.value, preState.value)) { + return null; } - return null; + return { + data: nextProps.value, + value: nextProps.value, + }; } getRowByKey(key, newData) { @@ -47,49 +50,34 @@ export default class TableForm extends PureComponent { }; newMember = () => { - this.index += 1; - this.setState({ - editData: [ - { - key: `NEW_TEMP_ID_${this.index}`, - workId: '', - name: '', - department: '', - editable: true, - isNew: true, - }, - ], + const { data } = this.state; + const newData = data.map(item => ({ ...item })); + newData.push({ + key: `NEW_TEMP_ID_${this.index}`, + workId: '', + name: '', + department: '', + editable: true, + isNew: true, }); + this.index += 1; + this.setState({ data: newData }); }; remove(key) { - const { editData, data } = this.state; + const { data } = this.state; const { onChange } = this.props; - const editItem = editData.find(item => item.key === key); - if (editItem && editItem.key) { - // 如果存在缓存 - if (this.cacheOriginData[key]) { - data.push(this.cacheOriginData[key]); - this.setState( - { - data, - }, - () => { - delete this.cacheOriginData[key]; - } - ); - } - // 从 editData 中删除 - this.setState({ - editData: editData.filter(item => item.key !== key), - }); - return; - } const newData = data.filter(item => item.key !== key); this.setState({ data: newData }); onChange(newData); } + handleKeyPress(e, key) { + if (e.key === 'Enter') { + this.saveRow(e, key); + } + } + handleFieldChange(e, fieldName, key) { const { data } = this.state; const newData = data.map(item => ({ ...item })); @@ -101,8 +89,6 @@ export default class TableForm extends PureComponent { } saveRow(e, key) { - const { data } = this.state; - const { onChange } = this.props; e.persist(); this.setState({ loading: true, @@ -121,6 +107,8 @@ export default class TableForm extends PureComponent { }); return; } + const { data } = this.state; + const { onChange } = this.props; delete target.isNew; this.toggleEditable(e, key); onChange(data); @@ -131,9 +119,9 @@ export default class TableForm extends PureComponent { } cancel(e, key) { - const { data } = this.state; this.clickedCancel = true; e.preventDefault(); + const { data } = this.state; const newData = data.map(item => ({ ...item })); const target = this.getRowByKey(key, newData); if (this.cacheOriginData[key]) { @@ -245,14 +233,15 @@ export default class TableForm extends PureComponent { }, }, ]; - const { data, editData, loading } = this.state; - const dataSource = data.concat(editData); + + const { loading, data } = this.state; + return ( { return record.editable ? styles.editable : '';