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

zjk

2026-06-26 18e856f0d5bde820e0b65d8749b5f26fb03bc7ec

 src/views/operations/cruiseCheckInRule/components/SelectPointModal.vue

@@ -1,6 +1,6 @@
<script setup lang="ts">
import noDataImg from '@/assets/element-img/no-data.png'
import { onMounted, ref, watch } from 'vue'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { addCheckLocation, getCheckLocationList } from '@/service/api/attendance'
import AddressFormModal from '@/views/operations/attendance/address/components/AddressFormModal.vue'

@@ -188,16 +188,48 @@
  endTime.value = null
}

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() {
  const mask = document.querySelector('.n-date-panel') as HTMLElement
  if (mask) {
    mask.style.display = 'none'
  if (lastTimePickerPanelUnit.value !== 'minute')
    return
  lastTimePickerPanelUnit.value = null
  if (document.activeElement) {
    (document.activeElement as HTMLElement).blur()
  }
}

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

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

<template>