import React from 'react'
|
import { useDrag, useDrop } from 'react-dnd'
|
import { Select, Radio, DatePicker, Input, Popover, Form, Switch, Checkbox } from 'antd'
|
import { CopyOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import DateGroup from '../dategroup'
|
import './index.scss'
|
|
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
|
const { Search } = Input
|
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) 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) {
|
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
|
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') {
|
formItem = <CheckCard config={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: '36px'}}>
|
{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'}} checked={card.initval === card.openVal}>{card.checkTip || ''}</Checkbox>
|
} else if (card.type === 'range') {
|
let vals = card.initval.split(',')
|
formItem = (<>
|
<Input style={{marginTop: '4px'}} value={vals[0] || ''} />
|
至
|
<Input style={{marginTop: '4px'}} value={vals[1] || ''} />
|
</>)
|
}
|
|
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 ' : '') + card.type + (card.advanced === 'true' ? ' advanced' : '') + (card.query === 'false' ? ' no-query' : '')} style={{ opacity: opacity}}>
|
<div ref={node => drag(drop(node))}>
|
<Form.Item
|
labelCol={{xs: { span: 24 }, sm: { span: 8 }}}
|
wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}}
|
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
|
