misp-ui-library-test 0.0.1

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

@@ -0,0 +1,362 @@
+<template>
+  <div v-init="parentContainerInit" class="ui-timepicker-date-time-range-pane">
+    <!-- 顶部输入器区域：包含开始日期、开始时间、结束日期、结束时间 -->
+    <div class="ui-timepicker-date-time-range-pane__input-wrapper">
+      <!-- 开始日期 -->
+      <div class="input-group">
+        <ui-input v-model="startDateStr" size="medium" :readonly="readonly" @change="handleStartDateStrChange" />
+      </div>
+      <!-- 开始时间 -->
+      <div class="input-group">
+        <ui-popover :visible.sync="startTimePaneVisible" trigger="manual" placement="bottom-end" @show="paneScrollInit('startTimePaneRef')">
+          <template slot="reference">
+            <ui-input ref="startTimeTriggerRef" v-model="startTimeStr" size="medium" :readonly="readonly" @focus="handleStartPaneOpen" @change="handleStartTimeChange" />
+          </template>
+          <div v-init="startParentPopoverInit">
+            <time-pane ref="startTimePaneRef" style="z-index: 4000" v-model="dateRangeValue[0]" :type="timeFormatType" :readonly="readonly" :arrow-control="arrowControl" @close="handleClickoutside" />
+          </div>
+        </ui-popover>
+      </div>
+      <span class="separator">-</span>
+      <!-- 结束日期 -->
+      <div class="input-group">
+        <ui-input v-model="endDateStr" size="medium" :readonly="readonly" @change="handleEndDateStrChange" />
+      </div>
+      <!-- 结束时间 -->
+      <div class="input-group">
+        <ui-popover :visible.sync="endTimePaneVisible" trigger="manual" placement="bottom-end" @show="paneScrollInit('endTimePaneRef')">
+          <template slot="reference">
+            <ui-input ref="endTimeTriggerRef" v-model="endTimeStr" size="medium" :readonly="readonly" @focus="handleEndPaneOpen" @change="handleEndTimeChange" />
+          </template>
+          <div v-init="endParentPopoverInit">
+            <time-pane ref="endTimePaneRef" style="z-index: 4000" v-model="dateRangeValue[1]" :type="timeFormatType" :readonly="readonly" :arrow-control="arrowControl" @close="handleClickoutside" />
+          </div>
+        </ui-popover>
+      </div>
+    </div>
+
+    <ui-time-picker-date-range-pane v-model="dateRangeValue" :readonly="readonly" />
+
+    <!-- 底部操作栏 -->
+    <div class="pane-footer">
+      <ui-button label="此刻" type="primary" textual size="mini" @click="handleNow" />
+      <ui-button label="确定" type="primary" size="mini" @click="handleConfirm" />
+    </div>
+  </div>
+</template>
+
+<script>
+import UiInput from '../../../input/src/main.vue'
+import UiButton from '../../../button/src/main.vue'
+import UiTimePickerDateRangePane from './date-range.vue'
+import TimePane from './time.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'
+
+export default {
+  name: 'UiTimePickerDateTimeRangePane',
+  components: {
+    UiTimePickerDateRangePane,
+    UiInput,
+    UiButton,
+    TimePane,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    format: {
+      type: String,
+      default: 'YYYY-MM-DD HH:mm:ss',
+    },
+    readonly: Boolean,
+    arrowControl: Boolean,
+  },
+  data() {
+    return {
+      // 内部缓冲的开始和结束时间对象
+      startDate: null,
+      endDate: null,
+      dateRangeValue: [],
+
+      // 输入框显示的字符串
+      startDateStr: '',
+      startTimeStr: '',
+      endDateStr: '',
+      endTimeStr: '',
+      
+      paneElm: null,
+      startPopperElm: null,
+      endPopperElm: null,
+      startTimePaneVisible: false,
+      endTimePaneVisible: false,
+    }
+  },
+  computed: {
+    // 从 format 中提取日期格式
+    dateFormat() {
+      const parts = this.format.split(/\s+/)
+      return parts[0] || 'YYYY-MM-DD'
+    },
+
+    // 从 format 中提取时间格式
+    timeFormat() {
+      const parts = this.format.split(/\s+/)
+      return parts[1] || 'HH:mm:ss'
+    },
+    /**
+     * 根据 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('-')
+    },
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        if (newVal && newVal.length === 2) {
+          this.dateRangeValue = newVal
+          this.startDate = newVal[0] ? new Date(newVal[0]) : null
+          this.endDate = newVal[1] ? new Date(newVal[1]) : null
+          this.updateAllStrs()
+        } else {
+          this.resetState()
+        }
+      },
+      immediate: true,
+    },
+    dateRangeValue: {
+      handler(val) {
+        this.startDate = val[0] ? new Date(val[0]) : null
+        this.endDate = val[1] ? new Date(val[1]) : null
+        this.updateAllStrs()
+      },
+      deep: true,
+    },
+  },
+  directives: { init, clickoutside },
+  methods: {
+    resetState() {
+      this.startDate = null
+      this.endDate = null
+      this.startDateStr = ''
+      this.startTimeStr = ''
+      this.endDateStr = ''
+      this.endTimeStr = ''
+    },
+
+    updateAllStrs() {
+      this.startDateStr = this.startDate ? formatDate(this.startDate, this.dateFormat) : ''
+      this.startTimeStr = this.startDate ? formatDate(this.startDate, this.timeFormat) : ''
+      this.endDateStr = this.endDate ? formatDate(this.endDate, this.dateFormat) : ''
+      this.endTimeStr = this.endDate ? formatDate(this.endDate, this.timeFormat) : ''
+    },
+
+    /**
+     * v-init 指令回调：获取并存储日期时间面板的根元素
+     * @param {HTMLElement} el - 面板根元素
+     */
+     parentContainerInit(el) {
+      this.paneElm = el
+    },
+    /**
+     * v-init 指令回调：获取并存储时间 Popover 的内容元素
+     * @param {HTMLElement} el - Popover 内容元素
+     */
+     startParentPopoverInit(el) {
+      this.startPopperElm = el
+    },
+    endParentPopoverInit(el) {
+      this.endPopperElm = el
+    },
+    handleClickoutside(mouseup, mousedown) {
+      // 获取点击的元素
+      const target = mousedown.target
+      // 获取整个日期时间看板的父容器
+      const paneElmContainer = this.paneElm?.parentElement?.parentElement
+      // 获取开始时间控件看板的父容器
+      const startPopperElmContainer = this.startPopperElm?.parentElement
+      // 获取开始时间控件触发器元素
+      const startTimeTrigElm = this.$refs.startTimeTriggerRef.$el
+      // 获取开始时间控件看板的父容器
+      const endPopperElmContainer = this.endPopperElm?.parentElement
+      // 获取开始时间控件触发器元素
+      const endTimeTrigElm = this.$refs.endTimeTriggerRef.$el
+
+      // 获取点击的元素是否在父触发器内
+      const clickParentTrigger = this.$parent.$el.contains(target)
+      // 获取点击的元素是否在父触发器的子元素内
+      const clickParentPane = paneElmContainer.contains(target)
+      // 获取点击的元素是否在时间控件看板内
+      const clickStartPopperElm = startPopperElmContainer.contains(target)
+      // 获取点击的元素是否在时间控件触发器内
+      const clickStartTimeTrigElm = startTimeTrigElm.contains(target)
+      // 获取点击的元素是否在时间控件看板内
+      const clickEndPopperElm = endPopperElmContainer.contains(target)
+      // 获取点击的元素是否在时间控件触发器内
+      const clickEndTimeTrigElm = endTimeTrigElm.contains(target)
+
+      if (clickParentPane && !(clickStartPopperElm || clickEndPopperElm) && !(clickStartTimeTrigElm || clickEndTimeTrigElm)) {
+        // 点击了整个日期时间看板，且没有点击时间控件看板
+        this.handleStartPaneClose()
+        this.handleEndPaneClose()
+      } else if (clickStartTimeTrigElm || (clickStartPopperElm && !clickEndPopperElm)) { 
+        // 点击了时间控件看板，不做操作
+        this.handleEndPaneClose()
+      } else if (clickEndTimeTrigElm || (!clickStartPopperElm && clickEndPopperElm)) {
+        this.handleStartPaneClose()
+      } else if (!clickParentPane && !(clickStartPopperElm || clickEndPopperElm) && !clickParentTrigger) {
+        // 点击了整个日期时间看板外部，且没有点击父触发器
+        this.handleStartPaneClose()
+        this.handleEndPaneClose()
+        this.$emit('close')
+      }
+    },
+    scrollInit() {
+      this.paneScrollInit('startTimePaneRef')
+      this.paneScrollInit('endTimePaneRef')
+    },
+    /**
+     * 面板滚动初始化
+     * 在时间面板显示后，调用其内部的 scrollInit 方法以滚动到当前选中时间
+     * @param {string} refName - 时间面板组件的 ref 名称
+     */
+    paneScrollInit(refName) {
+      this.$nextTick(() => {
+        if (this.$refs[refName] && typeof this.$refs[refName].scrollInit === 'function') {
+          this.$refs[refName].scrollInit()
+        }
+      })
+    },
+    handleStartPaneOpen() {
+      this.startTimePaneVisible = true
+    },
+    handleStartPaneClose() {
+      this.startTimePaneVisible = false
+    },
+    handleEndPaneOpen() {
+      this.endTimePaneVisible = true
+    },
+    handleEndPaneClose() {
+      this.endTimePaneVisible = false
+    },
+
+    /**
+     * 合并日期和时间
+     * @param {Date} dateObj - 来自日历点击的日期对象
+     * @param {Date} oldDateTime - 之前保存的完整时间对象（用于保留时分秒）
+     * @returns {Date} 合并后的新 Date 对象
+     */
+    mergeDateAndTime(dateObj, oldDateTime) {
+      if (!dateObj) return null
+      const newDate = new Date(dateObj)
+
+      if (oldDateTime) {
+        newDate.setHours(oldDateTime.getHours())
+        newDate.setMinutes(oldDateTime.getMinutes())
+        newDate.setSeconds(oldDateTime.getSeconds())
+      } else {
+        // 如果没有旧时间，尝试从输入框字符串解析，否则默认 00:00:00
+        // 这里简化处理，默认 00:00:00，或者你可以解析 startTimeStr/endTimeStr
+        newDate.setHours(0, 0, 0, 0)
+      }
+      return newDate
+    },
+
+    // --- 输入框变更处理 (保持不变) ---
+
+    handleStartDateStrChange(val) {
+      if (!val) {
+        // 不可以置空，恢复为原开始时间
+        this.startDateStr = formatDate(this.startDate, this.dateFormat)
+        return
+      }
+      const parsedDate = parseDate(val, this.dateFormat)
+      if (parsedDate && !isNaN(parsedDate.getTime())) {
+        const newStart = this.mergeDateAndTime(parsedDate, this.startDate)
+        this.startDate = newStart
+        this.dateRangeValue = [newStart, this.dateRangeValue[1]]
+        this.startDateStr = formatDate(this.startDate, this.dateFormat)
+      } else {
+        this.startDateStr = this.startDate ? formatDate(this.startDate, this.dateFormat) : ''
+      }
+    },
+
+    handleEndDateStrChange(val) {
+      if (!val) {
+        // 不可以置空，恢复为原结束时间
+        this.endDateStr = formatDate(this.endDate, this.dateFormat)
+        return
+      }
+      const parsedDate = parseDate(val, this.dateFormat)
+      if (parsedDate && !isNaN(parsedDate.getTime())) {
+        const newEnd = this.mergeDateAndTime(parsedDate, this.endDate)
+        this.endDate = newEnd
+        this.dateRangeValue = [this.dateRangeValue[0], newEnd]
+        this.endDateStr = formatDate(this.endDate, this.dateFormat)
+      } else {
+        this.endDateStr = this.endDate ? formatDate(this.endDate, this.dateFormat) : ''
+      }
+    },
+
+    handleStartTimeChange(val) {
+      if (!val || !this.startDate) return
+      const parsedTime = parseDate(val, this.timeFormat)
+      if (parsedTime && !isNaN(parsedTime.getTime())) {
+        this.startDate.setHours(parsedTime.getHours(), parsedTime.getMinutes(), parsedTime.getSeconds())
+        this.startTimeStr = formatDate(this.startDate, this.timeFormat)
+      } else {
+        this.startTimeStr = formatDate(this.startDate, this.timeFormat)
+      }
+    },
+
+    handleEndTimeChange(val) {
+      if (!val || !this.endDate) return
+      const parsedTime = parseDate(val, this.timeFormat)
+      if (parsedTime && !isNaN(parsedTime.getTime())) {
+        this.endDate.setHours(parsedTime.getHours(), parsedTime.getMinutes(), parsedTime.getSeconds())
+        this.endTimeStr = formatDate(this.endDate, this.timeFormat)
+      } else {
+        this.endTimeStr = formatDate(this.endDate, this.timeFormat)
+      }
+    },
+
+    emitInput() {
+      if (this.startDate && this.endDate) {
+        // 确保顺序
+        if (this.startDate.getTime() > this.endDate.getTime()) {
+          ;[this.startDate, this.endDate] = [this.endDate, this.startDate]
+          this.updateAllStrs()
+        }
+        this.$emit('input', [this.startDate, this.endDate])
+      } else {
+        this.$emit('input', [])
+      }
+    },
+
+    handleNow() {
+      const now = new Date()
+      this.startDate = new Date(now)
+      this.endDate = new Date(now)
+      this.updateAllStrs()
+      this.emitInput()
+    },
+
+    handleConfirm() {
+      this.emitInput()
+      this.$emit('close')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>