fix: 修改时间选择器点击分钟失焦

zjk

2026-06-26 18e856f0d5bde820e0b65d8749b5f26fb03bc7ec

 src/views/businessOperations/operationWorkbench/components/PointPanel.vue

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import PointStatusSteps from '@/components/PointStatusSteps/custom.vue'
import { parsePointTimeRanges } from '../workbench.form'

@@ -212,6 +212,40 @@
  item[field] = timestampToTimeString(value)
}

const lastTimePickerPanelUnit = ref<'hour' | 'minute' | 'second' | 'period' | null>(null)

function handleTimePickerPanelClick(event: Event) {
  const target = event.target as HTMLElement | null
  const panelItem = target?.closest('.n-time-picker-col__item')
  if (!panelItem) {
    lastTimePickerPanelUnit.value = null
    return
  }

  const columnElement = panelItem.closest('.n-time-picker-col') as HTMLElement | null
  const columnsContainer = columnElement?.parentElement
  if (!columnElement || !columnsContainer) {
    lastTimePickerPanelUnit.value = null
    return
  }

  const columnElements = Array.from(columnsContainer.children).filter((element) =>
    (element as HTMLElement).classList.contains('n-time-picker-col'),
  )
  const columnIndex = columnElements.indexOf(columnElement)
  const units: Array<'hour' | 'minute' | 'second' | 'period'> = ['hour', 'minute', 'second', 'period']
  lastTimePickerPanelUnit.value = units[columnIndex] || null
}

function closeTimePicker() {
  if (lastTimePickerPanelUnit.value !== 'minute')
    return
  lastTimePickerPanelUnit.value = null
  if (document.activeElement) {
    (document.activeElement as HTMLElement).blur()
  }
}

function getCustomTimeRangeError(id: number | string) {
  if (operationTimeTypeModel.value !== '2')
    return ''
@@ -249,6 +283,14 @@
    return '与其他时段有重叠'
  return ''
}

onMounted(() => {
  document.addEventListener('click', handleTimePickerPanelClick, true)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleTimePickerPanelClick, true)
})
</script>

<template>
@@ -554,7 +596,12 @@
                    :actions="['now']"
                    :status="getCustomTimeRangeError(timeItem.id) ? 'error' : undefined"
                    :disabled="!operationInfoEditable"
                    @update:value="updateTimeRangeValue(timeItem, 'startTime', $event)"
                    @update:value="
                      (value) => {
                        updateTimeRangeValue(timeItem, 'startTime', value)
                        closeTimePicker()
                      }
                    "
                  />
                  <div class="time-separator">
                    至
@@ -568,7 +615,12 @@
                    :actions="['now']"
                    :status="getCustomTimeRangeError(timeItem.id) ? 'error' : undefined"
                    :disabled="!operationInfoEditable"
                    @update:value="updateTimeRangeValue(timeItem, 'endTime', $event)"
                    @update:value="
                      (value) => {
                        updateTimeRangeValue(timeItem, 'endTime', value)
                        closeTimePicker()
                      }
                    "
                  />
                  <img
                    v-if="operationInfoEditable"