From a0a56e43f212a4acea704fd0ca8ff61ef2bfd070 Mon Sep 17 00:00:00 2001 From: yangsy Date: Tue, 26 Aug 2025 12:11:48 +0800 Subject: [PATCH] fix: selectedDevice doennot update when directly enter DevicePage --- src/pages/device-page.vue | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/pages/device-page.vue b/src/pages/device-page.vue index 0d4abdd..175e224 100644 --- a/src/pages/device-page.vue +++ b/src/pages/device-page.vue @@ -169,10 +169,9 @@ const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string) // ========== 选中设备 ========== const selectedTab = ref(DeviceType.Camera); const selectedKeys = ref(); -const expandedKeys = ref(); const selectedDevice = ref(); -// 从路由参数中设置选中的设备 -const setDeviceTreePropsFromRouteQuery = (query: LocationQuery) => { +// 解析路由参数,设置选中的设备 +const setSelectedRefsFromRouteQuery = (query: LocationQuery) => { const { stationCode, deviceType, deviceDBId } = query; let stnCode = ''; let devType: DeviceTypeVal = DeviceType.Camera; @@ -190,13 +189,24 @@ const setDeviceTreePropsFromRouteQuery = (query: LocationQuery) => { }; // 页面加载时,需要设置选中的设备 onMounted(() => { - setDeviceTreePropsFromRouteQuery(route.query); + // setSelectedRefsFromRouteQuery(route.query); // scrollDeviceTreeToSelectedDevice(); }); // 页面加载时设备数据可能不存在,因此当设备数据更新时,需要重新设置选中的设备 -watch(lineDevices, () => setDeviceTreePropsFromRouteQuery(route.query), { immediate: true }); +watch( + lineDevices, + () => { + setSelectedRefsFromRouteQuery(route.query); + }, + { + deep: true, + immediate: true, + }, +); // 更改选择的设备类型时,更新路由查询参数 -watch(selectedTab, (newTab) => router.replace({ query: { ...route.query, deviceType: newTab } })); +watch(selectedTab, (newTab) => { + router.replace({ query: { ...route.query, deviceType: newTab } }); +}); const override: TreeOverrideNodeClickBehavior = ({ option }) => { if (!option['device']) { return 'none'; @@ -225,6 +235,7 @@ const searchFilter = (pattern: string, node: TreeOption): boolean => { }; // ========== 设备树交互 ========== +const expandedKeys = ref(); const deviceTreeInst = useTemplateRef('deviceTreeInst'); const onClickLocateDeviceTree = () => { selectedTab.value = (selectedDevice.value?.deviceType ?? selectedTab.value) as DeviceTypeVal;