import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { notification } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const CardCellComponent = asyncComponent(() => import('../cardcellList'))
|
|
class CardBoxComponent extends Component {
|
static propTpyes = {
|
cards: PropTypes.object, // 卡片行配置信息
|
card: PropTypes.object, // 卡片配置信息
|
data: PropTypes.object,
|
}
|
|
state = {
|
card: null, // 卡片信息，包括正反面
|
}
|
|
/**
|
* @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
|
}
|
}
|
|
openView = (e) => {
|
const { card, data, cards, onClick } = this.props
|
|
onClick && onClick()
|
|
if (!card.setting.click || data.$disabled) return
|
|
e.stopPropagation()
|
|
if (card.setting.click === 'menus') {
|
let menu = null
|
|
if (card.menus && card.menus.length > 0) {
|
let s = data[card.setting.menuType] + ''
|
card.menus.forEach(m => {
|
if (s !== m.sign) return
|
menu = m
|
})
|
}
|
if (!menu) return
|
|
let newtab = {
|
MenuID: menu.MenuID,
|
MenuName: menu.MenuName,
|
MenuNo: menu.MenuNo || '',
|
type: menu.tabType,
|
param: {}
|
}
|
|
if (card.setting.joint === 'true') {
|
newtab.param.$BID = data.$$uuid || ''
|
|
Object.keys(data).forEach(key => {
|
if (/^\$/.test(key)) return
|
if (key === 'children') return
|
newtab.param[key] = data[key]
|
})
|
}
|
|
MKEmitter.emit('modifyTabs', newtab, true)
|
} else if (card.setting.click === 'menu') {
|
let menuId = card.setting.MenuID || card.setting.menu.slice(-1)[0]
|
let menu = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]
|
|
if (!menu && card.setting.MenuName && card.setting.tabType) {
|
menu = {
|
MenuID: menuId,
|
MenuName: card.setting.MenuName,
|
MenuNo: card.setting.MenuNo || '',
|
type: card.setting.tabType
|
}
|
}
|
|
if (!menu) {
|
notification.warning({
|
top: 92,
|
message: '菜单已删除或没有访问权限！',
|
duration: 5
|
})
|
return
|
}
|
|
let newtab = {
|
...menu,
|
param: {}
|
}
|
|
if (card.setting.joint === 'true') {
|
newtab.param.$BID = data.$$uuid || ''
|
|
Object.keys(data).forEach(key => {
|
if (/^\$/.test(key)) return
|
if (key === 'children') return
|
newtab.param[key] = data[key]
|
})
|
}
|
|
MKEmitter.emit('modifyTabs', newtab, true)
|
} else if (card.setting.click === 'link') {
|
let src = card.setting.linkurl
|
|
if (card.setting.joint === 'true') {
|
let con = '?'
|
|
if (/\?/ig.test(src)) {
|
con = '&'
|
}
|
|
src = src + `${con}id=${data.$$uuid || ''}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}`
|
}
|
|
window.open(src)
|
} else if (card.setting.click === 'button' && card.setting.clickType !== 'multi' && card.setting.linkbtn) {
|
if (data.$$type === 'extendCard') {
|
MKEmitter.emit('triggerBtnId', card.setting.linkbtn, data.$$selectedData || [])
|
} else if (cards.subtype === 'datacard') {
|
MKEmitter.emit('triggerBtnId', card.setting.linkbtn, [data], 'linkbtn')
|
} else {
|
MKEmitter.emit('triggerBtnId', card.setting.linkbtn, data.$$empty ? [] : [data])
|
}
|
}
|
}
|
|
doubleClick = () => {
|
const { card, data, cards, onDoubleClick } = this.props
|
|
onDoubleClick && onDoubleClick()
|
|
if (card.setting.click !== 'button' || card.setting.clickType !== 'multi' || data.$disabled) return
|
|
if (card.setting.linkbtn) {
|
if (data.$$type === 'extendCard') {
|
MKEmitter.emit('triggerBtnId', card.setting.linkbtn, data.$$selectedData || [])
|
} else if (cards.subtype === 'datacard') {
|
MKEmitter.emit('triggerBtnId', card.setting.linkbtn, [data], 'linkbtn')
|
} else {
|
MKEmitter.emit('triggerBtnId', card.setting.linkbtn, data.$$empty ? [] : [data])
|
}
|
}
|
}
|
|
render() {
|
const { card, data, cards, children } = this.props
|
let style = {...card.style}
|
|
let bg = null
|
|
if (card.setting.bgField) {
|
style.backgroundImage = `url('${data[card.setting.bgField] || ''}')`
|
}
|
|
if (style.backgroundImage) {
|
bg = <div className="card-background" style={{backgroundImage: style.backgroundImage}}></div>
|
style.backgroundImage = ''
|
}
|
|
return (
|
<div className={'card-item-box ' + (card.setting.btnControl || '') + (card.setting.click ? ' mk-pointer' : '')} style={style} onClick={this.openView} onDoubleClick={this.doubleClick}>
|
{bg}
|
{children}
|
<CardCellComponent data={data} cards={cards} cardCell={card} elements={card.elements}/>
|
{card.setting.type === 'multi' ? <div className={'back-side ' + card.setting.transform} style={card.backStyle}>
|
<CardCellComponent data={data} cards={cards} cardCell={card} elements={card.backElements}/>
|
</div> : null}
|
</div>
|
)
|
}
|
}
|
|
export default CardBoxComponent
|
