import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Col, Tooltip, notification } from 'antd'
|
import moment from 'moment'
|
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import asyncComponent from './asyncButtonComponent'
|
import asyncElementComponent from '@/utils/asyncComponent'
|
|
import LostPng from '@/assets/img/lost.png'
|
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'))
|
const BarCode = asyncElementComponent(() => import('@/components/barcode'))
|
const QrCode = asyncElementComponent(() => import('@/components/qrcode'))
|
const Video = asyncComponent(() => import('@/components/video'))
|
|
class CardCellComponent extends Component {
|
static propTpyes = {
|
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 = (e, card) => {
|
const { cardCell, data, cards } = this.props
|
|
if (!card.link) return
|
e.stopPropagation()
|
|
let url = ''
|
|
if (card.link === 'static') {
|
url = card.linkurl
|
} else {
|
url = data[card.linkurl]
|
}
|
|
if (!url) {
|
notification.warning({
|
top: 92,
|
message: '链接地址不存在！',
|
duration: 5
|
})
|
return
|
}
|
|
if (/^sso$/ig.test(url)) {
|
if (!data.LinkUrl1) {
|
notification.warning({
|
top: 92,
|
message: '链接地址不存在！',
|
duration: 5
|
})
|
return
|
}
|
|
let _url = data.LinkUrl1
|
if (/index\.html/ig.test(_url)) {
|
_url = _url.replace(/index\.html.*/ig, '')
|
} else if (!/\/$/ig.test(_url)) {
|
_url = _url + '/'
|
}
|
|
url = _url + 'index.html#/ssologin/' + window.btoa(window.encodeURIComponent(JSON.stringify({
|
UserID: sessionStorage.getItem('UserID'),
|
LoginUID: sessionStorage.getItem('LoginUID'),
|
User_Name: sessionStorage.getItem('User_Name'),
|
Full_Name: sessionStorage.getItem('Full_Name'),
|
avatar: sessionStorage.getItem('avatar'),
|
dataM: data.dataM ? 'true' : '',
|
debug: data.debug || '',
|
role_id: data.role_id || ''
|
})))
|
} else {
|
let Id = ''
|
let con = '?'
|
|
if (/\?/ig.test(url)) {
|
con = '&'
|
}
|
|
if (cards.subtype === 'propcard' && cardCell) {
|
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)
|
}
|
|
getMark = (marks, style, content) => {
|
const { data } = this.props
|
|
marks.some(mark => {
|
let originVal = data[mark.field[0]] + ''
|
let contrastVal = ''
|
let result = false
|
|
if (mark.field[1] === 'static') {
|
contrastVal = mark.contrastValue + ''
|
} else {
|
contrastVal = data[mark.field[2]] + ''
|
}
|
|
if (mark.match === '=') {
|
result = originVal === contrastVal
|
} else if (mark.match === '!=') {
|
result = originVal !== contrastVal
|
} else if (mark.match === 'like') {
|
result = originVal.indexOf(contrastVal) > -1
|
} else if (mark.match === '>') {
|
try {
|
originVal = parseFloat(originVal)
|
contrastVal = parseFloat(contrastVal)
|
} catch {
|
originVal = NaN
|
}
|
|
if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) {
|
result = true
|
}
|
} else if (mark.match === '<') {
|
try {
|
originVal = parseFloat(originVal)
|
contrastVal = parseFloat(contrastVal)
|
} catch {
|
originVal = NaN
|
}
|
|
if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) {
|
result = true
|
}
|
}
|
|
if (result) {
|
if (mark.signType[0] === 'font') {
|
style.color = mark.color
|
} else if (mark.signType[0] === 'background') {
|
style.background = mark.color
|
if (mark.fontColor) {
|
style.color = mark.fontColor
|
}
|
} else if (mark.signType[0] === 'underline') {
|
style.textDecoration = 'underline'
|
style.color = mark.color
|
} else if (mark.signType[0] === 'line-through') {
|
style.textDecoration = 'line-through'
|
style.color = mark.color
|
} else if (mark.signType[0] === 'icon') {
|
let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />)
|
if (mark.signType[1] === 'front') {
|
content = <span>{icon} {content}</span>
|
} else {
|
content = <span>{content} {icon}</span>
|
}
|
}
|
}
|
return result
|
})
|
|
return content
|
}
|
|
getContent = (card) => {
|
const { data, 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 = ''
|
let _style = card.style ? {...card.style} : {}
|
|
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 || ''}`
|
}
|
|
if (card.marks) {
|
val = this.getMark(card.marks, _style, val)
|
}
|
|
if (card.link) {
|
_style.cursor = 'pointer'
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={_style} onClick={(e) => {this.openNewView(e, card)}}>
|
<div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'number') {
|
let val = ''
|
let _style = card.style ? {...card.style} : {}
|
|
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') {
|
let decimal = card.col.decimal || 0
|
|
if (card.format === 'percent') {
|
decimal = decimal - 2
|
}
|
if (decimal < 0) {
|
decimal = 0
|
}
|
|
val = val.toFixed(decimal)
|
} else {
|
val = '' + val
|
}
|
|
if (card.format === 'percent' && (!card.postfix || card.postfix.indexOf('%') === -1)) {
|
val = val + '%'
|
} else if (card.format === 'thdSeparator') {
|
val = val.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
|
}
|
}
|
|
if (val !== '') {
|
val = `${card.prefix || ''}${val}${card.postfix || ''}`
|
}
|
|
if (card.marks) {
|
val = this.getMark(card.marks, _style, val)
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={_style}>
|
<div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</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 = {}
|
let _style = card.style ? {...card.style} : {}
|
let url = ''
|
|
if (card.datatype === 'static') {
|
url = card.url
|
} else {
|
url = data[card.field]
|
}
|
|
if (url) {
|
_imagestyle = {backgroundImage: `url('${url}')`}
|
} else {
|
_imagestyle = {backgroundImage: `url(${LostPng})`, backgroundSize: 'contain'}
|
}
|
|
if (_style.borderRadius) {
|
_imagestyle.borderRadius = _style.borderRadius
|
}
|
|
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%'
|
}
|
|
if (card.link) {
|
_style.cursor = 'pointer'
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={_style} onClick={(e) => {this.openNewView(e, card)}}>
|
<div className="ant-mk-picture" style={_imagestyle}></div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'splitline') {
|
let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div className="ant-mk-splitline" style={{borderColor: card.color, borderWidth: _borderWidth}}></div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'barcode') {
|
let val = ''
|
|
if (card.datatype === 'static') {
|
val = card.value
|
} else if (data.hasOwnProperty(card.field)) {
|
val = data[card.field]
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div style={{height: card.innerHeight || 25}}>
|
{val ? <BarCode card={card} value={val}/> : null}
|
</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'video') {
|
let url = ''
|
|
if (card.datatype === 'static') {
|
url = card.url
|
} else {
|
url = data[card.field] || ''
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<Video card={card} value={url}/>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'qrcode') {
|
let val = ''
|
|
if (card.datatype === 'static') {
|
val = card.value
|
} else if (data.hasOwnProperty(card.field)) {
|
val = data[card.field]
|
}
|
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div style={card.style}>
|
<div style={{minHeight: card.qrWidth || 50}}>
|
{val ? <QrCode card={card} value={val}/> : null}
|
</div>
|
</div>
|
</Col>
|
)
|
} else if (card.eleType === 'currentDate') {
|
return (
|
<Col key={card.uuid} span={card.width}>
|
<div className="ant-mk-date" style={card.style}>
|
{card.dateFormat ? `${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}` : null}
|
</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={data.$$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={data.$$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={data.$$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={data.$$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={data.$$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={data.$$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
|
