import React from 'react'
|
import { useDrag, useDrop } from 'react-dnd'
|
import { Icon, Popover } from 'antd'
|
import moment from 'moment'
|
|
import demo1 from '@/assets/img/demo1.jpg'
|
import demo2 from '@/assets/img/demo2.jpg'
|
import demo3 from '@/assets/img/demo3.jpg'
|
import demo4 from '@/assets/img/demo4.jpg'
|
import demo5 from '@/assets/img/demo5.jpg'
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
|
import './index.scss'
|
|
const BarCode = asyncComponent(() => import('@/components/barcode'))
|
const QrCode = asyncComponent(() => import('@/components/qrcode'))
|
const MarkColumn = asyncIconComponent(() => import('@/menu/components/table/normal-table/columns/markcolumn'))
|
|
const Card = ({ id, fields, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, updateMarks }) => {
|
const originalIndex = findCard(id).index
|
const [{ isDragging }, drag] = useDrag({
|
item: { type: 'action', id, originalIndex },
|
collect: monitor => ({
|
isDragging: monitor.isDragging(),
|
}),
|
})
|
const [, drop] = useDrop({
|
accept: 'action',
|
canDrop: () => true,
|
drop({ id: draggedId }) {
|
if (!draggedId || draggedId === id) return
|
|
const { index: originIndex } = findCard(draggedId)
|
if (originIndex === -1) return
|
|
const { index: overIndex } = findCard(id)
|
moveCard(draggedId, overIndex)
|
},
|
})
|
|
let _style = {opacity: isDragging ? 0 : 1}
|
|
if (card.style) {
|
_style = {...card.style, opacity: isDragging ? 0 : 1}
|
}
|
|
const getContent = () => {
|
if (card.eleType === 'sequence') {
|
return (
|
<div className={'ant-mk-text'}>1</div>
|
)
|
} else if (card.eleType === 'text' || card.eleType === 'number') {
|
let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}`
|
return (
|
<div className={'ant-mk-text line' + card.height} style={{height: card.innerHeight || 21}}>{val}</div>
|
)
|
} else if (card.eleType === 'icon') {
|
return (<Icon type={card.icon}/>)
|
} else if (card.eleType === 'slider') {
|
let val = card.value ? (card.value / card.maxValue) * 100 : 30
|
return (
|
<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>
|
<div className="ant-mk-slider-handle" style={{left: `${val}%`, borderColor: card.color}}></div>
|
</div>
|
)
|
} else if (card.eleType === 'picture') {
|
let _imagestyle = {}
|
|
if (card.url) {
|
_imagestyle = {backgroundImage: `url('${card.url}')`}
|
} else {
|
let index = card.uuid.match(/\d{1}/g)
|
index = index.slice(-1)[0] % 5
|
let demos = [demo1, demo2, demo3, demo4, demo5]
|
|
_imagestyle = {backgroundImage: `url('${demos[index]}')`}
|
}
|
|
if (card.style && card.style.borderRadius) {
|
_imagestyle.borderRadius = card.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%'
|
}
|
|
return (
|
<div className="ant-mk-picture" style={_imagestyle}></div>
|
)
|
} else if (card.eleType === 'splitline') {
|
let _borderWidth = card.borderWidth === undefined ? 1 : card.borderWidth
|
return (
|
<div style={{paddingTop: '1px'}}>
|
<div className="ant-mk-splitline" style={{borderColor: card.color, borderWidth: _borderWidth}}></div>
|
</div>
|
)
|
} else if (card.eleType === 'barcode') {
|
return (
|
<div style={{height: card.innerHeight || 25}}>
|
<BarCode card={card} value={card.value || 'mksoft'}/>
|
</div>
|
)
|
} else if (card.eleType === 'qrcode') {
|
return (
|
<div style={{minHeight: card.qrWidth || 50}}>
|
<QrCode card={card} value={card.value || 'mksoft'}/>
|
</div>
|
)
|
} else if (card.eleType === 'currentDate') {
|
return (
|
<div className="ant-mk-date">
|
{`${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}`}
|
</div>
|
)
|
}
|
}
|
|
return (
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<Icon className="edit" title="编辑" type="edit" onClick={() => editCard(id)} />
|
<Icon className="copy" title="复制" type="copy" onClick={() => copyCard(id)} />
|
<Icon className="close" title="删除" type="close" onClick={() => delCard(id)} />
|
<Icon className="style" title="调整样式" onClick={() => changeStyle(id)} type="font-colors" />
|
{['text', 'number'].includes(card.eleType) ? <MarkColumn columns={fields} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null }
|
</div>
|
} trigger="hover">
|
<div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width}>
|
<div style={_style}>
|
{getContent()}
|
</div>
|
</div>
|
</Popover>
|
)
|
}
|
export default Card
|
