import React from 'react'
|
import { useDrag, useDrop } from 'react-dnd'
|
import { Select, DatePicker, Input, Popover, Form } from 'antd'
|
import { EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import DateGroup from '../dategroup'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { Search } = Input
|
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
|
const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard'))
|
|
const Card = ({ id, card, moveCard, copyCard, findCard, editCard, delCard }) => {
|
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
|
|
let _defaultValue = '' // 下拉搜索、时间范围类型，初始值需要预处理
|
|
if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') {
|
if (card.initval) {
|
let _option = card.options.filter(option => option.Value === card.initval)[0]
|
if (_option) {
|
_defaultValue = _option.Text || ''
|
} else {
|
_defaultValue = ''
|
}
|
} else if (card.setAll === 'true') {
|
_defaultValue = 'All'
|
}
|
} else if (card.type === 'daterange') {
|
_defaultValue = [null, null]
|
if (card.initval === 'week') {
|
_defaultValue = [moment().startOf('week'), moment().endOf('week')]
|
} else if (card.initval === 'month') {
|
_defaultValue = [moment().startOf('month'), moment().endOf('month')]
|
} else if (card.initval === 'lastMonth') {
|
_defaultValue = [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')]
|
} else if (card.initval) {
|
try {
|
let _initval = JSON.parse(card.initval)
|
_defaultValue = [moment().subtract(_initval[0], 'days'), moment().subtract(_initval[1], 'days')]
|
} catch (e) {
|
_defaultValue = [null, null]
|
}
|
}
|
}
|
|
let formItem = null
|
let type = ''
|
if (card.type === 'text') {
|
if (card.inputType === 'search') {
|
formItem = (<Search style={{marginTop: '4px'}} placeholder={card.labelShow === 'false' ? card.label : ''} value={card.initval} enterButton />)
|
} else {
|
formItem = (<Input style={{marginTop: '4px'}} placeholder={card.labelShow === 'false' ? card.label : ''} value={card.initval} />)
|
}
|
} else if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') {
|
formItem = (<Select value={_defaultValue}></Select>)
|
} else 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 = (<DatePicker format={format} value={card.initval ? moment().subtract(card.initval, 'days') : null} />)
|
} else if (card.type === 'dateweek') {
|
formItem = (<WeekPicker value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} />)
|
} else if (card.type === 'datemonth') {
|
formItem = (<MonthPicker value={card.initval ? moment().subtract(card.initval, 'month') : null} />)
|
} else if (card.type === 'daterange') {
|
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 = (<RangePicker
|
format={format}
|
className="data-range"
|
placeholder={['BeginTime', 'EndTime']}
|
renderExtraFooter={() => 'extra footer'}
|
value={_defaultValue}
|
/>)
|
} else if (card.type === 'group') {
|
formItem = (<DateGroup card={card} />)
|
} else if (card.type === 'checkcard') {
|
type = 'checkcard'
|
formItem = <CheckCard config={card} />
|
}
|
|
let labelwidth = card.labelwidth || 33.3
|
if (card.labelShow === 'false') {
|
labelwidth = 0
|
}
|
|
return (
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined className="edit" onClick={() => editCard(id)} />
|
<CopyOutlined className="copy" onClick={() => copyCard(id)} />
|
<CloseOutlined className="close" onClick={() => delCard(id)} />
|
</div>
|
} trigger="hover">
|
<div className={'page-card ' + (card.labelShow === 'false' ? 'label-hide ' : '') + type + (card.advanced === 'true' ? ' advanced' : '')} style={{ opacity: opacity}}>
|
<div ref={node => drag(drop(node))} onDoubleClick={() => editCard(id)}>
|
<Form.Item
|
labelCol={{style: {width: labelwidth + '%'}}}
|
wrapperCol={{style: {width: (100 - labelwidth) + '%'}}}
|
label={card.labelShow !== 'false' ? card.label : ''}
|
required={card.required === 'true'}
|
help={(card.field || '') + (card.datefield ? ', ' + card.datefield : '') + (card.advanced === 'true' ? '（高级搜索）' : '')}
|
>
|
{formItem}
|
</Form.Item>
|
</div>
|
</div>
|
</Popover>
|
)
|
}
|
export default Card
|
