From 59af55dc3e72f8f2655ae06af9d1b6f766bac423 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 20 三月 2026 16:02:19 +0800
Subject: [PATCH] 2026.3.20
---
src/sfc/TimeSelect.vue | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 210 insertions(+), 24 deletions(-)
diff --git a/src/sfc/TimeSelect.vue b/src/sfc/TimeSelect.vue
index c2834ac..231d5fa 100644
--- a/src/sfc/TimeSelect.vue
+++ b/src/sfc/TimeSelect.vue
@@ -1,8 +1,8 @@
-<!-- 鏃ユ湡鏃堕棿閫夋嫨鍣ㄧ粍浠�
+<!-- 鏃ユ湡鏃堕棿閫夋嫨鍣ㄧ粍浠�
浼氬皢鍒濆榛樿鏃堕棿锛堜竴鍛ㄥ墠锛夊拰鏀瑰彉鐨勬椂闂撮�氳繃浜嬩欢鈥榮ubmitTime鈥欎紶閫掔粰鐖剁粍浠�
-
+
鍒濆娓叉煋鏃跺氨灏嗘椂闂翠紶閫掔粰鐖剁粍浠讹細
- **
+ **
鍦ㄧ埗缁勪欢涓缃�
<TimeSelect @submit-time="giveTime"></TimeSelect>
giveTime(val) {
@@ -14,65 +14,251 @@
-->
<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 {
//淇濆瓨寮�濮嬪拰缁撴潫鏃堕棿
// 闅忎究璁剧疆鍒濆鍊� 锛宮ounted鏃跺啀璁炬纭殑锛岀洰鐨勬槸鏀瑰彉鏃堕棿浜嗚Е鍙慶hange
- time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00']
- };
+ 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() {
- this,this.initOneWeekAgoTime()
- this.$emit('submitTime', this.time);
+ if (this.useNewStyle) {
+ // 鏂版牱寮忎笅榛樿閫変腑浠婃棩
+ this.selectedRange = 'today'
+ this.selectTimeRange('today')
+ } else {
+ // 鍘熸湁鏍峰紡涓嬩娇鐢ㄤ竴鍛ㄥ墠鐨勯粯璁ゆ椂闂�
+ this.initOneWeekAgoTime()
+ this.$emit('submitTime', this.time)
+ }
},
- methods:{
- initOneWeekAgoTime(){
+ 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');
- }
- }
-};
+ // 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 class="block">
- <span class="demonstration">璧锋鏃堕棿锛�</span>
+ <!-- 鏃堕棿閫夋嫨缁勪欢 -->
+ <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"
- type="datetimerange"
+ :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-left: 30px;
- margin-top: 5px;
+ margin-right: 10px;
font-weight: bold;
white-space: nowrap;
}
+
+.pick-date {
+ width: 100%;
+}
+
.block {
display: flex;
justify-content: center;
/* width: 50%; */
white-space: nowrap;
}
-.pick-date {
- width: 100%;
-}
+.block .demonstration {
+ margin-left: 30px;
+ margin-top: 5px;
+}
</style>
--
Gitblit v1.9.3