fix: remove condition render wrapped around modals, which leads to @after-enter and v-model:show not working

src/components/dashboard-page/device-alarm-detail-modal.vue

@@ -13,7 +13,7 @@ import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, type DataT
 import { computed, h, reactive, toRefs, watch } from 'vue';
 
 interface Props {
-  station: Station;
+  station?: Station;
   stationAlarms?: StationAlarms;
 }
 
@@ -135,7 +135,7 @@ const tableData = computed<DataTableRowData[]>(() => stationAlarms.value?.unclas
 
 const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
   mutationFn: async () => {
-    const data = await ndmDeviceAlarmLogDefaultExportByTemplate(station.value.code, {
+    const data = await ndmDeviceAlarmLogDefaultExportByTemplate(station.value?.code ?? '', {
       model: {},
       extra: {
         createdTime_precisest: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
@@ -149,7 +149,7 @@ const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
     return data;
   },
   onSuccess: (data) => {
-    downloadByData(data, `${station.value.name}-设备告警记录.xlsx`);
+    downloadByData(data, `${station.value?.name}-设备告警记录.xlsx`);
   },
   onError: (error) => {
     window.$message.error(error.message);
@@ -162,7 +162,7 @@ const onModalClose = () => {};
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" style="width: 100vw; height: 100vh" :title="`${station.name} - 设备告警详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+  <NModal v-model:show="show" preset="card" style="width: 100vw; height: 100vh" :title="`${station?.name} - 设备告警详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
     <div v-if="alarmCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
       <span>当前没有设备告警</span>
     </div>

src/components/dashboard-page/device-params-config-modal.vue

@@ -75,12 +75,15 @@ import { useMutation } from '@tanstack/vue-query';
 import { NForm, NFormItemGi, NGrid, NInputNumber, NModal, NTabPane, NTabs, NTimePicker } from 'naive-ui';
 import { ref, toRefs, watch } from 'vue';
 
-const props = defineProps<{ station: Station }>();
+const props = defineProps<{
+  station?: Station;
+}>();
 const { station } = toRefs(props);
-const show = defineModel<boolean>('show', { required: true, default: false });
+const show = defineModel<boolean>('show', { required: true });
+
+const queryControlStore = useQueryControlStore();
 
 watch(show, (newValue) => {
-  const queryControlStore = useQueryControlStore();
   if (newValue) {
     console.log('对话框打开，停止轮询');
     queryControlStore.disablePolling();
@@ -136,6 +139,7 @@ const deviceConfigParams = ref<DeviceParamItem[]>([]);
 
 const { mutate: getDeviceParams } = useMutation({
   mutationFn: async ({ deviceKeyPrefix }: { deviceKeyPrefix: string }) => {
+    if (!station.value) throw new Error('请先选择车站');
     const { records } = await postDefParameterPage(station.value.code, {
       model: {},
       extra: { key_likeRight: deviceKeyPrefix },
@@ -175,6 +179,7 @@ const { mutate: getDeviceParams } = useMutation({
 
 const { mutate: saveDeviceParams } = useMutation({
   mutationFn: async ({ tabName, params }: { tabName: string; params: DeviceParamItem[] }) => {
+    if (!station.value) throw new Error('请先选择车站');
     for (const item of params) {
       if (tabName.includes(DeviceConfigParamPrefix.Monitor)) {
         await putDefParameter(station.value.code, {
@@ -204,7 +209,7 @@ const { mutate: saveDeviceParams } = useMutation({
     v-model:show="show"
     preset="card"
     style="width: 800px; height: 600px"
-    :title="`${station.name} - 设备参数配置`"
+    :title="`${station?.name} - 设备参数配置`"
     :close-on-esc="false"
     :mask-closable="false"
     @after-enter="onAfterModalEnter"

src/components/dashboard-page/offline-device-detail-modal.vue

@@ -10,7 +10,7 @@ import { computed, h, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 interface Props {
-  station: Station;
+  station?: Station;
   stationDevices?: StationDevices;
 }
 
@@ -82,7 +82,7 @@ const treeData = computed<TreeOption[]>(() => {
                 router.push({
                   path: '/device',
                   query: {
-                    stationCode: station.value.code,
+                    stationCode: station.value?.code,
                     deviceType: getDeviceTypeVal(dev.deviceType),
                     deviceDBId: dev.id,
                     from: route.path,
@@ -116,7 +116,7 @@ const nodeProps: TreeProps['nodeProps'] = ({ option }) => {
       router.push({
         path: '/device',
         query: {
-          stationCode: station.value.code,
+          stationCode: station.value?.code,
           deviceType: getDeviceTypeVal(device.deviceType),
           deviceDBId: device.id,
           from: route.path,
@@ -132,7 +132,7 @@ const onModalClose = () => {
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" style="width: 800px; height: 600px" :title="`${station.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
+  <NModal v-model:show="show" preset="card" style="width: 800px; height: 600px" :title="`${station?.name} - 离线设备详情`" :close-on-esc="false" :mask-closable="false" @close="onModalClose">
     <div v-if="offlineDeviceCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
       <span>当前没有离线设备</span>
     </div>

src/pages/dashboard-page.vue

@@ -69,14 +69,12 @@ const openDeviceParamsConfigModal = (station: Station) => {
     </NGi>
   </NGrid>
 
-  <template v-if="selectedStation">
+  <!-- 离线设备详情对话框 -->
-    <!-- 离线设备详情对话框 -->
+  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="selectedStation?.code ? lineDevices[selectedStation.code] : undefined" />
-    <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="selectedStation" :station-devices="lineDevices[selectedStation.code]" />
+  <!-- 设备告警详情对话框 -->
-    <!-- 设备告警详情对话框 -->
+  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarms="selectedStation?.code ? lineAlarms[selectedStation.code] : undefined" />
-    <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="selectedStation" :station-alarms="lineAlarms[selectedStation.code]" />
+  <!-- 设备配置面板对话框 -->
-    <!-- 设备配置面板对话框 -->
+  <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
-    <DeviceParamsConfigModal v-model:show="deviceParamsConfigModalShow" :station="selectedStation" />
-  </template>
 </template>
 
 <style scoped></style>