import React from 'react'
|
import { useDrag, useDrop } from 'react-dnd'
|
import { Select, DatePicker, Input, Popover, Form, Switch, Checkbox, Radio } from 'antd'
|
import { EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import DateGroup from '@/menu/components/search/main-search/dategroup'
|
import './index.scss'
|
|
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
|
const { Search } = Input
|
|
const Card = ({ id, card, moveCard, findCard, copyCard, 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) return
|
|
const { index: originIndex } = findCard(draggedId)
|
if (originIndex === -1) return
|
|
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') {
|
let _option = card.options.filter(option => option.Value === card.initval)[0]
|
if (_option) {
|
_defaultValue = _option.Text || ''
|
} else {
|
_defaultValue = ''
|
}
|
} 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 === 'year') {
|
_defaultValue = [moment().startOf('year'), moment().endOf('year')]
|
} else if (card.initval === 'lastYear') {
|
_defaultValue = [moment().subtract(1, 'years').startOf('year'), moment().subtract(1, 'years').endOf('year')]
|
} 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 = <Input placeholder={card.label} value={card.initval} />
|
} else {
|
formItem = <Search placeholder={card.label} value={card.initval} enterButton/>
|
}
|
|
} else if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') {
|
formItem = <Select placeholder={card.label} 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} placeholder={card.label} value={card.initval ? moment().subtract(card.initval, 'days') : null} />
|
} else if (card.type === 'dateweek') {
|
formItem = <WeekPicker placeholder={card.label} value={card.initval ? moment().subtract(card.initval * 7, 'days') : null} />
|
} else if (card.type === 'datemonth') {
|
formItem = <MonthPicker placeholder={card.label} 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 === 'switch') {
|
formItem = (<Switch checkedChildren={card.openText || ''} unCheckedChildren={card.closeText || ''} style={{marginTop: '8px'}} checked={card.initval === card.openVal}/>)
|
} else if (card.type === 'radio') {
|
let options = card.options
|
if (options.length === 0) {
|
options = [{Value: '1', Text: '选项1'}, {Value: '2', Text: '选项2'}]
|
}
|
formItem = (<Radio.Group value={card.initval} style={{lineHeight: '40px', whiteSpace: 'nowrap'}}>
|
{options.map((item, i) => (<Radio key={i} value={item.Value}> {item.Text} </Radio>))}
|
</Radio.Group>)
|
} else if (card.type === 'check') {
|
formItem = <Checkbox style={{lineHeight: '36px', whiteSpace: 'nowrap'}} checked={card.initval === card.openVal}>{card.checkTip || ''}</Checkbox>
|
} else if (card.type === 'range') {
|
type = 'range-wrap'
|
let vals = card.initval.split(',')
|
formItem = (<>
|
<Input style={{marginTop: '4px'}} value={vals[0] || ''} />
|
至
|
<Input style={{marginTop: '4px'}} value={vals[1] || ''} />
|
</>)
|
}
|
|
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" title="编辑" onClick={() => editCard(id)} />
|
<CopyOutlined className="copy" title="复制" onClick={() => copyCard(id)} />
|
<CloseOutlined className="close" title="删除" onClick={() => delCard(id)} />
|
</div>
|
} trigger="hover">
|
<div className={`page-card ${type} ${card.labelShow || ''}`} style={{ opacity: opacity}}>
|
<div ref={node => drag(drop(node))}>
|
<Form.Item
|
labelCol={{style: {width: labelwidth + '%'}}}
|
wrapperCol={{style: {width: (100 - labelwidth) + '%'}}}
|
label={card.labelShow !== 'false' ? card.label : ''}
|
required={card.required === 'true'}
|
>
|
{formItem}
|
</Form.Item>
|
</div>
|
</div>
|
</Popover>
|
)
|
}
|
export default Card
|
