shrimp-admin/src/components/fields/FieldDate.vue

<template>
    <template v-if="mode === 'display'">
        <template v-if="Array.isArray(modelValue)">
            <span v-if="!modelValue.length">-</span>
            <span v-else class="dt-group">
                <template v-for="(p, i) in parsedArray" :key="i">
                    <el-tooltip v-if="p" :content="p.full" placement="top" :show-after="800">
                        <span class="dt">
                            <el-icon class="ico"><Calendar /></el-icon>
                            <span class="d">{{ p.day }}</span>
                            <span class="t">{{ p.time }}</span>
                        </span>
                    </el-tooltip>
                    <span v-else>-</span>
                </template>
            </span>
        </template>
        <el-tooltip v-else-if="parsed" :content="parsed.full" placement="top" :show-after="800">
            <span class="dt">
                <el-icon class="ico"><Calendar /></el-icon>
                <span class="d">{{ parsed.day }}</span>
                <span class="t">{{ parsed.time }}</span>
            </span>
        </el-tooltip>
        <span v-else>-</span>
    </template>
    <el-date-picker
        v-else-if="mode === 'filter'"
        :model-value="filterModelValue"
        @update:model-value="onFilterChange($event)"
        type="datetimerange"
        :start-placeholder="$t('table.startTime')"
        :end-placeholder="$t('table.endTime')"
        style="width: 100%"
    />
    <el-date-picker
        v-else-if="field.multiple"
        :model-value="modelValue"
        @update:model-value="$emit('update:modelValue', $event)"
        :disabled="disabled"
        type="dates"
        style="width: 100%"
    />
    <el-date-picker v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled"
        type="datetime" :clearable="!field.required" style="width: 100%" />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { Calendar } from '@element-plus/icons-vue'

const props = defineProps<{
    field: any
    modelValue: any
    mode: 'display' | 'edit' | 'filter'
    disabled?: boolean
}>()

const emit = defineEmits<{
    'update:modelValue': [value: any]
}>()

function pad(n: number) { return n < 10 ? '0' + n : String(n) }

function parse(v: any): { day: string; time: string; full: string } | null {
    if (v == null || v === '') return null
    const d = new Date(v)
    if (isNaN(d.getTime())) return null
    const y = d.getFullYear()
    const mo = pad(d.getMonth() + 1)
    const da = pad(d.getDate())
    const h = pad(d.getHours())
    const mi = pad(d.getMinutes())
    const se = pad(d.getSeconds())
    const day = da
    const time = `${h}:${mi}`
    const full = `${y}-${mo}-${da} ${h}:${mi}:${se}`
    return { day, time, full }
}

const parsed = computed(() => parse(props.modelValue))
const parsedArray = computed(() => Array.isArray(props.modelValue) ? props.modelValue.map(parse) : [])

const filterModelValue = computed(() => {
    if (!props.modelValue || typeof props.modelValue !== 'object') return null
    const { min, max } = props.modelValue
    if (min != null && max != null) {
        return [new Date(min), new Date(max)]
    }
    return null
})

function onFilterChange(dates: Date[] | null) {
    if (dates && dates.length === 2) {
        emit('update:modelValue', { min: dates[0].getTime(), max: dates[1].getTime() })
    } else {
        emit('update:modelValue', null)
    }
}
</script>

<style scoped>
.dt-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.dt {
    display: inline-flex;
    align-items: flex-end;
    width: 100px;
    height: 24px;
    box-sizing: border-box;
    padding: 0 10px 3px;
    background: var(--el-fill-color-blank);
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    color: var(--el-text-color-regular);
    vertical-align: middle;
}
.ico {
    color: var(--el-text-color-placeholder);
    font-size: 16px;
    margin-right: 4px;
}
.d {
    color: var(--el-text-color-regular);
}
.t {
    margin-left: auto;
    color: var(--el-text-color-regular);
}
</style>