| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Table, Typography, Icon, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd' |
| | | 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 } from '@/utils/utils.js' |
| | | 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 Encrypts from '@/components/encrypts' |
| | | import '@/assets/css/table.scss' |
| | | import './index.scss' |
| | | |
| | |
| | | err: null |
| | | } |
| | | |
| | | getMark = (record, marks, style, content) => { |
| | | marks.some(mark => { |
| | | let originVal = record[mark.field[0]] + '' |
| | | let contrastVal = '' |
| | | let result = false |
| | | |
| | | if (mark.field[1] === 'static') { |
| | | contrastVal = mark.contrastValue + '' |
| | | } else { |
| | | contrastVal = record[mark.field[2]] + '' |
| | | } |
| | | |
| | | if (mark.match === '=') { |
| | | result = originVal === contrastVal |
| | | } else if (mark.match === '!=') { |
| | | result = originVal !== contrastVal |
| | | } else if (mark.match === 'like') { |
| | | result = originVal.indexOf(contrastVal) > -1 |
| | | } else if (mark.match === '>') { |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | | if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { |
| | | result = true |
| | | } |
| | | } else if (mark.match === '<') { |
| | | try { |
| | | originVal = parseFloat(originVal) |
| | | contrastVal = parseFloat(contrastVal) |
| | | } catch (e) { |
| | | originVal = NaN |
| | | } |
| | | |
| | | if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { |
| | | result = true |
| | | } |
| | | } |
| | | |
| | | if (result) { |
| | | if (mark.signType[0] === 'font') { |
| | | style.color = mark.color |
| | | } else if (mark.signType[0] === 'background') { |
| | | style.background = mark.color |
| | | if (mark.fontColor) { |
| | | style.color = mark.fontColor |
| | | } |
| | | } else if (mark.signType[0] === 'underline') { |
| | | style.textDecoration = 'underline' |
| | | style.color = mark.color |
| | | } else if (mark.signType[0] === 'line-through') { |
| | | style.textDecoration = 'line-through' |
| | | style.color = mark.color |
| | | } else if (mark.signType[0] === 'icon') { |
| | | let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />) |
| | | if (mark.signType[1] === 'front') { |
| | | content = <span>{icon} {content}</span> |
| | | } else { |
| | | content = <span>{content} {icon}</span> |
| | | } |
| | | } |
| | | } |
| | | return result |
| | | }) |
| | | |
| | | return content |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props.record), fromJS(nextProps.record)) || |
| | | nextState.editing !== this.state.editing || |
| | |
| | | tdFocus = (id) => { |
| | | const { col, record } = this.props |
| | | |
| | | if (id !== col.uuid + record.$Index) return |
| | | if (id !== col.uuid + record.$$uuid) return |
| | | this.focus() |
| | | } |
| | | |
| | |
| | | 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) |
| | | |
| | |
| | | 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 = () => { |
| | |
| | | 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') { |
| | |
| | | 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)}` |
| | | } else if (col.textFormat === 'encryption') { |
| | | content = <span>{col.prefix || ''}<Encrypts value={content} />{col.postfix || ''}</span> |
| | | } |
| | | |
| | | content = (col.prefix || '') + content + (col.postfix || '') |
| | | if (col.textFormat !== 'encryption') { |
| | | content = (col.prefix || '') + content + (col.postfix || '') |
| | | } |
| | | } |
| | | |
| | | if (col.marks) { |
| | | style = style || {} |
| | | content = this.getMark(record, col.marks, style, content) |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | style = mark.style |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | | content = <span><MkIcon style={mark.innerStyle} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> |
| | | } |
| | | } else if (mark.innerStyle) { |
| | | content = <span style={mark.innerStyle}>{content}</span> |
| | | } |
| | | } |
| | | |
| | | 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}><Icon type="exclamation-circle" /></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 |
| | |
| | | } |
| | | |
| | | if (content !== '') { |
| | | let decimal = col.decimal || 0 |
| | | if (col.round) { |
| | | content = Math.round(content * col.round) / col.round |
| | | } |
| | | 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.round) { |
| | | content = content.toFixed(col.decimal) |
| | | } |
| | | |
| | | if (col.format === 'thdSeparator') { |
| | | content = content.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') |
| | | } |
| | | |
| | | content = col.prefix + content + col.postfix |
| | | content = (col.prefix || '') + content + (col.postfix || '') |
| | | } |
| | | |
| | | if (col.marks) { |
| | | style = style || {} |
| | | content = this.getMark(record, col.marks, style, content) |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | style = mark.style |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | | content = <span><MkIcon style={mark.innerStyle} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> |
| | | } |
| | | } else if (mark.innerStyle) { |
| | | content = <span style={mark.innerStyle}>{content}</span> |
| | | } |
| | | } |
| | | |
| | | 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}/> |
| | | {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null} |
| | | <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 |
| | |
| | | } |
| | | |
| | | if (content) { |
| | | content = col.prefix + content + col.postfix |
| | | content = (col.prefix || '') + content + (col.postfix || '') |
| | | } |
| | | |
| | | children = ( |
| | |
| | | } |
| | | |
| | | if (col.marks) { |
| | | style = style || {} |
| | | content = this.getMark(record, col.marks, style, content) |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | style = mark.style |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | | content = <span><MkIcon style={mark.innerStyle} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> |
| | | } |
| | | } else if (mark.innerStyle) { |
| | | content = <span style={mark.innerStyle}>{content}</span> |
| | | } |
| | | } |
| | | |
| | | children = content |
| | |
| | | ) |
| | | } |
| | | |
| | | 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)}` |
| | | } else if (col.textFormat === 'encryption') { |
| | | content = <span>{col.prefix || ''}<Encrypts value={content} />{col.postfix || ''}</span> |
| | | } |
| | | |
| | | if (col.textFormat !== 'encryption') { |
| | | 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={mark.innerStyle} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> |
| | | } |
| | | } else if (mark.innerStyle) { |
| | | content = <span style={mark.innerStyle}>{content}</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 !== '') { |
| | | if (col.round) { |
| | | content = Math.round(content * col.round) / col.round |
| | | } |
| | | if (col.format === 'percent') { |
| | | content = content * 100 |
| | | } else if (col.format === 'abs') { |
| | | content = Math.abs(content) |
| | | } |
| | | if (col.round) { |
| | | content = content.toFixed(col.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={mark.innerStyle} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> |
| | | } |
| | | } else if (mark.innerStyle) { |
| | | content = <span style={mark.innerStyle}>{content}</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={mark.innerStyle} type={mark.icon} /> {content}</span> |
| | | } else { |
| | | content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> |
| | | } |
| | | } else if (mark.innerStyle) { |
| | | content = <span style={mark.innerStyle}>{content}</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>) |
| | | } |
| | | } |
| | | |
| | |
| | | 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 = { |
| | |
| | | data: [], |
| | | edData: [], |
| | | edColumns: [], |
| | | selectedRowKeys: [], // 表格中选中行 |
| | | tableId: '', // 表格ID |
| | | pageIndex: 1, // 初始页面索引 |
| | | pageSize: 10, // 每页数据条数 |
| | |
| | | pickup: false, // 收起未选择项 |
| | | orderfields: {}, // 排序id与field转换 |
| | | 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) { |
| | |
| | | _copy.sorter = false |
| | | |
| | | if (item.editable === 'true') { |
| | | _copy.title = <span>{item.label}<Icon className="system-color" style={{position: 'absolute', bottom: 0, right: 0}} type="edit" /></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', |
| | |
| | | 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 ele = document.createElement('style') |
| | | ele.innerHTML = style |
| | | document.getElementsByTagName('head')[0].appendChild(ele) |
| | | } |
| | | // if (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) |
| | | // } |
| | | |
| | | let size = (setting.pageSize || 10) + '' |
| | | let pageOptions = ['10', '25', '50', '100', '500', '1000'] |
| | |
| | | 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) |
| | | } |
| | | |
| | | const element = document.getElementById(setting.tableId) |
| | | element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8') |
| | | element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)') |
| | | element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px') |
| | | element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal') |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { fields, columns } = 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)'}) |
| | | }) |
| | | const { fields, setting } = this.props |
| | | |
| | | this.setState({ |
| | | fields: _fields, |
| | | 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) |
| | | } |
| | | |
| | |
| | | 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, 0) |
| | | |
| | | 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 => { |
| | | item[col.field] = item[col.field] !== undefined ? item[col.field] : '' |
| | | |
| | | if (col.initval !== '$copy') { |
| | | item[col.field] = col.initval |
| | | } |
| | |
| | | item[col.field] = 0 |
| | | } |
| | | } |
| | | if (item[col.field] === undefined) { |
| | | item[col.field] = '' |
| | | } |
| | | }) |
| | | |
| | | 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}) |
| | |
| | | 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 |
| | |
| | | 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 => { |
| | | item[col.field] = item[col.field] !== undefined ? item[col.field] : '' |
| | | |
| | | 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] = '' |
| | | } |
| | | }) |
| | | |
| | | this.setState({edData: [...edData, item]}) |
| | | _edData.splice(index, 0, 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 = () => { |
| | |
| | | return |
| | | } |
| | | let err = '' |
| | | let Index = 1 |
| | | let data = fromJS(edData).toJS().map(item => { |
| | | let line = [] |
| | | fields.forEach(col => { |
| | |
| | | }) |
| | | |
| | | if (line.length > 0) { |
| | | err += `第${item.$Index}行:` + line.join(',') + ';' |
| | | err += `第${Index}行:` + line.join(',') + ';' |
| | | } |
| | | if (!item.$deleted) { |
| | | Index++ |
| | | } |
| | | |
| | | return item |
| | |
| | | } |
| | | } |
| | | |
| | | 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) |
| | | |
| | |
| | | |
| | | 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) |
| | | } |
| | |
| | | |
| | | 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) |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | 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') { // 执行成功 |
| | |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | |
| | | if (type === 'simple') return |
| | | |
| | | if (submit.closetab === 'true') { |
| | | MKEmitter.emit('popclose') |
| | |
| | | } |
| | | |
| | | 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: [], |
| | |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * |
| | | */ |
| | | 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] || '' |
| | |
| | | |
| | | 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 |
| | |
| | | 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: '数据已修改,确定放弃保存吗?', |
| | |
| | | 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 |
| | | } |
| | | } |
| | | |
| | |
| | | _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 |
| | |
| | | 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}} icon="plus" type="link"></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> |
| | | </> |
| | | ) |
| | | } |
| | | } |