能源管理 : 歷史table 新增 loading 狀態管理 | 負責廠商: 提交bug修正

src/views/energyManagement/components/EnergyHistoryTable/EnergyActionButton.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   form: Object,
 });
 
-const { updateTableData } = inject("energy_table_data");
+const { updateTableData, loading, setLoading } = inject("energy_table_data");
 
 let isToastOpen = ref({
   open: false,
@@ -30,6 +30,9 @@ const submit = async (e, type = "") => {
   e?.preventDefault();
   e?.stopPropagation();
 
+  // 若正在 loading 則直接阻止再次觸發
+  if (loading.value) return;
+
   const formData = new FormData(props.form);
 
   let params = {};
@@ -38,39 +41,45 @@ const submit = async (e, type = "") => {
     params = { ...params, [pair[0]]: pair[1] };
   }
 
-  if (type === "export") {
-    const res = await getHistoryExportData({
-      ...params,
-      ...searchParams.value,
-       Type:
-        route.params.type != 1
-          ? 2
-          : searchParams.value.Type
-          ? searchParams.value.Type
-          : 1,
-      table_type: route.params.type,
-    }).catch((err) => {
-      isToastOpen.value = {
-        open: true,
-        content: err.msg,
-      };
-    });
-  } else {
-    const res = await getHistoryData({
-      ...searchParams.value,
-      Type:
-        route.params.type != 1
-          ? 2
-          : searchParams.value.Type
-          ? searchParams.value.Type
-          : 1,
-      table_type: route.params.type,
-    });
-    updateTableData(res.data);
+  try {
+    setLoading(true);
+    if (type === "export") {
+      await getHistoryExportData({
+        ...params,
+        ...searchParams.value,
+        Type:
+          route.params.type != 1
+            ? 2
+            : searchParams.value.Type
+            ? searchParams.value.Type
+            : 1,
+        table_type: route.params.type,
+      }).catch((err) => {
+        isToastOpen.value = {
+          open: true,
+          content: err.msg,
+        };
+      });
+    } else {
+      const res = await getHistoryData({
+        ...searchParams.value,
+        Type:
+          route.params.type != 1
+            ? 2
+            : searchParams.value.Type
+            ? searchParams.value.Type
+            : 1,
+        table_type: route.params.type,
+      });
+      updateTableData(res.data);
+    }
+  } finally {
+    setLoading(false);
   }
 };
 
 const isSearchButtonDisabled = computed(() => {
+  if (loading.value) return true;
   if (
     !searchParams.value.Points?.length ||
     !searchParams.value.Device_list?.length

src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue

@@ -1,13 +1,13 @@
 <script setup>
 import Table from "@/components/customUI/Table.vue";
 import EnergyDataCahrt from "./EnergyDataCahrt.vue";
-import { inject, computed, watch, ref, onMounted } from "vue";
+import { inject, computed, watch, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 
 const { t } = useI18n();
 const route = useRoute();
-const { tableData } = inject("energy_table_data");
+const { tableData, loading } = inject("energy_table_data");
 const routeType = ref(1);
 const processedTableData = ref([]); // 使用 ref 來儲存處理後的數據
 
@@ -160,7 +160,7 @@ watch(
 </script>
 
 <template>
-  <Table :columns="columns" :dataSource="processedTableData">
+  <Table :columns="columns" :dataSource="processedTableData" :loading="loading">
     <template #beforeTable>
       <EnergyDataCahrt v-if="route.params.type == 1" class="mb-10" />
     </template>

src/views/energyManagement/components/EnergyHistoryTable/EnergyHistoryTable.vue

@@ -9,9 +9,13 @@ const tableData = ref([]);
 const deptData = ref([]);
 const elecType = ref([]);
 const subSystem = ref(null);
+const loading = ref(false);
 const updateTableData = (data) => {
   tableData.value = data ? data : [];
 };
+const setLoading = (val) => {
+  loading.value = !!val;
+};
 
 provide("energy_table_data", {
   tableData,
@@ -19,6 +23,8 @@ provide("energy_table_data", {
   deptData,
   elecType,
   subSystem,
+  loading,
+  setLoading,
 });
 </script>
 

src/views/setting/components/VendorModal.vue

@@ -38,6 +38,7 @@ const onCancel = () => {
 
 const onOk = async () => {
   const value = await handleSubmit(deptScheme, props.formState);
+  let res;
   if (props.formState?.id) {
     res = await updateOperationCompany(value);
   } else {