From d21470fe80e265cda2c355f636c3258eb0f56636 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 12 五月 2020 18:31:18 +0800 Subject: [PATCH] 2020-05-12 --- src/tabviews/zshare/normalTable/index.jsx | 320 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 269 insertions(+), 51 deletions(-) diff --git a/src/tabviews/zshare/normalTable/index.jsx b/src/tabviews/zshare/normalTable/index.jsx index 9bee562..8816a34 100644 --- a/src/tabviews/zshare/normalTable/index.jsx +++ b/src/tabviews/zshare/normalTable/index.jsx @@ -1,8 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import md5 from 'md5' -import { Table, message, Affix, Button, Typography, Modal } from 'antd' +import { Table, message, Affix, Button, Typography, Modal, Icon } from 'antd' import './index.scss' +import '@/assets/css/table.scss' const { Paragraph } = Typography @@ -17,6 +18,7 @@ menuType: PropTypes.any, // 涓夌骇鑿滃崟绫诲瀷锛孒S闇�鐗规畩澶勭悊 tableId: PropTypes.string, // 鍒楄〃Id dict: PropTypes.object, // 瀛楀吀椤� + config: PropTypes.object, // 椤甸潰閰嶇疆 MenuID: PropTypes.string, // 鑿滃崟Id setting: PropTypes.object, // 琛ㄦ牸鍏ㄥ眬璁剧疆锛歵ableType锛堣〃鏍兼槸鍚﹀彲閫夈�佸崟閫夈�佸閫夛級銆乧olumnfixed锛堝垪鍥哄畾锛夈�乤ctionfixed锛堟寜閽浐瀹氾級 pickup: PropTypes.any, // 鏁版嵁鏀惰捣 @@ -28,6 +30,7 @@ buttonTrigger: PropTypes.func, // 琛ㄦ牸涓寜閽Е鍙戞搷浣� linkTrigger: PropTypes.func, // 瀛楁閫忚 handleTableId: PropTypes.func, // 鏁版嵁鍒囨崲 + memberLevel: PropTypes.any, // 浼氬憳绛夌骇 pagination: PropTypes.any // 鏁版嵁鍒嗛〉 } @@ -37,18 +40,70 @@ pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 columns: null, // 鏄剧ず鍒� imgShow: false, // 鍥剧墖鏀惧ぇ妯℃�佹 - imgSrc: '' // 鍥剧墖璺緞 + imgSrc: '', // 鍥剧墖璺緞 + lineMarks: null, // 琛屾爣璁� + colMap: null // 鍒椾俊鎭紙鍏ㄩ儴锛� } UNSAFE_componentWillMount () { - const { columns, menuType } = this.props + const { menuType, config, memberLevel } = this.props + let columns = JSON.parse(JSON.stringify(this.props.columns)) + let lineMarks = [] let _columns = [] - + let colMap = new Map() // 鐢ㄤ簬鑾峰彇瀛楁淇℃伅 + let radio = 5 // 铏氬寲姣斾緥 + let _format = false // 鏄惁铏氬寲澶勭悊 + + if (window.GLOB.dataFormat && menuType !== 'HS' && memberLevel) { + _format = true + + if (memberLevel >= 30) { + radio = 20 + } else if (memberLevel >= 20) { + radio = 10 + } + } + + config.columns.forEach(col => { + if (!col.field) return + + colMap.set(col.field, col) + }) + columns.forEach((item, index) => { if (item.hidden === true || item.Hide === 'true') return - if (window.GLOB.dataFormat && menuType !== 'HS' && !Math.floor(Math.random() * 5)) { + if (_format && !Math.floor(Math.random() * radio)) { item.format = true + } + + if (item.marks) { + item.marks = item.marks.filter(mark => { + let originField = colMap.get(mark.field) + let contrastField = mark.contrastType === 'dynamic' ? colMap.get(mark.contrastField) : '' + + if (!originField || (mark.contrastType === 'dynamic' && !contrastField)) return false + if (contrastField && originField.type !== contrastField.type) return false + if (mark.contrastType === 'static') { + if (originField.type === 'text' && typeof(mark.contrastValue) === 'number') { + return false + } else if (originField.type === 'number' && typeof(mark.contrastValue) === 'string') { + return false + } else if (!['number', 'text'].includes(originField.type)) { + return false + } + } + + if (mark.signType === 'line') { + lineMarks.push(mark) + return false + } + return true + }) + + if (item.marks.length === 0) { + item.marks = '' + } } let cell = { @@ -74,7 +129,9 @@ }) this.setState({ - columns: _columns + columns: _columns, + lineMarks: lineMarks, + colMap: colMap }) } @@ -107,28 +164,110 @@ this.props.linkTrigger(tabmenu) } + getMark = (record, marks) => { + const { colMap } = this.state + let className = '' + let isIcon = false + let position = 'back' + let icon = '' + + marks.some(mark => { + let originType = colMap.get(mark.field).type + + let originVal = record.hasOwnProperty(mark.field) ? record[mark.field] : '' + let contrastVal = '' + if (mark.contrastType === 'static') { + contrastVal = mark.contrastValue + } else { + contrastVal = record.hasOwnProperty(mark.contrastField) ? record[mark.contrastField] : '' + } + + if (originType === 'text') { + originVal = '' + originVal + contrastVal = '' + contrastVal + } else if (originType === 'number' && originVal !== '' && contrastVal !== '') { + try { + originVal = parseFloat(originVal) + contrastVal = parseFloat(contrastVal) + if (isNaN(originVal) || isNaN(contrastVal)) { + originVal = '' + } + } catch { + originVal = '' + } + } + + if (originVal === '' || contrastVal === '') return false + + if (mark.match === '=' && originVal === contrastVal) { + className = mark.color[1] + } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) { + className = mark.color[1] + } else if (mark.match === '>' && originVal > contrastVal) { + className = mark.color[1] + } else if (mark.match === '<' && originVal < contrastVal) { + className = mark.color[1] + } + + if (!className) return false + + if (mark.signType === 'font') { + className = 'font ' + className + } else if (mark.signType === 'background') { + className = 'background ' + className + } else if (mark.signType === 'icon') { + isIcon = true + if (mark.position === 'front') { + position = 'front' + } + icon = <Icon className={'font ' + className} type={mark.icon} /> + className = '' + } + + return true + }) + + return { + className: className, + isIcon: isIcon, + position: position, + icon: icon + } + } + getContent = (item, record) => { if (item.type === 'text') { let content = '' - let match = false + let className = '' if (item.field && record.hasOwnProperty(item.field)) { content = `${record[item.field]}` } + + content = content ? (item.prefix || '') + content + (item.postfix || '') : '' - if (content && item.matchVal && content.indexOf(item.matchVal) > 0) { - match = true + if (item.marks) { + let result = this.getMark(record, item.marks) + + if (result.className) { + className = result.className + } else if (result.isIcon) { + if (result.position === 'front') { + content = <span>{result.icon} {content}</span> + } else { + content = <span>{content} {result.icon}</span> + } + } } - content = (item.prefix || '') + content + (item.postfix || '') - if (item.format) { + className = '' content = md5(content) } if (item.linkThdMenu) { return ( - <div className={match ? item.color : ''}> - <div className="background link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div> + <div className={className}> + <div className="baseboard link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div> <div className="content link-menu" style={{ minWidth: (item.Width || 120) + 'px' }} onDoubleClick={() => this.triggerLink(item, record)}> {content} </div> @@ -136,8 +275,8 @@ ) } else { return ( - <div className={match ? item.color : ''}> - <div className="background"></div> + <div className={className}> + <div className="baseboard"></div> <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}> {content} </div> @@ -146,7 +285,7 @@ } } else if (item.type === 'number') { let content = '' - let match = false + let className = '' if (item.field && record.hasOwnProperty(item.field)) { try { @@ -160,26 +299,6 @@ } if (content !== '') { - if (item.match && item.matchVal) { - if (item.match === '>') { - if (content > item.matchVal) { - match = true - } - } else if (item.match === '<') { - if (content < item.matchVal) { - match = true - } - } else if (item.match === '>=') { - if (content >= item.matchVal) { - match = true - } - } else if (item.match === '<=') { - if (content <= item.matchVal) { - match = true - } - } - } - if (item.format === 'percent') { content = content * 100 } @@ -193,14 +312,29 @@ content = (item.prefix || '') + content + (item.postfix || '') } + if (item.marks) { + let result = this.getMark(record, item.marks) + + if (result.className) { + className = result.className + } else if (result.isIcon) { + if (result.position === 'front') { + content = <span>{result.icon} {content}</span> + } else { + content = <span>{content} {result.icon}</span> + } + } + } + if (item.format) { + className = '' content = md5(content) } if (item.linkThdMenu) { return ( - <div className={match ? item.color : ''}> - <div className="background link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div> + <div className={className}> + <div className="baseboard link-menu" onDoubleClick={() => this.triggerLink(item, record)}></div> <div className="content link-menu" style={{ minWidth: (item.Width || 120) + 'px' }} onDoubleClick={() => this.triggerLink(item, record)}> {content} </div> @@ -208,8 +342,8 @@ ) } else { return ( - <div className={match ? item.color : ''}> - <div className={'background'}></div> + <div className={className}> + <div className="baseboard"></div> <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}> {content} </div> @@ -238,24 +372,20 @@ ) } else if (item.type === 'textarea') { let content = '' - let match = false + if (item.field && record.hasOwnProperty(item.field)) { content = `${record[item.field]}` } - if (content && item.matchVal && content.indexOf(item.matchVal) > 0) { - match = true - } - - content = (item.prefix || '') + content + (item.postfix || '') + content = content ? (item.prefix || '') + content + (item.postfix || '') : '' if (item.format) { content = md5(content) } return ( - <div className={match ? item.color : ''}> - <div className="background"></div> + <div> + <div className="baseboard"></div> <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}> {content ? <Paragraph copyable ellipsis={{ rows: 3, expandable: true }}>{content}</Paragraph> : null } </div> @@ -308,6 +438,20 @@ content = (col.prefix || '') + content + (col.postfix || '') } + if (col.marks) { + let result = this.getMark(record, col.marks) + + if (result.className && result.className.indexOf('font') > -1) { + content = <span className={result.className}>{content}</span> + } else if (result.isIcon) { + if (result.position === 'front') { + content = <span>{result.icon} {content}</span> + } else { + content = <span>{content} {result.icon}</span> + } + } + } + if (item.format) { content = md5(content) } @@ -324,6 +468,32 @@ photos.forEach(photo => { images.push({url: photo, scale: col.scale === 'true', maxHeight: col.maxHeight || 128}) }) + } else if (col.type === 'text') { + let content = record[col.field] + + if (content !== '') { + content = (col.prefix || '') + record[col.field] + (col.postfix || '') + } + + if (col.marks) { + let result = this.getMark(record, col.marks) + + if (result.className && result.className.indexOf('font') > -1) { + content = <span className={result.className}>{content}</span> + } else if (result.isIcon) { + if (result.position === 'front') { + content = <span>{result.icon} {content}</span> + } else { + content = <span>{content} {result.icon}</span> + } + } + } + + if (item.format) { + content = md5(content) + } + + contents.push(content) } else { let content = record[col.field] @@ -528,7 +698,7 @@ render() { const { setting, pickup, pagination } = this.props - let { selectedRowKeys } = this.state + const { selectedRowKeys, lineMarks, colMap } = this.state // 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙�� let rowSelection = null @@ -573,10 +743,9 @@ showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}` } } - // rowClassName={(record) => record.$className || ''} return ( - <div className="normal-data-table"> + <div className="normal-data-table mingke-table"> {offset && <Affix offsetTop={offset} className="fix-header"> <Table size="middle" @@ -598,6 +767,55 @@ rowSelection={rowSelection} columns={this.state.columns} dataSource={_data} + rowClassName={(record) => { + if (lineMarks.length === 0) return '' + + let className = '' + + lineMarks.some(mark => { + let originType = colMap.get(mark.field).type + + let originVal = record.hasOwnProperty(mark.field) ? record[mark.field] : '' + let contrastVal = '' + if (mark.contrastType === 'static') { + contrastVal = mark.contrastValue + } else { + contrastVal = record.hasOwnProperty(mark.contrastField) ? record[mark.contrastField] : '' + } + + if (originType === 'text') { + originVal = '' + originVal + contrastVal = '' + contrastVal + } else if (originType === 'number' && originVal !== '' && contrastVal !== '') { + try { + originVal = parseFloat(originVal) + contrastVal = parseFloat(contrastVal) + if (isNaN(originVal) || isNaN(contrastVal)) { + originVal = '' + } + } catch { + originVal = '' + } + } + + if (originVal === '' || contrastVal === '') return false + + if (mark.match === '=' && originVal === contrastVal) { + className = 'background ' + mark.color[1] + } else if (mark.match === 'like' && originVal.indexOf(contrastVal) > -1) { + className = 'background ' + mark.color[1] + } else if (mark.match === '>' && originVal > contrastVal) { + className = 'background ' + mark.color[1] + } else if (mark.match === '<' && originVal < contrastVal) { + className = 'background ' + mark.color[1] + } + + if (!className) return false + return true + }) + + return className + }} loading={this.props.loading} scroll={{ x: '100%', y: false }} onRow={(record, index) => { -- Gitblit v1.8.0