2023-01-29

king

2023-01-29 99c9aed75c0bf5356e3170b7070ed00d7ba653ca

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

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Table, Modal, Input, InputNumber, notification, message, AutoComplete, Select } from 'antd'
import { Table, Modal, Form, Input, InputNumber, notification, message, AutoComplete, Select, Popover, Button } from 'antd'
import { PlusOutlined, CloseOutlined } from '@ant-design/icons'

import Api from '@/api'
@@ -25,14 +25,102 @@
  }
}

class Accounting extends React.Component {
  state = {
    subAccounts: [],
    record: null
  }

  UNSAFE_componentWillMount() {
    const { data, tableId } = this.props
    let subAccounts = data.sup_accounting.split(',')
    let msg = window.GLOB.CacheVoucher.get(tableId) || {}
    let names = msg.names || {}

    subAccounts = subAccounts.map(n => {
      let item = {
        field: n,
        label: names[n] || n,
        initval: data[n] || '',
        options: []
      }

      if (msg[n]) {
        item.options = msg[n]
      }

      return item
    })

    this.setState({subAccounts: subAccounts, record: fromJS(data).toJS()})
  }

  selectChange = (val, item) => {
    this.setState({record: {...this.state.record, [item.field]: val || ''}})
  }

  getFields() {
    const { subAccounts } = this.state

    const fields = []

    subAccounts.forEach((item) => {
      fields.push(
        <Form.Item label={item.label} key={item.field}>
          <Select
            showSearch
            allowClear
            defaultValue={item.initval}
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            onChange={(val) => this.selectChange(val, item)}
          >
            {item.options.map((option, i) =>
              <Select.Option key={i} value={option.value}>{option.label}</Select.Option>
            )}
          </Select>
        </Form.Item>
      )
    })
    
    return fields
  }

  confirm = () => {
    const { subAccounts, record } = this.state

    let empty = ''
    subAccounts.forEach(item => {
      if (!empty && !record[item.field]) {
        empty = item.label
      }
    })

    if (empty) {
      notification.warning({
        top: 92,
        message: '请选择' + empty,
        duration: 5
      })
    } else {
      this.props.confirm(record)
    }
  }

  render() {
    return <div>
      {this.getFields()}
      <div className="footer">
        <Button onClick={this.props.cancel}>取消</Button>
        <Button onClick={this.confirm}>确定</Button>
      </div>
    </div>
  }
}

