import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Button, Icon, Col, Tooltip } from 'antd'
|
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
|
import './index.scss'
|
|
class CardCellComponent extends Component {
|
static propTpyes = {
|
cards: PropTypes.object, // 菜单配置信息
|
cardCell: PropTypes.object,
|
data: PropTypes.object,
|
elements: PropTypes.array, // 元素集
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
card: null, // 编辑中元素
|
elements: null, // 按钮组
|
}
|
|
/**
|
* @description 搜索条件初始化
|
*/
|
UNSAFE_componentWillMount () {
|
const { elements } = this.props
|
|
this.setState({
|
elements: fromJS(elements).toJS()
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
getContent = (card) => {
|
const { data } = this.props
|
|
if (card.eleType === 'text' || card.eleType === 'number') {
|
let val = ''
|
|
if (card.datatype === 'static') {
|
val = card.value
|
} else if (data.hasOwnProperty(card.field)) {
|
val = data[card.field]
|
}
|
|
if (val !== '') {
|
val = `${card.prefix || ''}${val}${card.postfix || ''}`
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>{val}</div>
|
</Col>
|
)
|
} else if (card.eleType === 'icon') {
|
let val = ''
|
|
if (card.datatype === 'static') {
|
val = card.tooltip
|
} else if (data.hasOwnProperty(card.field)) {
|
val = data[card.field]
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
{val ? <Tooltip title={val}>
|
<Icon type={card.icon}/>
|
</Tooltip> : <Icon type={card.icon}/>}
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'slider') {
|
let val = 0
|
|
if (data.hasOwnProperty(card.field)) {
|
val = parseFloat(data[card.field])
|
if (isNaN(val)) {
|
val = 0
|
}
|
}
|
|
val = val / card.maxValue * 100
|
val = parseInt(val * 100) / 100
|
|
let _val = val
|
if (val > 100) {
|
_val = '100%'
|
} else {
|
_val = `${val}%`
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className="ant-mk-slider">
|
<div className="ant-mk-slider-rail"></div>
|
<div className="ant-mk-slider-track" style={{width: _val, backgroundColor: card.color}}></div>
|
<Tooltip title={val}>
|
<div className="ant-mk-slider-handle" style={{left: _val, borderColor: card.color}}></div>
|
</Tooltip>
|
</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'picture') {
|
let _imagestyle = {}
|
|
if (card.url) {
|
_imagestyle = {backgroundImage: `url('${card.url}')`}
|
} else {
|
_imagestyle = {backgroundImage: `url('')`}
|
}
|
|
if (card.radius === 'true') {
|
_imagestyle.borderRadius = '50%'
|
}
|
|
if (card.lenWidRadio === '16:9') {
|
_imagestyle.paddingTop = '56.25%'
|
} else if (card.lenWidRadio === '3:2') {
|
_imagestyle.paddingTop = '66.67%'
|
} else if (card.lenWidRadio === '4:3') {
|
_imagestyle.paddingTop = '75%'
|
} else {
|
_imagestyle.paddingTop = '100%'
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className="ant-mk-picture" style={_imagestyle}></div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'splitline') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className="ant-mk-splitline" style={{backgroundColor: card.color}}></div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'button') {
|
if (card.show === 'icon') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link"><Icon type={card.icon}/></Button>
|
</div>
|
</Col>
|
)
|
} else if (card.show === 'link') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<Button className={'mk-link mk-' + card.class} style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
|
</div>
|
</Col>
|
)
|
} else {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<Button
|
className={'mk-btn mk-' + card.class}
|
icon={card.icon}
|
style={card.btnstyle}
|
>
|
{card.label}
|
</Button>
|
</div>
|
</Col>
|
)
|
}
|
}
|
}
|
|
render() {
|
const { elements } = this.state
|
|
return (
|
<div className="card-cell-list">
|
{elements.map(item => this.getContent(item))}
|
</div>
|
)
|
}
|
}
|
|
export default CardCellComponent
|
