You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
3.7 KiB
144 lines
3.7 KiB
<template>
|
|
<div class="d-flex flex-nowrap">
|
|
<a-date-picker
|
|
v-model="startValue"
|
|
:disabled-date="disabledStartDate"
|
|
allow-clear
|
|
locale="zh-cn"
|
|
:format="monthFormat"
|
|
placeholder="起始时间"
|
|
class="box box1"
|
|
:show-today="false"
|
|
:open="startOpen"
|
|
@openChange="handleStartOpenChange"
|
|
>
|
|
<template slot="renderExtraFooter">
|
|
<a-button size="small" type="primary" ghost @click="setYesterday('startValue', 'startOpen')">昨天</a-button>
|
|
<a-button class="ml-3" size="small" type="primary" ghost @click="setToday('startValue', 'startOpen')">今天</a-button>
|
|
</template>
|
|
</a-date-picker>
|
|
<a-date-picker
|
|
v-model="endValue"
|
|
:disabled-date="disabledEndDate"
|
|
allow-clear
|
|
:format="monthFormat"
|
|
class="box box2"
|
|
:show-today="false"
|
|
placeholder="截止时间"
|
|
:open="endOpen"
|
|
@openChange="handleEndOpenChange"
|
|
>
|
|
<template slot="renderExtraFooter">
|
|
<a-button size="small" type="primary" ghost @click="setYesterday('endValue', 'endOpen')">昨天</a-button>
|
|
<a-button class="ml-3" size="small" type="primary" ghost @click="setToday('endValue', 'endOpen')">今天</a-button>
|
|
</template>
|
|
</a-date-picker>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations } from 'vuex';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
monthFormat: 'YYYY-MM-DD',
|
|
startValue: null,
|
|
endValue: null,
|
|
startOpen: false,
|
|
endOpen: false,
|
|
};
|
|
},
|
|
watch: {
|
|
startValue(val) {
|
|
if (val) {
|
|
const startTime = this.$moment(val).format('x');
|
|
this.setStartTime(startTime);
|
|
} else {
|
|
const time = this.$moment(Date.now()).format('YYYY-MM-DD');
|
|
this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
|
|
if (!this.endValue) {
|
|
this.$emit('changeTime');
|
|
}
|
|
}
|
|
},
|
|
endValue(val) {
|
|
if (val) {
|
|
const endTime = this.$moment(val).format('x');
|
|
this.setEndTime(endTime);
|
|
|
|
if (val && !this.startValue) {
|
|
this.$message.error('请选择起始时间');
|
|
return;
|
|
}
|
|
} else {
|
|
const time = this.$moment(Date.now()).format('YYYY-MM-DD');
|
|
this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
|
|
}
|
|
|
|
this.$emit('changeTime');
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations('home', ['setStartTime', 'setEndTime']),
|
|
|
|
// 昨天
|
|
setYesterday(value, open) {
|
|
this[value] = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
|
|
this[open] = false;
|
|
if (open === 'startOpen' && !this.startOpen) {
|
|
this.endOpen = true;
|
|
}
|
|
},
|
|
|
|
// 今天
|
|
setToday(value, open) {
|
|
this[value] = this.$moment(new Date()).format('YYYY-MM-DD');
|
|
this[open] = false;
|
|
if (open === 'startOpen' && !this.startOpen) {
|
|
this.endOpen = true;
|
|
}
|
|
},
|
|
|
|
disabledStartDate(startValue) {
|
|
const endValue = this.endValue;
|
|
if (!startValue || !endValue) {
|
|
return false;
|
|
}
|
|
return startValue.valueOf() > endValue.valueOf();
|
|
},
|
|
disabledEndDate(endValue) {
|
|
const startValue = this.startValue;
|
|
if (!endValue || !startValue) {
|
|
return false;
|
|
}
|
|
return startValue.valueOf() >= endValue.valueOf();
|
|
},
|
|
handleStartOpenChange(open) {
|
|
this.startOpen = open;
|
|
if (!open) {
|
|
this.endOpen = true;
|
|
}
|
|
},
|
|
handleEndOpenChange(open) {
|
|
this.endOpen = open;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.box {
|
|
min-width: auto !important;
|
|
width: 53% !important;
|
|
}
|
|
|
|
.box1 {
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.box2 {
|
|
margin-left: 2%;
|
|
}
|
|
</style>
|
|
|