From 5046d0d13dc6a8563b8e54e31913bc44cfa1072f Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 26 四月 2022 19:23:18 +0800 Subject: [PATCH] 2022-04-26 --- src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 1273 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 1,094 insertions(+), 179 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 1464bfa..9d7eaf9 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx @@ -1,17 +1,19 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Table, Typography, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd' -import { ExclamationCircleOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons' +import { Table, Typography, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message, Select } from 'antd' +import { ExclamationCircleOutlined, EditOutlined, PlusOutlined, PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' +import options from '@/store/options.js' import asyncComponent from '@/utils/asyncComponent' import Utils, { getEditTableSql, getMark } from '@/utils/utils.js' import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' +import CusSwitch from './cusSwitch' import '@/assets/css/table.scss' import './index.scss' @@ -124,7 +126,7 @@ tdFocus = (id) => { const { col, record } = this.props - if (id !== col.uuid + record.$Index) return + if (id !== col.uuid + record.$$uuid) return this.focus() } @@ -135,9 +137,11 @@ this.setState({editing: false}) setTimeout(() => { if (col.enter === '$next') { - MKEmitter.emit('nextLine', col, record.$Index) - } else { - MKEmitter.emit('tdFocus', col.enter + record.$Index) + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + MKEmitter.emit('tdFocus', col.enter + record.$$uuid) } }, 50) @@ -149,27 +153,34 @@ focus = () => { const { col, record } = this.props - let err = null - let val = record[col.field] !== undefined ? record[col.field] : '' - - if (col.type === 'number') { - val = +val - if (isNaN(val)) { - val = 0 + if (col.editType === 'switch' || col.editType === 'select') { + this.setState({editing: true}, () => { + let node = document.getElementById(col.uuid + record.$$uuid) + node && node.click() + }) + } else { + 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 } - 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.$$uuid) + node && node.select() + }) } - - this.setState({editing: true, value: val, err}, () => { - let node = document.getElementById(col.uuid + record.$Index) - node && node.select() - }) } onBlur = () => { @@ -204,9 +215,79 @@ this.setState({value: val, err}) } + onSwitchChange = (val, label) => { + const { col, record } = this.props + + this.setState({editing: false}) + + setTimeout(() => { + if (col.enter === '$next') { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + MKEmitter.emit('tdFocus', col.enter + record.$$uuid) + } + }, 50) + + let values = {} + if (col.editField) { + values[col.field] = label + values[col.editField] = val + } else { + values[col.field] = val + } + + MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) + } + + onSelectChange = (val, option) => { + const { col, record } = this.props + + let values = {} + let _option = col.options.filter(m => m.key === option.key)[0] + + if (_option) { + if (col.linkSubField) { + col.linkSubField.forEach(m => { + values[m] = _option[m] !== undefined ? _option[m] : '' + }) + } + + if (col.editField) { + values[col.field] = _option.label + values[col.editField] = val + } else { + values[col.field] = val + } + } + + this.setState({editing: false}) + + setTimeout(() => { + if (col.enter === '$next') { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + MKEmitter.emit('tdFocus', col.enter + record.$$uuid) + } + }, 50) + + MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) + } + + switchBlur = () => { + setTimeout(() => { + this.setState({editing: false}) + }, 10) + } + render() { - let { col, config, record, style, className } = this.props + let { col, config, record, style, className, ...resProps } = this.props const { editing, value, err } = this.state + + if (!col) return (<td {...resProps} className={className} style={style}/>) let children = null if (col.type === 'text') { @@ -241,12 +322,49 @@ if (col.editable === 'true') { if (editing) { - return (<td className="editing_table_cell"> - <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}><ExclamationCircleOutlined /></Tooltip> : null} - </td>) + if (!col.editType || col.editType === 'text') { + return (<td className="editing_table_cell"> + <Input id={col.uuid + record.$$uuid} defaultValue={value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} + </td>) + } else if (col.editType === 'switch') { + let _value = '' + if (col.editField) { + _value = record[col.editField] !== undefined ? record[col.editField] : '' + } else { + _value = record[col.field] !== undefined ? record[col.field] : '' + } + return (<td className="editing_table_cell"> + <CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/> + </td>) + } else { + let _value = '' + if (col.editField) { + _value = record[col.editField] !== undefined ? record[col.editField] : '' + } else { + _value = record[col.field] !== undefined ? record[col.field] : '' + } + return (<td className="editing_table_cell"> + <Select + showSearch + defaultValue={_value} + dropdownClassName="edit-table-dropdown" + dropdownMatchSelectWidth={col.dropdown === 'fixed'} + id={col.uuid + record.$$uuid} + onBlur={() => this.setState({editing: false})} + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onSelect={this.onSelectChange} + > + {col.options.map((item, i) => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))} + </Select> + </td>) + } } else { - return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>) + return (<td className={className + ' pointer'} style={style}> + {col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null} + <div className="mk-mask" onClick={this.focus}></div>{content} + {col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null} + </td>) } } else { children = content @@ -297,11 +415,15 @@ if (col.editable === 'true') { if (editing) { return (<td className="editing_table_cell"> - <InputNumber id={col.uuid + record.$Index} defaultValue={value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> + <InputNumber id={col.uuid + record.$$uuid} defaultValue={value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} </td>) } else { - return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>) + return (<td className={className + ' pointer'} style={style}> + {col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null} + <div className="mk-mask" onClick={this.focus}></div>{content} + {col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null} + </td>) } } else { children = content @@ -384,7 +506,361 @@ ) } - return (<td className={className} style={style}>{children}</td>) + return (<td className={className} style={style}>{col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null}{children}{col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null}</td>) + // return (<td className={className} style={style}>{children}</td>) + } +} + +class BodyAllCell extends React.Component { + state = { + err: null + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.props.record), fromJS(nextProps.record)) || + nextState.err !== this.state.err + } + + componentDidMount () { + MKEmitter.addListener('tdFocus', this.tdFocus) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('tdFocus', this.tdFocus) + } + + tdFocus = (id) => { + const { col, record } = this.props + + if (id !== col.uuid + record.$$uuid) return + this.focus() + } + + enterPress = () => { + const { col, record } = this.props + + setTimeout(() => { + if (col.enter === '$next') { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + MKEmitter.emit('tdFocus', col.enter + record.$$uuid) + } + }, 50) + } + + focus = () => { + const { col, record } = this.props + + if (col.editType === 'switch' || col.editType === 'select') { + let node = document.getElementById(col.uuid + record.$$uuid) + node && node.click() + } else { + 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({err}, () => { + let node = document.getElementById(col.uuid + record.$$uuid) + node && node.select() + }) + } + } + + onChange = (val) => { + const { col, record } = 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({err}) + MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: val}) + } + + onSwitchChange = (val, label) => { + const { col, record } = this.props + + setTimeout(() => { + if (col.enter === '$next') { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + MKEmitter.emit('tdFocus', col.enter + record.$$uuid) + } + }, 50) + + let values = {} + if (col.editField) { + values[col.field] = label + values[col.editField] = val + } else { + values[col.field] = val + } + + MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) + } + + onSelectChange = (val, option) => { + const { col, record } = this.props + + let values = {} + let _option = col.options.filter(m => m.key === option.key)[0] + + if (_option) { + if (col.linkSubField) { + col.linkSubField.forEach(m => { + values[m] = _option[m] !== undefined ? _option[m] : '' + }) + } + + if (col.editField) { + values[col.field] = _option.label + values[col.editField] = val + } else { + values[col.field] = val + } + } + + setTimeout(() => { + if (col.enter === '$next') { + MKEmitter.emit('nextLine', col, record.$$uuid) + } else if (col.enter === '$sub') { + MKEmitter.emit('subLine', col, record) + } else if (col.enter !== '$noAct') { + MKEmitter.emit('tdFocus', col.enter + record.$$uuid) + } + }, 50) + + MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) + } + + render() { + let { col, config, record, style, className } = this.props + const { err } = this.state + + let children = null + if (col.type === 'text') { + if (col.editable === 'true') { + let _value = '' + if (col.editField) { + _value = record[col.editField] !== undefined ? record[col.editField] : '' + } else { + _value = record[col.field] !== undefined ? record[col.field] : '' + } + + if (!col.editType || col.editType === 'text') { + children = (<> + <Input id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} + </>) + } else if (col.editType === 'switch') { + children = ( + <CusSwitch config={col} autoFocus={false} defaultValue={_value} onChange={this.onSwitchChange} onBlur={() => {}}/> + ) + } else { + children = (<> + <Select + showSearch + dropdownClassName="edit-table-dropdown" + dropdownMatchSelectWidth={col.dropdown === 'fixed'} + defaultValue={_value} + id={col.uuid + record.$$uuid} + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onSelect={this.onSelectChange} + > + {col.options.map((item, i) => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))} + </Select> + </>) + } + } else { + let content = '' + if (record[col.field] !== undefined) { + content = `${record[col.field]}` + } + + if (content !== '') { + if (col.textFormat === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(content)) { + content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)}` + } else if (col.textFormat === 'YYYY-MM-DD HH:mm:ss' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1]).([0-1][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]/.test(content)) { + content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)} ${content.substr(11, 2)}:${content.substr(14, 2)}:${content.substr(17, 2)}` + } + + content = (col.prefix || '') + content + (col.postfix || '') + } + + if (col.marks) { + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } + } + children = content + } + } else if (col.type === 'number') { + if (col.editable === 'true') { + let _value = record[col.field] !== undefined ? record[col.field] : '' + children = (<> + <InputNumber id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress}/> + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} + </>) + } else { + let content = '' + try { + content = parseFloat(record[col.field]) + if (isNaN(content)) { + content = '' + } + } catch (e) { + content = '' + } + + if (content !== '') { + let decimal = col.decimal || 0 + if (col.format === 'percent') { + content = content * 100 + decimal = decimal > 2 ? decimal - 2 : 0 + } else if (col.format === 'abs') { + content = Math.abs(content) + } + + content = content.toFixed(decimal) + + if (col.format === 'thdSeparator') { + content = content.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') + } + + content = col.prefix + content + col.postfix + } + + if (col.marks) { + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } + } + children = content + } + } else if (col.type === 'textarea') { + let content = '' + if (record[col.field] !== undefined) { + content = `${record[col.field]}` + } + + if (content) { + content = col.prefix + content + col.postfix + } + + children = ( + <div> + {content ? <Paragraph copyable ellipsis={{ rows: 3, expandable: true }}>{content}</Paragraph> : null } + </div> + ) + } else if (col.type === 'formula') { + let content = col.formula + Object.keys(record).forEach(key => { + let reg = new RegExp('@' + key + '@', 'ig') + content = content.replace(reg, record[key]) + }) + + if (col.eval !== 'false') { + try { + // eslint-disable-next-line + content = eval(content) + } catch (e) { + content = '' + } + } + + content = content === undefined ? '' : content + + if (content !== '') { + content = `${col.prefix || ''}${content}${col.postfix || ''}` + + if (col.eval === 'false') { + content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, ' ') + content = <span dangerouslySetInnerHTML={{__html: content}}></span> + } + } + + if (col.marks) { + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } + } + + children = content + } else if (col.type === 'custom') { + style.padding = '0px' + if (col.style) { + style = {...style, ...col.style} + } + + children = ( + <CardCellComponent data={record} cards={config} elements={col.elements}/> + ) + } else if (col.type === 'operation') { + style.padding = '0px 5px' + children = ( + <Button type="link" style={{color: 'rgb(255, 77, 79)', backgroundColor: 'transparent'}} onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})}>鍒犻櫎</Button> + ) + } + + return (<td className={'editing_all_table_cell ' + className} style={style}>{col.addable ? <PlusCircleOutlined onClick={() => MKEmitter.emit('addRecord', col.tableId, {...record})} className="mk-editable mk-plus"/> : null}{children}{col.delable ? <DeleteOutlined onClick={() => MKEmitter.emit('delRecord', col.tableId, {...record})} className="mk-editable mk-del"/> : null}</td>) } } @@ -397,10 +873,11 @@ lineMarks: PropTypes.any, // 琛屾爣璁� fields: PropTypes.array, // 缁勪欢瀛楁闆� BID: PropTypes.any, // 涓昏〃ID - data: PropTypes.any, // 琛ㄦ牸鏁版嵁 total: PropTypes.any, // 鎬绘暟 loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓� refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂� + changeLock: PropTypes.func, + chgSelectData: PropTypes.func, } state = { @@ -408,6 +885,7 @@ data: [], edData: [], edColumns: [], + selectedRowKeys: [], // 琛ㄦ牸涓�変腑琛� tableId: '', // 琛ㄦ牸ID pageIndex: 1, // 鍒濆椤甸潰绱㈠紩 pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 @@ -416,40 +894,30 @@ pickup: false, // 鏀惰捣鏈�夋嫨椤� orderfields: {}, // 鎺掑簭id涓巉ield杞崲 loading: false, - editable: 'false', + editable: false, pageOptions: [] } UNSAFE_componentWillMount () { - const { setting, fields, columns, data } = this.props + const { setting, fields, columns } = this.props let orderfields = {} let initEditLine = null let edColumns = [] - let tableId = (() => { - let uuid = [] - let _options = 'abcdefghigklmnopqrstuv' - for (let i = 0; i < 19; i++) { - uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) - } - return uuid.join('') - }) () let _columns = [] + let deForms = [] columns.forEach(item => { - if (item.Hide === 'true') return - if (item.type === 'index') { - item.field = '$Index' - item.type = 'text' - } - - item.tableId = tableId - if (!initEditLine && item.editable === 'true') { initEditLine = item } - if (item.marks && item.marks.length === 0) { - item.marks = '' + if (item.type === 'text' && item.editable === 'true' && item.editType === 'select' && item.resourceType === '1') { + let _option = Utils.getSelectQueryOptions(item) + + item.base_sql = window.btoa(window.encodeURIComponent(_option.sql)) + item.arr_field = _option.field + + deForms.push(item) } if (item.field) { @@ -474,14 +942,14 @@ _copy.sorter = false if (item.editable === 'true') { - _copy.title = <span>{item.label}<EditOutlined className="system-color" style={{position: 'absolute', bottom: '2px', right: '5px'}}/></span> + _copy.title = <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> } edColumns.push(_copy) } _columns.push(_item) }) - if (setting.delable !== 'false') { + if (setting.delable !== 'false' && setting.operType !== 'buoyMode') { edColumns.push({ align: 'center', dataIndex: 'mkoperation', @@ -490,13 +958,13 @@ width: 100, onCell: record => ({ record, - col: {type: 'operation', tableId: tableId}, + col: {type: 'operation', tableId: setting.tableId}, }) }) } if (setting.borderColor) { // 杈规棰滆壊 - let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${setting.borderColor}}` + let style = `#${setting.tableId} table, #${setting.tableId} tr, #${setting.tableId} th, #${setting.tableId} td {border-color: ${setting.borderColor}}` let ele = document.createElement('style') ele.innerHTML = style document.getElementsByTagName('head')[0].appendChild(ele) @@ -513,13 +981,16 @@ this.setState({ pageSize: setting.pageSize || 10, pageOptions, - data, columns: _columns, edColumns, - tableId, + tableId: setting.tableId, orderfields, initEditLine, - editable: setting.editable + editable: setting.editable === 'true' + }, () => { + if (deForms.length > 0) { + this.improveActionForm(deForms) + } }) } @@ -529,34 +1000,17 @@ componentDidMount () { const { fields, setting } = this.props - const { data, editable } = this.state - - // let _fields = [] // 瀹氫箟鍏ㄩ儴瀛楁锛屼笉鍦ㄤ粠鍙紪杈戝垪涓�夊彇 - - // let fieldType = {} - // fields.forEach(item => { - // fieldType[item.field] = item.datatype - // }) - - // columns.forEach(col => { - // if (!col.field || col.type === 'index') return - - // _fields.push({...col, datatype: fieldType[col.field] || 'Nvarchar(50)'}) - // }) this.setState({ fields: fields.filter(item => item.field !== setting.primaryKey), }) - if (editable === 'true' && data && data.length > 0) { - setTimeout(() => { - this.pickupChange() - }, 200) - } - + MKEmitter.addListener('subLine', this.subLine) MKEmitter.addListener('nextLine', this.nextLine) + MKEmitter.addListener('addRecord', this.addLine) MKEmitter.addListener('delRecord', this.delRecord) MKEmitter.addListener('resetTable', this.resetTable) + MKEmitter.addListener('transferData', this.transferData) MKEmitter.addListener('changeRecord', this.changeRecord) } @@ -567,52 +1021,310 @@ this.setState = () => { return } + MKEmitter.removeListener('subLine', this.subLine) MKEmitter.removeListener('nextLine', this.nextLine) + MKEmitter.removeListener('addRecord', this.addLine) MKEmitter.removeListener('delRecord', this.delRecord) MKEmitter.removeListener('resetTable', this.resetTable) + MKEmitter.removeListener('transferData', this.transferData) MKEmitter.removeListener('changeRecord', this.changeRecord) } - UNSAFE_componentWillReceiveProps(nextProps) { - if (!is(fromJS(this.props.data), fromJS(nextProps.data))) { - this.setState({data: nextProps.data || []}) - if (this.state.editable === 'true') { + transferData = (menuid, data, type) => { + if (menuid !== this.props.MenuID) return + + if (type !== 'line') { + this.setState({data: data || []}) + + if (this.state.editable && !this.state.pickup) { setTimeout(() => { this.pickupChange() }, 200) } + } else if (type === 'line' && data.$$uuid) { + let _data = this.state.data.map(item => { + if (item.$$uuid === data.$$uuid) { + return data + } else { + return item + } + }) + let _edData = this.state.edData.map(item => { + if (item.$$uuid === data.$$uuid) { + return data + } else { + return item + } + }) + + this.setState({edData: _edData, data: _data}) + } + this.setState({editable: false}) + } + + improveActionForm = (deForms) => { + const { BID, setting } = this.props + + let deffers = [] + let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹� + let localItems = [] // 鏈湴鏁版嵁 + let cache = setting.cache !== 'false' + + deForms.forEach(item => { + if (item.database === 'sso') { + mainItems.push(`select '${item.uuid}' as obj_name,'${item.arr_field}' as arr_field,'${item.base_sql}' as LText`) + } else { + localItems.push(`select '${item.uuid}' as obj_name,'${item.arr_field}' as arr_field,'${item.base_sql}' as LText`) + } + }) + + if (options.sysType !== 'local') { + localItems = [...localItems, ...mainItems] + mainItems = [] + } + + // 鏈湴璇锋眰 + let param = { + func: 'sPC_Get_SelectedList', + LText: localItems.join(' union all '), + obj_name: '', + arr_field: '', + table_type: 'Y', + BID: BID || '' + } + + if (param.LText) { + param.LText = Utils.formatOptions(param.LText) + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.secretkey = Utils.encrypt(param.LText, param.timestamp) + + deffers.push( + new Promise(resolve => { + Api.getSystemCacheConfig(param, cache).then(res => { + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } + resolve(res) + }) + }) + ) + } + + // 绯荤粺璇锋眰 + let mainparam = { + func: 'sPC_Get_SelectedList', + LText: mainItems.join(' union all '), + obj_name: '', + arr_field: '', + table_type: 'Y', + BID: BID || '' + } + + if (mainparam.LText) { + mainparam.LText = Utils.formatOptions(mainparam.LText) + mainparam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + mainparam.secretkey = Utils.encrypt(mainparam.LText, mainparam.timestamp) + + if (window.GLOB.mainSystemApi) { + mainparam.rduri = window.GLOB.mainSystemApi + } + + deffers.push( + new Promise(resolve => { + Api.getSystemCacheConfig(mainparam, cache).then(res => { + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } + resolve(res) + }) + }) + ) + } + + Promise.all(deffers).then(response => { + let result = {...response[0], ...(response[1] || {})} + + delete result.ErrCode + delete result.ErrMesg + delete result.message + delete result.status + + this.resetFormList(result) + }) + } + + resetFormList = (result) => { + const { columns } = this.props + const { edColumns } = this.state + + let _edColumns = [] + + let reCols = {} + columns.forEach(item => { + if (item.resourceType === '1' && result[item.uuid] && result[item.uuid].length > 0) { + let options = [] + let _map = new Map() + result[item.uuid].forEach(cell => { + let _cell = {key: Utils.getuuid()} + + _cell.value = cell[item.valueField] + _cell.label = cell[item.valueText] + + if (!_cell.label && _cell.label !== 0) return + + if (_map.has(_cell.value)) return + _map.set(_cell.value, true) + + if (item.linkSubField) { + item.linkSubField.forEach(m => { + _cell[m] = cell[m] === undefined ? '' : cell[m] + }) + } + + if (item.disableField && cell[item.disableField] && /^true$/ig.test(cell[item.disableField])) { + _cell.$disabled = true + } + + options.push(_cell) + }) + + item.options = options + + reCols[item.uuid] = item + } + }) + + _edColumns = edColumns.map(item => { + if (reCols[item.dataIndex]) { + item.onCell = record => ({ + record, + col: reCols[item.dataIndex] + }) + } + + return item + }) + + if (this.state.pickup) { + this.setState({ + pickup: false + }, () => { + this.setState({pickup: true, edColumns: _edColumns}) + }) + } else { + this.setState({edColumns: _edColumns}) } } - nextLine = (col, index) => { + nextLine = (col, uuid) => { const { setting } = this.props const { edData, initEditLine, tableId } = this.state if (col.tableId !== tableId) return - index = +index + let index = edData.findIndex(item => item.$$uuid === uuid) + let next = edData[index + 1] || null - if (index < edData.length && initEditLine) { - MKEmitter.emit('tdFocus', initEditLine.uuid + (index + 1)) - } else if (col.footEnter === 'add' && setting.addable === 'true') { + if (next && initEditLine) { + MKEmitter.emit('tdFocus', initEditLine.uuid + next.$$uuid) + } else if (setting.addable === 'true') { setTimeout(() => { - this.plusLine(initEditLine) + this.plusLine() }, 10) - } else if (col.footEnter === 'sub') { + } else if (edData[index]) { setTimeout(() => { - this.checkData() + this.subLine(col, edData[index]) }, 10) } } - plusLine = (initEditLine) => { - const { edData, fields } = this.state + subLine = (col, record) => { + const { tableId, fields, edData } = this.state + + if (col && col.tableId !== tableId) return + + if (edData.filter(item => !item.$origin).length > 1) { + setTimeout(() => { + this.submit(edData) + }, 10) + return + } + + setTimeout(() => { + let item = fromJS(record).toJS() + let line = [] + fields.forEach(col => { + if (col.editable !== 'true' || item.$deleted) { + if (col.type === 'number') { + item[col.field] = +item[col.field] + if (isNaN(item[col.field])) { + item[col.field] = 0 + } + } else { + item[col.field] = item[col.field] !== undefined ? (item[col.field] + '') : '' + } + return + } + if (col.type === 'text') { + let val = item[col.field] !== undefined ? (item[col.field] + '') : '' + if (col.required === 'true' && !val) { + line.push(`${col.label}涓嶅彲涓虹┖`) + } + item[col.field] = val + } else if (col.type === 'number') { + let val = item[col.field] + if (!val && val !== 0) { + line.push(`${col.label}涓嶅彲涓虹┖`) + return + } + val = +val + if (isNaN(val)) { + line.push(`${col.label}鏁版嵁鏍煎紡閿欒`) + return + } + + val = +val.toFixed(col.decimal || 0) + + if (typeof(col.max) === 'number' && val > col.max) { + line.push(`${col.label}涓嶅彲澶т簬${col.max}`) + } else if (typeof(col.min) === 'number' && val < col.min) { + line.push(`${col.label}涓嶅彲灏忎簬${col.min}`) + } + + item[col.field] = val + } + }) + + let err = line.join('锛�') + + if (err) { + notification.warning({ + top: 92, + message: err, + duration: 5 + }) + } else { + this.submit([item], 'simple') + } + }, 10) + } + + plusLine = () => { + const { edData, fields, initEditLine } = this.state let item = {...edData[edData.length - 1]} - item.key = item.key + 1 - item.$$uuid = '$new' - item.$Index = item.key + 1 + '' + item.$$uuid = Utils.getguid() + item.$type = 'add' + item.$Index = '' fields.forEach(col => { if (col.initval !== '$copy') { @@ -630,33 +1342,35 @@ }) this.setState({edData: [...edData, item]}, () => { - MKEmitter.emit('tdFocus', initEditLine.uuid + item.$Index) + MKEmitter.emit('tdFocus', initEditLine.uuid + item.$$uuid) }) } delRecord = (id, record) => { + const { setting } = this.props const { tableId, edData } = this.state if (id !== tableId) return let _data = [] - if (record.$$uuid === '$new') { - _data = edData.filter(item => item.$Index !== record.$Index) - _data = _data.map((item, index) => { - item.key = index - item.$Index = 1 + index + '' - return item - }) + if (record.$type === 'add') { + _data = edData.filter(item => item.$$uuid !== record.$$uuid) } else { _data = edData.map(item => { - if (item.$Index === record.$Index) { + if (item.$$uuid === record.$$uuid) { record.$deleted = true + record.$origin = false + record.$type = 'del' return record } else { return item } }) + + if (setting.commit === 'simple' && record.$deleted) { + this.subLine(null, record) + } } this.setState({edData: _data}) @@ -668,7 +1382,8 @@ if (id !== tableId) return let _data = this.state.edData.map(item => { - if (item.$Index === record.$Index) { + if (item.$$uuid === record.$$uuid) { + record.$origin = false return record } else { return item @@ -678,40 +1393,73 @@ this.setState({edData: _data}) } - addLine = () => { + addLine = (id, record) => { const { BID } = this.props - const { edData, fields } = this.state + const { edData, fields, tableId } = this.state - let item = {} - if (edData.length > 0) { - item = {...edData[edData.length - 1]} - item.key = item.key + 1 - item.$$uuid = '$new' - item.$Index = item.key + 1 + '' - } else { - item.key = 0 - item.$$uuid = '$new' - item.$Index = item.key + 1 + '' + if (id) { + if (id !== tableId) return + let _edData = fromJS(edData).toJS() + let index = _edData.findIndex(item => record.$$uuid === item.$$uuid) + + let item = {} + + item.$$uuid = Utils.getguid() + item.$type = 'add' + item.$Index = '' item.$$BID = BID || '' - } - - fields.forEach(col => { - if (col.initval !== '$copy') { - item[col.field] = col.initval - } - if (col.type === 'number') { - item[col.field] = +item[col.field] - if (isNaN(item[col.field])) { - item[col.field] = 0 + + fields.forEach(col => { + if (col.initval !== '$copy') { + item[col.field] = col.initval } - } + if (col.type === 'number') { + item[col.field] = +item[col.field] + if (isNaN(item[col.field])) { + item[col.field] = 0 + } + } + + if (item[col.field] === undefined) { + item[col.field] = '' + } + }) - if (item[col.field] === undefined) { - item[col.field] = '' - } - }) + _edData.splice(index, 0, item) - this.setState({edData: [...edData, item]}) + this.setState({edData: _edData}) + } else { + let item = {} + if (edData.length > 0) { + item = {...edData[edData.length - 1]} + item.$$uuid = Utils.getguid() + item.$type = 'add' + item.$Index = '' + } else { + item.$$uuid = Utils.getguid() + item.$type = 'add' + item.$Index = '' + item.$$BID = BID || '' + } + + fields.forEach(col => { + if (col.initval !== '$copy') { + item[col.field] = col.initval + } + if (col.type === 'number') { + item[col.field] = +item[col.field] + if (isNaN(item[col.field])) { + item[col.field] = 0 + } + } + + if (item[col.field] === undefined) { + item[col.field] = '' + } + }) + + this.setState({edData: [...edData, item]}) + } } checkData = () => { @@ -726,6 +1474,7 @@ return } let err = '' + let Index = 1 let data = fromJS(edData).toJS().map(item => { let line = [] fields.forEach(col => { @@ -771,7 +1520,10 @@ }) if (line.length > 0) { - err += `绗�${item.$Index}琛岋細` + line.join('锛�') + '锛�' + err += `绗�${Index}琛岋細` + line.join('锛�') + '锛�' + } + if (!item.$deleted) { + Index++ } return item @@ -788,9 +1540,22 @@ } } - submit = (data) => { - const { submit, BID } = this.props + submit = (data, type) => { + const { submit, BID, setting } = this.props const { fields } = this.state + + if (type !== 'simple' && (setting.commit === 'change' || setting.commit === 'simple')) { + data = data.filter(item => !item.$origin) + } + + if (data.length === 0) { + notification.warning({ + top: 92, + message: '鏁版嵁鏈慨鏀癸紝涓嶅彲鎻愪氦锛�', + duration: 5 + }) + return + } let result = getEditTableSql(submit, data, fields) @@ -831,7 +1596,12 @@ Api.genericInterface(param).then((res) => { if (res.status) { - this.execSuccess(res) + if (type === 'simple') { + this.updataLine(data[0]) + this.execSuccess(res, type) + } else { + this.execSuccess(res) + } } else { this.execError(res) } @@ -843,7 +1613,12 @@ Api.genericInterface(param).then((res) => { if (res.status) { - this.execSuccess(res) + if (type === 'simple') { + this.updataLine(data[0]) + this.execSuccess(res, type) + } else { + this.execSuccess(res) + } } else { this.execError(res) } @@ -853,7 +1628,26 @@ } } - execSuccess = (res) => { + updataLine = (item) => { + if (item.$type === 'del') { + let _data = this.state.edData.filter(m => m.$$uuid !== item.$$uuid) + + this.setState({edData: _data}) + } else { + let _data = this.state.edData.map(m => { + if (m.$$uuid === item.$$uuid) { + item.$origin = true + return item + } + return m + }) + + this.setState({edData: _data}) + } + MKEmitter.emit('reloadData', this.props.MenuID, item.$$uuid, item) + } + + execSuccess = (res, type) => { const { submit } = this.props if (res && res.ErrCode === 'S') { // 鎵ц鎴愬姛 @@ -873,6 +1667,8 @@ this.setState({ loading: false }) + + if (type === 'simple') return if (submit.closetab === 'true') { MKEmitter.emit('popclose') @@ -918,8 +1714,14 @@ } repick = () => { + const { setting } = this.props const { data } = this.state + if (setting.submittal === 'true') { + this.setState({editable: true}) + } + + this.props.changeLock(false) this.setState({ data: [], edData: [], @@ -931,12 +1733,82 @@ }) } + /** + * + */ + onSelectChange = selectedRowKeys => { + this.setState({ selectedRowKeys }) + + let activeId = '' + if (selectedRowKeys.length > 0) { + activeId = selectedRowKeys.slice(-1)[0] + } + this.changedata(activeId) + this.selectdata(selectedRowKeys) + } + + /** + * @description 鐐瑰嚮鏁磋锛岃Е鍙戝垏鎹紝 鍒ゆ柇鏄惁鍙�夛紝鍗曢�夋垨澶氶�夛紝杩涜瀵瑰簲鎿嶄綔 + */ + changeRow = (index) => { + const { setting } = this.props + + if (!setting.tableType || this.state.pickup) return + + let newkeys = fromJS(this.state.selectedRowKeys).toJS() + + let activeId = '' + if (setting.tableType === 'radio') { + activeId = index + newkeys = [index] + this.setState({ selectedRowKeys: newkeys }) + } else { + if (newkeys.includes(index)) { + newkeys = newkeys.filter(item => item !== index) + + if (newkeys.length > 0) { + activeId = newkeys.slice(-1)[0] + } + } else { + activeId = index + newkeys.push(index) + } + + this.setState({ selectedRowKeys: newkeys }) + } + + this.changedata(activeId) + this.selectdata(newkeys) + } + + changedata = (id) => { + const { MenuID } = this.props + const { data } = this.state + + let _data = '' + + if (id) { + _data = data.filter(item => item.$$uuid === id)[0] || '' + } + + MKEmitter.emit('resetSelectLine', MenuID, id, _data) + } + + selectdata = (keys) => { + const { data } = this.state + + let _data = data.filter(item => keys.includes(item.$$uuid)) + + this.props.chgSelectData(_data) + } + changeTable = (pagination, filters, sorter) => { const { orderfields } = this.state this.setState({ pageIndex: pagination.current, - pageSize: pagination.pageSize + pageSize: pagination.pageSize, + selectedRowKeys: [], }) sorter.field = orderfields[sorter.field] || '' @@ -949,15 +1821,20 @@ if (id !== MenuID) return - if (repage !== 'false') { + if (repage === 'false') { this.setState({ - pageIndex: 1 + selectedRowKeys: [], + }) + } else { + this.setState({ + pageIndex: 1, + selectedRowKeys: [], }) } } pickupChange = () => { - const { submit } = this.props + const { submit, MenuID, setting } = this.props const { data } = this.state let pickup = !this.state.pickup @@ -971,7 +1848,7 @@ return } - if (!pickup && !is(fromJS(data), fromJS(this.state.edData))) { + if (!pickup && this.state.edData.filter(item => !item.$origin).length > 0) { const _this = this confirm({ title: '鏁版嵁宸蹭慨鏀癸紝纭畾鏀惧純淇濆瓨鍚楋紵', @@ -990,29 +1867,46 @@ onCancel() {} }) } else { + pickup && MKEmitter.emit('resetSelectLine', MenuID, '', '') + pickup && this.props.chgSelectData([]) + let keys = this.state.selectedRowKeys this.setState({ data: [], edData: [], + selectedRowKeys: [], pickup, loading: false, - editable: 'false' + editable: false }, () => { - this.setState({ - data: data, - edData: pickup ? fromJS(data).toJS() : [] - }) + if (pickup && setting.tableType === 'checkbox' && keys.length > 0) { + this.setState({ + data: data, + edData: fromJS(data).toJS().filter(item => { + item.$origin = false + + return keys.includes(item.$$uuid) + }) + }) + } else { + this.setState({ + data: data, + edData: pickup ? fromJS(data).toJS() : [] + }) + } }) + } + this.props.changeLock(pickup) } render() { const { setting, statFValue, lineMarks, submit } = this.props - const { pickup, tableId, data, edData, columns, edColumns, loading, pageOptions } = this.state + const { pickup, tableId, data, edData, columns, edColumns, loading, pageOptions, selectedRowKeys } = this.state const components = { body: { row: BodyRow, - cell: BodyCell + cell: setting.editType !== 'multi' || !pickup ? BodyCell : BodyAllCell } } @@ -1024,6 +1918,16 @@ _data = edData _data = _data.filter(item => !item.$deleted) _columns = edColumns + } + + // 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙�� + let rowSelection = null + if (setting.tableType && !pickup) { + rowSelection = { + selectedRowKeys, + type: (setting.tableType === 'radio') ? 'radio' : 'checkbox', + onChange: this.onSelectChange + } } let _pagination = false @@ -1047,30 +1951,41 @@ let height = setting.height || false return ( - <div className={`edit-custom-table ${pickup ? 'editable' : ''} ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''}`} id={tableId}> - <Switch title="缂栬緫" className="main-pickup" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} /> - {pickup ? <Button style={submit.style} onClick={() => setTimeout(() => {this.checkData()}, 10)} loading={loading} className="submit-table" type="link">鎻愪氦</Button> : null} - <Table - components={components} - style={setting.style} - size={setting.size || 'middle'} - bordered={setting.bordered !== 'false'} - columns={_columns} - dataSource={_data} - loading={this.props.loading} - scroll={{ x: '100%', y: height }} - onRow={(record, index) => { - return { - lineMarks, - data: record - } - }} - onChange={this.changeTable} - pagination={_pagination} - /> - {_footer ? <div className={'normal-table-footer ' + (_pagination ? 'pagination' : '')}>{_footer}</div> : null} - {pickup && setting.addable === 'true' ? <Button onClick={this.addLine} style={{display: 'block', width: '100%', color: '#26C281', border: '1px solid #dddddd', borderRadius: 0}} type="link"><PlusOutlined /></Button> : null} - </div> + <> + {submit.hasAction && pickup ? <div className="edit-custom-table-leftbtn-wrap"> + <Button style={submit.style} onClick={() => setTimeout(() => {this.checkData()}, 10)} loading={loading} className="submit-table" type="link">鎻愪氦</Button> + </div> : null} + <div className="edit-custom-table-btn-wrap" style={submit.wrapStyle}> + {!submit.hasAction && pickup ? <Button style={submit.style} onClick={() => setTimeout(() => {this.checkData()}, 10)} loading={loading} className="submit-table" type="link">鎻愪氦</Button> : null} + <Switch title="缂栬緫" className="main-pickup" checkedChildren="寮�" unCheckedChildren="鍏�" disabled={loading || this.props.loading} checked={pickup} onChange={this.pickupChange} /> + </div> + <div className={`edit-custom-table ${pickup ? 'editable' : ''} ${setting.tableHeader || ''} ${setting.operType || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''}`} id={tableId}> + <Table + rowKey="$$uuid" + components={components} + style={setting.style} + size={setting.size || 'middle'} + bordered={setting.bordered !== 'false'} + rowSelection={rowSelection} + columns={_columns} + dataSource={_data} + loading={this.props.loading} + scroll={{ x: '100%', y: height }} + onRow={(record, index) => { + return { + lineMarks, + data: record, + onClick: () => {this.changeRow(record.$$uuid)}, + } + }} + onChange={this.changeTable} + pagination={_pagination} + /> + {_footer ? <div className={'normal-table-footer ' + (_pagination ? 'pagination' : '')}>{_footer}</div> : null} + {pickup && setting.addable === 'true' ? <Button className="mk-add-line" onClick={() => this.addLine()} disabled={this.props.loading} type="link"><PlusOutlined /></Button> : null} + {pickup && _data.length > 10 ? <Button style={submit.style} onClick={() => setTimeout(() => {this.checkData()}, 10)} loading={loading} className="submit-footer-table" type="link">鎻愪氦</Button> : null} + </div> + </> ) } } -- Gitblit v1.8.0