import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { DatePicker, Tooltip } 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 // 字典项
|
}
|
|
state = {
|
active: '',
|
quarterId: Utils.getuuid(),
|
yearId: Utils.getuuid(),
|
dateRange: ''
|
}
|
|
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
|
})
|
}
|
}
|
|
changeTab = () => {
|
|
}
|
|
onChange = (date, type) => {
|
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
|
})
|
}
|
|
render() {
|
const { card } = this.props
|
const { active, quarterId, yearId, dateRange } = 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="bottomLeft" overlayClassName="quarter-picker-tooltip" trigger="click" title={
|
<div>
|
<QuarterPicker 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="bottomLeft" overlayClassName="year-picker-tooltip" trigger="click" title={
|
<div>
|
<YearPicker 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>)
|
}
|
})}
|
<div className="table-search-date-group-value">{dateRange ? dateRange.join(' ~ ') : ''}</div>
|
</div>
|
)
|
}
|
}
|
|
export default DateGroup
|
