misp-ui-library-test 0.0.1

package/src/packages/time-picker/src/pane/date-time.vue

@@ -0,0 +1,362 @@
+<template>
+  <div v-init="parentContainerInit" class="ui-timepicker-date-time-pane">
+    <div class="ui-timepicker-date-time-pane__input-wrapper">
+      <div>
+        <ui-input v-model="dateStr" size="medium" :readonly="readonly" @change="handleDateStrChange" />
+      </div>
+      <div>
+        <ui-popover :visible.sync="timePaneVisible" trigger="manual" placement="bottom-end" @show="paneScrollInit('timePaneRef')">
+          <template slot="reference">
+            <ui-input ref="timeTriggerRef" v-model="timeStr" size="medium" :readonly="readonly" @focus="handlePaneOpen" @change="handleTimeStrChange" />
+          </template>
+          <div v-init="parentPopoverInit">
+            <time-pane ref="timePaneRef" style="z-index: 4000" v-model="timeBuffer" :type="timeFormatType" :readonly="readonly" :arrow-control="arrowControl" @close="handleClickoutside" />
+          </div>
+        </ui-popover>
+      </div>
+    </div>
+
+    <!-- 日历选项 -->
+    <date-pane ref="datePaneRef" v-model="timeBuffer" :readonly="readonly" />
+
+    <div class="ui-timepicker-date-time-pane__emit-wrapper">
+      <ui-button label="此刻" type="primary" textual @click="handleNow" @mousedown.stop />
+      <ui-button label="确定" type="primary" size="mini" @click="handleEmit" @mousedown.stop />
+    </div>
+  </div>
+</template>
+
+<script>
+import UiInput from '../../../input/src/main.vue'
+import UiPopover from '../../../popover/src/main.vue'
+import UiButton from '../../../button/src/main.vue' // 确保导入
+import TimePane from './time.vue'
+import DatePane from './date.vue'
+
+import init from '../../../../directives/init/index.js'
+import clickoutside from '../../../../directives/clickoutside/index.js'
+import { formatDate, parseDate } from '../../../../utils/moment/index.js'
+import { hasHour, hasMinute, hasSecond } from '../date-utils.js'
+
+/**
+ * 日期时间选择器面板组件
+ * 用于在 DatePicker 中组合显示日期选择和时间选择功能。
+ * 包含日期输入、时间输入（带 Popover 弹窗）、日期面板、时间面板以及操作按钮。
+ *
+ * @component
+ */
+export default {
+  name: 'UiTimePickerDateTimePane',
+  components: { UiInput, UiPopover, UiButton, TimePane, DatePane },
+  props: {
+    /**
+     * 绑定的日期时间值
+     * @type {Date}
+     * @default null
+     */
+    value: {
+      type: Date,
+      default: null,
+    },
+    /**
+     * 日期时间格式化字符串
+     * 用于解析和显示日期时间，例如 'YYYY-MM-DD HH:mm:ss'
+     * @type {string}
+     * @default 'YYYY-MM-DD HH:mm:ss'
+     */
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD HH:mm:ss',
+    },
+    readonly: Boolean,
+    arrowControl: Boolean
+  },
+  data: () => ({
+    /**
+     * 内部缓冲的时间值，用于在用户点击“确定”前暂存修改
+     * @type {Date|null}
+     */
+    timeBuffer: null,
+    /**
+     * 日期部分显示的字符串
+     * @type {string}
+     */
+    dateStr: '',
+    /**
+     * 时间部分显示的字符串
+     * @type {string}
+     */
+    timeStr: '',
+    /**
+     * 日期时间面板的 DOM 元素引用
+     * @type {HTMLElement|null}
+     */
+    paneElm: null,
+    /**
+     * 时间 Popover 内容的 DOM 元素引用
+     * @type {HTMLElement|null}
+     */
+    popperElm: null,
+    /**
+     * 时间选择面板的可见状态
+     * @type {boolean}
+     */
+    timePaneVisible: false,
+  }),
+  computed: {
+    /**
+     * 根据 format 属性计算时间面板的类型
+     * 返回格式如 'hour-minute-second', 'hour-minute' 等，用于传递给 TimePane 组件
+     * @returns {string} 时间类型字符串
+     */
+    timeFormatType() {
+      const isHour = hasHour(this.format)
+      const isMinute = hasMinute(this.format)
+      const isSecond = hasSecond(this.format)
+      return [isHour ? 'hour' : '', isMinute ? 'minute' : '', isSecond ? 'second' : ''].filter(Boolean).join('-')
+    },
+    /**
+     * 从完整 format 中提取日期格式部分
+     * 例如: 'YYYY-MM-DD HH:mm:ss' -> 'YYYY-MM-DD'
+     * @returns {string}
+     */
+    dateFormat() {
+      if (!this.format) return 'YYYY-MM-DD'
+      // 尝试按空格分割，取第一部分作为日期格式
+      const parts = this.format.split(/\s+/)
+      if (parts.length > 0) {
+        // 检查第一部分是否包含日期关键字 (Y, M, D)
+        if (/[YMD]/i.test(parts[0])) return parts[0]
+      }
+      // 常见日期模式
+      const dateMatch = this.format.match(/(YYYY|YY|MM|M|DD|D)[-\./\s]*(YYYY|YY|MM|M|DD|D)?[-\./\s]*(YYYY|YY|MM|M|DD|D)?/i)
+      if (dateMatch) return dateMatch[0]
+      return 'YYYY-MM-DD'
+    },
+
+    /**
+     * 从完整 format 中提取时间格式部分
+     * 例如: 'YYYY-MM-DD HH:mm:ss' -> 'HH:mm:ss'
+     * @returns {string}
+     */
+    timeFormat() {
+      if (!this.format) return 'HH:mm:ss'
+
+      // 尝试按空格分割，取最后一部分作为时间格式
+      const parts = this.format.split(/\s+/)
+      if (parts.length > 1) {
+        // 检查最后一部分是否包含时间关键字 (H, m, s, A)
+        if (/[HmsA]/i.test(parts[parts.length - 1])) return parts[parts.length - 1]
+      }
+      // 常见时间格式
+      const timeMatch = this.format.match(/(HH|H|hh|h|mm|m|ss|s|A|a)[:.\s]*(HH|H|hh|h|mm|m|ss|s|A|a)?[:.\s]*(HH|H|hh|h|mm|m|ss|s|A|a)?/i)
+      if (timeMatch) return timeMatch[0]
+      return 'HH:mm:ss'
+    },
+  },
+  directives: { init, clickoutside },
+  watch: {
+    /**
+     * 监听外部 value 变化，同步到内部缓冲数据
+     * @param {Date} val - 新的日期时间值
+     */
+    value: {
+      handler(val) {
+        this.timeBuffer = val
+      },
+      immediate: true,
+    },
+    /**
+     * 监听内部缓冲数据变化，更新显示的日期和时间字符串
+     * @param {Date} val - 新的缓冲日期时间值
+     */
+    timeBuffer: {
+      handler(val) {
+        if (val) {
+          this.dateStr = formatDate(val, this.dateFormat)
+          this.timeStr = formatDate(val, this.timeFormat)
+        } else {
+          this.dateStr = ''
+          this.timeStr = ''
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    /**
+     * 初始化滚动位置（通常由子组件调用或作为钩子）
+     * 将缓冲数据同步回 value（此处逻辑似乎主要用于初始化或重置）
+     */
+    scrollInit() {
+      this.timeBuffer = this.value
+    },
+    /**
+     * v-init 指令回调：获取并存储日期时间面板的根元素
+     * @param {HTMLElement} el - 面板根元素
+     */
+    parentContainerInit(el) {
+      this.paneElm = el
+    },
+    /**
+     * v-init 指令回调：获取并存储时间 Popover 的内容元素
+     * @param {HTMLElement} el - Popover 内容元素
+     */
+    parentPopoverInit(el) {
+      this.popperElm = el
+    },
+    /**
+     * 面板滚动初始化
+     * 在时间面板显示后，调用其内部的 scrollInit 方法以滚动到当前选中时间
+     * @param {string} refName - 时间面板组件的 ref 名称
+     */
+    paneScrollInit(refName) {
+      this.$nextTick(() => {
+        if (this.$refs[refName] && typeof this.$refs[refName].scrollInit === 'function') {
+          this.$refs[refName].scrollInit()
+        }
+      })
+    },
+    /**
+     * 处理点击外部区域事件
+     * 根据点击位置判断是否关闭时间面板或整个选择器
+     * @param {MouseEvent} mouseup - 鼠标抬起事件对象（未使用）
+     * @param {MouseEvent} mousedown - 鼠标按下事件对象
+     */
+    handleClickoutside(mouseup, mousedown) {
+      // 获取点击的元素
+      const target = mousedown.target
+      // 获取整个日期时间看板的父容器
+      const paneElmContainer = this.paneElm?.parentElement?.parentElement
+      // 获取时间控件看板的父容器
+      const popperElmContainer = this.popperElm?.parentElement
+      // 获取时间控件触发器元素
+      const timeTrigElm = this.$refs.timeTriggerRef.$el
+
+      // 获取点击的元素是否在父触发器内
+      const clickParentTrigger = this.$parent.$el.contains(target)
+      // 获取点击的元素是否在父触发器的子元素内
+      const clickParentPane = paneElmContainer.contains(target)
+      // 获取点击的元素是否在时间控件看板内
+      const clickPopperElm = popperElmContainer.contains(target)
+      // 获取点击的元素是否在时间控件触发器内
+      const clickTimeTrigElm = timeTrigElm.contains(target)
+
+      if (clickParentPane && !clickPopperElm && !clickTimeTrigElm) {
+        // 点击了整个日期时间看板，且没有点击时间控件看板
+        this.handlePaneClose()
+      } else if (clickPopperElm) {
+        // 点击了时间控件看板，不做操作
+      } else if (!clickParentPane && !clickPopperElm && !clickParentTrigger) {
+        // 点击了整个日期时间看板外部，且没有点击父触发器
+        this.handlePaneClose()
+        this.$emit('close')
+      }
+    },
+    /**
+     * 打开时间选择面板
+     * 当时间输入框获得焦点时调用
+     */
+    handlePaneOpen() {
+      this.timePaneVisible = true
+    },
+    /**
+     * 关闭时间选择面板
+     */
+    handlePaneClose() {
+      this.timePaneVisible = false
+    },
+
+    /**
+     * 处理日期字符串变更
+     * 将输入的日期字符串解析并合并到 timeBuffer 中
+     */
+    handleDateStrChange(val) {
+      if (!val) {
+        // 不允许清空日期字符串，恢复原日期
+        this.dateStr = formatDate(this.timeBuffer, this.dateFormat)
+        return
+      }
+
+      // 解析输入的日期字符串
+      const parsedDate = parseDate(val, this.dateFormat)
+      if (!parsedDate || isNaN(parsedDate.getTime())) {
+        // 如果解析失败，恢复为之前的有效值或清空，这里选择恢复为 buffer 中的日期部分
+        if (this.timeBuffer) {
+          this.dateStr = formatDate(this.timeBuffer, this.dateFormat)
+        } else {
+          this.dateStr = ''
+        }
+        return
+      }
+
+      // 创建新的 Date 对象，合并原有时间
+      const newDate = new Date(this.timeBuffer || new Date())
+      newDate.setFullYear(parsedDate.getFullYear())
+      newDate.setMonth(parsedDate.getMonth())
+      newDate.setDate(parsedDate.getDate())
+
+      this.timeBuffer = newDate
+    },
+
+    /**
+     * 处理时间字符串变更
+     * 将输入的时间字符串解析并合并到 timeBuffer 中
+     */
+    handleTimeStrChange(val) {
+      if (!val) {
+        // 如果清空时间，可以根据需求决定是清空整个日期还是只清空时间部分
+        // 这里假设清空时间意味着时间变为 00:00:00 或者保持日期不变
+        if (this.timeBuffer) {
+          const newDate = new Date(this.timeBuffer)
+          newDate.setHours(0, 0, 0, 0)
+          this.timeBuffer = newDate
+        }
+        return
+      }
+
+      // 解析输入的时间字符串
+      const parsedTime = parseDate(val, this.timeFormat)
+      if (!parsedTime || isNaN(parsedTime.getTime())) {
+        // 解析失败，恢复原状
+        if (this.timeBuffer) {
+          this.timeStr = formatDate(this.timeBuffer, this.timeFormat)
+        } else {
+          this.timeStr = ''
+        }
+        return
+      }
+
+      // 创建新的 Date 对象，合并原有日期
+      const baseDate = this.timeBuffer || new Date()
+      const newDate = new Date(baseDate)
+      newDate.setHours(parsedTime.getHours())
+      newDate.setMinutes(parsedTime.getMinutes())
+      newDate.setSeconds(parsedTime.getSeconds())
+
+      this.timeBuffer = newDate
+    },
+
+    /**
+     * 处理“此刻”按钮点击
+     * 将时间缓冲设置为当前时间，并立即触发确认输出
+     */
+    handleNow() {
+      this.timeBuffer = new Date()
+      this.handleEmit()
+    },
+    /**
+     * 处理“确定”按钮点击
+     * 将内部缓冲的时间值发射给父组件，并关闭选择器
+     * @emits input - 发射选中的日期时间值
+     * @emits close - 发射关闭事件
+     */
+    handleEmit() {
+      this.$emit('input', this.timeBuffer)
+      this.$emit('close')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>