ソースを参照

refactor(warningManage): 优化路由参数回显及数据加载流程

- 抽取路由参数回显逻辑为 applyRouteQuery 函数
- 调整 onMounted 执行顺序,先回显参数后加载组织架构树
- 避免重复请求,保证 cascadeOptions 加载完成后再查询数据
- 通过监听路由参数变化调用 applyRouteQuery 并刷新数据
- 删除 watch 的 immediate 选项,避免重复初始化调用
huoyi 3 時間 前
コミット
925af528e7
共有1 個のファイルを変更した26 個の追加19 個の削除を含む
  1. 26 19
      src/views/warningManage/redLineWarning/index.vue

+ 26 - 19
src/views/warningManage/redLineWarning/index.vue

@@ -356,30 +356,16 @@ const fetchWarningData = async () => {
356 356
     }
357 357
 }
358 358
 
359
-onMounted(async () => {
360
-    try {
361
-        const res = await getDeptUserTree()
362
-        if (res.data) {
363
-            cascadeOptions.value = transformCascadeData(res.data)
364
-        }
365
-    } catch (error) {
366
-        console.error('获取组织架构数据失败:', error)
367
-    }
368
-    fetchWarningData()
369
-})
370
-
371
-// 监听路由参数变化,回显查询条件并查询
372
-watch(() => route.query, (query) => {
359
+// 从路由参数回显查询条件
360
+const applyRouteQuery = (query) => {
373 361
     const { id, startDate: sd, endDate: ed, activeRange: ar, alertLevel, org } = query
374 362
 
375
-    // 回显员工选择
376 363
     if (id) {
377 364
         selectedOrg.value = `user_${id}`
378 365
     } else {
379 366
         selectedOrg.value = ''
380 367
     }
381 368
 
382
-    // 回显日期范围
383 369
     if (sd && ed) {
384 370
         startDate.value = sd
385 371
         endDate.value = ed
@@ -390,12 +376,33 @@ watch(() => route.query, (query) => {
390 376
         activeRange.value = ar || 'month'
391 377
     }
392 378
 
393
-    // 回显预警等级
394 379
     selectedAlertLevel.value = alertLevel || ''
395
-
396 380
     queryParams.pageNum = 1
381
+}
382
+
383
+onMounted(async () => {
384
+    // 先回显路由参数
385
+    applyRouteQuery(route.query)
386
+
387
+    // 再加载组织架构树
388
+    try {
389
+        const res = await getDeptUserTree()
390
+        if (res.data) {
391
+            cascadeOptions.value = transformCascadeData(res.data)
392
+        }
393
+    } catch (error) {
394
+        console.error('获取组织架构数据失败:', error)
395
+    }
396
+
397
+    // 最后查询(此时 cascadeOptions 已就绪,不会重复请求)
398
+    fetchWarningData()
399
+})
400
+
401
+// 监听后续路由参数变化
402
+watch(() => route.query, (query) => {
403
+    applyRouteQuery(query)
397 404
     fetchWarningData()
398
-}, { immediate: true })
405
+})
399 406
 </script>
400 407
 
401 408
 <style scoped>