centaline-data-driven-v3 0.1.15 → 0.1.16

package/src/components/web/DateTimePicker/DateTimePicker.vue

@@ -0,0 +1,748 @@
+<template>
+    <div class="el-input" v-bind="model.attrs">
+        <!-- 输入框 -->
+        <div class="el-input__inner" ref="inputRef" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
+            <el-icon style="color: rgb(181 185 196);">
+                <Clock />
+            </el-icon>
+            <input v-model="internalValue" @click="togglePicker" @blur.stop="handleBlur('dateTime')"
+                :disabled="model.locked" :disabled-date="disabledDate" />
+
+            <span class="el-input__close" @click.stop="clearDate" v-if="displayDateTime && isHovered">
+                <el-icon>
+                    <CircleClose />
+                </el-icon>
+            </span>
+        </div>
+
+        <!-- 使用el-popover重构弹层面板 -->
+        <el-popover ref="popoverRef" :virtual-ref="inputRef" trigger="click" :width="panelWidth" :show-arrow="true"
+            virtual-triggering popper-class="datetime-popover" @show="onPopoverShow" @hide="onPopoverHide" :transition="0" :hide-after="0">
+            <div class="datetime-panel" @click.stop>
+                <div class="panel-container">
+                    <!-- 左侧日历 -->
+                    <div class="date-section" v-if="showDateSection">
+                        <div class="calendar-header">
+                            <div class="calendar-nav">
+                                <button @click="prevYear" title="上一年">«</button>
+                                <button @click="prevMonth">‹</button>
+                            </div>
+                            <div class="calendar-title">
+                                {{ currentYear }}年{{ currentMonth + 1 }}月
+                            </div>
+
+                            <div class="calendar-nav">
+                                <button @click="nextMonth">›</button>
+                                <button @click="nextYear" title="下一年">»</button>
+                            </div>
+                        </div>
+
+                        <div class="calendar-grid">
+                            <div v-for="day in weekDays" :key="day" class="week-header">
+                                {{ day }}
+                            </div>
+                            <div v-for="item in calendarDates" :key="item.date.toString()" class="calendar-cell" :class="{
+                                selected: isDateSelected(item.date),
+                                disabled: !item.isCurrentMonth,
+                                today: isToday(item.date),
+                            }" @click="selectDate(item.date, item.isCurrentMonth)">
+                                {{ item.day }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 右侧时间 -->
+                    <div v-if="showTimeSection" class="time-section">
+                        <div class="time-selectors">
+                            <div class="time-column">
+                                <div class="time-label">时</div>
+                                <div class="time-selector" ref="hourSelectorRef">
+                                    <div v-for="h in hours" :key="h" class="time-option hour-selector"
+                                        :class="{ selected: selectedHour === h }" @click="selectHour(h)">
+                                        {{ h.toString().padStart(2, '0') }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="time-column" v-if="showMinuteSection">
+                                <div class="time-label">分</div>
+                                <div class="time-selector" ref="minuteSelectorRef">
+                                    <div v-for="m in minutes" :key="m" class="time-option minute-selector"
+                                        :class="{ selected: selectedMinute === m }" @click="selectMinute(m)">
+                                        {{ m.toString().padStart(2, '0') }}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="time-column" v-if="showSecondSection">
+                                <div class="time-label">秒</div>
+                                <div class="time-selector">
+                                    <div v-for="s in seconds" :key="s" class="time-option second-selector"
+                                        :class="{ selected: selectedSecond === s }" @click="selectSecond(s)">
+                                        {{ s.toString().padStart(2, '0') }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 底部按钮 -->
+                <div class="panel-footer">
+                    <button class="el-button el-button--default" @click="cancelSelection">
+                        取消
+                    </button>
+                    <button class="el-button el-button--now" @click="selectNow">
+                        此刻
+                    </button>
+                    <button class="el-button el-button--primary" @click="confirmSelection">
+                        确定
+                    </button>
+                </div>
+            </div>
+        </el-popover>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import dayjs from 'dayjs'
+import { ElPopover } from 'element-plus'
+
+/* props 支持外部 v-model */
+const props = defineProps({
+    modelValue: { type: [Date, String], default: null },
+    model: { type: [Object, Array], default: null },
+    format: { type: String, default: 'YYYY-MM-DD HH:mm:ss' },
+    minuteStep: { type: Number, default: 1 }
+})
+const emit = defineEmits(['update:modelValue', 'change'])
+const initialValueRef = ref() // 保存初始值
+const isHovered = ref(false)
+
+/* 响应式数据 */
+const showPicker = ref(false)
+const selectedDate = ref(null)
+const selectedHour = ref(null)
+const selectedMinute = ref(null)
+const selectedSecond = ref(null)
+const currentMonth = ref(new Date().getMonth())
+const currentYear = ref(new Date().getFullYear())
+const inputRef = ref()
+const popoverRef = ref()
+
+const hourSelectorRef = ref(null);
+const minuteSelectorRef = ref(null);
+const secondSelectorRef = ref(null);
+
+/* 计算属性 */
+const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+const showDateSection = computed(() => /(YYYY|MM|DD)/.test(props.format))
+
+const showTimeSection = computed(() => /(HH|hh|mm|ss)/.test(props.format))
+const showMinuteSection = computed(() => /mm/.test(props.format))
+const showSecondSection = computed(() => /ss/.test(props.format))
+const is12HourFormat = computed(() => /hh/.test(props.format))
+
+const hours = computed(() =>
+    is12HourFormat.value
+        ? Array.from({ length: 12 }, (_, i) => i + 1)
+        : Array.from({ length: 24 }, (_, i) => i)
+)
+const minutes = computed(() => {
+    const step = Math.max(1, Math.floor(props.minuteStep))   // 防非法值
+    return Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step % 60)
+})
+const seconds = computed(() => Array.from({ length: 60 }, (_, i) => i))
+
+const panelWidth = computed(() => {
+    let width = 320
+    if (showTimeSection.value) {
+        if (showMinuteSection.value && showSecondSection.value) width = 508
+        else if (showMinuteSection.value) width = 450
+        else width = 389
+    }
+    return width
+})
+
+const calendarDates = computed(() => {
+    const first = new Date(currentYear.value, currentMonth.value, 1)
+    const last = new Date(currentYear.value, currentMonth.value + 1, 0)
+    const firstDay = first.getDay()
+    const prevLast = new Date(currentYear.value, currentMonth.value, 0).getDate()
+    const list = []
+
+    /* 上月尾部 */
+    for (let i = firstDay; i > 0; i--) {
+        const day = prevLast - i + 1
+        list.push({ day, date: new Date(currentYear.value, currentMonth.value - 1, day), isCurrentMonth: false })
+    }
+    /* 当月 */
+    for (let d = 1; d <= last.getDate(); d++) {
+        list.push({ day: d, date: new Date(currentYear.value, currentMonth.value, d), isCurrentMonth: true })
+    }
+    /* 下月头部 */
+    const remain = 42 - list.length
+    for (let d = 1; d <= remain; d++) {
+        list.push({ day: d, date: new Date(currentYear.value, currentMonth.value + 1, d), isCurrentMonth: false })
+    }
+    return list
+})
+
+const internalValue = ref(props.modelValue)
+watch(() => props.modelValue, val => (internalValue.value = val), { immediate: true })
+
+const displayDateTime = computed(() =>
+    internalValue.value ? formatDateTime(new Date(internalValue.value), props.format) : ''
+)
+
+/* 工具函数 */
+function formatDateTime(date, fmt) {
+    const y = date.getFullYear()
+    const M = date.getMonth() + 1
+    const D = date.getDate()
+    const H = date.getHours()
+    const m = date.getMinutes()
+    const s = date.getSeconds()
+    const h12 = H % 12 || 12
+    const A = H >= 12 ? 'PM' : 'AM'
+    return fmt
+        .replace('YYYY', y)
+        .replace('MM', String(M).padStart(2, '0'))
+        .replace('DD', String(D).padStart(2, '0'))
+        .replace('HH', String(H).padStart(2, '0'))
+        .replace('hh', String(h12).padStart(2, '0'))
+        .replace('mm', String(m).padStart(2, '0'))
+        .replace('ss', String(s).padStart(2, '0'))
+        .replace('A', A)
+}
+
+function isToday(date) {
+    const t = new Date()
+    return date.getDate() === t.getDate() &&
+        date.getMonth() === t.getMonth() &&
+        date.getFullYear() === t.getFullYear()
+}
+
+function isDateSelected(date) {
+    if (!selectedDate.value) return false
+    return date.getTime() === selectedDate.value.getTime()
+}
+
+/* 交互函数 */
+function togglePicker() {
+    showPicker.value = !showPicker.value
+    if (!showPicker.value) return
+    initialValueRef.value = internalValue.value // 保存初始值
+    // 初始化
+    const now = internalValue.value ? new Date(internalValue.value) : new Date(new Date().setHours(0, 0, 0, 0));
+    selectedDate.value = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+    selectedHour.value = now.getHours()
+    selectedMinute.value = now.getMinutes()
+    selectedSecond.value = now.getSeconds()
+    currentYear.value = now.getFullYear()
+    currentMonth.value = now.getMonth()
+}
+
+function selectDate(date, isCurrentMonth) {
+    if (!isCurrentMonth) {
+        currentMonth.value = date.getMonth()
+        currentYear.value = date.getFullYear()
+    }
+    selectedDate.value = date;
+    // 时间未选择时重置为00:00:00
+    if (!selectedHour.value) {
+        selectedHour.value = 0
+        selectedMinute.value = 0
+        selectedSecond.value = 0
+    }
+    setinternalValue();
+}
+
+function selectHour(h) { selectedHour.value = h; setinternalValue() }
+function selectMinute(m) { selectedMinute.value = m; setinternalValue() }
+function selectSecond(s) { selectedSecond.value = s; setinternalValue() }
+
+
+function prevYear() {
+    currentYear.value--
+}
+function nextYear() {
+    currentYear.value++
+}
+function prevMonth() {
+    if (currentMonth.value === 0) {
+        currentMonth.value = 11
+        currentYear.value--
+    } else {
+        currentMonth.value--
+    }
+}
+function nextMonth() {
+    if (currentMonth.value === 11) {
+        currentMonth.value = 0
+        currentYear.value++
+    } else {
+        currentMonth.value++
+    }
+}
+
+function confirmSelection() {
+    setinternalValue();
+    showPicker.value = false;
+    popoverRef.value.hide();  // 调用组件API关闭
+
+}
+
+function setinternalValue() {
+    if (!selectedDate.value) {
+        selectedDate.value = new Date() // 未选日期时强制当前日期
+    }
+    // 时间部分补全逻辑
+    const date = new Date(
+        selectedDate.value.getFullYear(),
+        selectedDate.value.getMonth(),
+        selectedDate.value.getDate(),
+        selectedHour.value || 0,
+        selectedMinute.value || 0,
+        selectedSecond.value || 0
+    )
+
+    internalValue.value = formatDateTime(date, props.format);
+    emit('update:modelValue', internalValue.value)
+    emit('change');
+
+}
+function selectNow() {
+    const now = new Date();
+    const step = Math.max(1, Math.floor(props.minuteStep));
+    now.setMinutes(Math.round(now.getMinutes() / step) * step % 60, 0, 0);
+    internalValue.value = formatDateTime(now, props.format);   // 赋给你绑定的 v-model
+    emit('update:modelValue', internalValue.value);
+    emit('change');
+    showPicker.value = false;
+    popoverRef.value.hide();  // 调用组件API关闭
+
+}
+function clearDate() {
+    internalValue.value = null;   // 赋给你绑定的 v-model
+    emit('update:modelValue', null)
+    emit('change');
+    showPicker.value = false
+}
+function cancelSelection() {
+    internalValue.value = (initialValueRef.value ? formatDateTime(new Date(initialValueRef.value), props.format) : '');
+    showPicker.value = false
+    emit('update:modelValue', internalValue.value);
+    popoverRef.value.hide();  // 调用组件API关闭
+
+}
+function isValidDateFormat(dateStr, format) {
+    const normalized = normalizeDateTimeInput(dateStr, format)
+    return normalized ? dayjs(normalized, format, true).isValid() : false
+}
+
+const handleBlur = () => {
+    if (internalValue.value && isValidDateFormat(internalValue.value, props.format)) {
+        // 时间部分补全逻辑
+        const date = new Date(normalizeDateTimeInput(internalValue.value, props.format));
+
+        internalValue.value = formatDateTime(date, props.format);
+        emit('update:modelValue', internalValue.value);
+        showPicker.value = false
+    }
+    else {
+        internalValue.value = initialValueRef.value;
+        emit('update:modelValue', internalValue.value);
+    }
+}
+function normalizeDateTimeInput(input, format) {
+    const hasYear = /YYYY/.test(format)
+    const hasMonth = /MM/.test(format)
+    const hasDay = /DD/.test(format)
+    const hasHour = /HH|hh/.test(format)
+    const hasMinute = /mm/.test(format)
+    const hasSecond = /ss/.test(format)
+
+    let padded = input.trim()
+
+    // 如果格式中有日期部分，但输入中没有，补全
+    if (hasYear && !/\d{4}/.test(padded)) return '' // 年必须有，否则无效
+    if (hasMonth && !/\d{2}/.test(padded)) return '' // 月必须有，否则无效
+    if (hasDay && !/\d{2}/.test(padded)) return '' // 日必须有，否则无效
+
+    // 补全时分秒
+    if (hasHour && !/(\d{2}):(\d{2})(?::(\d{2}))?/.test(padded)) {
+        const parts = padded.split(' ')
+        const datePart = parts[0] || ''
+        let timePart = parts[1] || ''
+
+        if (hasHour && !timePart) timePart = '00'
+        if (hasMinute && !timePart.includes(':')) timePart += ':00'
+        if (hasMinute && !timePart.split(':')[1]) timePart += '00'
+        if (hasSecond && !timePart.split(':')[2]) timePart += ':00'
+
+        padded = `${datePart} ${timePart}`.trim()
+    }
+
+    return padded
+}
+
+// 新增函数：滚动到选中的时间位置
+function scrollToSelectedTime() {
+    // 小时选择器滚动
+    if (hourSelectorRef.value && selectedHour.value !== null) {
+        let hourValue = selectedHour.value;
+        // 处理12小时制
+        if (is12HourFormat.value) {
+            hourValue = selectedHour.value % 12;
+            if (hourValue === 0) hourValue = 12;
+        }
+        const hourIndex = hours.value.indexOf(hourValue);
+        if (hourIndex !== -1) {
+            hourSelectorRef.value.scrollTop = hourIndex * 26.8; // 30是每个选项的高度
+        }
+    }
+
+    // 分钟选择器滚动
+    if (minuteSelectorRef.value && selectedMinute.value !== null) {
+        const minuteIndex = minutes.value.indexOf(selectedMinute.value);
+        if (minuteIndex !== -1) {
+            minuteSelectorRef.value.scrollTop = minuteIndex * 26.8;
+        }
+    }
+
+    // 秒选择器滚动
+    if (secondSelectorRef.value && selectedSecond.value !== null) {
+        const secondIndex = seconds.value.indexOf(selectedSecond.value);
+        if (secondIndex !== -1) {
+            secondSelectorRef.value.scrollTop = secondIndex * 26.8;
+        }
+    }
+}
+// 处理popover显示事件
+function onPopoverShow() {
+    nextTick(() => {
+        scrollToSelectedTime();
+    });
+}
+
+// 处理popover隐藏事件
+function onPopoverHide() {
+    showPicker.value = false
+}
+
+// 移除原来的全局点击事件监听，因为el-popover会处理
+</script>
+
+<style scoped>
+/* Element-UI风格输入框 */
+
+.el-input__inner {
+    flex: 1 1 auto;
+    /* 限制Flex容器自动扩展 */
+    display: flex;
+    align-items: center;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    height: 26px;
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+    font-size: 12px;
+    padding: 1px 8px;
+
+}
+
+.el-input__inner:hover {
+    border-color: #c0c4cc;
+}
+
+.el-input__inner:focus-within {
+    border-color: #409eff;
+}
+
+.el-input__inner input {
+    border: none;
+    padding: 0;
+    flex: 1;
+    cursor: pointer;
+    background: transparent;
+    height: 100%;
+    width: calc(100% - 20px);
+}
+
+.el-input__close {
+    position: absolute;
+    right: 8px;
+    /* 明确右侧定位 */
+    flex-shrink: 0;
+    /* 阻止子元素收缩 */
+    color: rgb(181 185 196);
+}
+
+/* 日期时间选择面板 */
+.datetime-panel {
+    width: 100%;
+    background: white;
+    border-radius: 4px;
+    padding: 16px;
+    border: 1px solid #e4e7ed;
+}
+
+/* 修改后的日期时间面板布局 */
+.panel-container {
+    display: flex;
+    flex-direction: row;
+    /* 强制水平排列 */
+    flex-wrap: nowrap;
+    /* 禁止换行 */
+    gap: 7px;
+    width: 100%;
+    /* 填充父容器宽度 */
+}
+
+.date-section {
+    flex: 1 1 300px;
+    /* 最小宽度300px，自动扩展 */
+    min-width: 300px;
+    /* 保证基础宽度 */
+    max-width: 50%;
+    /* 最大占50%宽度 */
+    border-right: 1px solid #ebeef5;
+    padding-right: 20px;
+}
+
+.time-section {
+    flex: 1 1 200px;
+    /* 最小宽度200px，自动扩展 */
+    max-width: 50%;
+    /* 最大占50%宽度 */
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+/* 日历头部 */
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.calendar-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #606266;
+}
+
+.calendar-nav button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #606266;
+    font-size: 16px;
+    padding: 5px;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    float: left;
+}
+
+.calendar-nav button:hover {
+    background-color: #f5f7fa;
+    color: #409eff;
+}
+
+/* 日历网格 */
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+    margin-bottom: 15px;
+}
+
+.week-header {
+    text-align: center;
+    font-size: 12px;
+    color: #909399;
+    padding: 8px 0;
+    font-weight: 500;
+}
+
+.calendar-cell {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 12px;
+    position: relative;
+}
+
+.calendar-cell:hover {
+    background-color: #f2f6fc;
+}
+
+.calendar-cell.selected {
+    background-color: #409eff;
+    color: white;
+    border-radius: 50%;
+}
+
+.calendar-cell.disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+}
+
+.calendar-cell.today:not(.selected) {
+    color: #409eff;
+    font-weight: 500;
+}
+
+/* 时间选择器 */
+.time-selectors {
+    display: flex;
+    gap: 5px;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+
+.time-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+}
+
+.time-label {
+    font-size: 13px;
+    color: #606266;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.time-selector {
+    width: 55px;
+    height: 260px;
+    overflow-y: auto;
+    border: 1px solid #e4e7ed;
+    border-radius: 8px;
+    scrollbar-width: thin;
+    scrollbar-color: #c0c4cc #f5f7fa;
+    /* 隐藏滚动条，但保持可滚动 */
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+    /* IE 10+ */
+}
+
+.time-selector::-webkit-scrollbar {
+    display: none;
+}
+
+.time-selector::-webkit-scrollbar-track {
+    background: #f5f7fa;
+    border-radius: 3px;
+}
+
+.time-selector::-webkit-scrollbar-thumb {
+    background: #c0c4cc;
+    border-radius: 3px;
+}
+
+.time-selector::-webkit-scrollbar-thumb:hover {
+    background: #909399;
+}
+
+.time-option {
+    padding: 5px 0;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 12px;
+    border-radius: 4px;
+    /* margin: 2px 4px; */
+}
+
+.time-option:hover {
+    background-color: #f5f7fa;
+}
+
+.time-option.selected {
+    color: #3498db;
+    font-weight: 500;
+    background-color: #ecf5ff;
+}
+
+/* 底部操作按钮 */
+.panel-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    border-top: 1px solid #e4e7ed;
+    padding-top: 12px;
+    margin-top: 10px;
+}
+
+.el-button {
+    padding: 9px 15px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.el-button--default {
+    background-color: transparent;
+    color: #606266;
+}
+
+.el-button--default:hover {
+    color: #409eff;
+}
+
+.el-button--primary {
+    background-color: #409eff;
+    color: white;
+}
+
+.el-button--primary:hover {
+    background-color: #66b1ff;
+}
+
+/* 蓝色文字 */
+.now-btn {
+    color: #409eff;
+    /* Element 主蓝 */
+    border: none;
+    padding: 0 8px;
+    background-color: transparent;
+}
+
+.now-btn:hover {
+    color: #66b1ff;
+    /* 悬停更浅一点 */
+}
+
+.el-form-item.is-error .el-input__inner {
+    border-color: #f56c6c;
+}
+</style>
+
+<style>
+/* 全局样式，用于自定义el-popover */
+.datetime-popover {
+    padding: 0 !important;
+    border: 1px solid #e4e7ed !important;
+}
+</style>