79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
||
<div>
|
||
<el-date-picker v-model="listQuery" :type="type" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间"
|
||
:value-format="valueFrmat" :format="valueFrmat" end-placeholder="结束时间" @change="changeTime" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
const props = defineProps({
|
||
type: {
|
||
type: String,
|
||
default: "datetimerange"
|
||
},
|
||
valueFrmat: {
|
||
type: String,
|
||
default: "YYYY-MM-DD HH:mm:ss"
|
||
}
|
||
|
||
})
|
||
const listQuery = ref([])
|
||
const emit = defineEmits(['changeTime'])
|
||
|
||
// 日期变化时发出事件
|
||
const changeTime = (val) => {
|
||
const promes = {
|
||
startTime:val?.[0] || '',
|
||
endTime: val?.[1] || ''
|
||
}
|
||
emit('changeTime', promes);
|
||
};
|
||
|
||
const shortcuts = [
|
||
{
|
||
text: '近3天',
|
||
value: () => {
|
||
// 结束时间：当前日期的23:59:59
|
||
const end = new Date()
|
||
end.setHours(23, 59, 59, 999)
|
||
// 开始时间：3天前的00:00:00
|
||
const start = new Date()
|
||
start.setDate(start.getDate() - 3)
|
||
start.setHours(0, 0, 0, 0)
|
||
return [start, end]
|
||
},
|
||
},
|
||
{
|
||
text: '近7天',
|
||
value: () => {
|
||
// 结束时间：当前日期的23:59:59
|
||
const end = new Date()
|
||
end.setHours(23, 59, 59, 999)
|
||
// 开始时间：3天前的00:00:00
|
||
const start = new Date()
|
||
start.setDate(start.getDate() - 7)
|
||
start.setHours(0, 0, 0, 0)
|
||
return [start, end]
|
||
},
|
||
},
|
||
{
|
||
text: '近30天',
|
||
value: () => {
|
||
const end = new Date()
|
||
end.setHours(23, 59, 59, 999)
|
||
const start = new Date()
|
||
start.setMonth(start.getMonth() - 1)
|
||
start.setHours(0, 0, 0, 0)
|
||
return [start, end]
|
||
},
|
||
},
|
||
]
|
||
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/homeScreen.scss";
|
||
</style>
|