From aa6caa89fad48f8c01bb326f63942d2dbcf89767 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 08 十月 2021 21:47:49 +0800
Subject: [PATCH] 2021-10-08
---
src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 85 ++++++++++++++++++++++++++++++++++++++----
1 files changed, 77 insertions(+), 8 deletions(-)
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
index d667402..dfdbc74 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
+++ b/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
--
Gitblit v1.8.0