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