import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { DatePicker, Tooltip, Icon } from 'antd'
|
import moment from 'moment'
|
|
import Utils from '@/utils/utils.js'
|
import QuarterPicker from './quarterpicker'
|
import YearPicker from './yearpicker'
|
import './index.scss'
|
|
const { MonthPicker, WeekPicker, RangePicker } = DatePicker
|
|
class DateGroup extends Component {
|
static propTpyes = {
|
card: PropTypes.object, // 搜索条件
|
position: PropTypes.number, // 索引，用于控制季度和年的展开方向
|
onGroupChange: PropTypes.func // 搜索内容切换
|
}
|
|
state = {
|
active: '',
|
quarterId: Utils.getuuid(),
|
yearId: Utils.getuuid(),
|
dateRange: '',
|
initDateRange: '',
|
initType: '',
|
placement: this.props.position % 4 !== 3 ? 'bottomLeft' : 'bottomRight'
|
}
|
|
UNSAFE_componentWillMount() {
|
const { card } = this.props
|
|
if (card.initval && card.initval[0]) {
|
let _type = card.initval[0]
|
let _val = card.initval[1]
|
let _dateRange = null
|
|
if (_type === 'day') {
|
_dateRange = [moment().subtract(_val, 'days').format('YYYY-MM-DD'),
|
moment().subtract(_val, 'days').format('YYYY-MM-DD')]
|
} else if (_type === 'week') {
|
_dateRange = [moment().subtract(_val * 7, 'days').startOf('week').format('YYYY-MM-DD'),
|
moment().subtract(_val * 7, 'days').endOf('week').format('YYYY-MM-DD')]
|
} else if (_type === 'month') {
|
_dateRange = [moment().subtract(_val, 'month').startOf('month').format('YYYY-MM-DD'),
|
moment().subtract(_val, 'month').endOf('month').format('YYYY-MM-DD')]
|
} else if (_type === 'quarter') {
|
let _differ = parseInt(moment().format('MM')) % 3
|
let _pdiffer = 0
|
let _ndiffer = 0
|
|
// 差值计算
|
switch(_differ) {
|
case 0:
|
_pdiffer = 2
|
_ndiffer = 0
|
break
|
case 1:
|
_pdiffer = 0
|
_ndiffer = -2
|
break
|
case 2:
|
_pdiffer = 1
|
_ndiffer = -1
|
break
|
default:
|
}
|
_dateRange = [moment().subtract(_pdiffer + _val * 3, 'month').startOf('month').format('YYYY-MM-DD'),
|
moment().subtract(_ndiffer + _val * 3, 'month').endOf('month').format('YYYY-MM-DD')]
|
} else if (_type === 'year') {
|
let _year = parseInt(moment().format('YYYY')) - _val
|
_dateRange = [_year + '-01-01', _year + '-12-31']
|
} else if (_type === 'customized') {
|
try {
|
_val = JSON.parse(_val)
|
} catch {
|
_val = [0, 0]
|
}
|
_dateRange = [moment().subtract(_val[0], 'days').format('YYYY-MM-DD'),
|
moment().subtract(_val[1], 'days').format('YYYY-MM-DD')]
|
}
|
this.setState({
|
active: card.initval[0],
|
dateRange: _dateRange,
|
initDateRange: _dateRange,
|
initType: card.initval[0]
|
})
|
}
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (this.props.reset !== nextProps.reset) {
|
this.reset()
|
}
|
}
|
|
onChange = (date, type) => {
|
const { card } = this.props
|
let values = []
|
if (type === 'day') {
|
values = [moment(date).format('YYYY-MM-DD'), moment(date).format('YYYY-MM-DD')]
|
} else if (type === 'week') {
|
values = [moment(date).startOf('week').format('YYYY-MM-DD'), moment(date).endOf('week').format('YYYY-MM-DD')]
|
} else if (type === 'month') {
|
values = [moment(date).startOf('month').format('YYYY-MM-DD'), moment(date).endOf('month').format('YYYY-MM-DD')]
|
} else if (type === 'quarter') {
|
values = date
|
document.getElementById(this.state.quarterId).click()
|
} else if (type === 'year') {
|
values = date
|
document.getElementById(this.state.yearId).click()
|
} else if (type === 'customized') {
|
values = [moment(date[0]).format('YYYY-MM-DD'), moment(date[1]).format('YYYY-MM-DD')]
|
}
|
|
this.setState({
|
active: type,
|
dateRange: values
|
}, () => {
|
this.props.onGroupChange({[card.datefield]: values, [card.field]: type})
|
})
|
}
|
|
clearTime = () => {
|
const { card } = this.props
|
this.setState({
|
active: '',
|
dateRange: ''
|
}, () => {
|
this.props.onGroupChange({[card.datefield]: '', [card.field]: ''})
|
})
|
}
|
|
reset = () => {
|
const { initDateRange, initType } = this.state
|
|
this.setState({
|
active: initType,
|
dateRange: initDateRange
|
})
|
}
|
|
render() {
|
const { card } = this.props
|
const { active, quarterId, yearId, dateRange, placement } = this.state
|
let tabs = {day: '日', week: '周', month: '月', quarter: '季', year: '年', customized: '自定义'}
|
|
return (
|
<div className="table-search-date-group">
|
{card.items.map(tab => {
|
if (tab === 'day') {
|
return (<span key={tab} className={'ant-tag ant-tag-checkable ' + (active === tab ? 'ant-tag-checkable-checked' : '')} >
|
{tabs[tab]}
|
<DatePicker allowClear={false} onChange={(date) => this.onChange(date, tab)} />
|
</span>)
|
} else if (tab === 'week') {
|
return (<span key={tab} className={'ant-tag ant-tag-checkable ' + (active === tab ? 'ant-tag-checkable-checked' : '')} >
|
{tabs[tab]}
|
<WeekPicker dropdownClassName="group-week-picker" allowClear={false} onChange={(date) => this.onChange(date, tab)} />
|
</span>)
|
} else if (tab === 'month') {
|
return (<span key={tab} className={'ant-tag ant-tag-checkable ' + (active === tab ? 'ant-tag-checkable-checked' : '')} >
|
{tabs[tab]}
|
<MonthPicker allowClear={false} onChange={(date) => this.onChange(date, tab)} />
|
</span>)
|
} else if (tab === 'quarter') {
|
return (
|
<Tooltip key={tab} placement={placement} overlayClassName={'quarter-picker-tooltip ' + placement} trigger="click" title={
|
<div>
|
<QuarterPicker card={card} onChange={(date) => this.onChange(date, tab)}/>
|
</div>
|
}>
|
<span id={quarterId} className={'ant-tag ant-tag-quarter ant-tag-checkable ' + (active === tab ? 'ant-tag-checkable-checked' : '')} >
|
{tabs[tab]}
|
</span>
|
</Tooltip>
|
)
|
} else if (tab === 'year') {
|
return (
|
<Tooltip key={tab} placement={placement} overlayClassName={'year-picker-tooltip ' + placement} trigger="click" title={
|
<div>
|
<YearPicker card={card} onChange={(date) => this.onChange(date, tab)}/>
|
</div>
|
}>
|
<span id={yearId} className={'ant-tag ant-tag-quarter ant-tag-checkable ' + (active === tab ? 'ant-tag-checkable-checked' : '')} >
|
{tabs[tab]}
|
</span>
|
</Tooltip>
|
)
|
} else {
|
return (<span key={tab} className={'ant-tag ant-tag-checkable ' + (active === tab ? 'ant-tag-checkable-checked' : '')} >
|
{tabs[tab]}
|
<RangePicker allowClear={false} onChange={(date) => this.onChange(date, tab)} />
|
</span>)
|
}
|
})}
|
|
{dateRange ? <div className="table-search-date-group-value">
|
{dateRange.join(' ~ ')}
|
<Icon type="close-circle" onClick={this.clearTime} className="ant-calendar-picker-clear" />
|
</div> : null}
|
{!dateRange && card.required ? <div className="ant-form-explain">请选择{card.label}!</div> : null}
|
</div>
|
)
|
}
|
}
|
|
export default DateGroup
|
