[Pref 0000] 优化页面的交互反馈效果及代码

src/views/monitor/sealedMonitor/hooks/form.ts

@@ -3,61 +3,31 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { getGoafSelectOption } from '../monitor.api';
 import { useMineDepartmentStore } from '/@/store/modules/mine';
-import { historicalFormSchema, searchFormSchema } from '../monitor.data';
-import { FormSchema } from '/@/components/Form';
 
 export function useInitForm() {
   const mineStore = useMineDepartmentStore();
   const route = useRoute();
-  const id = last(route.fullPath.split('/'));
+  const departId = last(route.fullPath.split('/'));
+  const code = route.params.mineCode;
+
+  if (code) {
+    mineStore.setDepartById(code as string);
+    initGoafOptions(code);
+  }
 
   // 采空区选择器
   const goafId = ref('');
   const goafOptions = ref<any[]>([]);
 
-  function initGoafOptions() {
-    getGoafSelectOption({ mineCode: mineStore.getMineCode }).then(({ options, defaultValue }) => {
+  function initGoafOptions(mineCode) {
+    return getGoafSelectOption({ mineCode }).then(({ options, defaultValue }) => {
       goafOptions.value = options;
       goafId.value = defaultValue;
     });
   }
-  initGoafOptions();
-
-  const realtimeSchemas: FormSchema[] = [
-    {
-      field: 'mineCodeList',
-      label: '煤矿名称',
-      component: 'MineCascader',
-      colProps: { span: 6 },
-      componentProps: {
-        resetOnDestroy: true,
-        rootId: id,
-      },
-    },
-    ...searchFormSchema,
-  ];
-
-  const historySchemas: FormSchema[] = [
-    {
-      field: 'mineCodeList',
-      label: '煤矿名称',
-      component: 'MineCascader',
-      colProps: { span: 6 },
-      required: true,
-      componentProps: {
-        resetOnDestroy: true,
-        rootId: id,
-        onChange() {
-          initGoafOptions();
-        },
-      },
-    },
-    ...historicalFormSchema,
-  ];
 
   return {
-    historySchemas,
-    realtimeSchemas,
+    departId,
     goafOptions,
     goafId,
     initGoafOptions,

src/views/monitor/sealedMonitor/index.vue

@@ -42,7 +42,7 @@
   import { BasicTable } from '/@/components/Table';
   import { Tabs, TabPane, message } from 'ant-design-vue';
   // 引入模拟数据
-  import { columns, historicalColumns } from './monitor.data';
+  import { columns, historicalColumns, historicalFormSchema, searchFormSchema } from './monitor.data';
   import RealtimeDetailsModal from './components/RealtimeDetailsModal.vue';
   // import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
   import { SvgIcon } from '/@/components/Icon';
@@ -56,7 +56,7 @@
   // 激活的Tab页签
 
   // 处理矿名选择器相关的逻辑
-  const { realtimeSchemas, historySchemas, goafOptions, goafId } = useInitForm();
+  const { departId, goafOptions, goafId, initGoafOptions } = useInitForm();
   const activeTab = ref('realtime');
 
   // 注册实时数据表格
@@ -65,7 +65,19 @@
       api: getGoafData,
       columns,
       formConfig: {
-        schemas: realtimeSchemas,
+        schemas: [
+          {
+            field: 'mineCodeList',
+            label: '煤矿名称',
+            component: 'MineCascader',
+            colProps: { span: 6 },
+            componentProps: {
+              syncToStore: false,
+              rootId: departId,
+            },
+          },
+          ...searchFormSchema,
+        ],
         schemaGroupNames: ['常规查询'],
       },
       showIndexColumn: false,
@@ -73,9 +85,9 @@
     },
     pagination: false,
   });
-  const [registerRealtimeTable, { reload }] = ctxRealtime;
+  const [registerRealtimeTable, realtimeTable] = ctxRealtime;
 
-  const { pause, resume } = useIntervalFn(() => reload({ silence: true }), 10000);
+  const { pause, resume } = useIntervalFn(() => realtimeTable.reload({ silence: true }), 10000);
 
   // 注册历史数据表格
   const { tableContext: ctxHistory, onExportXls } = useListPage({
@@ -90,7 +102,26 @@
       },
       columns: historicalColumns,
       formConfig: {
-        schemas: historySchemas, // 使用历史数据的搜索配置
+        schemas: [
+          {
+            field: 'mineCodeList',
+            label: '煤矿名称',
+            component: 'MineCascader',
+            colProps: { span: 6 },
+            required: true,
+            componentProps: {
+              syncToStore: false,
+              rootId: departId,
+              onChange(v) {
+                historyTable.setLoading(true);
+                initGoafOptions(v).finally(() => {
+                  historyTable.setLoading(false);
+                });
+              },
+            },
+          },
+          ...historicalFormSchema,
+        ], // 使用历史数据的搜索配置
         schemaGroupNames: ['常规查询'],
       },
       useSearchForm: true,
@@ -105,7 +136,7 @@
     },
     pagination: true,
   });
-  const [registerHistoryTable] = ctxHistory;
+  const [registerHistoryTable, historyTable] = ctxHistory;
 
   // 弹窗引用
   const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();