|
|
@@ -0,0 +1,106 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRangeValue"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ size="default"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ :clearable="false"
|
|
|
+ @change="$emit('change', dateRangeValue)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+import dayjs, { Dayjs } from 'dayjs'
|
|
|
+
|
|
|
+const props = defineProps<{timezone: string}>()
|
|
|
+
|
|
|
+const dateRangeValue = ref([])
|
|
|
+
|
|
|
+
|
|
|
+function disabledDate(datetime: Date) {
|
|
|
+ const now = dayjs(new Date()).startOf('day')
|
|
|
+ const now_tz = now.tz(props.timezone)
|
|
|
+ return now_tz.isSameOrBefore(dayjs(datetime).tz(props.timezone))
|
|
|
+}
|
|
|
+
|
|
|
+function tzFormat(dt_tz: Dayjs) {
|
|
|
+ return dt_tz.format("YYYY-MM-DD HH:mm:ss")
|
|
|
+}
|
|
|
+
|
|
|
+function recentDays(days: number):string[] {
|
|
|
+ const now_tz = dayjs(new Date()).tz(props.timezone)
|
|
|
+ const start = now_tz.subtract(days, 'day')
|
|
|
+ const end = now_tz.subtract(1, 'day')
|
|
|
+ return [tzFormat(start), tzFormat(end)]
|
|
|
+}
|
|
|
+
|
|
|
+function currentWeekMonthYear(dim: 'month'|'week'|'year'): string[] {
|
|
|
+ const end = dayjs(new Date()).tz(props.timezone)
|
|
|
+ const start = end.startOf(dim)
|
|
|
+ return [tzFormat(start), tzFormat(end)]
|
|
|
+}
|
|
|
+
|
|
|
+function lastWeekMonthYear(dim: 'month'|'week'|'year'): string[] {
|
|
|
+ const last = dayjs(new Date()).tz(props.timezone).subtract(1, dim)
|
|
|
+ return [tzFormat(last.startOf(dim)), tzFormat(last.endOf(dim))]
|
|
|
+}
|
|
|
+
|
|
|
+const shortcuts = [
|
|
|
+ {
|
|
|
+ text: '今天',
|
|
|
+ value: () => {
|
|
|
+ const now_tz = dayjs(new Date()).tz(props.timezone)
|
|
|
+ return [tzFormat(now_tz), tzFormat(now_tz)]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ value: () => recentDays(1)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近7天',
|
|
|
+ value: () => recentDays(7)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近15天',
|
|
|
+ value: () => recentDays(15)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '最近30天',
|
|
|
+ value: () => recentDays(30)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本周',
|
|
|
+ value: () => currentWeekMonthYear('week')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '上周',
|
|
|
+ value: () => lastWeekMonthYear('week')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本月',
|
|
|
+ value: () => currentWeekMonthYear('month')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '上月',
|
|
|
+ value: () => lastWeekMonthYear('month')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '本年',
|
|
|
+ value: () => currentWeekMonthYear('year')
|
|
|
+ }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
guojing_wu