import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
|
|
import './index.scss'
|
|
class TableHeader extends Component {
|
static propTpyes = {
|
card: PropTypes.object, // 卡片配置信息
|
data: PropTypes.object,
|
refresh: PropTypes.func
|
}
|
|
state = {
|
sortField: '',
|
order: ''
|
}
|
|
/**
|
* @description 搜索条件初始化
|
*/
|
UNSAFE_componentWillMount () {
|
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState)) || !is(fromJS(this.props), fromJS(nextProps))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
triggerHeader = (item) => {
|
const { sortField, order } = this.state
|
|
if (!item.sortField) return
|
|
if (item.sortField !== sortField) {
|
this.setState({sortField: item.sortField, order: 'asc'})
|
|
this.props.refresh(item.sortField + ' asc')
|
} else {
|
if (order === 'asc') {
|
this.setState({order: 'desc'})
|
this.props.refresh(item.sortField + ' desc')
|
} else if (order === 'desc') {
|
this.setState({sortField: '', order: ''})
|
this.props.refresh('')
|
}
|
}
|
}
|
|
getContent = () => {
|
const { data, card } = this.props
|
const { sortField, order } = this.state
|
|
let contents = []
|
|
card.elements.forEach(item => {
|
if (item.eleType !== 'text') return
|
|
let _style_ = null
|
|
if (item.style && item.style.clear === 'left') {
|
_style_ = {clear: 'left'}
|
} else if (item.style && item.style.clear === 'right') {
|
_style_ = {float: 'right'}
|
}
|
|
let val = ''
|
let _style = item.style ? {...item.style} : {}
|
|
if (item.datatype === 'static') {
|
val = item.value || ''
|
if (/@username@|@fullName@|@mk_city@|@bid@/ig.test(val)) {
|
let userName = sessionStorage.getItem('User_Name') || ''
|
let fullName = sessionStorage.getItem('Full_Name') || ''
|
let city = sessionStorage.getItem('city') || ''
|
let bid = data.$$BID || ''
|
val = val.replace(/@username@/ig, userName).replace(/@fullName@/ig, fullName).replace(/@mk_city@/ig, city).replace(/@bid@/ig, bid)
|
} else if (/@month@/ig.test(val)) {
|
val = val.replace(/@month@/ig, new Date().toLocaleString('en-US', { month: 'long' }))
|
} else if (/@week@/ig.test(val)) {
|
val = val.replace(/@week@/ig, (() => {
|
let day = new Date().getDay()
|
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
return weeks[day]
|
})())
|
} else if (/@day@/ig.test(val)) {
|
val = val.replace(/@day@/ig, (() => {
|
let day = new Date().getDate()
|
return day < 10 ? '0' + day : day
|
})())
|
}
|
} else if (data.hasOwnProperty(item.field)) {
|
val = data[item.field]
|
}
|
|
if (val === '' && item.noValue === 'hide') { // 空值隐藏
|
return null
|
}
|
|
if (val !== '') {
|
if (item.sortField) {
|
val = <>
|
<span className="mk-content">{item.prefix || ''}{val}{item.postfix || ''}</span>
|
<span className="sort-wrap"><CaretUpOutlined /><CaretDownOutlined /></span>
|
</>
|
} else {
|
val = <span>{item.prefix || ''}{val}{item.postfix || ''}</span>
|
}
|
}
|
|
let lineStyle = {height: item.innerHeight || 'auto', display: 'flex', alignItems: 'center', justifyContent: _style.textAlign || 'left'}
|
|
let extra = ''
|
if (item.sortField) {
|
extra = ' sortable'
|
|
if (item.sortField === sortField) {
|
if (order === 'asc') {
|
extra += ' up-sort'
|
} else {
|
extra += ' down-sort'
|
}
|
}
|
}
|
|
contents.push(
|
<div className={'ant-col ant-col-' + item.width + extra} onClick={() => this.triggerHeader(item)} key={item.uuid} style={_style_} span={item.width}>
|
<div style={_style}>
|
<div className={'ant-mk-text mk-header-cell line' + (item.height || '')} style={lineStyle}>{val}</div>
|
</div>
|
</div>
|
)
|
})
|
|
return contents
|
}
|
|
render() {
|
const { card, children } = this.props
|
|
return (
|
<div className={'card-item-box mk-table-header'} style={card.style}>
|
{children}
|
<div className={'card-cell-list ' + (card.setting.layout === 'flex' ? 'mk-flex' : '')}>
|
{this.getContent()}
|
</div>
|
</div>
|
)
|
}
|
}
|
|
export default TableHeader
|
