From 34257f504330191b1a698eb48b52217095db47fe Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 04 九月 2023 18:10:46 +0800
Subject: [PATCH] 扬尘vue
---
src/sfc/TimeSelectWithShortCuts.vue | 175 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 101 insertions(+), 74 deletions(-)
diff --git a/src/sfc/TimeSelectWithShortCuts.vue b/src/sfc/TimeSelectWithShortCuts.vue
index 5cf713a..01b6bc1 100644
--- a/src/sfc/TimeSelectWithShortCuts.vue
+++ b/src/sfc/TimeSelectWithShortCuts.vue
@@ -13,83 +13,110 @@
***
-->
<script>
-import dayjs from 'dayjs'
- export default {
- emits: ['submitTime'],
- data() {
- return{
- //淇濆瓨寮�濮嬪拰缁撴潫鏃堕棿
- // 闅忎究璁剧疆鍒濆鍊� 锛宮ounted鏃跺啀璁炬纭殑锛岀洰鐨勬槸鏀瑰彉鏃堕棿浜嗚Е鍙慶hange
- time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
- shortcuts:[],
- }
- },
- mounted() {
- this.initShortCuts()
- this.initOneWeekAgoTime()
- this.$emit('submitTime', this.time);
- },
- methods: {
- initShortCuts(){
- this.shortcuts = [
- {
- text: '鍓嶄竴鏃�',
- value: () => {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24)
- return [start, end]
- },
- },
-
- {
- text: '鍓�7澶�',
- value: () => {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
- return [start, end]
- },
- },
- {
- text: '鍓嶄竴鏈�',
- value: () => {
- const end = new Date()
- const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
- return [start, end]
- },
- },
-
-]
- },
- initOneWeekAgoTime(){
- // 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂翠负涓�鍛ㄥ墠
- this.time[0] = dayjs().subtract(6, 'week').format('YYYY-MM-DD HH:mm:ss');
- this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
+import dayjs from 'dayjs';
+export default {
+ props: {
+ timeType: {
+ type: String,
+ default: 'month'
}
- }
-}
+ },
+ emits: ['submitTime'],
+ data() {
+ return {
+ //淇濆瓨寮�濮嬪拰缁撴潫鏃堕棿
+ // 闅忎究璁剧疆鍒濆鍊� 锛宮ounted鏃跺啀璁炬纭殑锛岀洰鐨勬槸鏀瑰彉鏃堕棿浜嗚Е鍙慶hange
+ time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
+ shortcuts: []
+ };
+ },
+ mounted() {
+ this.initShortCuts();
+ this.initOneWeekAgoTime();
+ this.$emit('submitTime', this.time);
+ },
+ methods: {
+ initShortCuts() {
+ this.shortcuts = [
+ {
+ text: '鍓嶄竴鏃�',
+ value: () => {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24);
+ return [start, end];
+ }
+ },
+
+ {
+ text: '鍓�7澶�',
+ value: () => {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ return [start, end];
+ }
+ },
+ {
+ text: '鍓嶄竴鏈�',
+ value: () => {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ return [start, end];
+ }
+ }
+ ];
+ },
+ initOneWeekAgoTime() {
+ switch (this.timeType) {
+ case 'day':
+ this.time[0] = dayjs()
+ .subtract(1, 'day')
+ .format('YYYY-MM-DD HH:mm:ss');
+ this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ break;
+ case 'week':
+ this.time[0] = dayjs()
+ .subtract(1, 'week')
+ .format('YYYY-MM-DD HH:mm:ss');
+ this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ break;
+ case 'month':
+ this.time[0] = dayjs()
+ .subtract(1, 'month')
+ .format('YYYY-MM-DD HH:mm:ss');
+ this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ break;
+ default:
+ this.time[0] = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss');
+ this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ }
+ }
+ }
+};
</script>
<template>
- <div class="block">
- <span class="demonstration">璧锋鏃堕棿锛�</span>
- <el-date-picker
- v-model="time"
- type="datetimerange"
- :shortcuts="shortcuts"
- range-separator="~"
- start-placeholder="寮�濮嬫椂闂�"
- end-placeholder="缁撴潫鏃堕棿"
- value-format="YYYY-MM-DD HH:mm:ss"
- @change="$emit('submitTime', time)"
- class="pick-date"
- />
+ <div class="block">
+ <span class="demonstration">璧锋鏃堕棿锛�</span>
+ <div class="pick-date">
+ <el-date-picker
+ v-model="time"
+ type="datetimerange"
+ :shortcuts="shortcuts"
+ range-separator="~"
+ start-placeholder="寮�濮嬫椂闂�"
+ end-placeholder="缁撴潫鏃堕棿"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ @change="$emit('submitTime', time)"
+
+ />
+ </div>
</div>
</template>
-<style scoped>
+<style scoped>
.block {
display: flex;
width: 570px;
@@ -101,7 +128,7 @@
font-size: 16px;
}
-.pick-date {
- margin-top: 5px;
-}
-</style>
\ No newline at end of file
+/* .pick-date {
+ width: 200px;
+} */
+</style>
--
Gitblit v1.9.3