From 3683e1475e8d74f690172a468518d88d91a69ccc Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 20 八月 2020 20:15:48 +0800
Subject: [PATCH] 2020-08-20
---
src/tabviews/zshare/normalTable/index.jsx | 823 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 711 insertions(+), 112 deletions(-)
diff --git a/src/tabviews/zshare/normalTable/index.jsx b/src/tabviews/zshare/normalTable/index.jsx
index ca4838c..cddb597 100644
--- a/src/tabviews/zshare/normalTable/index.jsx
+++ b/src/tabviews/zshare/normalTable/index.jsx
@@ -1,38 +1,115 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Table, message, Affix, Button, Typography } from 'antd'
+import md5 from 'md5'
+import { is, fromJS } from 'immutable'
+import {connect} from 'react-redux'
+import { Table, message, Affix, Button, Typography, Modal, Icon } from 'antd'
+
+import { modifyTabview } from '@/store/action'
+import '@/assets/css/table.scss'
import './index.scss'
const { Paragraph } = Typography
-export default class MainTable extends Component {
+class NormalTable extends Component {
+ static defaultProps = {
+ total: 0
+ }
+
static propTpyes = {
tableId: PropTypes.string, // 鍒楄〃Id
+ resetTable: PropTypes.bool, // 琛ㄦ牸閲嶇疆
+ pageSize: PropTypes.any, // 姣忛〉鏁版嵁
dict: PropTypes.object, // 瀛楀吀椤�
+ config: PropTypes.object, // 椤甸潰閰嶇疆
MenuID: PropTypes.string, // 鑿滃崟Id
setting: PropTypes.object, // 琛ㄦ牸鍏ㄥ眬璁剧疆锛歵ableType锛堣〃鏍兼槸鍚﹀彲閫夈�佸崟閫夈�佸閫夛級銆乧olumnfixed锛堝垪鍥哄畾锛夈�乤ctionfixed锛堟寜閽浐瀹氾級
pickup: PropTypes.any, // 鏁版嵁鏀惰捣
columns: PropTypes.array, // 琛ㄦ牸鍒�
data: PropTypes.any, // 琛ㄦ牸鏁版嵁
- total: PropTypes.number, // 鎬绘暟
+ total: PropTypes.any, // 鎬绘暟
loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓�
refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂�
buttonTrigger: PropTypes.func, // 琛ㄦ牸涓寜閽Е鍙戞搷浣�
- handleTableId: PropTypes.func // 鏁版嵁鍒囨崲
+ handleTableId: PropTypes.func, // 鏁版嵁鍒囨崲
+ chgSelectData: PropTypes.func, // 鏁版嵁鍒囨崲
}
state = {
selectedRowKeys: [], // 琛ㄦ牸涓�変腑琛�
pageIndex: 1, // 鍒濆椤甸潰绱㈠紩
pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟
- columns: null // 鏄剧ず鍒�
+ columns: null, // 鏄剧ず鍒�
+ imgShow: false, // 鍥剧墖鏀惧ぇ妯℃�佹
+ imgSrc: '', // 鍥剧墖璺緞
+ lineMarks: null, // 琛屾爣璁�
+ colMap: null, // 鍒椾俊鎭紙鍏ㄩ儴锛�
+ activeIndex: null // 鏍囪褰撳墠閫変腑琛�
}
UNSAFE_componentWillMount () {
- const { columns } = this.props
+ const { menuType, config, memberLevel, pageSize } = this.props
+ let columns = JSON.parse(JSON.stringify(this.props.columns))
+ let lineMarks = []
let _columns = []
-
- columns.forEach(item => {
+ 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 (_format && !Math.floor(Math.random() * radio)) {
+ item.blur = 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
+ } else if (mark.signType === 'card') {
+ return false
+ }
+ return true
+ })
+
+ if (item.marks.length === 0) {
+ item.marks = ''
+ }
+ }
+
let cell = {
align: item.Align,
dataIndex: item.field || item.uuid,
@@ -43,78 +120,301 @@
return this.getContent(item, record)
}
}
+
+ if (item.fixed === true || item.fixed === 'true') {
+ if (index < columns.length / 2) {
+ cell.fixed = 'left'
+ } else {
+ cell.fixed = 'right'
+ }
+ }
+
_columns.push(cell)
})
this.setState({
- columns: _columns
+ columns: _columns,
+ pageSize: pageSize ? pageSize : 10,
+ lineMarks: lineMarks,
+ colMap: colMap
})
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ /**
+ * @description 涓婄骇鑿滃崟id鍙樺寲鏃讹紝鍒锋柊鏁版嵁
+ */
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ if (this.props.resetTable !== nextProps.resetTable) {
+ this.resetTable()
+ }
+ }
+
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ }
+
+ // 瀛楁閫忚
+ triggerLink = (item, record) => {
+ const { tabviews, MenuID } = this.props
+ let tabmenu = item.linkThdMenu
+ let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']
+
+ if (tabmenu.LinkUrl === 'CommonTable') {
+ tabmenu.type = 'CommonTable'
+ } else if (tabmenu.LinkUrl === 'DataManage') {
+ tabmenu.type = 'DataManage'
+ } else if (tabmenu.LinkUrl && iframes.includes(tabmenu.LinkUrl.split('?')[0])) {
+ tabmenu.type = 'iframe'
+ }
+
+ if (tabmenu.type !== 'iframe') {
+ try {
+ tabmenu.PageParam = JSON.parse(tabmenu.PageParam)
+ } catch (e) {
+ tabmenu.PageParam = {}
+ }
+ tabmenu.type = tabmenu.PageParam.Template || tabmenu.type
+ }
+
+ tabmenu.param = {
+ searchkey: item.field,
+ searchval: record[item.field] || ''
+ }
+
+ tabmenu.selected = true
+
+ let index = 0
+ let isexit = false
+ let tabs = tabviews.map((tab, i) => {
+ tab.selected = false
+
+ if (tab.MenuID === MenuID) {
+ index = i
+ } else if (tab.MenuID === tabmenu.MenuID) {
+ tab.param = tabmenu.param
+ tab.selected = true
+ isexit = true
+ }
+
+ return tab
+ })
+
+ if (!isexit) {
+ tabs.splice(index + 1, 0, tabmenu)
+ }
+
+ this.props.modifyTabview(tabs)
+ }
+
+ getMark = (record, marks) => {
+ const { colMap } = this.state
+ let className = ''
+ let isIcon = false
+ let position = 'back'
+ let icon = ''
+
+ marks.some(mark => {
+ let originField = colMap.get(mark.field)
+
+ if (!originField) return false
+
+ let originType = originField.type || 'text'
+
+ 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 === '!=' && 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]}`
}
- if (content && item.matchVal && content.indexOf(item.matchVal) > 0) {
- match = true
+ if (content !== '') {
+ if (item.format === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(content)) {
+ content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)}`
+ } else if (item.format === '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)}`
+ }
+
+ content = (item.prefix || '') + content + (item.postfix || '')
}
+
+ if (item.marks) {
+ let result = this.getMark(record, item.marks)
- content = (item.prefix || '') + content + (item.postfix || '')
-
- return (
- <div className={match ? item.color : ''}>
- <div className="background"></div>
- <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
- {content}
- </div>
- </div>
- )
- } else if (item.type === 'number') {
- let content = ''
- let match = false
- if (item.field && record.hasOwnProperty(item.field)) {
- content = +record[item.field]
- }
-
- if (content && 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 (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 (content && item.format === 'thdSeparator') {
- content = `${content}`
- content = content.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+ if (item.blur) {
+ className = ''
+ content = md5(content)
}
- content = (item.prefix || '') + content + (item.postfix || '')
-
- return (
- <div className={match ? item.color : ''}>
- <div className={'background'}></div>
- <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
- {content}
+ if (item.linkThdMenu) {
+ return (
+ <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>
</div>
- </div>
- )
+ )
+ } else {
+ return (
+ <div className={className}>
+ <div className="baseboard"></div>
+ <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
+ {content}
+ </div>
+ </div>
+ )
+ }
+ } else if (item.type === 'number') {
+ let content = ''
+ let className = ''
+
+ if (item.field && record.hasOwnProperty(item.field)) {
+ try {
+ content = parseFloat(record[item.field])
+ if (isNaN(content)) {
+ content = ''
+ }
+ } catch {
+ content = ''
+ }
+ }
+
+ if (content !== '') {
+ if (item.format === 'percent') {
+ content = content * 100
+ }
+
+ content = content.toFixed(item.decimal || 0)
+
+ if (item.format === 'thdSeparator') {
+ content = content.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+ }
+
+ 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.blur) {
+ className = ''
+ content = md5(content)
+ }
+
+ if (item.linkThdMenu) {
+ return (
+ <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>
+ </div>
+ )
+ } else {
+ return (
+ <div className={className}>
+ <div className="baseboard"></div>
+ <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
+ {content}
+ </div>
+ </div>
+ )
+ }
} else if (item.type === 'picture') {
let photos = ''
if (item.field && record.hasOwnProperty(item.field)) {
@@ -122,31 +422,74 @@
} else {
photos = ''
}
+
+ let maxHeight = item.maxHeight || 128
return (
<div className="picture-col" style={{ minWidth: (item.Width || 120) + 'px' }}>
{photos && photos.map((url, i) => {
- return <img key={`${i}`} src={url} alt=""/>
+ if (item.scale === 'true') {
+ return <img style={{maxHeight: maxHeight}} className="image-scale" onClick={this.imgScale} key={`${i}`} src={url} alt=""/>
+ } else {
+ return <img style={{maxHeight: maxHeight}} key={`${i}`} src={url} alt=""/>
+ }
})}
</div>
)
} 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 = content ? (item.prefix || '') + content + (item.postfix || '') : ''
+
+ if (item.blur) {
+ content = md5(content)
}
- content = (item.prefix || '') + content + (item.postfix || '')
-
return (
- <div className={match ? item.color : ''}>
- <div className="background"></div>
+ <div>
<div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
{content ? <Paragraph copyable ellipsis={{ rows: 3, expandable: true }}>{content}</Paragraph> : null }
+ </div>
+ </div>
+ )
+ } else if (item.type === 'link') {
+ let content = ''
+ let _href = record[item.field] || ''
+
+ if (item.nameField && record.hasOwnProperty(item.nameField)) {
+ content = record[item.nameField]
+ }
+
+ if (!content && _href) {
+ content = _href
+ } else if (!_href) {
+ content = ''
+ }
+
+ if (item.joint === 'true' && _href) {
+ let _quary = `id=${record[this.props.setting.primaryKey]}&userid=${sessionStorage.getItem('UserID')}&appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`
+ let _param = ''
+
+ try {
+ _param = window.btoa(_quary)
+ } catch {
+ _param = window.btoa(window.encodeURIComponent(_quary))
+ }
+
+ _href += '?' + _param
+ }
+
+ if (item.blur) {
+ content = md5(content)
+ }
+
+ return (
+ <div>
+ <div className="content" style={{ minWidth: (item.Width || 120) + 'px' }}>
+ {content ? <a href={_href} target="_blank" rel="noopener noreferrer">{content}</a> : null }
</div>
</div>
)
@@ -169,20 +512,56 @@
let contents = []
let images = []
- item.subColumn.forEach(col => {
+ item.subColumn.forEach((col, index) => {
if (!col.field || !record.hasOwnProperty(col.field)) return
+ if (index) {
+ col.Align = 'right'
+ }
- if (col.type === 'number' && typeof(record[col.field]) === 'number') {
- let content = record[col.field]
+ if (col.type === 'number') {
+ let content = ''
+ try {
+ content = parseFloat(record[col.field])
+ if (isNaN(content)) {
+ content = ''
+ }
+ } catch {
+ content = ''
+ }
+
+ if (content !== '') {
+ if (col.format === 'percent') {
+ content = content * 100
+ }
+
+ content = content.toFixed(col.decimal || 0)
+
+ if (col.format === 'thdSeparator') {
+ content = content.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+ }
- if (col.format === 'thdSeparator') {
- content = `${content}`
- 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 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>
+ }
+ }
+ }
- contents.push(content)
+ if (item.blur) {
+ content = md5(content)
+ }
+
+ contents.push({content, align: col.Align})
} else if (col.type === 'picture') {
let photos = []
try {
@@ -191,9 +570,83 @@
photos = []
}
- images.push(...photos)
+ photos.forEach(photo => {
+ images.push({url: photo, align: col.Align, scale: col.scale === 'true', maxHeight: col.maxHeight || 128})
+ })
+ } else if (col.type === 'text') {
+ let content = record[col.field]
+
+ if (content !== '') {
+ if (col.format === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(content)) {
+ content = `${content.substr(0, 4)}-${content.substr(5, 2)}-${content.substr(8, 2)}`
+ } else if (col.format === '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)}`
+ }
+
+ 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.blur) {
+ content = md5(content)
+ }
+
+ contents.push({content, align: col.Align})
+ } else if (col.type === 'link') {
+ let content = col.nameField ? record[col.nameField] : ''
+ let _href = record[col.field] || ''
+
+ if (!content && _href) {
+ content = _href
+ } else if (!_href) {
+ content = ''
+ }
+
+ if (col.joint === 'true' && _href) {
+ let _quary = `id=${record[this.props.setting.primaryKey]}&userid=${sessionStorage.getItem('UserID')}&appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`
+ let _param = ''
+
+ try {
+ _param = window.btoa(_quary)
+ } catch {
+ _param = window.btoa(window.encodeURIComponent(_quary))
+ }
+
+ _href += '?' + _param
+ }
+
+ if (item.blur) {
+ content = md5(content)
+ }
+
+ content = _href ? <a href={_href} target="_blank" rel="noopener noreferrer">{content}</a> : null
+
+ contents.push({content, align: col.Align})
} else {
- contents.push((col.prefix || '') + record[col.field] + (col.postfix || ''))
+ let content = record[col.field]
+
+ if (content !== '') {
+ content = (col.prefix || '') + record[col.field] + (col.postfix || '')
+ }
+
+ if (item.blur) {
+ content = md5(content)
+ }
+
+ contents.push({content, align: col.Align})
}
})
@@ -213,8 +666,8 @@
getCospanContent = (type, contents, images) => {
if (type === 'vertical') {
- return contents.map((content, index) => {
- return (<p key={index}>{content}</p>)
+ return contents.map((cont, index) => {
+ return (<p key={index} style={{textAlign: cont.align}}>{cont.content}</p>)
})
} else if (type === 'horizontal') {
return contents.map((content, index) => {
@@ -224,18 +677,18 @@
return (
<div className="content-fence">
<div className="content-fence-left">
- {contents.map((content, index) => {
+ {contents.map((cont, index) => {
if (index % 2 === 0) {
- return (<p key={index}>{content}</p>)
+ return (<p key={index} style={{textAlign: cont.align}}>{cont.content}</p>)
} else {
return ''
}
})}
</div>
<div className="content-fence-right">
- {contents.map((content, index) => {
+ {contents.map((cont, index) => {
if (index % 2 === 1) {
- return (<p key={index}>{content}</p>)
+ return (<p key={index} style={{textAlign: cont.align}}>{cont.content}</p>)
} else {
return ''
}
@@ -246,15 +699,19 @@
} else if (type === 'topPicBottomText') {
return (
<div className="content-fence">
- <div className="content-fence-top">
- {images.map((url, index) => {
- if (!url) return ''
- return (<img key={`${index}`} src={url} alt=""/>)
+ <div className="content-fence-top" style={images[0] ? {textAlign: images[0].align} : null}>
+ {images.map((_img, index) => {
+ if (!_img.url) return ''
+ if (_img.scale) {
+ return <img style={{maxHeight: _img.maxHeight}} className="image-scale" onClick={this.imgScale} key={`${index}`} src={_img.url} alt=""/>
+ } else {
+ return (<img style={{maxHeight: _img.maxHeight}} key={`${index}`} src={_img.url} alt=""/>)
+ }
})}
</div>
<div className="content-fence-bottom">
- {contents.map((content, index) => {
- return (<p key={index}>{content}</p>)
+ {contents.map((cont, index) => {
+ return (<p key={index} style={{textAlign: cont.align}}>{cont.content}</p>)
})}
</div>
</div>
@@ -262,19 +719,40 @@
} else if (type === 'leftPicRightText') {
return (
<div className="content-fence">
- <div className="content-fence-left">
- {images.map((url, index) => {
- if (!url) return ''
- return (<img key={`${index}`} src={url} alt=""/>)
+ <div className="content-fence-left" style={images[0] ? {textAlign: images[0].align} : null}>
+ {images.map((_img, index) => {
+ if (!_img.url) return ''
+ if (_img.scale) {
+ return <img style={{maxHeight: _img.maxHeight}} className="image-scale" onClick={this.imgScale} key={`${index}`} src={_img.url} alt=""/>
+ } else {
+ return (<img style={{maxHeight: _img.maxHeight}} key={`${index}`} src={_img.url} alt=""/>)
+ }
})}
</div>
<div className="content-fence-right">
- {contents.map((content, index) => {
- return (<p key={index}>{content}</p>)
+ {contents.map((cont, index) => {
+ return (<p key={index} style={{textAlign: cont.align}}>{cont.content}</p>)
})}
</div>
</div>
)
+ }
+ }
+
+ /**
+ * @description 鍥剧墖缂╂斁
+ */
+ imgScaleClose = () => {
+ this.setState({
+ imgShow: false
+ })
+ }
+ imgScale = (e) => {
+ if (e.target.nodeName === 'IMG') {
+ this.setState({
+ imgShow: true,
+ imgSrc: e.target.src
+ })
}
}
@@ -296,45 +774,78 @@
message.success(this.props.dict['main.copy.success'])
}
+ /**
+ *
+ */
onSelectChange = selectedRowKeys => {
+ const { setting } = this.props
+
let index = ''
+ let _activeIndex = null
if (selectedRowKeys.length > 0) {
index = selectedRowKeys[selectedRowKeys.length - 1]
}
+ if (setting.tableType === 'checkbox') {
+ _activeIndex = index === '' ? null : index
+ }
+
this.changedata(index)
- this.setState({ selectedRowKeys })
+ this.setState({ selectedRowKeys, activeIndex: _activeIndex })
+
+ let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index))
+
+ // selectedRowKeys.forEach(item => {
+ // selects.push(this.props.data[item])
+ // })
+
+ this.props.chgSelectData(selects)
}
+ /**
+ * @description 鐐瑰嚮鏁磋锛岃Е鍙戝垏鎹紝 鍒ゆ柇鏄惁鍙�夛紝鍗曢�夋垨澶氶�夛紝杩涜瀵瑰簲鎿嶄綔
+ */
changeRow = (record, index) => {
- // 鐐瑰嚮鏁磋锛岃Е鍙戝垏鎹紝鍒ゆ柇鏄惁鍙�夛紝鍗曢�夋垨澶氶�夛紝杩涜瀵瑰簲鎿嶄綔
if (!this.props.setting.tableType || this.props.pickup) return
let newkeys = JSON.parse(JSON.stringify(this.state.selectedRowKeys))
- let _re = newkeys.includes(index)
if (this.props.setting.tableType === 'radio') {
+ newkeys = [index]
this.changedata(index)
- this.setState({ selectedRowKeys: [index] })
+ this.setState({ selectedRowKeys: newkeys })
} else {
- if (_re) {
+ let _index = ''
+ if (newkeys.includes(index)) {
newkeys = newkeys.filter(item => item !== index)
- this.changedata('')
+ if (newkeys.length > 0) {
+ _index = newkeys[newkeys.length - 1]
+ }
+ this.changedata(_index)
} else {
+ _index = index
newkeys.push(index)
this.changedata(index)
}
- this.setState({ selectedRowKeys: newkeys })
+ this.setState({ selectedRowKeys: newkeys, activeIndex: _index !== '' ? _index : null })
}
+
+ let selects = this.props.data.filter((item, _index) => newkeys.includes(_index))
+ // newkeys.forEach(item => {
+ // selects.push(this.props.data[item])
+ // })
+
+ this.props.chgSelectData(selects)
}
changeTable = (pagination, filters, sorter) => {
this.setState({
pageIndex: pagination.current,
pageSize: pagination.pageSize,
- selectedRowKeys: []
+ selectedRowKeys: [],
+ activeIndex: null
})
this.props.refreshdata(pagination, filters, sorter)
}
@@ -358,13 +869,14 @@
resetTable = () => {
this.setState({
pageIndex: 1,
- selectedRowKeys: []
+ selectedRowKeys: [],
+ activeIndex: null
})
}
render() {
const { setting, pickup } = this.props
- let { selectedRowKeys } = this.state
+ const { selectedRowKeys, lineMarks, colMap, activeIndex } = this.state
// 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙��
let rowSelection = null
@@ -398,8 +910,20 @@
_data = _data.filter((item, index) => selectedRowKeys.includes(index))
}
+ let _pagination = false
+ if (setting.laypage !== 'false') {
+ _pagination = {
+ current: this.state.pageIndex,
+ pageSize: this.state.pageSize,
+ pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
+ showSizeChanger: true,
+ total: this.props.total,
+ showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}`
+ }
+ }
+
return (
- <div className="normal-data-table">
+ <div className="normal-data-table mingke-table">
{offset && <Affix offsetTop={offset} className="fix-header">
<Table
size="middle"
@@ -421,6 +945,60 @@
rowSelection={rowSelection}
columns={this.state.columns}
dataSource={_data}
+ rowClassName={(record) => {
+ let className = ''
+ if (setting.tableType === 'checkbox' && record.key === activeIndex) {
+ className = 'mk-row-active '
+ }
+
+ if (lineMarks.length === 0) return 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 === '!=' && 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) => {
@@ -429,16 +1007,37 @@
}
}}
onChange={this.changeTable}
- pagination={{
- current: this.state.pageIndex,
- pageSize: this.state.pageSize,
- pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
- showSizeChanger: true,
- total: this.props.total,
- showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}`
- }}
+ pagination={_pagination}
/>
+ <Modal
+ className="image-scale-modal"
+ visible={this.state.imgShow}
+ width="70vw"
+ maskClosable={true}
+ onCancel={this.imgScaleClose}
+ title={this.props.dict['main.form.picture.check']}
+ footer={[<span key="close" onClick={this.imgScaleClose}>{this.props.dict['main.close']}</span>]}
+ destroyOnClose
+ >
+ <img style={{maxWidth:'100%'}} src={this.state.imgSrc} alt="" />
+ </Modal>
</div>
)
}
}
+
+const mapStateToProps = (state) => {
+ return {
+ menuType: state.editLevel,
+ tabviews: state.tabviews,
+ memberLevel: state.memberLevel
+ }
+}
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NormalTable)
\ No newline at end of file
--
Gitblit v1.8.0