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

zjk

2026-06-26 18e856f0d5bde820e0b65d8749b5f26fb03bc7ec

 src/views/testDemo/operationWorkbench/components/FencePanel.vue

@@ -11,7 +11,7 @@
  NTimePicker,
} from "naive-ui";
import type { FormInst, FormItemRule } from "naive-ui";
import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import PointStatusSteps from "@/components/PointStatusSteps/custom.vue";
import closeIcon from "@/assets/geofence/close2.png";
import timeIcon from "@/assets/geofence/time.png";
@@ -478,8 +478,46 @@
  }
);

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();
  }
}

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

onBeforeUnmount(() => {
  mainScrollRef.value?.removeEventListener("scroll", handleScroll);
  document.removeEventListener("click", handleTimePickerPanelClick, true);
});

defineExpose({ validateForm });
@@ -836,7 +874,12 @@
                          :status="getStartPickerStatus(strategy, timeItem)"
                          :actions="['now']"
                          class="custom-time-picker"
                          @update:value="strategy.errorMsg = ''"
                          @update:value="
                            () => {
                              strategy.errorMsg = '';
                              closeTimePicker();
                            }
                          "
                        />
                        至
                        <n-time-picker
@@ -851,7 +894,12 @@
                          :is-hour-disabled="(hour: number) => isEndTimeDisabledByStart(hour, undefined, timeItem)"
                          :is-minute-disabled="(minute: number, hour: number | null) => isEndTimeDisabledByStart(Number(hour || 0), minute, timeItem)"
                          class="custom-time-picker"
                          @update:value="strategy.errorMsg = ''"
                          @update:value="
                            () => {
                              strategy.errorMsg = '';
                              closeTimePicker();
                            }
                          "
                        />
                        <img
                          v-if="!isLocked"