import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Col, Tooltip, notification } from 'antd'
|
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import asyncComponent from './asyncButtonComponent'
|
|
import './index.scss'
|
|
const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
|
const ExcelInButton = asyncComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))
|
const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
|
const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton'))
|
const TabButton = asyncComponent(() => import('@/tabviews/zshare/actionList/tabbutton'))
|
const NewPageButton = asyncComponent(() => import('@/tabviews/zshare/actionList/newpagebutton'))
|
const ChangeUserButton = asyncComponent(() => import('@/tabviews/zshare/actionList/changeuserbutton'))
|
const PrintButton = asyncComponent(() => import('@/tabviews/zshare/actionList/printbutton'))
|
|
class CardCellComponent extends Component {
|
static propTpyes = {
|
BID: PropTypes.any, // 上级ID
|
seq: PropTypes.any, // 序号
|
cards: PropTypes.object, // 菜单配置信息
|
cardCell: PropTypes.object,
|
data: PropTypes.object,
|
elements: PropTypes.array, // 元素集
|
updateStatus: PropTypes.func, // 状态更新
|
}
|
|
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)) || !is(fromJS(this.props), fromJS(nextProps))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
openNewView = (card, url) => {
|
const { cardCell, data, cards } = this.props
|
if (!url) {
|
notification.warning({
|
top: 92,
|
message: '地址链接不可为空！',
|
duration: 5
|
})
|
return
|
}
|
let Id = ''
|
let con = '?'
|
|
if (/\?/ig.test(url)) {
|
con = '&'
|
}
|
|
if (cards.subtype === 'propcard') {
|
Id = cardCell.setting.primaryId || ''
|
} else {
|
Id = data[cards.setting.primaryKey] || ''
|
}
|
|
if (card.joint === 'true') {
|
url = url + `${con}id=${Id}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}`
|
}
|
|
window.open(url)
|
}
|
|
getContent = (card) => {
|
const { data, BID, cards, seq } = this.props
|
|
if (card.eleType === 'sequence') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className={'ant-mk-text'}>{seq}</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'text') {
|
let val = ''
|
|
if (card.datatype === 'static') {
|
val = card.value
|
} else if (data.hasOwnProperty(card.field)) {
|
val = data[card.field]
|
}
|
|
if (val !== '' && card.format) {
|
if (card.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(val)) {
|
val = `${val.substr(0, 4)}-${val.substr(5, 2)}-${val.substr(8, 2)}`
|
}
|
}
|
|
if (val !== '') {
|
val = `${card.prefix || ''}${val}${card.postfix || ''}`
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'number') {
|
let val = ''
|
|
if (card.datatype === 'static') {
|
val = card.value
|
} else if (data.hasOwnProperty(card.field)) {
|
val = data[card.field]
|
}
|
|
if (val !== '' && typeof(val) === 'number') {
|
if (card.format === 'percent') {
|
val = val * 100
|
}
|
|
if (card.col && card.col.type === 'number') {
|
val = val.toFixed(card.col.decimal || 0)
|
} else {
|
val = '' + val
|
}
|
|
if (card.format === 'thdSeparator') {
|
val = val.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
|
}
|
}
|
|
if (val !== '') {
|
val = `${card.prefix || ''}${val}${card.postfix || ''}`
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'link') {
|
let url = ''
|
|
if (card.datatype === 'static') {
|
url = card.value
|
} else if (data.hasOwnProperty(card.field)) {
|
url = data[card.field]
|
}
|
|
let val = card.label || url
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>
|
<span style={{cursor: 'pointer'}} onClick={(e) => {e.stopPropagation(); this.openNewView(card, url)}}>{val}</span>
|
</div>
|
</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 (card.datatype === 'static') {
|
val = card.value
|
} else 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={{borderColor: card.color}}></div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'button') {
|
if (['exec', 'prompt', 'pop'].includes(card.OpenType)) {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<NormalButton
|
BID={BID}
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
columns={cards.columns}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.OpenType === 'excelIn') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<ExcelInButton
|
BID={BID}
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.OpenType === 'excelOut') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<ExcelOutButton
|
BID={BID}
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
// getexceloutparam={getexceloutparam}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.OpenType === 'popview') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<PopupButton
|
BID={BID}
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.OpenType === 'tab') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<TabButton
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.OpenType === 'innerpage') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<NewPageButton
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.OpenType === 'funcbutton') {
|
if (card.funcType === 'changeuser') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<ChangeUserButton
|
BID={BID}
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
} else if (card.funcType === 'print') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<PrintButton
|
BID={BID}
|
btn={card}
|
show={card.show}
|
style={card.btnstyle}
|
setting={cards.setting}
|
selectedData={[data]}
|
updateStatus={this.props.updateStatus}
|
/>
|
</div>
|
</Col>
|
)
|
}
|
}
|
}
|
}
|
|
render() {
|
const { elements } = this.state
|
|
return (
|
<div className="card-cell-list">
|
{elements.map(item => this.getContent(item))}
|
</div>
|
)
|
}
|
}
|
|
export default CardCellComponent
|
