80 lines
1.7 KiB
Vue
80 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>
|