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 | 291 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 244 insertions(+), 47 deletions(-)
diff --git a/src/tabviews/zshare/normalTable/index.jsx b/src/tabviews/zshare/normalTable/index.jsx
index b74047b..cddb597 100644
--- a/src/tabviews/zshare/normalTable/index.jsx
+++ b/src/tabviews/zshare/normalTable/index.jsx
@@ -1,22 +1,24 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
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 './index.scss'
+
+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 = {
- pagination: true,
- total: 0,
- menuType: 'normal'
+ total: 0
}
static propTpyes = {
- menuType: PropTypes.any, // 涓夌骇鑿滃崟绫诲瀷锛孒S闇�鐗规畩澶勭悊
tableId: PropTypes.string, // 鍒楄〃Id
+ resetTable: PropTypes.bool, // 琛ㄦ牸閲嶇疆
pageSize: PropTypes.any, // 姣忛〉鏁版嵁
dict: PropTypes.object, // 瀛楀吀椤�
config: PropTypes.object, // 椤甸潰閰嶇疆
@@ -29,10 +31,8 @@
loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓�
refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂�
buttonTrigger: PropTypes.func, // 琛ㄦ牸涓寜閽Е鍙戞搷浣�
- linkTrigger: PropTypes.func, // 瀛楁閫忚
handleTableId: PropTypes.func, // 鏁版嵁鍒囨崲
- memberLevel: PropTypes.any, // 浼氬憳绛夌骇
- pagination: PropTypes.any // 鏁版嵁鍒嗛〉
+ chgSelectData: PropTypes.func, // 鏁版嵁鍒囨崲
}
state = {
@@ -43,7 +43,8 @@
imgShow: false, // 鍥剧墖鏀惧ぇ妯℃�佹
imgSrc: '', // 鍥剧墖璺緞
lineMarks: null, // 琛屾爣璁�
- colMap: null // 鍒椾俊鎭紙鍏ㄩ儴锛�
+ colMap: null, // 鍒椾俊鎭紙鍏ㄩ儴锛�
+ activeIndex: null // 鏍囪褰撳墠閫変腑琛�
}
UNSAFE_componentWillMount () {
@@ -98,6 +99,8 @@
if (mark.signType === 'line') {
lineMarks.push(mark)
return false
+ } else if (mark.signType === 'card') {
+ return false
}
return true
})
@@ -137,7 +140,31 @@
})
}
+ 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']
@@ -163,7 +190,29 @@
searchval: record[item.field] || ''
}
- this.props.linkTrigger(tabmenu)
+ 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) => {
@@ -174,7 +223,11 @@
let icon = ''
marks.some(mark => {
- let originType = colMap.get(mark.field).type
+ 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 = ''
@@ -202,6 +255,8 @@
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]
@@ -244,9 +299,17 @@
if (item.field && record.hasOwnProperty(item.field)) {
content = `${record[item.field]}`
}
-
- content = content ? (item.prefix || '') + content + (item.postfix || '') : ''
+ 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)
@@ -387,9 +450,46 @@
return (
<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>
+ </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>
)
@@ -412,8 +512,11 @@
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') {
let content = ''
@@ -427,7 +530,7 @@
}
if (content !== '') {
- if (item.format === 'percent') {
+ if (col.format === 'percent') {
content = content * 100
}
@@ -458,7 +561,7 @@
content = md5(content)
}
- contents.push(content)
+ contents.push({content, align: col.Align})
} else if (col.type === 'picture') {
let photos = []
try {
@@ -468,12 +571,18 @@
}
photos.forEach(photo => {
- images.push({url: photo, scale: col.scale === 'true', maxHeight: col.maxHeight || 128})
+ 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 || '')
}
@@ -495,7 +604,37 @@
content = md5(content)
}
- contents.push(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 {
let content = record[col.field]
@@ -507,7 +646,7 @@
content = md5(content)
}
- contents.push(content)
+ contents.push({content, align: col.Align})
}
})
@@ -527,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) => {
@@ -538,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 ''
}
@@ -560,7 +699,7 @@
} else if (type === 'topPicBottomText') {
return (
<div className="content-fence">
- <div className="content-fence-top">
+ <div className="content-fence-top" style={images[0] ? {textAlign: images[0].align} : null}>
{images.map((_img, index) => {
if (!_img.url) return ''
if (_img.scale) {
@@ -571,8 +710,8 @@
})}
</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>
@@ -580,7 +719,7 @@
} else if (type === 'leftPicRightText') {
return (
<div className="content-fence">
- <div className="content-fence-left">
+ <div className="content-fence-left" style={images[0] ? {textAlign: images[0].align} : null}>
{images.map((_img, index) => {
if (!_img.url) return ''
if (_img.scale) {
@@ -591,8 +730,8 @@
})}
</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>
@@ -600,6 +739,9 @@
}
}
+ /**
+ * @description 鍥剧墖缂╂斁
+ */
imgScaleClose = () => {
this.setState({
imgShow: false
@@ -632,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)
}
@@ -694,13 +869,14 @@
resetTable = () => {
this.setState({
pageIndex: 1,
- selectedRowKeys: []
+ selectedRowKeys: [],
+ activeIndex: null
})
}
render() {
- const { setting, pickup, pagination } = this.props
- const { selectedRowKeys, lineMarks, colMap } = this.state
+ const { setting, pickup } = this.props
+ const { selectedRowKeys, lineMarks, colMap, activeIndex } = this.state
// 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙��
let rowSelection = null
@@ -735,7 +911,7 @@
}
let _pagination = false
- if (pagination) {
+ if (setting.laypage !== 'false') {
_pagination = {
current: this.state.pageIndex,
pageSize: this.state.pageSize,
@@ -770,9 +946,12 @@
columns={this.state.columns}
dataSource={_data}
rowClassName={(record) => {
- if (lineMarks.length === 0) return ''
-
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
@@ -803,6 +982,8 @@
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]
@@ -844,3 +1025,19 @@
)
}
}
+
+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