2022-02-24

king

2022-02-24 f2aa6b6a973e9b2f541bba7fc23e71d7791311f8

2022-02-24

 src/tabviews/custom/components/module/voucher/index.jsx

@@ -17,11 +17,12 @@
  }

  state = {
    BID: '',                   // 主表ID
    config: null,              // 图表配置信息
    loading: false,            // 数据加载状态
    data: null,                // 数据
    searchkey: null,           // 过滤条件
    BID: '',
    type: '',
    config: null,
    loading: false,
    data: null,
    searchkey: null,
    disableAdd: true,
    disableSave: true,
    typeOptions: []
@@ -33,6 +34,7 @@
    this.setState({
      config: fromJS(config).toJS(),
      BID: BID || '',
      type: config.wrap.type
    }, () => {
      this.loadData()
    })
@@ -72,7 +74,7 @@
  }

  render() {
    const { config, disableSave, disableAdd, typeOptions, data } = this.state
    const { config, disableSave, disableAdd, typeOptions, data, type } = this.state

    return (
      <div className="menu-voucher-wrap" style={config.style}>
@@ -80,8 +82,10 @@
          <Button className="system-background header-btn" disabled={disableAdd} onClick={this.triggeradd}>新增</Button>
          <Button className="system-background header-btn" disabled={disableSave} onClick={this.triggersave}>保存</Button>
          <Button className="system-background header-btn" disabled={disableSave} onClick={this.triggerprint}>打印</Button>
          <Button className="system-background header-btn" disabled={disableSave} onClick={this.triggerprint}>导入</Button>
          <Button className="system-background header-btn" disabled={disableSave} onClick={this.triggerprint}>导出</Button>
        </div>
        <div className="voucher-body">
        {type === 'edit' ? <div className="voucher-body">
          <div className="pre-wrap">
            <div className="voucher-code">
              <Select>
@@ -101,7 +105,23 @@
            </div>
          </div>
          <VoucherTable config={config} data={data}/>
        </div>
        </div> : null}
        {type === 'check' ? <div className="voucher-body">
          <div className="pre-wrap">
            <div className="voucher-code">
              记 1 号
            </div>
            <div className="voucher-date">
              日期：2022-02-24
            </div>
            <div className="voucher-affix">
              附单据 2 张
              <Button type="link" className="" onClick={this.triggerprint}>附件</Button>
              <Button type="link" className="" onClick={this.triggerprint}>备注</Button>
            </div>
          </div>
          <VoucherTable config={config} data={data}/>
        </div> : null}
      </div>
    )
  }

 src/tabviews/custom/components/module/voucher/voucherTable/index.jsx

@@ -5,6 +5,7 @@
// import { EditOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
@@ -62,17 +63,27 @@
    const { value } = this.state

    this.setState({editing: false})
    setTimeout(() => {
      if (col.enter === '$next') {
        MKEmitter.emit('nextLine', col, record.uuid)
      } else {
        MKEmitter.emit('tdFocus', col.enter + record.uuid)
      }
    }, 50)

    if (value !== record[col.field]) {
      MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value})
      let line = {...record, [col.field]: value}

      if (col.field === 'debtor') {
        line.creditor = ''
      } else {
        line.debtor = ''
      }

      MKEmitter.emit('changeRecord', col.tableId, line)
    }

    setTimeout(() => {
      if (col.field === 'creditor') {
        MKEmitter.emit('nextLine', col, record)
      } else {
        let cl = {remark: 'subject', subject: 'debtor', debtor: 'creditor'}
        MKEmitter.emit('tdFocus', cl[col.uuid] + record.uuid)
      }
    }, 50)
  }

  focus = () => {
@@ -80,9 +91,7 @@

    if (record.type === 'total') return

    let val = record[col.field] !== undefined ? record[col.field] : ''

    this.setState({editing: true, value: val}, () => {
    this.setState({editing: true, value: record[col.field]}, () => {
      let node = document.getElementById(col.uuid + record.uuid)
      node && node.select()
    })
@@ -95,7 +104,15 @@
    this.setState({editing: false})

    if (value !== record[col.field]) {
      MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value})
      let line = {...record, [col.field]: value}

      if (col.field === 'debtor') {
        line.creditor = ''
      } else {
        line.debtor = ''
      }

      MKEmitter.emit('changeRecord', col.tableId, line)
    }
  }
  
