king
2024-05-21 8a6ce370f1aa1c061b76fa3e9d2d4d1df53ca4c5
src/tabviews/custom/components/module/invoice/invoiceTable/index.jsx
@@ -27,7 +27,7 @@
    })
  }
  onChange = (value, key) => {
  onChange = (value, key, nextkey) => {
    let line = {...this.props.line}
    if (['bill_count', 'unitprice', 'amount_line'].includes(key)) {
@@ -75,10 +75,32 @@
    })
    this.props.changeLine(line, key)
    if (nextkey) {
      let node = document.getElementById(nextkey)
      if (node) {
        if (node.select) {
          node.select()
        } else if (node.focus) {
          node.focus()
        }
      }
    }
  }
  onSkip = (key) => {
    let node = document.getElementById(key)
    if (node) {
      if (node.select) {
        node.select()
      } else if (node.focus) {
        node.focus()
      }
    }
  }
  render() {
    const { line, delLine, trigger } = this.props
    const { line, delLine, trigger, field, pid } = this.props
    const { bill_count, unitprice, amount_line } = this.state
    
    return <div className="mk-tr active">
@@ -86,22 +108,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')} onPressEnter={() => this.onSkip(pid + 'mk-invoice-unit')}/>
      </div>
      <div className="mk-td">
        <Input defaultValue={line.unit || ''} onChange={(e) => this.onChange(e.target.value, 'unit')}/>
        <Input id={pid + 'mk-invoice-unit'} defaultValue={line.unit || ''} autoFocus={field === 'unit'} onChange={(e) => this.onChange(e.target.value, 'unit')} onPressEnter={() => this.onSkip(pid + 'mk-invoice-billcount')}/>
      </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 id={pid + 'mk-invoice-billcount'} 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})} onPressEnter={() => this.onChange(bill_count, 'bill_count', pid + 'mk-invoice-unitprice')} 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 id={pid + 'mk-invoice-unitprice'} 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})} onPressEnter={() => this.onChange(unitprice, 'unitprice', pid + 'mk-invoice-amount')} 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 id={pid + 'mk-invoice-amount'} 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})} onPressEnter={() => this.onChange(amount_line, 'amount_line')} 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 +131,8 @@
class InvoiceTable extends Component {
  static propTpyes = {
    config: PropTypes.object,
    timestamp: PropTypes.string,
    read_only: PropTypes.any,
    data: PropTypes.any,
    onChange: PropTypes.func
  }
@@ -116,6 +140,7 @@
  state = {
    data: [],
    editKey: '',
    key: '',
    total: {}
  }
@@ -140,6 +165,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 +308,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 +322,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 +348,18 @@
    this.props.onChange(_data)
  }
  checkLine = (uuid) => {
    this.setState({editKey: uuid})
  checkLine = (uuid, key, e) => {
    const { read_only } = this.props
    e && e.stopPropagation()
    if (read_only) return
    this.setState({editKey: uuid, key: key || ''}, () => {
      if (key === 'productname') {
        this.setState({visible: true})
      }
    })
  }
  changeDetail = (prod) => {
@@ -323,6 +375,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 +410,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 +427,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} pid={config.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">