From 67036fb0ed31d77ca33b660ce5f9f47c29ae65c0 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期日, 03 三月 2024 11:47:46 +0800 Subject: [PATCH] 2024-03-03 --- src/tabviews/custom/components/share/normalTable/index.jsx | 680 +++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 476 insertions(+), 204 deletions(-) diff --git a/src/tabviews/custom/components/share/normalTable/index.jsx b/src/tabviews/custom/components/share/normalTable/index.jsx index 6ff2056..66f8c96 100644 --- a/src/tabviews/custom/components/share/normalTable/index.jsx +++ b/src/tabviews/custom/components/share/normalTable/index.jsx @@ -1,20 +1,19 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import md5 from 'md5' -import { connect } from 'react-redux' import { is, fromJS } from 'immutable' import { Table, Typography, Col, Switch, message } from 'antd' import asyncComponent from '@/utils/asyncComponent' import { 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 '@/assets/css/table.scss' +import Encrypts from '@/components/encrypts' import './index.scss' const { Paragraph } = Typography +const Video = asyncComponent(() => import('@/components/video')) +const MkIcon = asyncComponent(() => import('@/components/mk-icon')) +const MkPicture = asyncComponent(() => import('@/components/mkPicture')) const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList')) const PicRadio = { '4:3': '75%', '3:2': '66.67%', '16:9': '56.25%', '2:1': '50%', '3:1': '33.33%', '4:1': '25%', @@ -23,7 +22,7 @@ } class BodyRow extends React.Component { shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props.data), fromJS(nextProps.data)) || !is(fromJS(this.props.className), fromJS(nextProps.className)) + return !is(fromJS(this.props.data), fromJS(nextProps.data)) || this.props.className !== nextProps.className } render() { @@ -111,7 +110,7 @@ let { col, config, record, className, style, triggerLink, ...resProps } = this.props if (!col) return (<td {...resProps} className={className} style={style}/>) - + if (col.type === 'text') { let content = '' if (record[col.field] !== undefined) { @@ -123,21 +122,39 @@ 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.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') { - content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + content = <span><MkIcon style={mark.innerStyle} type={mark.icon} /> {content}</span> } else { - content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> + } + } 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}</> } } } @@ -149,16 +166,14 @@ resProps.rowSpan = record['$$' + col.field] } - if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { - content = ( - <div> - <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> - {content} - </div> - ) - } - resProps.children = content + + if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { + style = style || {} + style.cursor = 'pointer' + + return (<td {...resProps} className={className} onDoubleClick={() => triggerLink(col, record)} style={style}/>) + } } else if (col.type === 'number') { let content = '' try { @@ -166,36 +181,53 @@ if (isNaN(content)) { content = '' } + if (col.noValue === 'hide' && content === 0) { + content = '' + } } catch (e) { 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) { - 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') { - content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + content = <span><MkIcon style={mark.innerStyle} type={mark.icon} /> {content}</span> } else { - content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> + } + } 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}</> } } } @@ -208,24 +240,26 @@ resProps.rowSpan = record['$$' + col.field] } - if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { - content = ( - <div> - <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> - {content} - </div> - ) - } - resProps.children = content + + if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { + style = style || {} + style.cursor = 'pointer' + + return (<td {...resProps} className={className} onDoubleClick={() => triggerLink(col, record)} style={style}/>) + } } else if (col.type === 'picture') { let photos = '' if (record[col.field]) { photos = `${record[col.field]}` - photos = photos.split(',') } - let cols = 24 / (col.picSort || 1) + if (/^data:image/.test(photos)) { + photos = [photos] + } else { + photos = photos.split(',').filter(Boolean) + } + let paddingTop = '100%' let scale = col.scale === 'true' @@ -235,14 +269,19 @@ resProps.children = ( <div> - {photos && photos.map((url, i) => ( - <Col key={i} span={cols}> - <div className={'ant-mk-picture' + (scale ? ' scale' : '')} onClick={() => { - if (!scale) return - MKEmitter.emit('mkImageScale', url, photos) - }} style={{paddingTop, backgroundImage: `url('${url}')`}}></div> + {photos.map((url, i) => ( + <Col key={i} span={col.span || 24}> + <MkPicture lostTip={col.lostTip !== 'false'} style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/> </Col> ))} + </div> + ) + } else if (col.type === 'video') { + let url = record[col.field] || '' + + resProps.children = ( + <div className="video-wrap"> + {url ? <Video card={col} value={url}/> : null} </div> ) } else if (col.type === 'textarea') { @@ -252,7 +291,7 @@ } if (content) { - content = col.prefix + content + col.postfix + content = (col.prefix || '') + content + (col.postfix || '') } if (col.blur) { @@ -310,41 +349,76 @@ ) } 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]) + + if (col.noValue === 'hide' && content === 0) { + content = '' + } } 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) + + if (col.noValue === 'hide' && content === 0) { + content = '' + } + } catch (e) { + console.info(content) + console.warn(e) + content = '' + } + + if (col.round && typeof(content) === 'number') { + content = Math.round(content * col.round) / col.round + content = content.toFixed(col.decimal) + } } } content = content === undefined ? '' : content - if (content !== '') { + if (col.eval === 'func') { + content = <span dangerouslySetInnerHTML={{__html: content}}></span> + } else 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> - } + 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') { - content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + content = <span><MkIcon style={mark.innerStyle} type={mark.icon} /> {content}</span> } else { - content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + content = <span>{content} <MkIcon style={mark.innerStyle} type={mark.icon} /></span> + } + } 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}</> } } } @@ -356,11 +430,6 @@ style = {...style, ...col.style} } - resProps.children = ( - <CardCellComponent data={record} cards={config} elements={col.elements}/> - ) - } else if (col.type === 'action') { - style.padding = '0px 5px' resProps.children = ( <CardCellComponent data={record} cards={config} elements={col.elements}/> ) @@ -379,17 +448,17 @@ columns: PropTypes.array, // 琛ㄦ牸鍒� lineMarks: PropTypes.array, // 琛屾爣璁� fields: PropTypes.array, // 缁勪欢瀛楁闆� - ContainerId: PropTypes.any, // 鏍囩椤靛灞侷d - BData: PropTypes.any, // 涓昏〃鏁版嵁 data: PropTypes.any, // 琛ㄦ牸鏁版嵁 total: PropTypes.any, // 鎬绘暟 loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓� refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂� chgSelectData: PropTypes.func, // 鏁版嵁鍒囨崲 + autoMatic: PropTypes.any, + allSearch: PropTypes.any, + colsCtrls: PropTypes.any } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, tableId: '', // 琛ㄦ牸ID selectedRowKeys: [], // 琛ㄦ牸涓�変腑琛� pageIndex: 1, // 鍒濆椤甸潰绱㈠紩 @@ -399,72 +468,93 @@ rowspans: null, // 琛屽悎骞跺瓧娈典俊鎭� pickup: false, // 鏀惰捣鏈�夋嫨椤� orderfields: {}, // 鎺掑簭id涓巉ield杞崲 - pageOptions: [] + pageOptions: [], + allColumns: null, + reseting: false } UNSAFE_componentWillMount () { - const { menuType, memberLevel, setting, fields, columns } = this.props + const { setting, columns, fields, colsCtrls } = this.props let radio = 5 // 铏氬寲姣斾緥 let _format = false // 鏄惁铏氬寲澶勭悊 let rowspans = [] let orderfields = {} - if (window.GLOB.dataFormat && menuType !== 'HS' && memberLevel) { + if (window.GLOB.dataFormat) { _format = true - if (memberLevel >= 30) { + if (window.GLOB.memberLevel >= 30) { radio = 20 - } else if (memberLevel >= 20) { + } else if (window.GLOB.memberLevel >= 20) { radio = 10 } } - let getColumns = (cols) => { - return cols.map(item => { - let cell = null - - if (item.type === 'colspan') { - cell = { title: item.label, align: item.Align } - cell.children = getColumns(item.subcols) - } else { - if (item.rowspan === 'true') { - rowspans.push(item.field) - } - if (item.type === 'index') { - item.field = '$Index' - item.type = 'text' - } else if (_format && !Math.floor(Math.random() * radio)) { - item.blur = true - } - - if (item.marks && item.marks.length === 0) { - item.marks = '' - } + let _columns = [] - if (item.field) { - orderfields[item.uuid] = item.field - } - - cell = { - 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, - triggerLink: this.triggerLink - }) - } - } + if (setting.tableMode !== 'fast') { + let getColumns = (cols) => { + 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) + } else { + if (item.rowspan === 'true') { + rowspans.push(item.field) + } + if (item.type === 'index') { + item.field = '$Index' + item.type = 'text' + } else if (_format && !Math.floor(Math.random() * radio)) { + item.blur = true + } - return cell + if (item.field) { + orderfields[item.uuid] = item.field + } else if (item.sortField) { + orderfields[item.uuid] = item.sortField + } + + cell = { + $key: item.uuid, + align: item.Align, + dataIndex: item.uuid, + title: item.label, + sorter: (item.field || item.sortField) && item.IsSort === 'true', + width: item.Width || 120, + onCell: record => ({ + record, + col: item, + config: item.type === 'custom' ? {setting, columns: fields} : null, + triggerLink: this.triggerLink + }) + } + } + + return cell + }) + } + _columns = getColumns(columns) + } else { + let fields = [] + columns.forEach(item => { + if (!item.field || fields.includes(item.field)) return + fields.push(item.field) + + _columns.push({ + $key: item.uuid, + align: item.Align, + dataIndex: item.field, + title: item.label, + sorter: item.IsSort === 'true', + width: item.Width || 120 + }) }) - } - let _columns = getColumns(columns) + orderfields = null + } if (rowspans.length === 0) { rowspans = null @@ -479,13 +569,6 @@ return uuid.join('') }) () - 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) - } - let size = (setting.pageSize || 10) + '' let pageOptions = ['10', '25', '50', '100', '500', '1000'] @@ -494,9 +577,21 @@ pageOptions = pageOptions.sort((a, b) => a - b) } + if (setting.maxPageSize) { + pageOptions = pageOptions.filter(item => item <= setting.maxPageSize) + } + + let allColumns = null + if (colsCtrls) { + rowspans = null + allColumns = [..._columns] + _columns = this.getCurColumns(_columns, this.props.allSearch) + } + this.setState({ pageSize: setting.pageSize || 10, pageOptions, + allColumns, columns: _columns, rowspans, tableId, @@ -508,10 +603,32 @@ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) } + UNSAFE_componentWillReceiveProps(nextProps) { + const { allSearch } = this.props + const { allColumns } = this.state + + if (allSearch && !is(fromJS(allSearch), fromJS(nextProps.allSearch))) { + this.setState({ + reseting: true, + columns: this.getCurColumns(allColumns, nextProps.allSearch) + }, () => { + this.setState({reseting: false}) + }) + } + } + componentDidMount () { - MKEmitter.addListener('mkCheckTopLine', this.mkCheckTopLine) + const { autoMatic } = this.props + MKEmitter.addListener('mkCheckAll', this.mkCheckAll) MKEmitter.addListener('resetTable', this.resetTable) + + if (autoMatic === true) { + MKEmitter.addListener('autoQueryData', this.autoQueryData) + MKEmitter.addListener('autoSelectData', this.autoSelectData) + } + + MKEmitter.addListener('mkCheckTopLine', this.mkCheckTopLine) } /** @@ -521,23 +638,139 @@ this.setState = () => { return } - MKEmitter.removeListener('mkCheckTopLine', this.mkCheckTopLine) MKEmitter.removeListener('mkCheckAll', this.mkCheckAll) MKEmitter.removeListener('resetTable', this.resetTable) + MKEmitter.removeListener('autoQueryData', this.autoQueryData) + MKEmitter.removeListener('autoSelectData', this.autoSelectData) + MKEmitter.removeListener('mkCheckTopLine', this.mkCheckTopLine) } - mkCheckTopLine = (menuId) => { + getCurColumns = (columns, allSearch) => { + const { colsCtrls } = this.props + + let values = {} + allSearch.forEach(item => { + values[item.key] = item.value + }) + let cols = null + colsCtrls.some(item => { + let originVal = item.field.map(f => values[f] || '').join('') + let contrastVal = item.contrastValue + let result = false + + if (item.match === '=') { + result = originVal === contrastVal + } else if (item.match === '!=') { + result = originVal !== contrastVal + } else 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) { + return columns.filter(col => cols.includes(col.$key)) + } + + return columns + } + + autoSelectData = (id, index) => { + if (id !== this.props.MenuID) return + + const { pageSize, pageIndex } = this.state + + let i = index - (pageIndex - 1) * pageSize - 1 + + if (this.props.data[i]) { + this.changeRow(this.props.data[i], i) + MKEmitter.emit('autoTransSelectData', this.props.MenuID, this.props.data[i]) + } else { + MKEmitter.emit('autoMaticOver', this.props.MenuID) + } + } + + autoQueryData = (id, index) => { + if (id !== this.props.MenuID) return + + const { total } = this.props + const { pageSize } = this.state + + if (index !== 1 && (!total || index > total)) { + MKEmitter.emit('autoMaticOver', this.props.MenuID) + return + } + + console.clear() + + let pageIndex = Math.ceil(index / pageSize) + + this.setState({ + pageIndex: pageIndex, + selectedRowKeys: [], + activeIndex: null + }) + + this.props.refreshdata({pageIndex}) + } + + mkCheckTopLine = (menuId, id, type) => { const { MenuID, data, setting } = this.props if (MenuID !== menuId || !data || data.length === 0) return - if (data[0].$disabled) return - this.changedata(0) - this.setState({ selectedRowKeys: [0], activeIndex: 0 }) - this.props.chgSelectData([data[0]]) + if (type === 'sign') { + let index = '' + let keys = [] + let items = [] + data.forEach((item, i) => { + if (!item.$disabled && item.selected === 'true') { + items.push(item) + keys.push(i) + index = i + } + }) + + this.changedata(index) + this.setState({ selectedRowKeys: keys, activeIndex: index }) + this.props.chgSelectData(items) + + if (setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', MenuID, items, data.length === keys.length) + } + return + } + + let index = 0 + if (id) { + index = data.findIndex(item => item.$$uuid === id) + if (index === -1) { + index = 0 + } + } + + if (data[index].$disabled) return + + this.changedata(index) + this.setState({ selectedRowKeys: [index], activeIndex: index }) + this.props.chgSelectData([data[index]]) if (setting.$hasSyncModule) { - MKEmitter.emit('syncBalconyData', MenuID, [data[0]], data.length === 1) + MKEmitter.emit('syncBalconyData', MenuID, [data[index]], data.length === 1) } } @@ -573,9 +806,7 @@ } // 瀛楁閫忚 - triggerLink = (e, item, record) => { - e.stopPropagation() - + triggerLink = (item, record) => { let __param = { $searchkey: item.field, $searchval: record[item.field] || '', @@ -593,56 +824,38 @@ tabmenu.param = __param - if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) { - MKEmitter.emit('modifyTabs', tabmenu, 'replace') - } else { - MKEmitter.emit('modifyTabs', tabmenu, 'plus', true) - } + MKEmitter.emit('modifyTabs', tabmenu, true) } else if (item.linkurl) { let src = item.linkurl - if (src.indexOf('paramsmain/') > -1) { - try { - let _url = item.linkurl.split('paramsmain/')[0] + 'paramsmain/' - let _param = JSON.parse(window.decodeURIComponent(window.atob(item.linkurl.split('paramsmain/')[1]))) - _param.UserID = sessionStorage.getItem('UserID') - _param.LoginUID = sessionStorage.getItem('LoginUID') - _param.User_Name = sessionStorage.getItem('User_Name') - _param.param = __param - src = _url + window.btoa(window.encodeURIComponent(JSON.stringify(_param))) - } catch (e) { - console.warn('鑿滃崟鍙傛暟瑙f瀽閿欒锛�') - } - } else { - let con = '?' + let con = '?' - if (/\?/ig.test(src)) { - con = '&' - } - - if (item.linkfields && item.linkfields.length > 0) { - item.linkfields.forEach(field => { - if (field.toLowerCase() === 'id') return - con += `${field}=${record[field] || ''}&` - }) - } - - src = src + `${con}id=${record.$$uuid}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` + if (/\?/ig.test(src)) { + con = '&' } + + if (item.linkfields && item.linkfields.length > 0) { + item.linkfields.forEach(field => { + if (field.toLowerCase() === 'id') return + con += `${field}=${record[field] || ''}&` + }) + } + + src = src + `${con}id=${record.$$uuid}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` window.open(src) } } - /** - * - */ - onSelectChange = selectedRowKeys => { + onSelectChange = (selectedRowKeys, e) => { const { setting, MenuID, data } = this.props + + if (this.state.pickup) return let index = '' let _activeIndex = null if (selectedRowKeys.length > 0) { + selectedRowKeys = selectedRowKeys.filter(key => !data[key].$disabled) index = selectedRowKeys.slice(-1)[0] } @@ -654,7 +867,7 @@ this.setState({ selectedRowKeys, activeIndex: _activeIndex }) - let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index) && !item.$disabled) + let selects = data.filter((item, _index) => selectedRowKeys.includes(_index) && !item.$disabled) this.props.chgSelectData(selects) if (setting.$hasSyncModule) { @@ -695,7 +908,7 @@ } let selects = this.props.data.filter((item, _index) => newkeys.includes(_index) && !item.$disabled) - + this.props.chgSelectData(selects) if (setting.$hasSyncModule) { @@ -714,19 +927,21 @@ pickup: false }) - sorter.field = orderfields[sorter.field] || '' + if (orderfields) { + sorter.field = orderfields[sorter.field] || '' + } this.props.refreshdata(pagination, filters, sorter) } changedata = (index) => { - const { MenuID, data, setting } = this.props + const { MenuID, data } = this.props let _id = '' let _data = '' if (data && data.length > 0 && index !== '') { - _id = data[index][setting.primaryKey] || '' + _id = data[index].$$uuid || '' _data = data[index] || '' } @@ -735,13 +950,52 @@ MKEmitter.emit('resetSelectLine', MenuID, _id, _data) } - resetTable = (id, repage) => { - const { MenuID } = this.props + resetTable = (id, type, Index) => { + const { MenuID, setting, data } = this.props if (id !== MenuID) return - if (repage === 'false') { + if (type === 'delete') { + let selectKeys = fromJS(this.state.selectedRowKeys).toJS() + let activeKey = this.state.activeIndex + + let trans = activeKey === Index + let _item = null + let selects = [] + + if (setting.tableType) { + selectKeys = selectKeys.filter(key => key !== Index) + selectKeys = selectKeys.map(key => key > Index ? key - 1 : key) + + selects = selectKeys.map(key => data[key]).filter(Boolean) + + activeKey = selectKeys.length ? selectKeys[selectKeys.length - 1] : null + + if (trans && selects.length) { + _item = selects[selects.length - 1] + } + } + + this.setState({ selectedRowKeys: selectKeys, activeIndex: activeKey }) + + this.props.chgSelectData(selects) + + if (trans) { + MKEmitter.emit('resetSelectLine', MenuID, (_item ? _item.$$uuid : ''), _item) + } + + if (setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', MenuID, selects, data.length === selects.length) + } + } else if (type === 'false') { this.setState({ + selectedRowKeys: [], + activeIndex: null, + pickup: false + }) + } else if (type === 'repage') { + this.setState({ + pageIndex: Index, selectedRowKeys: [], activeIndex: null, pickup: false @@ -822,12 +1076,14 @@ if (!setting.doubleClick) return if (record.$disabled) return - MKEmitter.emit('triggerBtnId', setting.doubleClick, [record]) + MKEmitter.emit('triggerBtnId', setting.doubleClick, [record], 'linkbtn') } render() { const { setting, statFValue, lineMarks, data } = this.props - const { selectedRowKeys, activeIndex, pickup, tableId, pageOptions } = this.state + const { selectedRowKeys, activeIndex, pickup, pageOptions, columns, reseting } = this.state + + if (reseting) return null // 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙�� let rowSelection = null @@ -839,11 +1095,14 @@ } } - const components = { + let components = { body: { - row: BodyRow, - cell: BodyCell + row: BodyRow } + } + + if (setting.tableMode !== 'fast') { + components.body.cell = BodyCell } // 鏁版嵁鏀惰捣鏃讹紝杩囨护宸查�夋暟鎹� @@ -863,7 +1122,7 @@ 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} 鏉 } } @@ -874,26 +1133,50 @@ } let height = setting.height || false + if (height && height <= 100) { + height = height + 'vh' + } + let loading = this.props.loading + if (setting.mask === 'hidden') { + loading = false + } + + let fixed = '' + if (setting.colfixed && setting.colfixed.length) { + if (setting.colfixed.includes('first')) { + fixed = 'mk-fixed-first-col' + } + if (setting.colfixed.includes('last')) { + fixed += ' mk-fixed-last-col' + } + } + + 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 ( - <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''}`} id={tableId}> + <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} style={style}> {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ? <Switch title="鏀惰捣" className="main-pickup" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} /> : null } <Table components={components} - style={setting.style} size={setting.size || 'middle'} bordered={setting.bordered !== 'false'} rowSelection={rowSelection} - columns={this.state.columns} + columns={columns} dataSource={_data} - loading={this.props.loading} + loading={loading} scroll={{ x: '100%', y: height }} onRow={(record, index) => { return { - lineMarks, + lineMarks: setting.tableMode !== 'fast' ? lineMarks : null, data: record, + title: setting.tipField ? record[setting.tipField] : '', className: index === activeIndex ? ' mk-row-active ' : '', onClick: () => {this.changeRow(record, index)}, onDoubleClick: () => {this.doubleClickLine(record)} @@ -908,15 +1191,4 @@ } } -const mapStateToProps = (state) => { - return { - menuType: state.editLevel, - memberLevel: state.memberLevel - } -} - -const mapDispatchToProps = () => { - return {} -} - -export default connect(mapStateToProps, mapDispatchToProps)(NormalTable) \ No newline at end of file +export default NormalTable \ No newline at end of file -- Gitblit v1.8.0