2021-10-08

king

2021-10-08 aa6caa89fad48f8c01bb326f63942d2dbcf89767

 src/tabviews/custom/components/table/edit-table/normalTable/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Table, Typography, Icon, Switch, Input, InputNumber } from 'antd'
import { Table, Typography, Icon, Switch, Input, InputNumber, Tooltip } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import MKEmitter from '@/utils/events.js'
@@ -91,7 +91,8 @@

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

  getMark = (record, marks, style, content) => {
@@ -166,7 +167,9 @@
  }

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

  componentDidMount () {
@@ -191,30 +194,79 @@

  enterPress = () => {
    const { col, record } = this.props
    const { value } = this.state

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

    let _record = {...record, [col.field]: value}
    MKEmitter.emit('changeRecord', _record)
  }

  focus = () => {
    const { col, record } = this.props

    this.setState({editing: true, value: record[col.field] !== undefined ? record[col.field] : ''}, () => {
    let err = null
    let val = record[col.field] !== undefined ? record[col.field] : ''

    if (col.type === 'number') {
      val = +val
      if (isNaN(val)) {
        val = 0
      }
      if (typeof(col.max) === 'number' && val > col.max) {
        err = col.label + '最大为' + col.max
      } else if (typeof(col.min) === 'number' && val < col.min) {
        err = col.label + '最小为' + col.min
      }
    } else if (col.required === 'true' && !val) {
      err = '请填写' + col.label
    }

    this.setState({editing: true, value: val, err}, () => {
      let node = document.getElementById(col.uuid + record.$Index)
      node && node.select()
    })
  }

  onBlur = () => {
    const { col, record } = this.props
    const { value } = this.state

    this.setState({editing: false})

    let _record = {...record, [col.field]: value}
    MKEmitter.emit('changeRecord', _record)
  }
  
  onChange = (val) => {
    const { col } = this.props
    
    let err = null

    if (col.type === 'number') {
      val = +val
      if (isNaN(val)) {
        val = 0
      }
      if (typeof(col.max) === 'number' && val > col.max) {
        err = col.label + '最大为' + col.max
      } else if (typeof(col.min) === 'number' && val < col.min) {
        err = col.label + '最小为' + col.min
      }
    } else if (col.required === 'true' && !val) {
      err = '请填写' + col.label
    }
    this.setState({value: val, err})
  }

  render() {
    let { col, config, record, style, className } = this.props
    const { editing, value } = this.state
    const { editing, value, err } = this.state

    let children = null
    if (col.type === 'text') {
@@ -241,7 +293,8 @@
      if (col.editable === 'true') {
        if (editing) {
          return (<td className="editing_table_cell">
            <Input id={col.uuid + record.$Index} defaultValue={value} onChange={(e) => this.setState({value: e.target.value})} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
            <Input id={col.uuid + record.$Index} defaultValue={value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
            {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null}
          </td>)
        } else {
          return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>)
@@ -284,7 +337,8 @@
      if (col.editable === 'true') {
        if (editing) {
          return (<td className="editing_table_cell">
            <InputNumber id={col.uuid + record.$Index} defaultValue={value} onChange={(val) => this.setState({value: val})} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
            <InputNumber id={col.uuid + record.$Index} defaultValue={value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
            {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null}
          </td>)
        } else {
          return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>)
@@ -354,7 +408,7 @@
  }

  UNSAFE_componentWillMount () {
    const { setting, fields, columns } = this.props
    const { setting, fields, columns, data } = this.props
    let orderfields = {}
    let initEditLine = null

@@ -406,6 +460,7 @@
    }

    this.setState({
      data,
      columns: _columns,
      tableId,
      orderfields,
@@ -420,6 +475,7 @@
  componentDidMount () {
    MKEmitter.addListener('resetTable', this.resetTable)
    MKEmitter.addListener('nextLine', this.nextLine)
    MKEmitter.addListener('changeRecord', this.changeRecord)
  }

  /**
@@ -431,6 +487,7 @@
    }
    MKEmitter.removeListener('resetTable', this.resetTable)
    MKEmitter.removeListener('nextLine', this.nextLine)
    MKEmitter.removeListener('changeRecord', this.changeRecord)
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
@@ -448,6 +505,18 @@
    }
  }

  changeRecord = (record) => {
    let _data = this.state.data.map(item => {
      if (item.$Index === record.$Index) {
        return record
      } else {
        return item
      }
    })

    this.setState({data: _data})
  }

  changeTable = (pagination, filters, sorter) => {
    const { orderfields } = this.state