class BodyCell extends React.Component {
  state = {
    editing: false,
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props.record), fromJS(nextProps.record)) ||
      nextState.editing !== this.state.editing
    visible: false,
  }

  componentDidMount () {
@@ -121,8 +209,6 @@

    this.setState({editing: false})

    if (col.field === 'subjectscode') return

    if (value !== record[col.field]) {
      let line = {...record, [col.field]: value}

@@ -164,23 +250,73 @@
    MKEmitter.emit('delRecord', col.tableId, record)
  }

  onSelectBlur = () => {
    const { visible } = this.state

    if (visible) return

    this.setState({editing: false})
  }

  onSelectChange = (val, option) => {
    const { col, record } = this.props

    this.setState({editing: false})

    let line = {...record, ...option.props.extra}

    if (record.sup_accounting && !line.sup_accounting) {
      record.sup_accounting.split(',').forEach(item => {
        line[item] = ''
      })
    }

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

    if (line.sup_accounting) {
      setTimeout(() => {
        this.setState({visible: true})
      }, 100)
    } else {
      this.setState({editing: false})
      setTimeout(() => {
        MKEmitter.emit('tdFocus', 'debtor' + record.uuid)
      }, 50)
    }
  }

  confirm = (res) => {
    const { col } = this.props

    MKEmitter.emit('changeRecord', col.tableId, fromJS(res).toJS())

    this.setState({editing: false, visible: false})
    setTimeout(() => {
      MKEmitter.emit('tdFocus', 'debtor' + record.uuid)
      MKEmitter.emit('tdFocus', 'debtor' + res.uuid)
    }, 50)
  }

  cancel = () => {
    const { col } = this.props
    let record = fromJS(this.props.record).toJS()
    record.balance_direction = ''
    record.count_type = ''
    record.foreign_currency_type = ''
    record.mnemonic_code = ''
    record.subjectscode = ''
    record.subjectsname = ''
    record.sup_accounting.split(',').forEach(item => {
      record[item] = ''
    })

    record.sup_accounting = ''

    MKEmitter.emit('changeRecord', col.tableId, record)

    this.setState({editing: false, visible: false})
  }

  render() {
    let { col, record, subjects, className } = this.props
    const { editing } = this.state
    let { col, record, className } = this.props
    const { editing, visible } = this.state

    let children = null
    let colSpan = 1
@@ -218,21 +354,35 @@
        colSpan = 0
      } else {
        if (editing) {
          children = <Select
            showSearch
            defaultValue={record.subjectscode || ''}
            dropdownClassName="edit-table-dropdown"
            id={col.uuid + record.uuid}
            onBlur={this.onBlur}
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            onSelect={this.onSelectChange}
          >
            {subjects.map((item, i) => (<Select.Option key={i} extra={item} value={item.subjectscode}>{item.subjectscode + ' ' + item.subjectsname}</Select.Option>))}
          </Select>
          let msg = window.GLOB.CacheVoucher.get(col.tableId)
          let subjects = msg ? msg.subjects : []

          children = <>
            <Select
              showSearch
              defaultValue={record.subjectscode || ''}
              dropdownClassName="edit-table-dropdown"
              id={col.uuid + record.uuid}
              onBlur={this.onSelectBlur}
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              onSelect={this.onSelectChange}
            >
              {subjects.map((item, i) => (<Select.Option key={i} extra={item} value={item.subjectscode}>{item.subjectscode + ' ' + item.subjectsname}</Select.Option>))}
            </Select>
            <Popover overlayClassName="subject-pop-wrap" placement="bottom" title="辅助核算" visible={visible} content={<Accounting confirm={this.confirm} cancel={this.cancel} tableId={col.tableId} data={record}/>}>
              <span className="pop-anchor"></span>
            </Popover>
          </>
        } else {
          let val = ''
          if (record.subjectscode) {
            val = (record.subjectscode || '') + ' ' + (record.subjectsname || '')

            record.sup_accounting && record.sup_accounting.split(',').forEach(item => {
              if (record[item]) {
                val += '_' + record[item]
              }
            })
          }
          children = <div className="content-wrap" onClick={this.focus}>{val}</div>
        }
@@ -288,7 +438,6 @@
class VoucherTable extends Component {
  static propTpyes = {
    config: PropTypes.object,        // 菜单Id
    subjects: PropTypes.array,       // 会计科目
    BID: PropTypes.any,              // 主表ID
    data: PropTypes.any,             // 表格数据
    total: PropTypes.any,            // 总数
@@ -308,7 +457,7 @@
  }

  UNSAFE_componentWillMount () {
    const { config, subjects, data } = this.props
    const { config, data } = this.props

    let columns = [
      {
@@ -328,7 +477,6 @@
        width: '34%',
        onCell: record => ({
          record,
          subjects,
          col: {uuid: 'subjectscode', field: 'subjectscode', tableId: config.uuid},
        })
      },
@@ -400,33 +548,7 @@
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      this.resetData(fromJS(nextProps.data).toJS())
    } else if (!is(fromJS(this.props.subjects), fromJS(nextProps.subjects))) {
      this.resetSubjects(nextProps.subjects)
    }
  }

  resetSubjects = (subjects) => {
    const { config } = this.props
    let columns = fromJS(this.state.columns).toJS()

    this.setState({
      columns: columns.map(col => {
        if (col.key === 'subjectscode') {
          return {
            title: '会计科目',
            dataIndex: 'subjectscode',
            key: 'subjectscode',
            width: '34%',
            onCell: record => ({
              record,
              subjects,
              col: {uuid: 'subjectscode', field: 'subjectscode', tableId: config.uuid},
            })
          }
        }
        return col
      })
    })
  }

  resetData = (data) => {