import React from 'react'
|
import { useDrag, useDrop } from 'react-dnd'
|
import { Popover, Form } from 'antd'
|
import { EditOutlined, RightOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard'))
|
|
const Card = ({ id, card, moveCard, findCard, editCard, closeCard, copyCard, showField }) => {
|
const originalIndex = findCard(id).index
|
const [{ isDragging }, drag] = useDrag({
|
item: { type: 'search', id, originalIndex },
|
collect: monitor => ({
|
isDragging: monitor.isDragging(),
|
}),
|
})
|
const [, drop] = useDrop({
|
accept: 'search',
|
canDrop: () => true,
|
drop: (item) => {
|
const { id: draggedId, originalIndex } = item
|
|
if (originalIndex === undefined) {
|
item.dropTargetId = id
|
} else if (draggedId && draggedId !== id) {
|
const { index: overIndex } = findCard(id)
|
moveCard(draggedId, overIndex)
|
}
|
}
|
})
|
const opacity = isDragging ? 0.5 : 1
|
|
const edit = () => {
|
editCard(id)
|
}
|
|
const close = () => {
|
closeCard(id)
|
}
|
|
const copy = () => {
|
copyCard(id)
|
}
|
|
let formItem = null
|
if (card.type === 'date') {
|
let format = 'YYYY-MM-DD'
|
if (card.precision === 'hour') {
|
format = 'YYYY-MM-DD HH'
|
} else if (card.precision === 'minute') {
|
format = 'YYYY-MM-DD HH:mm'
|
} else if (card.precision === 'second') {
|
format = 'YYYY-MM-DD HH:mm:ss'
|
}
|
formItem = (<div className="am-list-item">
|
<div className="am-list-line">
|
{card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null}
|
<div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format(format) : '请选择'}</div>
|
<div className="am-list-extra"><RightOutlined /></div>
|
</div>
|
</div>)
|
} else if (card.type === 'datemonth') {
|
formItem = (<div className="am-list-item">
|
<div className="am-list-line">
|
{card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null}
|
<div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '请选择'}</div>
|
<div className="am-list-extra"><RightOutlined /></div>
|
</div>
|
</div>)
|
} else if (card.type === 'range') {
|
formItem = (<div className="am-list-item slider">
|
<div className="am-list-line">
|
{card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null}
|
<div className="am-input-control">
|
<div className="adm-slider">
|
<div className="adm-slider-track-container">
|
<div className="adm-slider-track">
|
<div className="adm-slider-fill" style={{width: '44%', left: '13%'}}></div>
|
<div className="adm-slider-thumb-container" style={{left: '13%', right: 'auto'}}>
|
<div className="adm-slider-thumb"></div>
|
</div>
|
<div className="adm-slider-thumb-container" style={{left: '58%', right: 'auto'}}>
|
<div className="adm-slider-thumb"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>)
|
// } else if (card.type === 'daterange') {
|
// let value = '请选择'
|
// if (card.initval === 'week') {
|
// value = [moment().startOf('week').format('YYYY-MM-DD'), moment().endOf('week').format('YYYY-MM-DD')].join(' ~ ')
|
// } else if (card.initval === 'month') {
|
// value = [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')].join(' ~ ')
|
// } else if (card.initval) {
|
// try {
|
// let _initval = JSON.parse(card.initval)
|
// value = [moment().subtract(_initval[0], 'days').format('YYYY-MM-DD'), moment().subtract(_initval[1], 'days').format('YYYY-MM-DD')].join(' ~ ')
|
// } catch (e) {
|
// value = '请选择'
|
// }
|
// }
|
// formItem = (<div className="am-list-item">
|
// <div className="am-list-line">
|
// {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null}
|
// <div className="am-input-control">{value}</div>
|
// <div className="am-list-extra"><RightOutlined /></div>
|
// </div>
|
// </div>)
|
} else if (card.type === 'checkcard') {
|
formItem = (<div className="am-list-item check-card">
|
<div className="am-list-line">
|
{card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null}
|
<div className="am-input-control">
|
<CheckCard config={card} />
|
</div>
|
</div>
|
</div>)
|
}
|
|
return (
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined className="edit" onClick={edit} />
|
<CopyOutlined className="copy" onClick={copy} />
|
<CloseOutlined className="close" onClick={close} />
|
</div>
|
} trigger="hover">
|
<div className="page-card" style={{ opacity: opacity}}>
|
<div ref={node => drag(drop(node))}>
|
{card.type === 'split' ? formItem : <Form.Item
|
className={'ant-form-item' + (card.required === 'true' ? ' required' : '') + (card.splitline === 'false' ? ' no-boder' : '')}
|
>
|
{formItem}
|
<div></div>
|
{showField ? <div className="field-name">{card.field}{card.hidden === 'true' ? '(隐藏)' : ''}</div> : ''}
|
</Form.Item>}
|
</div>
|
</div>
|
</Popover>
|
)
|
}
|
export default Card
|
