From a9b02f6862522b54d0824152017bf2acfec2af7b Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 21 三月 2024 10:29:50 +0800 Subject: [PATCH] 2024-03-21 --- src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 2646 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 1,660 insertions(+), 986 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 b2fdec6..a7571dd 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx @@ -1,25 +1,602 @@ 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, Select } from 'antd' -import { ExclamationCircleOutlined, EditOutlined, PlusOutlined, PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons' +import { Table, Typography, Modal, Input, InputNumber, Switch, Button, notification, message, Select, DatePicker } from 'antd' +import { EditOutlined, QuestionCircleOutlined } from '@ant-design/icons' import moment from 'moment' +import md5 from 'md5' import Api from '@/api' 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 Encrypts from '@/components/encrypts' -import '@/assets/css/table.scss' import './index.scss' const { Paragraph } = Typography -const { confirm } = Modal +const MkIcon = asyncComponent(() => import('@/components/mk-icon')) +const MKPopSelect = asyncComponent(() => import('./mkPopSelect')) const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList')) + +class MkSwitch extends Component { + static propTpyes = { + autoFocus: PropTypes.bool, + defaultValue: PropTypes.any, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + status: false + } + + node = null + + UNSAFE_componentWillMount () { + const { defaultValue, config } = this.props + + let status = false + + if (defaultValue === config.openVal) { + status = true + } + + this.setState({status}) + } + + changeStatus = (val) => { + const { config, lineId } = this.props + + this.setState({ status: val }) + + let values = {[config.field]: val ? config.openVal : config.closeVal} + + this.props.onChange(values, '') + + this.node.blur() + + if (/\$noAct/.test(config.enter)) return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + } + + onFocus = () => { + const { config, lineId } = this.props + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + onBlur = () => { + const { config, lineId } = this.props + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + this.props.onBlur && this.props.onBlur() + } + + render() { + const { config, autoFocus } = this.props + const { status } = this.state + + return ( + <Switch + ref={ref => this.node = ref} + checkedChildren={config.openText} + checked={status} + autoFocus={autoFocus} + onFocus={this.onFocus} + onBlur={this.onBlur} + unCheckedChildren={config.closeText} + onChange={this.changeStatus} + /> + ) + } +} + +class MkDatePicker extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + value: null, + open: false + } + + UNSAFE_componentWillMount () { + const { defaultValue } = this.props + + let _value = defaultValue || null + if (_value) { + _value = moment(_value, 'YYYY-MM-DD HH:mm:ss') + } + + this.setState({value: _value}) + } + + componentDidMount() { + const { config, autoFocus, lineId } = this.props + + if (autoFocus === true) { + this.setState({open: true}) + + if (config.$ctrl) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + } + + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + this.setState({open: true}) + + if (config.$ctrl) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + } + + onOpenChange = (open) => { + const { config, lineId } = this.props + + this.setState({open}) + + if (!open) { + this.props.onBlur && this.props.onBlur() + } + + if (!config.$ctrl) return + + if (open) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } else { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + } + + onChange = (val) => { + const { config, lineId } = this.props + + let _val = val ? moment(val).format(config.format) : '' + + if (config.precision === 'hour') { + _val = _val + ':00:00' + } else if (config.precision === 'minute') { + _val = _val + ':00' + } + + let values = {[config.field]: _val} + + this.props.onChange(values) + + if (/\$noAct/.test(config.enter)) return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + } + + render() { + const { config } = this.props + const { value, open } = this.state + + return ( + <DatePicker dropdownClassName={'mk-date-picker ' + config.precision} showTime={config.format !== 'YYYY-MM-DD'} format={config.format} open={open} defaultValue={value} onChange={this.onChange} onOpenChange={this.onOpenChange}/> + ) + } +} + +class MkSelect extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + lineId: PropTypes.string, + config: PropTypes.object, + onChange: PropTypes.func, + } + + state = { + value: '' + } + + node = null + + UNSAFE_componentWillMount() { + const { defaultValue } = this.props + + this.setState({value: defaultValue}) + } + + componentDidMount() { + const { config, autoFocus, lineId } = this.props + + if (autoFocus) { + let node = document.getElementById(config.uuid + lineId) + node && node.click() + } + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.defaultValue !== this.props.defaultValue) { + this.setState({value: nextProps.defaultValue}) + } + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + let node = document.getElementById(config.uuid + lineId) + node && node.click() + } + + onSelectChange = (val, option) => { + const { config, lineId } = this.props + + let values = {} + let _option = config.options.filter(m => m.key === option.key)[0] + + if (_option) { + if (config.linkSubField) { + config.linkSubField.forEach((m, i) => { + values[m] = _option[m] !== undefined ? _option[m] : '' + }) + } + + values[config.field] = val + } + + this.setState({value: val}) + + this.props.onChange(values, val) + + if (config.enter === '$noActX') return + + this.node.blur() + + if (/\$noAct/.test(config.enter)) return + + setTimeout(() => { + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + }, 100) + } + + onFocus = () => { + const { config, lineId } = this.props + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + onBlur = () => { + const { config, lineId } = this.props + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid, true) + } + + setTimeout(() => { + this.props.onBlur && this.props.onBlur() + }, 10) + } + + render() { + const { config, lineId } = this.props + const { value } = this.state + + return ( + <Select + showSearch + dropdownClassName="edit-table-dropdown" + dropdownMatchSelectWidth={config.dropdown === 'fixed'} + value={value} + id={config.uuid + lineId} + ref={ref => this.node = ref} + onFocus={this.onFocus} + onBlur={this.onBlur} + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onSelect={this.onSelectChange} + > + {config.options.map(item => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))} + </Select> + ) + } +} + +class MkInput extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + lineId: PropTypes.string, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + value: null, + err: null + } + + node = null + + UNSAFE_componentWillMount() { + const { defaultValue } = this.props + + this.setState({value: defaultValue}) + } + + componentDidMount() { + const { config, autoFocus } = this.props + + if (autoFocus) { + this.node.select() + } + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.defaultValue !== this.props.defaultValue) { + this.setState({value: nextProps.defaultValue}) + } + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + this.node.select() + } + + onChange = (val) => { + this.setState({value: val}) + } + + onFocus = () => { + const { config, lineId } = this.props + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + enterPress = () => { + const { config, lineId } = this.props + + this.node.blur() + + if (/\$noAct/.test(config.enter)) return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + } + + onBlur = () => { + const { config, lineId } = this.props + const { value } = this.state + + let err = null + + if (config.required === 'true' && !value) { + err = '璇峰~鍐�' + config.label + } + + this.setState({err}) + + this.props.onChange({[config.field]: value}) + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + this.props.onBlur && this.props.onBlur() + } + + render() { + const { value, err } = this.state + + return ( + <Input + title={err} + className={err ? 'has-error' : ''} + ref={ref => this.node = ref} + value={value} + onChange={(e) => this.onChange(e.target.value)} + onPressEnter={this.enterPress} + onFocus={this.onFocus} + onBlur={this.onBlur} + /> + ) + } +} + +class MkInputNumber extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + lineId: PropTypes.string, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + value: null, + err: null, + clear: false + } + + node = null + + UNSAFE_componentWillMount() { + const { defaultValue } = this.props + + this.setState({value: defaultValue}) + } + + componentDidMount() { + const { config, autoFocus } = this.props + + if (autoFocus) { + this.node.focus() + } + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.defaultValue !== this.props.defaultValue) { + this.setState({value: nextProps.defaultValue}) + } + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + this.node.focus() + } + + onChange = (val) => { + const { config } = this.props + + this.setState({value: val}) + + if (config.clearField && val && !this.state.clear) { + this.setState({clear: true}) + + this.props.onChange({[config.clearField]: ''}) + } + } + + onFocus = () => { + const { config, lineId } = this.props + + this.setState({clear: false}) + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + enterPress = () => { + const { config, lineId } = this.props + + this.node.blur() + + if (/\$noAct/.test(config.enter)) return + + setTimeout(() => { + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + }, 10) + } + + onBlur = () => { + const { config, lineId } = this.props + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + setTimeout(() => { + let err = null + let value = this.state.value + + if (config.noValue === 'hide' && !value) { + value = 0 + } else { + if (typeof(config.max) === 'number' && value > config.max) { + err = config.label + '鏈�澶т负' + config.max + } else if (typeof(config.min) === 'number' && value < config.min) { + err = config.label + '鏈�灏忎负' + config.min + } + } + + this.setState({err}) + + this.props.onChange({[config.field]: value}) + + this.props.onBlur && this.props.onBlur() + }, 5) + } + + render() { + const { config } = this.props + const { value, err } = this.state + + return ( + <InputNumber + title={err} + className={err ? 'has-error' : ''} + ref={ref => this.node = ref} + precision={config.decimal || 0} + value={value} + onChange={(value) => this.onChange(value)} + onPressEnter={this.enterPress} + onFocus={this.onFocus} + onBlur={this.onBlur} + /> + ) + } +} class BodyRow extends React.Component { shouldComponentUpdate (nextProps, nextState) { @@ -99,18 +676,19 @@ class BodyCell extends React.Component { state = { - editing: false, - err: null + editing: false + } + + componentDidMount() { + const { col } = this.props + + if (col && col.editable === 'true') { + MKEmitter.addListener('setFocus' + col.tableId, this.setFocus) + } } shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props.record), fromJS(nextProps.record)) || - nextState.editing !== this.state.editing || - nextState.err !== this.state.err - } - - componentDidMount () { - MKEmitter.addListener('tdFocus', this.tdFocus) + return !is(fromJS(this.props.record), fromJS(nextProps.record)) || !is(fromJS(this.state), fromJS(nextState)) } /** @@ -120,180 +698,64 @@ 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 - const { value } = this.state - - 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) - - if (value !== record[col.field]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value}) + if (this.props.col) { + MKEmitter.removeListener('setFocus' + this.props.col.tableId, this.setFocus) } + } + + setFocus = (lId, colId) => { + const { col, record } = this.props + + if (lId !== record.$$uuid || col.uuid !== colId) return + if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField] + '')) return + + this.setState({editing: true}) } focus = () => { const { col, record } = this.props - 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 - } - - this.setState({editing: true, value: val, err}, () => { - let node = document.getElementById(col.uuid + record.$$uuid) - node && node.select() - }) - } + if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField] + '')) return + + this.setState({editing: true}) } - onBlur = () => { - const { col, record } = this.props - const { value } = this.state - - this.setState({editing: false}) - - if (value !== record[col.field]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value}) - } - } - - onChange = (val) => { - const { col } = this.props - - let err = null - - if (col.type === 'number') { - val = +val - if (isNaN(val)) { - val = 0 - } - if (typeof(col.max) === 'number' && val > col.max) { - err = col.label + '鏈�澶т负' + col.max - } else if (typeof(col.min) === 'number' && val < col.min) { - err = col.label + '鏈�灏忎负' + col.min - } - } else if (col.required === 'true' && !val) { - err = '璇峰~鍐�' + col.label - } - this.setState({value: val, err}) - } - - onSwitchChange = (val, label) => { + onColChange = (values) => { 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) + MKEmitter.emit('changeRecord' + col.tableId, {...record, ...values}) } render() { let { col, config, record, style, className, ...resProps } = this.props - const { editing, value, err } = this.state + const { editing } = this.state if (!col) return (<td {...resProps} className={className} style={style}/>) + + let disabled = false + if (col.ctrlField) { + disabled = col.ctrlValue.includes(record[col.ctrlField] + '') + } let children = null if (col.type === 'text') { let content = '' if (record[col.field] !== undefined) { content = `${record[col.field]}` + } + + if (col.editType === 'select' && col.options.length > 0) { + content = col.map.get(content) || content + } else if (col.editType === 'switch') { + if (content === config.openVal) { + content = config.openText + } else if (content === config.closeVal) { + content = config.closeText + } + } else if (col.editType === 'popSelect') { + if (col.showField) { + content = record[col.showField] || content + } } if (content !== '') { @@ -305,15 +767,19 @@ content = <span>{col.prefix || ''}<Encrypts value={content} />{col.postfix || ''}</span> } + if (col.noValue === 'hide' && content < '1949-10-02') { + content = '' + } + if (col.textFormat !== 'encryption') { content = (col.prefix || '') + content + (col.postfix || '') } } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -323,53 +789,50 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } - if (col.editable === 'true') { + if (col.editable === 'true' && !disabled) { if (editing) { + let _value = record[col.field] !== undefined ? record[col.field] : '' + 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} + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MkInput config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </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 onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MkSwitch config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> + </td>) + } else if (col.editType === 'date') { + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MkDatePicker config={col} lineId={record.$$uuid} defaultValue={_value || null} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> + </td>) + } else if (col.editType === 'popSelect') { + let showValue = '' + if (col.showField) { + showValue = record[col.showField] || '' } - return (<td className="editing_table_cell"> - <CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/> + + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MKPopSelect config={col} lineId={record.$$uuid} defaultValue={_value} showValue={showValue} BID={record.$$BID} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </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> + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MkSelect config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } } else { - 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} + return (<td onClick={(e) => e.stopPropagation()} className={className + ' pointer'} style={style}> + <div className="mk-mask" id={col.uuid + record.$$uuid} onClick={this.focus}></div>{content} </td>) } } else { @@ -380,6 +843,9 @@ try { content = parseFloat(record[col.field]) if (isNaN(content)) { + content = '' + } + if (col.noValue === 'hide' && content === 0) { content = '' } } catch (e) { @@ -407,9 +873,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -419,20 +885,29 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } - if (col.editable === 'true') { + if (col.editable === 'true' && !disabled) { if (editing) { - return (<td className="editing_table_cell"> - <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} + let val = record[col.field] !== undefined ? record[col.field] : '' + if (col.noValue === 'hide' && val === 0) { + val = '' + } + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MkInputNumber config={col} lineId={record.$$uuid} defaultValue={val} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } else { - 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} + return (<td onClick={(e) => e.stopPropagation()} className={className + ' pointer'} style={style}> + <div className="mk-mask" id={col.uuid + record.$$uuid} onClick={this.focus}></div>{content} </td>) } } else { @@ -455,35 +930,57 @@ ) } 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') { + if (col.eval === 'func') { try { // eslint-disable-next-line - content = eval(content) + let func = new Function('data', col.formula) + content = func([record]) } catch (e) { + console.warn(e) content = '' + } + } else { + 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) { + console.info(content) + console.warn(e) + content = '' + } } } content = content === undefined ? '' : content - if (content !== '') { - content = `${col.prefix || ''}${content}${col.postfix || ''}` + if (col.noValue === 'hide' && content === 0) { + content = '' + } - if (col.eval === 'false') { - content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, ' ') - content = <span dangerouslySetInnerHTML={{__html: content}}></span> - } + if (col.round && typeof(content) === 'number') { + content = Math.round(content * col.round) / col.round + content = content.toFixed(col.decimal) + } + + if (col.eval === 'func') { + content = <span dangerouslySetInnerHTML={{__html: content}}></span> + } else if (content !== '') { + content = `${col.prefix || ''}${content}${col.postfix || ''}` + 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 = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -493,6 +990,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -506,38 +1011,17 @@ children = ( <CardCellComponent data={record} cards={config} elements={col.elements}/> ) - } else if (col.type === 'action') { - 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={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>) + return (<td className={className} style={style}>{children}</td>) } } class BodyAllCell extends React.Component { - state = { - err: null - } + state = {} shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props.record), fromJS(nextProps.record)) || - nextState.err !== this.state.err - } - - componentDidMount () { - MKEmitter.addListener('tdFocus', this.tdFocus) + return !is(fromJS(this.props.record), fromJS(nextProps.record)) || !is(fromJS(this.state), fromJS(nextState)) } /** @@ -547,183 +1031,75 @@ this.setState = () => { return } - MKEmitter.removeListener('tdFocus', this.tdFocus) } - tdFocus = (id) => { + onColChange = (values) => { 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}) + MKEmitter.emit('changeRecord' + col.tableId, {...record, ...values}) } render() { - let { col, config, record, style, className } = this.props - const { err } = this.state + let { col, config, record, style, className, ...resProps } = this.props + + if (!col) return (<td {...resProps} className={className} style={style}/>) + + let disabled = false + let editable = false + if (col.ctrlField) { + disabled = col.ctrlValue.includes(record[col.ctrlField] + '') + } 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.editable === 'true' && !disabled) { + editable = true + let _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} - </>) + children = ( + <MkInput config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange}/> + ) } else if (col.editType === 'switch') { children = ( - <CusSwitch config={col} autoFocus={false} defaultValue={_value} onChange={this.onSwitchChange} onBlur={() => {}}/> + <MkSwitch config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange}/> + ) + } else if (col.editType === 'date') { + children = ( + <MkDatePicker config={col} lineId={record.$$uuid} defaultValue={_value || null} autoFocus={false} onChange={this.onColChange}/> + ) + } else if (col.editType === 'popSelect') { + let showValue = '' + if (col.showField) { + showValue = record[col.showField] || '' + } + + children = ( + <MKPopSelect config={col} lineId={record.$$uuid} defaultValue={_value} showValue={showValue} BID={record.$$BID} autoFocus={false} onChange={this.onColChange}/> ) } 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> - </>) + children = ( + <MkSelect config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange} /> + ) } } else { let content = '' if (record[col.field] !== undefined) { content = `${record[col.field]}` + } + + if (col.editType === 'select' && col.options.length > 0) { + content = col.map.get(content) || content + } else if (col.editType === 'switch') { + if (content === config.openVal) { + content = config.openText + } else if (content === config.closeVal) { + content = config.closeText + } + } else if (col.editType === 'popSelect') { + if (col.showField) { + content = record[col.showField] || content + } } if (content !== '') { @@ -735,15 +1111,19 @@ content = <span>{col.prefix || ''}<Encrypts value={content} />{col.postfix || ''}</span> } + if (col.noValue === 'hide' && content < '1949-10-02') { + content = '' + } + if (col.textFormat !== 'encryption') { content = (col.prefix || '') + content + (col.postfix || '') } } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -753,22 +1133,43 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } + + if (col.editable === 'true' && disabled) { + content = <span style={{display: 'inline-block', padding: '0 6px'}}>{content}</span> + } + children = content } } else if (col.type === 'number') { - if (col.editable === 'true') { + if (col.editable === 'true' && !disabled) { + 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} - </>) + + if (col.noValue === 'hide' && _value === 0) { + _value = '' + } + + children = ( + <MkInputNumber config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange}/> + ) } else { let content = '' try { content = parseFloat(record[col.field]) if (isNaN(content)) { + content = '' + } + if (col.noValue === 'hide' && content === 0) { content = '' } } catch (e) { @@ -796,9 +1197,9 @@ } if (col.marks) { - let mark = getMark(col.marks, record, style) + style = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -808,8 +1209,21 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } + + if (col.editable === 'true' && disabled) { + content = <span style={{display: 'inline-block', padding: '0 6px'}}>{content}</span> + } + children = content } } else if (col.type === 'textarea') { @@ -829,35 +1243,57 @@ ) } 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') { + if (col.eval === 'func') { try { // eslint-disable-next-line - content = eval(content) + let func = new Function('data', col.formula) + content = func([record]) } catch (e) { + console.warn(e) content = '' + } + } else { + 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) { + console.info(content) + console.warn(e) + content = '' + } } } content = content === undefined ? '' : content - if (content !== '') { - content = `${col.prefix || ''}${content}${col.postfix || ''}` + if (col.noValue === 'hide' && content === 0) { + content = '' + } - if (col.eval === 'false') { - content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, ' ') - content = <span dangerouslySetInnerHTML={{__html: content}}></span> - } + if (col.round && typeof(content) === 'number') { + content = Math.round(content * col.round) / col.round + content = content.toFixed(col.decimal) + } + + if (col.eval === 'func') { + content = <span dangerouslySetInnerHTML={{__html: content}}></span> + } else if (content !== '') { + content = `${col.prefix || ''}${content}${col.postfix || ''}` + 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 = style ? {...style} : {} - style = mark.style + let mark = getMark(col.marks, record, style) if (mark.icon) { if (mark.position === 'front') { @@ -867,6 +1303,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -880,20 +1324,18 @@ 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>) + if (editable) { + return (<td onClick={(e) => e.stopPropagation()} className={'editing_all_table_cell ' + className} style={style}>{children}</td>) + } + + return (<td className={'editing_all_table_cell ' + className} style={style}>{children}</td>) } } class NormalTable extends Component { static propTpyes = { - statFValue: PropTypes.any, // 鍚堣瀛楁鏁版嵁 MenuID: PropTypes.string, // 鑿滃崟Id setting: PropTypes.object, // 琛ㄦ牸鍏ㄥ眬璁剧疆锛歵ableType锛堣〃鏍兼槸鍚﹀彲閫夈�佸崟閫夈�佸閫夛級銆乤ctionfixed锛堟寜閽浐瀹氾級 columns: PropTypes.array, // 琛ㄦ牸鍒� @@ -903,103 +1345,151 @@ total: PropTypes.any, // 鎬绘暟 loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓� refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂� - changeLock: PropTypes.func, chgSelectData: PropTypes.func, + allSearch: PropTypes.any, + colsCtrls: PropTypes.any } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - data: [], edData: [], - edColumns: [], selectedRowKeys: [], // 琛ㄦ牸涓�変腑琛� tableId: '', // 琛ㄦ牸ID pageIndex: 1, // 鍒濆椤甸潰绱㈠紩 pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 columns: null, // 鏄剧ず鍒� - fields: [], - pickup: false, // 鏀惰捣鏈�夋嫨椤� + forms: [], orderfields: {}, // 鎺掑簭id涓巉ield杞崲 loading: false, - editable: false, - pageOptions: [] + pageOptions: [], + deForms: null, + visible: false, + midData: null, + allColumns: null, + checkForms: [], + allForms: [], + reseting: false } + timer = null + focusId = '' + blurId = '' + colId = '' + UNSAFE_componentWillMount () { - const { setting, fields, columns } = this.props + const { setting, fields, columns, BID, colsCtrls } = this.props let orderfields = {} - let initEditLine = null - let edColumns = [] let _columns = [] let deForms = [] - columns.forEach(item => { - if (!initEditLine && item.editable === 'true') { - initEditLine = item - } + let _forms = {} + let hasBid = false + let index = 0 + let checkForms = [] + let allForms = [] - if (item.type === 'text' && item.editable === 'true' && item.editType === 'select' && item.resourceType === '1') { - let _option = Utils.getSelectQueryOptions(item) + let getColumns = (cols, sk) => { + return cols.map(item => { + let cell = null + + if (item.type === 'colspan') { + cell = { title: item.label, align: item.Align, $key: item.uuid } + cell.children = getColumns(item.subcols, sk || item.uuid) + } else { + if (item.editable === 'true') { + item.$sort = index + index++ + _forms[item.field] = item - if (window.GLOB.debugger === true || window.debugger === true) { - console.info(_option.sql) + allForms.push({uuid: sk || item.uuid, field: item.field}) + checkForms.push(item.field) + + if (item.ctrlField) { + item.ctrlValue = item.ctrlValue.split(',') + } + + if (item.type === 'number' && item.clearField) { + fields.forEach(cell => { + if (cell.field === item.clearField) { + item.clearName = cell.label + } + }) + } else if (item.type === 'text' && item.editType === 'select') { + item.map = new Map() + if (item.resourceType === '1') { + let _option = Utils.getSelectQueryOptions(item) + + if (/@BID@/ig.test(_option.sql) && setting.supModule) { + hasBid = true + } + + item.base_sql = _option.sql + item.arr_field = _option.field + + deForms.push(item) + } else { + item.options.forEach(cell => { + item.map.set(cell.value, cell.label) + }) + } + } else if (item.type === 'text' && item.editType === 'date') { + item.format = 'YYYY-MM-DD' + + if (item.precision === 'hour') { + item.format = 'YYYY-MM-DD HH' + } else if (item.precision === 'minute') { + item.format = 'YYYY-MM-DD HH:mm' + } else if (item.precision === 'second') { + item.format = 'YYYY-MM-DD HH:mm:ss' + } + } + } + + if (item.field) { + orderfields[item.uuid] = item.field + } else if (item.sortField) { + orderfields[item.uuid] = item.sortField + } + + cell = { + align: item.Align, + dataIndex: item.uuid, + title: item.editable === 'true' ? <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> : item.label, + sorter: (item.field || item.sortField) && item.IsSort === 'true', + width: item.Width || 120, + $key: item.uuid, + onCell: record => ({ + record, + col: item, + config: item.type === 'custom' ? {setting, columns: fields} : null, + }) + } } - - item.base_sql = window.btoa(window.encodeURIComponent(_option.sql)) - item.arr_field = _option.field - - deForms.push(item) - } - - if (item.field) { - orderfields[item.uuid] = item.field - } - - let _item = { - align: item.Align, - dataIndex: item.uuid, - title: item.label, - sorter: item.field && item.IsSort === 'true', - width: item.Width || 120, - onCell: record => ({ - record, - col: item, - config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null, - }) - } - - if (item.type !== 'action') { - let _copy = fromJS(_item).toJS() - _copy.sorter = false - - if (item.editable === 'true') { - _copy.title = <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> - } - edColumns.push(_copy) - } - _columns.push(_item) - }) - - if (setting.delable !== 'false' && setting.operType !== 'buoyMode') { - edColumns.push({ - align: 'center', - dataIndex: 'mkoperation', - title: '鎿嶄綔', - sorter: false, - width: 100, - onCell: record => ({ - record, - col: {type: 'operation', tableId: setting.tableId}, - }) + + return cell }) } - // 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) - // } + _columns = getColumns(columns) + + let forms = [] + fields.forEach(item => { + if (item.field === setting.primaryKey) return + + if (_forms[item.field]) { + let _item = {..._forms[item.field]} + if (_item.editType === 'date') { + _item.datatype = _item.declareType || 'datetime' + } else { + _item.datatype = item.datatype + } + + forms.push(_item) + } else { + forms.push({...item, $sort: 999}) + } + }) + + forms.sort((a, b) => a.$sort - b.$sort) let size = (setting.pageSize || 10) + '' let pageOptions = ['10', '25', '50', '100', '500', '1000'] @@ -1009,25 +1499,36 @@ pageOptions = pageOptions.sort((a, b) => a - b) } + if (setting.maxPageSize) { + pageOptions = pageOptions.filter(item => item <= setting.maxPageSize) + } + + let allColumns = null + if (colsCtrls) { + allColumns = [..._columns] + checkForms = [] + _columns = this.getCurColumns(_columns, this.props.allSearch, allForms, checkForms) + } else { + allForms = null + } + + checkForms = Array.from(new Set(checkForms)) + this.setState({ + forms, + allForms, + allColumns, + checkForms, pageSize: setting.pageSize || 10, pageOptions, columns: _columns, - edColumns, tableId: setting.tableId, orderfields, - initEditLine, - editable: setting.editable === 'true' + deForms: hasBid ? deForms : null }, () => { - if (deForms.length > 0) { - this.improveActionForm(deForms) + if (deForms.length > 0 && (!hasBid || BID)) { + this.improveActionForm(deForms, BID) } - - 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') }) } @@ -1035,57 +1536,251 @@ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) } + UNSAFE_componentWillReceiveProps(nextProps) { + const { BID } = this.props + const { deForms } = this.state + + if (deForms && nextProps.BID !== BID) { + this.improveActionForm(deForms, nextProps.BID) + } + } + componentDidMount () { - const { fields, setting } = this.props + const { setting } = this.props + const { tableId } = this.state + + if (setting.commit === 'change') { + MKEmitter.addListener('colBlur' + tableId, this.colBlur) + MKEmitter.addListener('colFocus' + tableId, this.colFocus) + } - this.setState({ - fields: fields.filter(item => item.field !== setting.primaryKey), - }) - - 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) + MKEmitter.addListener('nextLine' + tableId, this.nextLine) + MKEmitter.addListener('addRecord' + tableId, this.plusLine) + MKEmitter.addListener('delRecord' + tableId, this.delRecord) + MKEmitter.addListener('transferData' + tableId, this.transferData) + MKEmitter.addListener('changeRecord' + tableId, this.changeRecord) } /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 */ componentWillUnmount () { + const { tableId } = this.state + 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) + MKEmitter.removeListener('colBlur' + tableId, this.colBlur) + MKEmitter.removeListener('colFocus' + tableId, this.colFocus) + MKEmitter.removeListener('nextLine' + tableId, this.nextLine) + MKEmitter.removeListener('addRecord' + tableId, this.plusLine) + MKEmitter.removeListener('delRecord' + tableId, this.delRecord) + MKEmitter.removeListener('transferData' + tableId, this.transferData) + MKEmitter.removeListener('changeRecord' + tableId, this.changeRecord) } - transferData = (menuid, data, type) => { - if (menuid !== this.props.MenuID) return + colBlur = (lineId, colId, defer) => { + if (defer && this.focusId === lineId && this.colId !== colId) { + return + } + + this.blurId = lineId + this.focusId = '' - if (type !== 'line') { - this.setState({data: data || []}) + this.timer && clearTimeout(this.timer) - if (this.state.editable && !this.state.pickup) { - setTimeout(() => { - this.pickupChange() - }, 200) + this.timer = setTimeout(() => { + if (!this.focusId || this.focusId !== this.blurId) { + this.checkLine() } - } else if (type === 'line' && data.$$uuid) { - let _data = this.state.data.map(item => { - if (item.$$uuid === data.$$uuid) { - return data + }, 150) + } + + colFocus = (lineId, colId) => { + this.focusId = lineId + this.colId = colId + } + + checkLine = () => { + const { edData, forms, checkForms } = this.state + + let data = edData.filter(item => item.$$uuid === this.blurId)[0] + + if (!data) return + + let record = fromJS(data).toJS() + + let value = '' + Object.keys(record).sort().forEach(key => { + if (/^\$/.test(key)) return + value += record[key] + }) + + if (record.$sign === md5(value)) return + + let err = '' + forms.forEach(col => { + let check = true + if (col.editable !== 'true' || !checkForms.includes(col.field)) { + check = false + } + if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField] + '')) { + check = false + } + + if (!check) { + if (col.type === 'number') { + record[col.field] = +record[col.field] + if (isNaN(record[col.field])) { + record[col.field] = 0 + } } else { - return item + record[col.field] = record[col.field] !== undefined ? (record[col.field] + '') : '' + } + return + } + + if (err) return + + if (col.type === 'text') { + let val = record[col.field] !== undefined ? (record[col.field] + '') : '' + if (col.required === 'true' && !val) { + err = `${col.label}涓嶅彲涓虹┖` + } else if (col.datatype === 'datetime' && !val) { + val = '1949-10-01' + } + record[col.field] = val + } else if (col.type === 'number') { + let val = record[col.field] + + if (col.noValue === 'hide' && !val) { + if (col.clearField && checkForms.includes(col.clearField) && !record[col.clearField]) { + err = `璇峰~鍐� ${col.label} 鎴� ${col.clearName}` + } + val = 0 + } else if (!val && val !== 0) { + err = `${col.label}涓嶅彲涓虹┖` + } else { + val = +val + if (isNaN(val)) { + err = `${col.label}鏁版嵁鏍煎紡閿欒` + return + } + + val = +val.toFixed(col.decimal || 0) + + if (typeof(col.max) === 'number' && val > col.max) { + err = `${col.label}涓嶅彲澶т簬${col.max}` + } else if (typeof(col.min) === 'number' && val < col.min) { + err = `${col.label}涓嶅彲灏忎簬${col.min}` + } + } + + record[col.field] = val + } + }) + + if (err) { + message.warning(err) + return + } + + this.submit(record) + } + + getCurColumns = (columns, allSearch, allForms, checkForms) => { + const { colsCtrls } = this.props + + let values = {} + allSearch.forEach(item => { + values[item.key] = item.value + }) + let cols = null + colsCtrls.some(item => { + let originVal = item.field.map(f => values[f] || '').join('') + let contrastVal = item.contrastValue + let result = false + + if (item.match === '=') { + result = originVal === contrastVal + } else if (item.match === '!=') { + result = originVal !== contrastVal + } else if (item.match === 'regexp') { + let reg = new RegExp(item.contrastValue, 'ig') + result = reg.test(originVal) + } else { + originVal = isNaN(originVal) ? originVal : +originVal + contrastVal = isNaN(contrastVal) ? contrastVal : +contrastVal + if (item.match === '>') { + result = originVal > contrastVal + } else if (item.match === '<') { + result = originVal < contrastVal + } + } + + if (!result) return false + + cols = item.cols + + return true + }) + + if (cols) { + allForms.forEach(item => { + if (cols.includes(item.uuid)) { + checkForms.push(item.field) } }) + + return columns.filter(col => cols.includes(col.$key)) + } + + allForms.forEach(item => { + checkForms.push(item.field) + }) + + return columns + } + + transferData = (data, type) => { + const { edData, tableId } = this.state + + if (type === 'delete') { + + } else if (type === 'line') { + let value = '' + Object.keys(data).sort().forEach(key => { + if (/^\$/.test(key)) return + value += data[key] + }) + data.$sign = md5(value) + } else { + data.forEach(item => { + let value = '' + Object.keys(item).sort().forEach(key => { + if (/^\$/.test(key)) return + value += item[key] + }) + item.$sign = md5(value) + }) + } + + if (type === 'delete') { + let _edData = this.state.edData.filter(item => item.$$uuid !== data) + + this.setState({edData: _edData, reseting: true}, () => { + this.setState({reseting: false}) + + if (this.focusId) { + setTimeout(() => { + MKEmitter.emit('setFocus' + tableId, this.focusId, this.colId) + }, 10) + } + }) + } else if (type === 'line') { let _edData = this.state.edData.map(item => { if (item.$$uuid === data.$$uuid) { return data @@ -1094,24 +1789,102 @@ } }) - this.setState({edData: _edData, data: _data}) + this.setState({edData: _edData, reseting: true}, () => { + this.setState({reseting: false}) + + if (this.focusId) { + setTimeout(() => { + MKEmitter.emit('setFocus' + tableId, this.focusId, this.colId) + }, 10) + } + }) + } else { + let index = edData.findIndex(item => !item.$origin && !item.$forbid) + + if (index > -1) { + this.setState({visible: true, midData: data}) + } else { + this.updateMutil(data) + } } - this.setState({editable: false}) } - improveActionForm = (deForms) => { - const { BID, setting } = this.props + updateMutil = (data) => { + const { setting, colsCtrls, allSearch } = this.props + const { allColumns, allForms } = this.state + if (colsCtrls) { + let checkForms = [] + let columns = this.getCurColumns(allColumns, allSearch, allForms, checkForms) + + checkForms = Array.from(new Set(checkForms)) + + this.setState({ + checkForms, + columns: columns, + reseting: true, + edData: data, + visible: false, + midData: null + }, () => { + this.setState({ + reseting: false + }) + }) + + return + } + + if (setting.editType === 'multi' && data.length > 0) { + this.setState({edData: data, visible: false, midData: null, reseting: true}, () => { + this.setState({reseting: false}) + }) + } else { + this.setState({edData: data, visible: false, midData: null}) + } + + if (setting.addable && data.length === 0) { + setTimeout(() => { + this.plusLine() + }, 10) + } + } + + improveActionForm = (deForms, BID) => { let deffers = [] let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹� let localItems = [] // 鏈湴鏁版嵁 - let cache = setting.cache !== 'false' + let debug = window.GLOB.debugger === true + let _sql = `Declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20) select @mk_departmentcode='${sessionStorage.getItem('departmentcode') || ''}',@mk_organization='${sessionStorage.getItem('organization') || ''}',@mk_user_type='${sessionStorage.getItem('mk_user_type') || ''}'\n` + let _sso = _sql 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`) + let sql = _sso + item.base_sql + _sso = '' + + sql = sql.replace(/@BID@/ig, `'${BID}'`) + + if (debug) { + console.info(sql) + } + + sql = sql.replace(/%/ig, ' mpercent ') + + mainItems.push(`select '${item.uuid}' as obj_name,'${item.arr_field}' as arr_field,'${window.btoa(window.encodeURIComponent(sql))}' as LText`) } else { - localItems.push(`select '${item.uuid}' as obj_name,'${item.arr_field}' as arr_field,'${item.base_sql}' as LText`) + let sql = _sql + item.base_sql + _sql = '' + + sql = sql.replace(/@BID@/ig, `'${BID}'`) + + if (debug) { + console.info(sql) + } + + sql = sql.replace(/%/ig, ' mpercent ') + + localItems.push(`select '${item.uuid}' as obj_name,'${item.arr_field}' as arr_field,'${window.btoa(window.encodeURIComponent(sql))}' as LText`) } }) @@ -1126,13 +1899,17 @@ } if (param.LText) { - param.LText = Utils.formatOptions(param.LText) + if (window.GLOB.execType === 'x') { + param.exec_type = 'x' + } + + param.LText = Utils.formatOptions(param.LText, param.exec_type) param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) + param.secretkey = Utils.encrypt(window.GLOB.execType === 'x' ? '' : param.LText, param.timestamp) deffers.push( new Promise(resolve => { - Api.getSystemCacheConfig(param, cache).then(res => { + Api.getSystemCacheConfig(param, false).then(res => { if (!res.status) { notification.warning({ top: 92, @@ -1157,9 +1934,13 @@ } if (mainparam.LText) { - mainparam.LText = Utils.formatOptions(mainparam.LText) + if (window.GLOB.execType === 'x') { + mainparam.exec_type = 'x' + } + + mainparam.LText = Utils.formatOptions(mainparam.LText, mainparam.exec_type) mainparam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - mainparam.secretkey = Utils.encrypt(mainparam.LText, mainparam.timestamp) + mainparam.secretkey = Utils.encrypt(window.GLOB.execType === 'x' ? '' : mainparam.LText, mainparam.timestamp) if (window.GLOB.mainSystemApi) { mainparam.rduri = window.GLOB.mainSystemApi @@ -1167,7 +1948,7 @@ deffers.push( new Promise(resolve => { - Api.getSystemCacheConfig(mainparam, cache).then(res => { + Api.getSystemCacheConfig(mainparam, false).then(res => { if (!res.status) { notification.warning({ top: 92, @@ -1194,26 +1975,32 @@ } resetFormList = (result) => { - const { columns } = this.props - const { edColumns } = this.state + const { columns, edData } = this.state let _edColumns = [] let reCols = {} - columns.forEach(item => { + this.props.columns.forEach(item => { if (item.resourceType === '1' && result[item.uuid] && result[item.uuid].length > 0) { let options = [] - let _map = new Map() + let all = false 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 (!_cell.label && _cell.label !== 0) { + if (!all) { + _cell.label = '鍏ㄩ儴' + all = true + } else { + return + } + } - if (_map.has(_cell.value)) return - _map.set(_cell.value, 0) + if (item.map.has(_cell.value)) return + item.map.set(_cell.value, _cell.label) if (item.linkSubField) { item.linkSubField.forEach(m => { @@ -1230,11 +2017,11 @@ item.options = options - reCols[item.uuid] = item + reCols[item.uuid] = fromJS(item).toJS() } }) - _edColumns = edColumns.map(item => { + _edColumns = columns.map(item => { if (reCols[item.dataIndex]) { item.onCell = record => ({ record, @@ -1245,120 +2032,70 @@ return item }) - if (this.state.pickup) { - this.setState({ - pickup: false - }, () => { - this.setState({pickup: true, edColumns: _edColumns}) + let _cols = this.state.allColumns + if (_cols) { + _cols = _cols.map(item => { + if (reCols[item.dataIndex]) { + item.onCell = record => ({ + record, + col: reCols[item.dataIndex] + }) + } + + return item }) - } else { - this.setState({edColumns: _edColumns}) } + + this.setState({columns: [], edData: [], allColumns: _cols}, () => { + this.setState({columns: _edColumns, edData: edData}) + }) } - nextLine = (col, uuid) => { + nextLine = (lineId, colId) => { const { setting } = this.props - const { edData, initEditLine, tableId } = this.state + const { edData, tableId } = this.state - if (col.tableId !== tableId) return - - let index = edData.findIndex(item => item.$$uuid === uuid) + let index = edData.findIndex(item => item.$$uuid === lineId) let next = edData[index + 1] || null - - if (next && initEditLine) { - MKEmitter.emit('tdFocus', initEditLine.uuid + next.$$uuid) - } else if (setting.addable === 'true') { + + if (next) { + MKEmitter.emit('setFocus' + tableId, next.$$uuid, colId) + } else if (setting.addable) { setTimeout(() => { - this.plusLine() + this.plusLine(colId) }, 10) - } else if (edData[index]) { + } else if (edData[index] && (setting.commit === 'all' || setting.commit === 'amend')) { setTimeout(() => { - this.subLine(col, edData[index]) + this.submit() }, 10) } } - subLine = (col, record) => { - const { tableId, fields, edData } = this.state + plusLine = (colId, lineId) => { + const { BID } = this.props + const { forms, tableId } = 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') + let edData = fromJS(this.state.edData).toJS() + let item = edData.length > 0 ? {...edData[edData.length - 1]} : {} + let index = null + + if (lineId) { + index = edData.findIndex(item => lineId === item.$$uuid) + index = index === -1 ? null : index + + if (index !== null) { + item = {...edData[index]} } - }, 10) - } + } - plusLine = () => { - const { edData, fields, initEditLine } = this.state - - let item = {...edData[edData.length - 1]} - + item.key = edData.length item.$$uuid = Utils.getguid() item.$type = 'add' + item.$forbid = true item.$Index = '' + item.$$BID = BID || '' - fields.forEach(col => { + forms.forEach(col => { if (col.initval !== '$copy') { item[col.field] = col.initval } @@ -1373,144 +2110,145 @@ } }) - this.setState({edData: [...edData, item]}, () => { - MKEmitter.emit('tdFocus', initEditLine.uuid + item.$$uuid) + let value = '' + Object.keys(item).sort().forEach(key => { + if (/^\$/.test(key)) return + value += item[key] + }) + item.$sign = md5(value) + + if (index === null) { + edData.push(item) + } else { + edData.splice(index, 0, item) + } + + this.setState({edData: edData}, () => { + if (colId) { + MKEmitter.emit('setFocus' + tableId, item.$$uuid, colId) + } }) } - delRecord = (id, record) => { + delRecord = (record) => { const { setting } = this.props - const { tableId, edData } = this.state - - if (id !== tableId) return - - let _data = [] + const { edData } = this.state if (record.$type === 'add') { - _data = edData.filter(item => item.$$uuid !== record.$$uuid) + let _data = edData.filter(item => item.$$uuid !== record.$$uuid) + this.setState({edData: _data}) } else { - _data = edData.map(item => { + let _data = fromJS(edData).toJS().map(item => { if (item.$$uuid === record.$$uuid) { + item.$deleted = true + item.$origin = false + item.$type = 'del' + record.$deleted = true record.$origin = false record.$type = 'del' - return record - } else { - return item } + + return item }) - if (setting.commit === 'simple' && record.$deleted) { - this.subLine(null, record) - } + this.setState({edData: _data}, () => { + if (setting.commit === 'change') { + this.submit(record) + } + }) } - - this.setState({edData: _data}) } - changeRecord = (id, record) => { - const { tableId } = this.state + changeRecord = (record) => { + const { setting } = this.props + const { edData } = this.state - if (id !== tableId) return + let data = edData.filter(item => item.$$uuid === record.$$uuid)[0] - let _data = this.state.edData.map(item => { + if (!data) return + + if (is(fromJS(data), fromJS(record))) return + + delete record.$forbid + + let value = '' + Object.keys(record).sort().forEach(key => { + if (/^\$/.test(key)) return + value += record[key] + }) + + let sign = md5(value) + + if (record.$sign === sign) { + record.$origin = true + record.$lock = false + } else { + record.$origin = false + record.$lock = true + } + + let _data = edData.map(item => { if (item.$$uuid === record.$$uuid) { - record.$origin = false return record } else { return item } }) - this.setState({edData: _data}) - } - - addLine = (id, record) => { - const { BID } = this.props - const { edData, fields, tableId } = this.state - - 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 - } - } - - if (item[col.field] === undefined) { - item[col.field] = '' - } - }) - - _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 || '' + this.setState({edData: _data}, () => { + if (setting.tableType && setting.hasAction && this.state.selectedRowKeys.includes(record.$$uuid)) { + this.selectdata(this.state.selectedRowKeys) } - - 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 = () => { - const { edData, fields } = this.state + const { setting } = this.props + const { edData, forms, checkForms, selectedRowKeys } = this.state - if (edData.length === 0) { + let data = fromJS(edData).toJS() + + data = data.filter(item => !item.$forbid) + + if (setting.commit === 'amend') { + data = data.filter(item => !item.$origin) + } else if (setting.commit === 'check') { + data = data.filter(item => selectedRowKeys.includes(item.$$uuid)) + + if (data.length === 0) { + notification.warning({ + top: 92, + message: '璇烽�夋嫨闇�瑕佹彁浜ょ殑鏁版嵁锛�', + duration: 5 + }) + return null + } + } + + if (data.length === 0) { notification.warning({ top: 92, - message: '鎻愪氦鏁版嵁涓嶅彲涓虹┖锛�', + message: '鏁版嵁鏈慨鏀癸紝涓嶅彲鎻愪氦锛�', duration: 5 }) - return + return null } + let err = '' let Index = 1 - let data = fromJS(edData).toJS().map(item => { + data = data.map(item => { let line = [] - fields.forEach(col => { - if (col.editable !== 'true' || item.$deleted) { + forms.forEach(col => { + let check = true + if (col.editable !== 'true' || item.$deleted || !checkForms.includes(col.field)) { + check = false + } + if (col.ctrlField && col.ctrlValue.includes(item[col.ctrlField] + '')) { + check = false + } + + if (!check) { if (col.type === 'number') { item[col.field] = +item[col.field] if (isNaN(item[col.field])) { @@ -1521,30 +2259,42 @@ } return } + if (col.type === 'text') { let val = item[col.field] !== undefined ? (item[col.field] + '') : '' if (col.required === 'true' && !val) { line.push(`${col.label}涓嶅彲涓虹┖`) + } else if (col.datatype === 'datetime' && !val) { + val = '1949-10-01' } item[col.field] = val } else if (col.type === 'number') { let val = item[col.field] - if (!val && val !== 0) { + if (col.noValue === 'hide' && !val) { + if (col.clearField && checkForms.includes(col.clearField) && !item[col.clearField]) { + let msg = `璇峰~鍐� ${col.label} 鎴� ${col.clearName}` + if (!line.includes(msg)) { + line.push(msg) + } + } + val = 0 + } else 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}`) + } else { + 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 @@ -1567,29 +2317,39 @@ message: err, duration: 5 }) - } else { - this.submit(data) + + return null } + + return data } - submit = (data, type) => { + submit = (record) => { const { submit, BID, setting } = this.props - const { fields } = this.state + const { forms } = this.state - if (type !== 'simple' && (setting.commit === 'change' || setting.commit === 'simple')) { - data = data.filter(item => !item.$origin) - } + this.setState({visible: false, midData: null}) - if (data.length === 0) { + if (setting.supModule && !BID) { notification.warning({ top: 92, - message: '鏁版嵁鏈慨鏀癸紝涓嶅彲鎻愪氦锛�', + message: '闇�瑕佷笂绾т富閿�硷紒', duration: 5 }) + return } - let result = getEditTableSql(submit, data, fields) + let data = null + if (record) { + data = [record] + } else { + data = this.checkData() + } + + if (!data) return + + let result = getEditTableSql(submit, data, forms) let param = { excel_in: result.lines, @@ -1603,22 +2363,12 @@ if (submit.intertype === 'system') { // 绯荤粺瀛樺偍杩囩▼ param.func = 'sPC_TableData_InUpDe' - if (sessionStorage.getItem('dataM') === 'true') { // 鏁版嵁鏉冮檺 - result.sql = result.sql.replace(/\$@/ig, '/*') - result.sql = result.sql.replace(/@\$/ig, '*/') - result.bottom = result.bottom.replace(/\$@/ig, '/*') - result.bottom = result.bottom.replace(/@\$/ig, '*/') - } else { - result.sql = result.sql.replace(/@\$|\$@/ig, '') - result.bottom = result.bottom.replace(/@\$|\$@/ig, '') - } - - param.excel_in_type = 'true' - param.LText1 = Utils.formatOptions(result.insert) - param.LText2 = Utils.formatOptions(result.bottom) - param.LText = Utils.formatOptions(result.sql) + delete param.excel_in + + param.exec_type = window.GLOB.execType || 'y' + param.LText = Utils.formatOptions(result.sql, param.exec_type) param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) + param.secretkey = Utils.encrypt('', param.timestamp) param.menuname = submit.logLabel @@ -1628,111 +2378,115 @@ Api.genericInterface(param).then((res) => { if (res.status) { - if (type === 'simple') { - this.updataLine(data[0]) - this.execSuccess(res, type) - } else { - this.execSuccess(res) - } + this.execSuccess(res, record) } else { - this.execError(res) + this.execError(res, record) } - }, () => { + }, (error) => { + if (error && error.ErrCode === 'LoginError') return + this.execError({}) }) } else if (submit.intertype === 'inner' && submit.innerFunc) { // 鑷畾涔夊瓨鍌ㄨ繃绋� param.func = submit.innerFunc + if (submit.recordUser === 'true') { + param.username = sessionStorage.getItem('User_Name') || '' + param.fullname = sessionStorage.getItem('Full_Name') || '' + } + Api.genericInterface(param).then((res) => { if (res.status) { - if (type === 'simple') { - this.updataLine(data[0]) - this.execSuccess(res, type) - } else { - this.execSuccess(res) - } + this.execSuccess(res, record) } else { - this.execError(res) + this.execError(res, record) } - }, () => { + }, (error) => { + if (error && error.ErrCode === 'LoginError') return + this.execError({}) }) } } - 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) => { + execSuccess = (res, record) => { const { submit } = this.props + const { edData } = this.state if (res && res.ErrCode === 'S') { // 鎵ц鎴愬姛 notification.success({ top: 92, - message: res.ErrMesg || this.state.dict['main.action.confirm.success'], + message: res.message || '鎵ц鎴愬姛', duration: submit.stime ? submit.stime : 2 }) } else if (res && res.ErrCode === 'Y') { // 鎵ц鎴愬姛 Modal.success({ - title: res.ErrMesg || this.state.dict['main.action.confirm.success'] + title: res.message || '鎵ц鎴愬姛' }) } else if (res && res.ErrCode === '-1') { // 瀹屾垚鍚庝笉鎻愮ず } - this.setState({ - loading: false + let _edData = fromJS(edData).toJS() + + _edData = _edData.filter(item => { + if (item.$deleted) return false + + if (!item.$forbid) { + item.$type = 'upt' + item.$origin = true + item.$lock = false + } + + let value = '' + Object.keys(item).sort().forEach(key => { + if (/^\$/.test(key)) return + value += item[key] + }) + + item.$sign = md5(value) + + return true }) - if (type === 'simple') return + this.setState({ + loading: false, + edData: _edData + }) if (submit.closetab === 'true') { MKEmitter.emit('popclose') } + if (submit.execSuccess !== 'never') { - this.repick() - MKEmitter.emit('refreshByButtonResult', submit.$menuId, submit.execSuccess, submit) + MKEmitter.emit('refreshByButtonResult', submit.$menuId, submit.execSuccess, submit, '', record ? [record] : null) } + + submit.syncComponentId && MKEmitter.emit('reloadData', submit.syncComponentId) } - execError = (res) => { + execError = (res, record) => { const { submit } = this.props if (res.ErrCode === 'E') { Modal.error({ - title: res.message || res.ErrMesg, + title: res.message || '鎵ц澶辫触锛�', }) } else if (res.ErrCode === 'N') { notification.error({ top: 92, - message: res.message || res.ErrMesg, + message: res.message || '鎵ц澶辫触锛�', duration: submit.ntime ? submit.ntime : 10 }) } else if (res.ErrCode === 'F') { notification.error({ className: 'notification-custom-error', top: 92, - message: res.message || res.ErrMesg, + message: res.message || '鎵ц澶辫触锛�', duration: submit.ftime ? submit.ftime : 10 }) } else if (res.ErrCode === 'NM') { - message.error(res.message || res.ErrMesg) + message.error(res.message || '鎵ц澶辫触锛�') } this.setState({ @@ -1740,33 +2494,12 @@ }) if (submit.execError !== 'never') { - this.repick() - MKEmitter.emit('refreshByButtonResult', submit.$menuId, submit.execError, submit) + MKEmitter.emit('refreshByButtonResult', submit.$menuId, submit.execError, submit, '', record ? [record] : null) } - } - - 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: [], - pickup: false, - }, () => { - this.setState({ - data: data, - }) - }) } /** - * + * @description 閫変腑琛� */ onSelectChange = selectedRowKeys => { this.setState({ selectedRowKeys }) @@ -1782,28 +2515,28 @@ /** * @description 鐐瑰嚮鏁磋锛岃Е鍙戝垏鎹紝 鍒ゆ柇鏄惁鍙�夛紝鍗曢�夋垨澶氶�夛紝杩涜瀵瑰簲鎿嶄綔 */ - changeRow = (index) => { + changeRow = (id) => { const { setting } = this.props - if (!setting.tableType || this.state.pickup) return + if (!setting.tableType) return let newkeys = fromJS(this.state.selectedRowKeys).toJS() let activeId = '' if (setting.tableType === 'radio') { - activeId = index - newkeys = [index] + activeId = id + newkeys = [id] this.setState({ selectedRowKeys: newkeys }) } else { - if (newkeys.includes(index)) { - newkeys = newkeys.filter(item => item !== index) + if (newkeys.includes(id)) { + newkeys = newkeys.filter(item => item !== id) if (newkeys.length > 0) { activeId = newkeys.slice(-1)[0] } } else { - activeId = index - newkeys.push(index) + activeId = id + newkeys.push(id) } this.setState({ selectedRowKeys: newkeys }) @@ -1815,21 +2548,21 @@ changedata = (id) => { const { MenuID } = this.props - const { data } = this.state + const { edData } = this.state let _data = '' if (id) { - _data = data.filter(item => item.$$uuid === id)[0] || '' + _data = edData.filter(item => item.$$uuid === id)[0] || '' } MKEmitter.emit('resetSelectLine', MenuID, id, _data) } selectdata = (keys) => { - const { data } = this.state + const { edData } = this.state - let _data = data.filter(item => keys.includes(item.$$uuid)) + let _data = edData.filter(item => keys.includes(item.$$uuid)) this.props.chgSelectData(_data) } @@ -1865,96 +2598,24 @@ } } - pickupChange = () => { - const { submit, MenuID, setting } = this.props - const { data } = this.state - - let pickup = !this.state.pickup - - if (!submit.sheet) { - notification.warning({ - top: 92, - message: '鎻愪氦鎸夐挳灏氭湭璁剧疆锛屼笉鍙紪杈戯紒', - duration: 5 - }) - return - } - - if (!pickup && this.state.edData.filter(item => !item.$origin).length > 0) { - const _this = this - confirm({ - title: '鏁版嵁宸蹭慨鏀癸紝纭畾鏀惧純淇濆瓨鍚楋紵', - onOk() { - _this.setState({ - data: [], - edData: [], - pickup - }, () => { - _this.setState({ - data: data, - edData: pickup ? fromJS(data).toJS() : [] - }) - }) - }, - 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 - }, () => { - 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, selectedRowKeys } = this.state + const { setting, lineMarks, submit } = this.props + const { edData, columns, loading, pageOptions, selectedRowKeys, visible, midData, reseting } = this.state + + if (reseting) return null const components = { body: { row: BodyRow, - cell: setting.editType !== 'multi' || !pickup ? BodyCell : BodyAllCell + cell: setting.editType !== 'multi' ? BodyCell : BodyAllCell } } - // 鏁版嵁鏀惰捣鏃讹紝杩囨护宸查�夋暟鎹� - let _data = data - let _columns = columns - - if (pickup) { - _data = edData - _data = _data.filter(item => !item.$deleted) - _columns = edColumns - } + let _data = edData.filter(item => !item.$deleted) // 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙�� let rowSelection = null - if (setting.tableType && !pickup) { + if (setting.tableType) { rowSelection = { selectedRowKeys, type: (setting.tableType === 'radio') ? 'radio' : 'checkbox', @@ -1963,49 +2624,49 @@ } let _pagination = false - if (!pickup && setting.laypage !== 'false' && setting.laypage !== false) { + if (setting.laypage) { _pagination = { current: this.state.pageIndex, pageSize: this.state.pageSize, pageSizeOptions: pageOptions, showSizeChanger: true, total: this.props.total || 0, - showTotal: (total, range) => `${range[0]}-${range[1]} ${this.state.dict['main.pagination.of']} ${total} ${this.state.dict['main.pagination.items']}` + showTotal: (total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉 } } - let _footer = '' - - if (!pickup && statFValue && statFValue.length > 0) { - _footer = statFValue.map(f => `${f.label}(鍚堣)锛�${f.value}`).join('锛�') + let height = setting.height || false + if (height && height <= 100) { + height = height + 'vh' } - let height = setting.height || false + let style = { + '--mk-table-border-color': setting.borderColor || '#e8e8e8', + '--mk-table-color': setting.color || 'rgba(0, 0, 0, 0.65)', + '--mk-table-font-size': setting.fontSize || '14px', + '--mk-table-font-weight': setting.fontWeight || 'normal' + } return ( <> - {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> + {setting.hasSubmit && edData.length > 0 ? <div className="edit-custom-table-btn-wrap" style={submit.wrapStyle}> + <Button style={submit.style} onClick={() => setTimeout(() => {this.submit()}, 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 || ''} table-vertical-${setting.vertical || ''}`} id={tableId}> + <div className={`edit-custom-table ${setting.tableHeader || ''} ${setting.parity === 'true' ? 'mk-parity' : ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || ''} mk-edit-${setting.editType || 'simple'}`} style={style}> <Table rowKey="$$uuid" components={components} - // style={setting.style} size={setting.size || 'middle'} bordered={setting.bordered !== 'false'} rowSelection={rowSelection} - columns={_columns} + columns={columns} dataSource={_data} loading={this.props.loading} scroll={{ x: '100%', y: height }} onRow={(record, index) => { return { lineMarks, + title: setting.tipField ? record[setting.tipField] : '', data: record, onClick: () => {this.changeRow(record.$$uuid)}, } @@ -2013,10 +2674,23 @@ 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} + {setting.hasSubmit && _data.length > 10 ? <Button style={submit.style} onClick={() => setTimeout(() => {this.submit()}, 10)} loading={loading} className="submit-footer-table" type="link">鎻愪氦</Button> : null} </div> + <Modal + className="mk-user-confirm" + visible={visible} + width={450} + maskClosable={false} + closable={false} + footer={[ + <Button key="cancel" onClick={() => { this.setState({ visible: false, midData: null }) }}>鍙栨秷</Button>, + <Button key="refresh" className="table-refresh" onClick={() => { midData && this.updateMutil(midData) }}>鍒锋柊琛ㄦ牸</Button>, + <Button key="confirm" type="primary" onClick={() => setTimeout(() => {this.submit()}, 10)}>鎻愪氦鏁版嵁</Button> + ]} + destroyOnClose + > + <div><QuestionCircleOutlined />琛ㄦ牸涓湁鏁版嵁灏氭湭鎻愪氦</div> + </Modal> </> ) } -- Gitblit v1.8.0