<!-- 日期时间选择器组件
|
会将初始默认时间（一周前）和改变的时间通过事件‘submitTime’传递给父组件
|
|
初始渲染时就将时间传递给父组件：
|
**
|
在父组件中设置
|
<TimeSelect @submit-time="giveTime"></TimeSelect>
|
giveTime(val) {
|
//将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
|
this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
|
this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
|
},
|
***
|
-->
|
<script>
|
import dayjs from 'dayjs'
|
// 时间范围快捷选项
|
const dayStart = dayjs('2023-08-01').startOf('date')
|
const dayEnd = dayStart.endOf('date')
|
const shortcuts = [
|
{
|
text: '今天',
|
value: [dayStart.toDate(), dayEnd.toDate()],
|
},
|
{
|
text: '本周',
|
value: [dayStart.startOf('week').toDate(), dayEnd.endOf('week').toDate()],
|
},
|
{
|
text: '上周',
|
value: [dayStart.day(-7).toDate(), dayEnd.day(-1).toDate()],
|
},
|
{
|
text: '本月',
|
value: [dayStart.startOf('month').toDate(), dayEnd.endOf('month').toDate()],
|
},
|
{
|
text: '上月',
|
value: [
|
dayStart.subtract(1, 'month').startOf('month').toDate(),
|
dayEnd.subtract(1, 'month').endOf('month').toDate(),
|
],
|
},
|
{
|
text: '本季度',
|
value: [dayStart.startOf('quarter').toDate(), dayEnd.endOf('quarter').toDate()],
|
},
|
{
|
text: '上季度',
|
value: [
|
dayStart.subtract(1, 'quarter').startOf('quarter').toDate(),
|
dayEnd.subtract(1, 'quarter').endOf('quarter').toDate(),
|
],
|
},
|
{
|
text: '去年',
|
value: [
|
dayStart.subtract(1, 'year').startOf('year').toDate(),
|
dayEnd.subtract(1, 'year').endOf('year').toDate(),
|
],
|
},
|
{
|
text: '今年',
|
value: [dayStart.startOf('year').toDate(), dayEnd.endOf('year').toDate()],
|
},
|
]
|
|
export default {
|
emits: ['submitTime'],
|
props: {
|
// 控制是否启用新的效果（快捷按钮 + 详情按钮）
|
useNewStyle: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
|
data() {
|
return {
|
//保存开始和结束时间
|
// 随便设置初始值 ，mounted时再设正确的，目的是改变时间了触发change
|
time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
|
// 控制时间选择器的显示/隐藏（仅在新样式下使用）
|
showTimePicker: false,
|
// 时间范围选项
|
timeRanges: [
|
{ value: 'today', label: '今日' },
|
{ value: 'yesterday', label: '昨日' },
|
{ value: 'thisWeek', label: '本周' },
|
{ value: 'lastWeek', label: '上周' },
|
{ value: 'thisMonth', label: '本月' },
|
{ value: 'lastMonth', label: '上月' },
|
],
|
// 选中的时间范围
|
selectedRange: '',
|
// 时间范围快捷选项
|
shortcuts,
|
}
|
},
|
|
// 将初始默认开始和结束时间传递给父组件
|
mounted() {
|
if (this.useNewStyle) {
|
// 新样式下默认选中今日
|
this.selectedRange = 'today'
|
this.selectTimeRange('today')
|
} else {
|
// 原有样式下使用一周前的默认时间
|
this.initOneWeekAgoTime()
|
this.$emit('submitTime', this.time)
|
}
|
},
|
|
methods: {
|
initOneWeekAgoTime() {
|
// 给时间选择器设置默认时间为一周前
|
// this.time[0] = dayjs().subtract(4, 'week').format('YYYY-MM-DD HH:mm:ss')
|
// this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
// 2026.3.13 demo 中固定初始时间
|
this.time = ['2023-08-01 00:00:00', '2023-08-31 23:59:59']
|
},
|
|
// 快捷时段选择
|
selectTimeRange(range) {
|
let now = dayjs()
|
let start, end
|
|
switch (range) {
|
case 'today':
|
start = now.startOf('day').format('YYYY-MM-DD HH:mm:ss')
|
end = now.endOf('day').format('YYYY-MM-DD HH:mm:ss')
|
break
|
case 'yesterday':
|
start = now.subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
|
end = now.subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')
|
break
|
case 'thisWeek':
|
start = now.startOf('week').format('YYYY-MM-DD HH:mm:ss')
|
end = now.endOf('week').format('YYYY-MM-DD HH:mm:ss')
|
break
|
case 'lastWeek':
|
start = now.subtract(1, 'week').startOf('week').format('YYYY-MM-DD HH:mm:ss')
|
end = now.subtract(1, 'week').endOf('week').format('YYYY-MM-DD HH:mm:ss')
|
break
|
case 'thisMonth':
|
start = now.startOf('month').format('YYYY-MM-DD HH:mm:ss')
|
end = now.endOf('month').format('YYYY-MM-DD HH:mm:ss')
|
break
|
case 'lastMonth':
|
start = now.subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
|
end = now.subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
|
break
|
}
|
|
this.time = [start, end]
|
this.$emit('submitTime', this.time)
|
},
|
|
// 处理时间范围选择变化
|
handleRangeChange(val) {
|
if (val) {
|
this.selectTimeRange(val)
|
}
|
},
|
|
// 切换时间选择器的显示/隐藏
|
toggleTimePicker() {
|
this.showTimePicker = !this.showTimePicker
|
},
|
},
|
}
|
</script>
|
|
<template>
|
<!-- 时间选择组件 -->
|
<div v-if="useNewStyle" class="time-select-container">
|
<el-row align="middle" class="m-b-8">
|
<span class="demonstration">时间：</span>
|
<!-- 快捷时段选择按钮 -->
|
<div class="quick-time-buttons">
|
<el-radio-group v-model="selectedRange" @change="handleRangeChange">
|
<el-radio-button v-for="range in timeRanges" :key="range.value" :label="range.value">
|
{{ range.label }}
|
</el-radio-button>
|
</el-radio-group>
|
<el-button size="small" type="primary" @click="toggleTimePicker">时间详情</el-button>
|
</div>
|
</el-row>
|
|
<!-- 时间选择器（默认隐藏） -->
|
<div v-show="showTimePicker" class="time-picker-container">
|
<el-date-picker
|
v-model="time"
|
:shortcuts="shortcuts"
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
@change="$emit('submitTime', time)"
|
class="pick-date"
|
/>
|
</div>
|
</div>
|
|
<!-- 原有样式 -->
|
<div v-else class="block">
|
<span class="demonstration">时间：</span>
|
<el-date-picker
|
v-model="time"
|
:shortcuts="shortcuts"
|
type="daterange"
|
range-separator="~"
|
start-placeholder="Start date"
|
end-placeholder="End date"
|
@change="$emit('submitTime', time)"
|
class="pick-date"
|
/>
|
</div>
|
</template>
|
|
<style>
|
.time-select-container {
|
/* width: 100%; */
|
}
|
|
.time-label {
|
margin-bottom: 8px;
|
}
|
|
.quick-time-buttons {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
align-items: center;
|
}
|
|
.time-picker-container {
|
display: flex;
|
align-items: center;
|
white-space: nowrap;
|
}
|
|
.demonstration {
|
margin-right: 10px;
|
font-weight: bold;
|
white-space: nowrap;
|
}
|
|
.pick-date {
|
width: 100%;
|
}
|
|
.block {
|
display: flex;
|
justify-content: center;
|
/* width: 50%; */
|
white-space: nowrap;
|
}
|
|
.block .demonstration {
|
margin-left: 30px;
|
margin-top: 5px;
|
}
|
</style>
|
