admin-govern/src/components/form/datePicker/index.vue

<template>
    <el-select v-model="interval" style="width: 90px; margin-right: 10px" @change="timeChange">
        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-date-picker
        v-model="timeValue"
        type="daterange"
        :disabled="disabledPicker"
        style="width: 230px; margin-right: 10px"
        unlink-panels
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        :shortcuts="shortcuts"
    />
    <el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
    <el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
    <el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
</template>

<script lang="ts" setup>
import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

const interval = ref(3)
const disabledPicker = ref(true)
const timeValue = ref()
const backDisabled = ref(false)
const preDisabled = ref(false)
const timeOptions = [
    { label: '年份', value: 1 },
    { label: '季度', value: 2 },
    { label: '月份', value: 3 },
    { label: '周', value: 4 },
    { label: '自定义', value: 5 }
]
const shortcuts = [
    {
        text: '最近一周',
        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]
        }
    },
    {
        text: '最近3个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        }
    }
]
onMounted(() => {
    timeChange(3)
})
// 选择时间范围
const timeChange = (e: number) => {
    if (e == 1) {
        disabledPicker.value = true
        timeValue.value = [setTime(1), setTime()]
    } else if (e == 2) {
        disabledPicker.value = true
        timeValue.value = [setTime(2), setTime()]
    } else if (e == 3) {
        disabledPicker.value = true
        timeValue.value = [setTime(3), setTime()]
    } else if (e == 4) {
        disabledPicker.value = true
        timeValue.value = [setTime(0, 7), setTime()]
    } else if (e == 5) {
        disabledPicker.value = false
    }
}
// 上一个
const preClick = () => {}
// 当前
const nowTime = () => {}
//下一个
const next = () => {}

const setTime = (flag = 0, e = 0) => {
    let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
    let data = ''
    if (dd < 4) {
        data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
    } else {
        data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
    }
    console.log('🚀 ~ file: index.vue:98 ~ setTime ~ data:', dd < 4, data)

    if (flag == 1) {
        data = data.slice(0, 5) + '01-01'
    } else if (flag == 2) {
        let quarter = data.slice(5, 7) - 0
        if (0 < quarter && quarter <= 3) {
            data = data.slice(0, 5) + '01-01'
        } else if (3 < quarter && quarter <= 6) {
            data = data.slice(0, 5) + '04-01'
        } else if (6 < quarter && quarter <= 9) {
            data = data.slice(0, 5) + '07-01'
        } else {
            data = data.slice(0, 5) + '10-01'
        }
    }
    if (flag == 3) {
        data = data.slice(0, 8) + '01'
    }

    return data
}

defineExpose({ timeValue })
</script>

<style scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>