2021-10-08

king

2021-10-08 aa6caa89fad48f8c01bb326f63942d2dbcf89767

2021-10-08

 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 () {
@@ -207,7 +210,24 @@
  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()
    })
@@ -222,10 +242,31 @@
    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') {
@@ -252,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>)
@@ -295,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>)

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

@@ -188,6 +188,12 @@
    .ant-input {
      padding: 0px;
    }
    i {
      color: #ff4d4f;
      position: absolute;
      right: 3px;
      top: calc(50% - 8px);
    }
  }
  td.pointer {
    position: relative;