@@ -111,12 +128,12 @@
    let colSpan = 1

    if (col.field === 'remark') {
      let val = record.remark || ''

      if (record.type === 'total') {
        children = <div className="content-wrap" style={{lineHeight: '60px'}}>合计: {record.total}</div>
        children = <div className="content-wrap" style={{lineHeight: '60px'}}>合计: {val}</div>
        colSpan = 2
      } else {
        let val = record.remark || ''
  
        if (editing) {
          children = <Input.TextArea id={col.uuid + record.uuid} autoSize={false} defaultValue={val} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
        } else {
@@ -205,78 +222,78 @@
  }

  UNSAFE_componentWillMount () {
    let tableId = (() => {
      let uuid = []
      let _options = 'abcdefghigklmnopqrstuv'
      for (let i = 0; i < 19; i++) {
        uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
    const { config } = this.props

    let data = [
      {remark: '提现', subject: '1001 库存现金', debtor: 124, creditor: ''},
      {remark: '购入固定资产', subject: '1001 库存现金', debtor: '', creditor: 124},
      {remark: '转结销售成本', subject: '1001 库存现金', debtor: -524, creditor: ''},
      {remark: '提现', subject: '1001 库存现金', debtor: 34, creditor: ''},
    ]

    data = this.initData(data)
    data.push(this.getTotalLine(data))

    let columns = [
      {
        title: '摘要',
        dataIndex: 'remark',
        key: 'remark',
        width: '22%',
        onCell: record => ({
          record,
          col: {uuid: 'remark', field: 'remark', tableId: config.uuid},
        })
      },
      {
        title: '会计科目',
        dataIndex: 'subject',
        key: 'subject',
        width: '34%',
        onCell: record => ({
          record,
          col: {uuid: 'subject', field: 'subject', tableId: config.uuid},
        })
      },
      {
        title: () => (<>
          <div className="money-title">借方金额</div>
          <div className="money-uint">
            <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span>
            <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span className="last">分</span>
          </div>
        </>),
        dataIndex: 'debtor',
        key: 'debtor',
        width: '22%',
        onCell: record => ({
          record,
          col: {uuid: 'debtor', field: 'debtor', tableId: config.uuid},
        })
      },
      {
        title: () => (<>
          <div className="money-title">贷方金额</div>
          <div className="money-uint">
            <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span>
            <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span className="last">分</span>
          </div>
        </>),
        dataIndex: 'creditor',
        key: 'creditor',
        width: '22%',
        onCell: record => ({
          record,
          col: {uuid: 'creditor', field: 'creditor', tableId: config.uuid},
        })
      }
      return uuid.join('')
    }) ()
    ]

    this.setState({
      data: [
        {uuid: 'dsfdsfdsfs', remark: '提现', subject: '1001 库存现金', debtor: 124, creditor: ''},
        {uuid: 'dsfdsfsdfdsfs', remark: '购入固定资产', subject: '1001 库存现金', debtor: '', creditor: 124},
        {uuid: 'dsfdsfsdgdrsfs', remark: '转结销售成本', subject: '1001 库存现金', debtor: -524, creditor: ''},
        {uuid: 'dsfdsfsdgfdsgdsfs', remark: '提现', subject: '1001 库存现金', debtor: 34, creditor: ''},
        {uuid: 'dsfdsfsdgfdsswgdsfs', type: 'total', total: this.changeMoneyToChinese(354.24), debtor: 354.24, creditor: ''},
      ],
      columns: [
        {
          title: '摘要',
          dataIndex: 'remark',
          key: 'remark',
          width: '22%',
          onCell: record => ({
            record,
            col: {uuid: 'remark', field: 'remark', tableId: tableId},
          })
        },
        {
          title: '会计科目',
          dataIndex: 'subject',
          key: 'subject',
          width: '34%',
          onCell: record => ({
            record,
            col: {uuid: 'subject', field: 'subject', tableId: tableId},
          })
        },
        {
          title: () => (<>
            <div className="money-title">借方金额</div>
            <div className="money-uint">
              <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span>
              <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span className="last">分</span>
            </div>
          </>),
          dataIndex: 'debtor',
          key: 'debtor',
          width: '22%',
          onCell: record => ({
            record,
            col: {uuid: 'debtor', field: 'debtor', tableId: tableId},
          })
        },
        {
          title: () => (<>
            <div className="money-title">贷方金额</div>
            <div className="money-uint">
              <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>千</span>
              <span>百</span> <span>十</span> <span>元</span> <span>角</span> <span className="last">分</span>
            </div>
          </>),
          dataIndex: 'creditor',
          key: 'creditor',
          width: '22%',
          onCell: record => ({
            record,
            col: {uuid: 'creditor', field: 'creditor', tableId: tableId},
          })
        }
      ],
      tableId
      data: data,
      edData: fromJS(data).toJS(),
      columns,
      tableId: config.uuid
    })
  }

@@ -306,6 +323,53 @@
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      this.setState({data: nextProps.data || []})
    }
  }

  initData = (data) => {
    let _data = data.map((item, i) => {
      item.uuid = Utils.getuuid()
      item.index = i
      
      return item
    })

    if (_data.length < 4) {
      for (let i = _data.length - 1; i < 4; i++) {
        _data.push({uuid: Utils.getuuid(), index: i + 1, remark: '', subject: '', debtor: '', creditor: ''})
      }
    }
    return _data
  }

  getTotalLine = (data) => {
    let totalLine = {uuid: Utils.getuuid(), type: 'total'}
    let debtor = ''
    let creditor = ''

    data.forEach(item => {
      if (typeof(item.debtor) === 'number') {
        if (debtor === '') {
          debtor = 0
        }

        debtor += item.debtor
      } else if (typeof(item.creditor) === 'number') {
        if (debtor === '') {
          debtor = 0
        }
        if (creditor === '') {
          creditor = 0
        }
        creditor += item.creditor
      }
    })

    totalLine.debtor = debtor
    totalLine.creditor = creditor

    totalLine.remark = this.changeMoneyToChinese(debtor)
    
    return totalLine
  }
  
  changeMoneyToChinese = (money) => {
@@ -391,24 +455,22 @@
    return ChineseStr
  }

  nextLine = (col, index) => {
    const { setting } = this.props
    const { edData, initEditLine, tableId } = this.state
  nextLine = (col, record) => {
    const { edData, tableId } = this.state

    if (col.tableId !== tableId) return

    index = +index
    if (record.index < edData.length - 2) {
      MKEmitter.emit('tdFocus', 'remark' + edData[record.index + 1].uuid)
    } else {
      let _data = fromJS(edData).toJS()
      let line = {uuid: Utils.getuuid(), index: _data.length - 1, remark: record.remark || '', subject: '', debtor: '', creditor: ''}

    if (index < edData.length && initEditLine) {
      MKEmitter.emit('tdFocus', initEditLine.uuid + (index + 1))
    } else if (col.footEnter === 'add' && setting.addable === 'true') {
      setTimeout(() => {
        this.plusLine(initEditLine)
      }, 10)
    } else if (col.footEnter === 'sub') {
      setTimeout(() => {
        this.checkData()
      }, 10)
      _data.splice(_data.length - 1, 0, line)

      this.setState({edData: _data}, () => {
        MKEmitter.emit('tdFocus', 'remark' + line.uuid)
      })
    }
  }

@@ -430,32 +492,23 @@

    if (id !== tableId) return

    let _data = []
    let _data = edData.filter(item => item.uuid !== record.uuid)

    if (record.$$uuid === '$new') {
      _data = edData.filter(item => item.uuid !== record.uuid)
      _data = _data.map((item, index) => {
        item.key = index
        return item
      })
    } else {
      _data = edData.map(item => {
        if (item.uuid === record.uuid) {
          record.$deleted = true
          return record
        } else {
          return item
        }
      })
    _data.pop()

    if (_data.length < 4) {
      for (let i = _data.length - 1; i < 4; i++) {
        _data.push({uuid: Utils.getuuid(), index: i + 1, remark: '', subject: '', debtor: '', creditor: ''})
      }
    }

    _data.push(this.getTotalLine(_data))

    this.setState({edData: _data})
  }

  changeRecord = (id, record) => {
    const { tableId } = this.state

    if (id !== tableId) return
  changeRecord = (tableId, record) => {
    if (tableId !== this.state.tableId) return

    let _data = this.state.edData.map(item => {
      if (item.uuid === record.uuid) {
@@ -464,6 +517,14 @@
        return item
      }
    })

    _data.pop()

    if (record.index === _data.length - 1) {
      _data.push({uuid: Utils.getuuid(), index: record.index + 1, remark: '', subject: '', debtor: '', creditor: ''})
    }

    _data.push(this.getTotalLine(_data))

    this.setState({edData: _data})
  }
@@ -644,7 +705,7 @@
  }

  render() {
    const { tableId, data, columns} = this.state
    const { edData, columns} = this.state

    const components = {
      body: {
@@ -653,16 +714,13 @@
      }
    }

    // 数据收起时，过滤已选数据
    let _data = data

    return (
      <div className="voucher-table-wrap" id={tableId}>
      <div className="voucher-table-wrap">
        <Table
          rowKey="uuid"
          components={components}
          columns={columns}
          dataSource={_data}
          dataSource={edData}
          bordered={true}
          // loading={this.props.loading}
          onRow={(record, index) => {