From f6c788403ccd2a216d6ba793ed591379c9d02dc5 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 06 五月 2024 10:31:12 +0800 Subject: [PATCH] 2024-05-06 --- src/tabviews/custom/components/module/invoice/invoiceTable/index.jsx | 68 +++++++++++++++++++++++---------- 1 files changed, 47 insertions(+), 21 deletions(-) diff --git a/src/tabviews/custom/components/module/invoice/invoiceTable/index.jsx b/src/tabviews/custom/components/module/invoice/invoiceTable/index.jsx index 310b26f..154a722 100644 --- a/src/tabviews/custom/components/module/invoice/invoiceTable/index.jsx +++ b/src/tabviews/custom/components/module/invoice/invoiceTable/index.jsx @@ -78,7 +78,7 @@ } render() { - const { line, delLine, trigger } = this.props + const { line, delLine, trigger, field } = this.props const { bill_count, unitprice, amount_line } = this.state return <div className="mk-tr active"> @@ -86,22 +86,22 @@ <div className="mk-input">{line.productname || ''}<EllipsisOutlined onClick={trigger}/></div> </div> <div className="mk-td"> - <Input defaultValue={line.spec || ''} onChange={(e) => this.onChange(e.target.value, 'spec')}/> + <Input defaultValue={line.spec || ''} autoFocus={field === 'spec'} onChange={(e) => this.onChange(e.target.value, 'spec')}/> </div> <div className="mk-td"> - <Input defaultValue={line.unit || ''} onChange={(e) => this.onChange(e.target.value, 'unit')}/> + <Input defaultValue={line.unit || ''} autoFocus={field === 'unit'} onChange={(e) => this.onChange(e.target.value, 'unit')}/> </div> <div className="mk-td"> - <InputNumber value={bill_count} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/,*/g, '')} onChange={(val) => this.setState({bill_count: val})} onBlur={() => this.onChange(bill_count, 'bill_count')}/> + <InputNumber value={bill_count} autoFocus={field === 'bill_count'} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/,*/g, '')} onChange={(val) => this.setState({bill_count: val})} onBlur={() => this.onChange(bill_count, 'bill_count')}/> </div> <div className="mk-td"> - <InputNumber value={unitprice} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/,*/g, '')} onChange={(val) => this.setState({unitprice: val})} onBlur={() => this.onChange(unitprice, 'unitprice')}/> + <InputNumber value={unitprice} autoFocus={field === 'unitprice'} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/,*/g, '')} onChange={(val) => this.setState({unitprice: val})} onBlur={() => this.onChange(unitprice, 'unitprice')}/> </div> <div className="mk-td"> - <InputNumber value={amount_line} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/,*/g, '')} onChange={(val) => this.setState({amount_line: val})} onBlur={() => this.onChange(amount_line, 'amount_line')}/> + <InputNumber value={amount_line} autoFocus={field === 'amount_line'} formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/,*/g, '')} onChange={(val) => this.setState({amount_line: val})} onBlur={() => this.onChange(amount_line, 'amount_line')}/> </div> <div className="mk-td mk-right">{line.tax_name}</div> - <div className="mk-td mk-right">{line.tax_amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')} <span className="del-line" onClick={() => delLine(line.uuid)}></span> </div> + <div className="mk-td mk-right">{line.tax_amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')} <span className="del-line" onClick={(e) => delLine(line.uuid, e)}></span> </div> </div> } } @@ -109,6 +109,7 @@ class InvoiceTable extends Component { static propTpyes = { config: PropTypes.object, + timestamp: PropTypes.string, data: PropTypes.any, onChange: PropTypes.func } @@ -116,6 +117,7 @@ state = { data: [], editKey: '', + key: '', total: {} } @@ -140,6 +142,21 @@ componentDidMount () { MKEmitter.addListener('resetDetails', this.resetDetails) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (this.props.timestamp !== nextProps.timestamp) { + let _data = fromJS(nextProps.data).toJS() + if (!_data.length) { + _data = [{uuid: Utils.getguid(), productname: '', spec: '', unit: '', bill_count: '', unitprice: 0, amount_line: 0, tax_rate: '', tax_name: '', tax_amount: 0}] + } + + this.setState({ + data: _data + }, () => { + this.getTotal(_data) + }) + } } /** @@ -268,9 +285,11 @@ this.setState({data: [...data, line]}) } - delLine = () => { - const { editKey, data } = this.state + delLine = (uuid, e) => { + const { data } = this.state + e.stopPropagation() + if (data.length === 1) { notification.warning({ top: 92, @@ -280,7 +299,7 @@ return } - let _data = data.filter(item => item.uuid !== editKey) + let _data = data.filter(item => item.uuid !== uuid) this.setState({data: _data}, () => { this.getTotal(_data) @@ -306,8 +325,13 @@ this.props.onChange(_data) } - checkLine = (uuid) => { - this.setState({editKey: uuid}) + checkLine = (uuid, key, e) => { + e && e.stopPropagation() + this.setState({editKey: uuid, key: key || ''}, () => { + if (key === 'productname') { + this.setState({visible: true}) + } + }) } changeDetail = (prod) => { @@ -323,6 +347,8 @@ item.tax_name = prod.tax_rate * 100 + '%' item.free_tax_mark = prod.free_tax_mark || '' item.vat_special_management = prod.vat_special_management || '' + item.tax_item = prod.tax_item || '' + item.tax_method = prod.tax_method || '' if (prod.vat_special_management && prod.free_tax_mark === 'true') { item.tax_name = prod.vat_special_management @@ -356,7 +382,7 @@ render() { const { config, tax_type } = this.props - const { editKey, data, total, visible } = this.state + const { editKey, key, data, total, visible } = this.state return ( <div className="detail-wrap"> @@ -373,18 +399,18 @@ </div> {data.map(item => { if (editKey === item.uuid) { - return <DetailLine key={item.uuid} line={item} changeLine={this.changeLine} delLine={this.delLine} trigger={() => this.setState({visible: true})}/> + return <DetailLine key={item.uuid} line={item} field={key} changeLine={this.changeLine} delLine={this.delLine} trigger={() => this.setState({visible: true})}/> } return <div className="mk-tr" key={item.uuid} onClick={() => this.checkLine(item.uuid)}> - <div className="mk-td mk-left">{item.productname || ''}</div> - <div className="mk-td mk-left">{item.spec || ''}</div> - <div className="mk-td mk-left">{item.unit || ''}</div> - <div className="mk-td mk-right">{`${item.bill_count || ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div> - <div className="mk-td mk-right">{`${item.unitprice || ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div> - <div className="mk-td mk-right">{`${item.amount_line || ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div> + <div className="mk-td mk-left" onClick={(e) => this.checkLine(item.uuid, item.productname ? '' : 'productname', e)}>{item.productname || ''}</div> + <div className="mk-td mk-left" onClick={(e) => this.checkLine(item.uuid, 'spec', e)}>{item.spec || ''}</div> + <div className="mk-td mk-left" onClick={(e) => this.checkLine(item.uuid, 'unit', e)}>{item.unit || ''}</div> + <div className="mk-td mk-right" onClick={(e) => this.checkLine(item.uuid, 'bill_count', e)}>{`${item.bill_count || ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div> + <div className="mk-td mk-right" onClick={(e) => this.checkLine(item.uuid, 'unitprice', e)}>{`${item.unitprice || ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div> + <div className="mk-td mk-right" onClick={(e) => this.checkLine(item.uuid, 'amount_line', e)}>{`${item.amount_line || ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div> <div className="mk-td mk-right">{item.tax_name}</div> - <div className="mk-td mk-right">{item.tax_amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}<span className="del-line" onClick={() => this.delLine(item.uuid)}></span></div> + <div className="mk-td mk-right">{item.tax_amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}<span className="del-line" onClick={(e) => this.delLine(item.uuid, e)}></span></div> </div> })} <div className="mk-total"> -- Gitblit v1.8.0