From 6555f1f63a5389d49fbb98b5b2dca16a61239c64 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 27 十月 2023 09:49:39 +0800 Subject: [PATCH] 2023-10-27 --- src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 488 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 441 insertions(+), 47 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 4ce4d1b..0805ba9 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, Modal, Input, InputNumber, Button, notification, message, Select } from 'antd' +import { Table, Typography, Modal, Input, InputNumber, Switch, Button, notification, message, Select, DatePicker } from 'antd' import { EditOutlined, QuestionCircleOutlined } from '@ant-design/icons' import moment from 'moment' import md5 from 'md5' @@ -10,13 +10,97 @@ import asyncComponent from '@/utils/asyncComponent' import Utils, { getEditTableSql, getMark } from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' -import CusSwitch from './cusSwitch' import Encrypts from '@/components/encrypts' import './index.scss' const { Paragraph } = Typography const MkIcon = asyncComponent(() => import('@/components/mk-icon')) +const MKPopSelect = asyncComponent(() => import('./mkPopSelect')) const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList')) + +class CusSwitch extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + autoFocus: PropTypes.any, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + status: false + } + + UNSAFE_componentWillMount () { + const { defaultValue, config } = this.props + + let status = false + + if (defaultValue === config.openVal) { + status = true + } + + this.setState({status}) + } + + changeStatus = (val) => { + const { config } = this.props + this.setState({ status: val }, () => { + let _val = val ? config.openVal : config.closeVal + let _text = val ? config.openText : config.closeText + this.props.onChange(_val, _text) + }) + } + + render() { + const { config, autoFocus } = this.props + const { status } = this.state + return ( + <Switch checkedChildren={config.openText} autoFocus={autoFocus} onBlur={this.props.onBlur} unCheckedChildren={config.closeText} checked={status} onChange={this.changeStatus} /> + ) + } +} + +class CusDatePicker extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + config: PropTypes.object, + onChange: PropTypes.func, + blur: PropTypes.func + } + + state = { + value: null, + open: false + } + + UNSAFE_componentWillMount () { + const { value, open } = this.props + + let _value = value || null + if (_value) { + _value = moment(_value, 'YYYY-MM-DD HH:mm:ss') + } + + this.setState({value: _value, open: open === true}) + } + + onOpenChange = (open) => { + this.setState({open}) + + if (open === false) { + this.props.blur() + } + } + + render() { + const { config } = this.props + const { value, open } = this.state + + return ( + <DatePicker dropdownClassName={'mk-date-picker ' + config.precision} showTime={config.format !== 'YYYY-MM-DD'} format={config.format} open={open} defaultValue={value} onChange={this.props.onChange} onOpenChange={this.onOpenChange}/> + ) + } +} class BodyRow extends React.Component { shouldComponentUpdate (nextProps, nextState) { @@ -254,10 +338,41 @@ MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) } + onDateChange = (val) => { + const { col, record } = this.props + + let _val = val ? moment(val).format(col.format) : '' + + if (col.precision === 'hour') { + _val = _val + ':00:00' + } else if (col.precision === 'minute') { + _val = _val + ':00' + } + + this.setState({editing: false}) + + setTimeout(() => { + if (/\$next/.test(col.enter)) { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + let node = document.getElementById(col.enter + record.$$uuid) + node && node.click() + } + }, 50) + + MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val}) + } + switchBlur = () => { setTimeout(() => { this.setState({editing: false}) }, 10) + } + + onPopChange = () => { + } render() { @@ -297,9 +412,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -309,25 +424,43 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } if (col.editable === 'true' && !disabled) { if (editing) { if (!col.editType || col.editType === 'text') { - return (<td className="editing_table_cell"> + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> <Input className={err ? 'has-error' : ''} title={err} id={col.uuid + record.$$uuid} defaultValue={value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> + </td>) + } else if (col.editType === 'date') { + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <CusDatePicker config={col} value={record[col.field] || null} open={true} onChange={this.onDateChange} blur={() => this.setState({editing: false})}/> </td>) } else if (col.editType === 'switch') { let _value = record[col.field] !== undefined ? record[col.field] : '' - return (<td className="editing_table_cell"> + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> <CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/> + </td>) + } else if (col.editType === 'popSelect') { + let _value = record[col.field] !== undefined ? record[col.field] : '' + + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MKPopSelect defaultValue={_value} config={col} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/> </td>) } else { let _value = record[col.field] !== undefined ? record[col.field] : '' - return (<td className="editing_table_cell"> + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> <Select showSearch defaultValue={_value} @@ -343,7 +476,7 @@ </td>) } } else { - return (<td className={className + ' pointer'} style={style}> + return (<td onClick={(e) => e.stopPropagation()} className={className + ' pointer'} style={style}> <div className="mk-mask" id={col.uuid + record.$$uuid} onClick={this.focus}></div>{content} </td>) } @@ -385,9 +518,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -397,6 +530,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -406,11 +547,11 @@ if (col.noValue === 'hide' && value === 0) { val = '' } - return (<td className="editing_table_cell"> + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> <InputNumber className={err ? 'has-error' : ''} precision={col.decimal || 0} title={err} id={col.uuid + record.$$uuid} defaultValue={val} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> </td>) } else { - return (<td className={className + ' pointer'} style={style}> + return (<td onClick={(e) => e.stopPropagation()} className={className + ' pointer'} style={style}> <div className="mk-mask" id={col.uuid + record.$$uuid} onClick={this.focus}></div>{content} </td>) } @@ -441,9 +582,7 @@ let func = new Function('data', col.formula) content = func([record]) } catch (e) { - if (window.GLOB.debugger === true) { - console.warn(e) - } + console.warn(e) content = '' } } else { @@ -457,10 +596,8 @@ // eslint-disable-next-line content = eval(content) } catch (e) { - if (window.GLOB.debugger === true) { - console.info(content) - console.warn(e) - } + console.info(content) + console.warn(e) content = '' } } @@ -486,9 +623,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -498,6 +635,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -674,6 +819,35 @@ MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) } + onDateChange = (val) => { + const { col, record } = this.props + + let _val = val ? moment(val).format(col.format) : '' + + if (col.precision === 'hour') { + _val = _val + ':00:00' + } else if (col.precision === 'minute') { + _val = _val + ':00' + } + + setTimeout(() => { + if (/\$next/.test(col.enter)) { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + let node = document.getElementById(col.enter + record.$$uuid) + node && node.click() + } + }, 50) + + MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val}) + } + + onPopChange = () => { + + } + render() { let { col, config, record, style, className, ...resProps } = this.props const { err } = this.state @@ -681,6 +855,7 @@ if (!col) return (<td {...resProps} className={className} style={style}/>) let disabled = false + let editable = false if (col.ctrlField) { disabled = col.ctrlValue.includes(record[col.ctrlField]) } @@ -688,6 +863,7 @@ let children = null if (col.type === 'text') { if (col.editable === 'true' && !disabled) { + editable = true let _value = record[col.field] !== undefined ? record[col.field] : '' if (!col.editType || col.editType === 'text') { @@ -697,6 +873,14 @@ } else if (col.editType === 'switch') { children = ( <CusSwitch config={col} autoFocus={false} defaultValue={_value} onChange={this.onSwitchChange} onBlur={() => {}}/> + ) + } else if (col.editType === 'date') { + children = ( + <CusDatePicker config={col} value={record[col.field] || null} onChange={this.onDateChange} blur={() => {}}/> + ) + } else if (col.editType === 'popSelect') { + children = ( + <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/> ) } else { children = (<> @@ -738,9 +922,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -750,6 +934,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -761,6 +953,7 @@ } } else if (col.type === 'number') { if (col.editable === 'true' && !disabled) { + editable = true let _value = record[col.field] !== undefined ? record[col.field] : '' if (col.noValue === 'hide' && _value === 0) { @@ -805,9 +998,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -817,6 +1010,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -850,9 +1051,7 @@ let func = new Function('data', col.formula) content = func([record]) } catch (e) { - if (window.GLOB.debugger === true) { - console.warn(e) - } + console.warn(e) content = '' } } else { @@ -866,10 +1065,8 @@ // eslint-disable-next-line content = eval(content) } catch (e) { - if (window.GLOB.debugger === true) { - console.info(content) - console.warn(e) - } + console.info(content) + console.warn(e) content = '' } } @@ -895,9 +1092,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -907,6 +1104,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -920,6 +1125,10 @@ children = ( <CardCellComponent data={record} cards={config} elements={col.elements}/> ) + } + + if (editable) { + return (<td onClick={(e) => e.stopPropagation()} className={'editing_all_table_cell ' + className} style={style}>{children}</td>) } return (<td className={'editing_all_table_cell ' + className} style={style}>{children}</td>) @@ -938,6 +1147,8 @@ loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓� refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂� chgSelectData: PropTypes.func, + allSearch: PropTypes.any, + colsCtrls: PropTypes.any } state = { @@ -954,11 +1165,13 @@ pageOptions: [], deForms: null, visible: false, - midData: null + midData: null, + allColumns: null, + reseting: false } UNSAFE_componentWillMount () { - const { setting, fields, columns, BID } = this.props + const { setting, fields, columns, BID, colsCtrls } = this.props let orderfields = {} let _columns = [] @@ -972,7 +1185,7 @@ let cell = null if (item.type === 'colspan') { - cell = { title: item.label, align: item.Align } + cell = { title: item.label, align: item.Align, $key: item.uuid } cell.children = getColumns(item.subcols) } else { if (item.editable === 'true') { @@ -1002,20 +1215,33 @@ item.map.set(cell.value, cell.label) }) } + } else if (item.type === 'text' && item.editType === 'date') { + item.format = 'YYYY-MM-DD' + + if (item.precision === 'hour') { + item.format = 'YYYY-MM-DD HH' + } else if (item.precision === 'minute') { + item.format = 'YYYY-MM-DD HH:mm' + } else if (item.precision === 'second') { + item.format = 'YYYY-MM-DD HH:mm:ss' + } } } if (item.field) { orderfields[item.uuid] = item.field + } else if (item.sortField) { + orderfields[item.uuid] = item.sortField } cell = { align: item.Align, dataIndex: item.uuid, title: item.editable === 'true' ? <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> : item.label, - sorter: !!(item.field && item.IsSort === 'true'), + sorter: (item.field || item.sortField) && item.IsSort === 'true', width: item.Width || 120, - $type: item.type, + // $type: item.type, + $key: item.uuid, onCell: record => ({ record, col: item, @@ -1035,7 +1261,13 @@ if (item.field === setting.primaryKey) return if (_forms[item.field]) { - forms.push({..._forms[item.field], datatype: item.datatype}) + let _item = {..._forms[item.field]} + if (_item.editType === 'date') { + _item.datatype = _item.declareType || 'datetime' + } else { + _item.datatype = item.datatype + } + forms.push(_item) } else { forms.push(item) } @@ -1049,9 +1281,16 @@ pageOptions = pageOptions.sort((a, b) => a - b) } + let allColumns = null + if (colsCtrls) { + allColumns = [..._columns] + _columns = this.getCurColumns(_columns, this.props.allSearch) + } + this.setState({ forms, signForms, + allColumns, pageSize: setting.pageSize || 10, pageOptions, columns: _columns, @@ -1113,13 +1352,54 @@ MKEmitter.removeListener('changeRecord', this.changeRecord) } + getCurColumns = (columns, allSearch) => { + const { colsCtrls } = this.props + + let values = {} + allSearch.forEach(item => { + values[item.key] = item.value + }) + let cols = null + colsCtrls.some(item => { + let originVal = item.field.map(f => values[f] || '').join('') + let contrastVal = item.contrastValue + let result = false + + if (item.match === '=') { + result = originVal === contrastVal + } else if (item.match === '!=') { + result = originVal !== contrastVal + } else { + originVal = isNaN(originVal) ? originVal : +originVal + contrastVal = isNaN(contrastVal) ? contrastVal : +contrastVal + if (item.match === '>') { + result = originVal > contrastVal + } else if (item.match === '<') { + result = originVal < contrastVal + } + } + + if (!result) return false + + cols = item.cols + + return true + }) + + if (cols) { + return columns.filter(col => cols.includes(col.$key)) + } + + return columns + } + transferData = (menuid, data, type) => { const { MenuID, setting } = this.props const { edData, signForms } = this.state if (menuid !== MenuID) return - if (setting.commit !== 'all' && setting.standard !== 'change') { + if (setting.commit !== 'all' && setting.commit !== 'blur' && setting.standard !== 'change') { if (type !== 'line') { data.forEach(item => { let value = '' @@ -1159,7 +1439,24 @@ } updateMutil = (data) => { - const { setting } = this.props + const { setting, colsCtrls, allSearch } = this.props + const { allColumns } = this.state + + if (colsCtrls) { + this.setState({ + columns: this.getCurColumns(allColumns, allSearch), + reseting: true, + edData: data, + visible: false, + midData: null + }, () => { + this.setState({ + reseting: false + }) + }) + + return + } if (setting.editType === 'multi' && data.length > 0) { this.setState({edData: []}, () => { @@ -1353,7 +1650,21 @@ return item }) - this.setState({columns: [], edData: []}, () => { + let _cols = this.state.allColumns + if (_cols) { + _cols = _cols.map(item => { + if (reCols[item.dataIndex]) { + item.onCell = record => ({ + record, + col: reCols[item.dataIndex] + }) + } + + return item + }) + } + + this.setState({columns: [], edData: [], allColumns: _cols}, () => { this.setState({columns: _edColumns, edData: edData}) }) } @@ -1478,6 +1789,8 @@ this.setState({edData: _data}, () => { if (setting.commit === 'simple') { this.submit() + } else if (setting.commit === 'blur') { + this.submit(record) } }) } @@ -1489,7 +1802,9 @@ if (id !== tableId) return - if (!record.$sign) { + if (setting.commit === 'blur') { + + } else if (!record.$sign) { record.$origin = false record.$lock = true delete record.$forbid @@ -1520,7 +1835,11 @@ if (setting.tableType && setting.hasAction && this.state.selectedRowKeys.includes(record.$$uuid)) { this.selectdata(this.state.selectedRowKeys) } + if (setting.commit === 'blur') { + this.submit(record) + } }) + } addRecord = (id, record) => { @@ -1625,6 +1944,8 @@ let val = item[col.field] !== undefined ? (item[col.field] + '') : '' if (col.required === 'true' && !val) { line.push(`${col.label}涓嶅彲涓虹┖`) + } else if (col.datatype === 'datetime' && !val) { + val = '1949-10-01' } item[col.field] = val } else if (col.type === 'number') { @@ -1676,7 +1997,71 @@ return data } - submit = () => { + checkLineData = (item) => { + const { forms } = this.state + + let record = fromJS(item).toJS() + let err = '' + forms.forEach(col => { + if (col.editable !== 'true' || record.$deleted) { + if (col.type === 'number') { + record[col.field] = +record[col.field] + if (isNaN(record[col.field])) { + record[col.field] = 0 + } + } else { + record[col.field] = record[col.field] !== undefined ? (record[col.field] + '') : '' + } + return + } + if (col.type === 'text') { + let val = record[col.field] !== undefined ? (record[col.field] + '') : '' + if (col.required === 'true' && !val) { + err = `${col.label}涓嶅彲涓虹┖` + } else if (col.datatype === 'datetime' && !val) { + val = '1949-10-01' + } + record[col.field] = val + } else if (col.type === 'number') { + let val = record[col.field] + if (col.noValue === 'hide' && !val) { + val = 0 + } else if (!val && val !== 0) { + err = `${col.label}涓嶅彲涓虹┖` + return + } + val = +val + if (isNaN(val)) { + err = `${col.label}鏁版嵁鏍煎紡閿欒` + return + } + + val = +val.toFixed(col.decimal || 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}` + } + + record[col.field] = val + } + }) + + if (err) { + notification.warning({ + top: 92, + message: err, + duration: 5 + }) + + return null + } + + return [record] + } + + submit = (record) => { const { submit, BID, setting } = this.props const { forms } = this.state @@ -1692,7 +2077,14 @@ return } - let data = this.checkData() + if (setting.commit === 'blur' && !record) return + + let data = null + if (setting.commit === 'blur') { + data = this.checkLineData(record) + } else { + data = this.checkData() + } if (!data) return @@ -1934,7 +2326,9 @@ render() { const { setting, lineMarks, submit } = this.props - const { tableId, edData, columns, loading, pageOptions, selectedRowKeys, visible, midData } = this.state + const { tableId, edData, columns, loading, pageOptions, selectedRowKeys, visible, midData, reseting } = this.state + + if (reseting) return null const components = { body: { -- Gitblit v1.8.0