|
@@ -1,18 +1,59 @@
|
|
|
<template>
|
|
|
- <a-range-picker
|
|
|
- style="width:100%"
|
|
|
- :ranges="ranges"
|
|
|
- :value="date"
|
|
|
- :size="size"
|
|
|
- :disabledDate="disabledDate"
|
|
|
- :format="dateFormat"
|
|
|
- :allowClear="allowClear"
|
|
|
- @change="dateChange"
|
|
|
- @calendarChange="dateCalendarChange"
|
|
|
- :placeholder="['开始时间', '结束时间']" />
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <a-date-picker
|
|
|
+ :size="size"
|
|
|
+ :locale="locale"
|
|
|
+ v-model="startValue"
|
|
|
+ :allowClear="allowClear"
|
|
|
+ :disabled-date="disabledStartDate"
|
|
|
+ :show-time="showTime"
|
|
|
+ :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
|
+ placeholder="开始时间"
|
|
|
+ :open="startOpen"
|
|
|
+ inputReadOnly
|
|
|
+ @openChange="handleStartOpenChange"
|
|
|
+ @panelChange="handleStartPanelChange"
|
|
|
+ :showToday="false"
|
|
|
+ >
|
|
|
+ <div slot="renderExtraFooter">
|
|
|
+ <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
+ <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
+ <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
+ <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
+ <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
|
|
|
+ </div>
|
|
|
+ </a-date-picker>
|
|
|
+ <span> 至 </span>
|
|
|
+ <a-date-picker
|
|
|
+ :size="size"
|
|
|
+ :locale="locale"
|
|
|
+ v-model="endValue"
|
|
|
+ :allowClear="allowClear"
|
|
|
+ :disabled-date="disabledEndDate"
|
|
|
+ :show-time="showTime"
|
|
|
+ :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
|
+ placeholder="结束时间"
|
|
|
+ inputReadOnly
|
|
|
+ :open="endOpen"
|
|
|
+ @openChange="handleEndOpenChange"
|
|
|
+ @panelChange="handleEndPanelChange"
|
|
|
+ :showToday="false"
|
|
|
+ >
|
|
|
+ <div slot="renderExtraFooter">
|
|
|
+ <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
+ <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
+ <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
+ <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
+ <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
|
|
|
+ </div>
|
|
|
+ </a-date-picker>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
|
|
import moment from 'moment'
|
|
|
+import 'moment/locale/zh-cn';
|
|
|
+moment.locale('zh-cn');//配置moment中文环境
|
|
|
export default {
|
|
|
props: {
|
|
|
value: {
|
|
@@ -27,74 +68,109 @@ export default {
|
|
|
},
|
|
|
showTime: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: false
|
|
|
},
|
|
|
allowClear: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
- },
|
|
|
- hasDisabledAreaTime: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
}
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- date: this.value,
|
|
|
- dateFormat: 'YYYY-MM-DD',
|
|
|
- selectPriceDate: '',
|
|
|
+ locale,
|
|
|
+ startValue: this.value[0]||undefined,
|
|
|
+ endValue: this.value[1]||undefined,
|
|
|
+ endOpen: false,
|
|
|
+ startOpen: false,
|
|
|
ranges: {
|
|
|
- '今天': [moment(), moment()],
|
|
|
- '近一个月': [moment().subtract(1, 'months'), moment()],
|
|
|
- '本月': [moment().startOf('month'), moment()],
|
|
|
- '上月': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
|
|
|
- '近一年': [moment().subtract(1, 'years'), moment()]
|
|
|
+ 'date1': [moment(), moment()],
|
|
|
+ 'date2': [moment().subtract(1, 'months'), moment()],
|
|
|
+ 'date3': [moment().startOf('month'), moment()],
|
|
|
+ 'date4': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
|
|
|
+ 'date5': [moment().subtract(1, 'years'), moment()]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ startValue (val,old) {
|
|
|
+ if(old&&!val){
|
|
|
+ this.endValue = undefined
|
|
|
+ }
|
|
|
+ if(val && !this.endValue){
|
|
|
+ this.endOpen = true
|
|
|
+ }
|
|
|
+ this.changeInput()
|
|
|
+ },
|
|
|
+ endValue (val,old) {
|
|
|
+ if(old&&!val){
|
|
|
+ this.startValue = undefined
|
|
|
+ }
|
|
|
+ this.changeInput()
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
- // 不可选日期
|
|
|
- disabledDate (current) {
|
|
|
- // 最早可倒推选择两年数据,最晚为今天
|
|
|
- const minYearVs = moment().subtract(2, 'years') // 两年前 负值
|
|
|
+ setVal (key) {
|
|
|
+ this.startValue = this.ranges[key][0]
|
|
|
+ this.endValue = this.ranges[key][1]
|
|
|
+ this.startOpen = false
|
|
|
+ this.endOpen = false
|
|
|
+ },
|
|
|
+ disabledStartDate (startValue) {
|
|
|
+ const endValue = this.endValue
|
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
|
-
|
|
|
- if (!this.hasDisabledAreaTime) {
|
|
|
- return current && current > maxYearVs
|
|
|
+ if (endValue) {
|
|
|
+ if (!this.startValue) {
|
|
|
+ return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
|
+ }
|
|
|
+ return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
|
}
|
|
|
- console.log(this.selectPriceDate)
|
|
|
- // 限制最多只能查一年区间的数据
|
|
|
- if (this.selectPriceDate) {
|
|
|
- const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') // 当前选中开始日期前推一年
|
|
|
- const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') // 当前选中开始日期后推一年
|
|
|
- // 判断两个时间段是否相差m天 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
|
|
|
- const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
|
|
|
- const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
|
|
|
- return current && current < beginDate || current && current > endDate
|
|
|
- } else {
|
|
|
- return current && current > maxYearVs || current && current < minYearVs
|
|
|
+ return startValue.valueOf() > maxYearVs.valueOf()
|
|
|
+ },
|
|
|
+ disabledEndDate (endValue) {
|
|
|
+ const startValue = this.startValue
|
|
|
+ const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
|
+ if (startValue) {
|
|
|
+ return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
|
|
|
+ }
|
|
|
+ return endValue.valueOf() > maxYearVs.valueOf()
|
|
|
+ },
|
|
|
+ handleStartOpenChange (open) {
|
|
|
+ if(!open && !this.endValue){
|
|
|
+ this.endOpen = !!this.startValue
|
|
|
}
|
|
|
+ this.startOpen = open
|
|
|
+ },
|
|
|
+ handleEndOpenChange (open) {
|
|
|
+ this.endOpen = open
|
|
|
+ },
|
|
|
+ handleStartPanelChange (v) {
|
|
|
+ console.log(v)
|
|
|
},
|
|
|
- // 日期 change
|
|
|
- dateChange (date, dateStrings) {
|
|
|
- this.selectPriceDate = ''
|
|
|
- this.date = date
|
|
|
- if (dateStrings[0] == '' && dateStrings[1] == '') {
|
|
|
+ handleEndPanelChange (v) {
|
|
|
+ console.log(v)
|
|
|
+ },
|
|
|
+ changeInput () {
|
|
|
+ const startValue = this.startValue
|
|
|
+ const endValue = this.endValue
|
|
|
+ console.log(startValue, endValue)
|
|
|
+ let dateStrings = [startValue, endValue]
|
|
|
+ if (!dateStrings[0] || !dateStrings[1]) {
|
|
|
dateStrings = []
|
|
|
} else {
|
|
|
- if (this.showTime) {
|
|
|
- dateStrings[0] = dateStrings[0] + ' 00:00:00'
|
|
|
- dateStrings[1] = dateStrings[1] + ' 23:59:59'
|
|
|
+ if (!this.showTime) {
|
|
|
+ dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
|
|
|
+ dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
|
|
|
+ } else {
|
|
|
+ dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss')
|
|
|
+ dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss')
|
|
|
}
|
|
|
}
|
|
|
this.$emit('change', dateStrings)
|
|
|
},
|
|
|
- dateCalendarChange (date, dateStrings) {
|
|
|
- this.selectPriceDate = date[0]
|
|
|
- },
|
|
|
resetDate (val) {
|
|
|
- this.date = val || []
|
|
|
- this.$emit('change', this.date)
|
|
|
+ this.startValue = val && val[0] || undefined
|
|
|
+ this.endValue = val && val[1] || undefined
|
|
|
+ this.$emit('change', [])
|
|
|
}
|
|
|
}
|
|
|
}
|