sk-matrix-project/frontend/matrix-middle-service-web/src/components/DateTimeSelector.vue

<template>
    <div class="q-pa-md">
        <q-input filled v-model="model" dense @click="show = true" :style="{width: range?'350px':'280px'}">
            <template v-slot:prepend>
                <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy transition-show="scale" transition-hide="scale" v-model="show" dense>
                        <div class="q-gutter-xs row items-stretch">
                            <q-scroll-area
                                class="pt-0.5 pl-2 pr-2"
                                :thumb-style="scrollArea.thumbStyle"
                                :bar-style="scrollArea.barStyle"
                                style="width: 150px;max-height: 380px">
                                <q-btn
                                    v-for="item in (range?rangeShortcut:shortcut)"
                                    class="full-width m-0.5"
                                    color="primary"
                                    size="sm"
                                    @click="setValue(item.value)"
                                    :label="item.label"
                                />
                            </q-scroll-area>

                            <div class="flex" v-if="!range">
                                <div class="flex flex-col">
                                    <q-btn color="primary" class="full-width m-1 h-1/3" push>
                                        <div class="row items-center no-wrap">
                                            <q-icon left name="access_time"></q-icon>
                                            <span>{{ date }}</span>
                                        </div>

                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                            <q-time v-model="date" mask="YYYY-MM-DD HH:mm:ss" format24h with-seconds>
                                                <div class="row items-center justify-end q-gutter-sm">
                                                    <q-btn label="确定" color="primary" flat v-close-popup/>
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-btn>


                                    <q-date v-model="date" mask="YYYY-MM-DD HH:mm:ss" class="flex-2"></q-date>
                                </div>
                            </div>

                            <div v-else class="flex">
                                <div class="flex flex-col">
                                    <q-btn color="primary" class="m-1 h-1/3" push>
                                        <div class="row items-center no-wrap">
                                            <q-icon left name="access_time"></q-icon>
                                            <span>{{ date.from }}</span>
                                        </div>

                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                            <q-time v-model="date.from" mask="YYYY-MM-DD HH:mm:ss" format24h
                                                    with-seconds>
                                                <div class="row items-center justify-end q-gutter-sm">
                                                    <q-btn label="确定" color="primary" flat v-close-popup/>
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-btn>

                                    <q-date v-model="date.from" mask="YYYY-MM-DD HH:mm:ss" class="flex-2"></q-date>
                                </div>
                                <div class="flex flex-col">
                                    <q-btn color="primary" class="full-width m-1 h-1/3" push>
                                        <div class="row items-center no-wrap">
                                            <q-icon left name="access_time"></q-icon>
                                            <span>{{ date.to }}</span>
                                        </div>

                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                            <q-time v-model="date.to" mask="YYYY-MM-DD HH:mm:ss" format24h with-seconds>
                                                <div class="row items-center justify-end q-gutter-sm">
                                                    <q-btn label="确定" color="primary" flat v-close-popup/>
                                                </div>
                                            </q-time>
                                        </q-popup-proxy>
                                    </q-btn>

                                    <q-date v-model="date.to" mask="YYYY-MM-DD HH:mm:ss" class="flex-2" :options="rangeToOptions"></q-date>
                                </div>
                            </div>
                        </div>
                    </q-popup-proxy>
                </q-icon>
            </template>
        </q-input>
    </div>
</template>

<script setup>
import {computed, reactive, ref} from "vue";
import moment from 'moment';

const props = defineProps({
    modelValue: String || Object,
    range: Boolean
})
const range = computed(() => props.range)
const date = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        console.log(value)
        emit('update:modelValue', value)
    }
})
const emit = defineEmits(['update:modelValue'])
const model = computed(() => {
    if (range.value) {
        return date.value ? `${date.value.from || ""} - ${date.value.to || ""}` : ""
    } else {
        return date.value;
    }
})
const show = ref(false)
const scrollArea = reactive({
    thumbStyle: {
        right: '4px',
        borderRadius: '5px',
        backgroundColor: '#027be3',
        width: '5px',
        opacity: "0.75"
    },
    barStyle: {
        right: '2px',
        borderRadius: '9px',
        backgroundColor: '#027be3',
        width: '9px',
        opacity: "0.2"
    }
})

function setValue(value) {
    date.value = value();
}

const shortcut = reactive([
    {
        label: "今天",
        value: ()=>moment().startOf('d').format("YYYY-MM-DD HH:mm:ss")
    },

])

function rangeToOptions(dateData){
    if(!date.value.from){
        return true;
    }

    let result = moment(date.value.from).startOf('d').isSameOrBefore(dateData)
    if(!moment(date.value.from).startOf('d').isSameOrBefore(date.value.to)){
        date.value.to = date.value.from
    }
    return result;
}

const rangeShortcut = reactive([
    {
        label: "今天至当前时间",
        value:()=>({
            from: moment().startOf('d').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近5分钟",
        value:()=>({
            from: moment().subtract(5, 'm').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近30分钟",
        value:()=>({
            from: moment().subtract(30, 'm').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近1小时",
        value:()=>({
            from: moment().subtract(1, 'h').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近2小时",
        value:()=>({
            from: moment().subtract(2, 'h').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近4小时",
        value:()=>({
            from: moment().subtract(4, 'h').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近6小时",
        value:()=>({
            from: moment().subtract(6, 'h').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近12小时",
        value:()=>({
            from: moment().subtract(12, 'h').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近24小时",
        value:()=>({
            from: moment().subtract(24, 'h').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近2天",
        value:()=>({
            from: moment().subtract(2, 'd').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近3天",
        value:()=>({
            from: moment().subtract(3, 'd').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
    {
        label: "最近7天",
        value:()=>({
            from: moment().subtract(7, 'd').format("YYYY-MM-DD HH:mm:ss"),
            to: moment().format("YYYY-MM-DD HH:mm:ss"),
        })
    },
])
</script>

<style scoped>

</style>