fix load ===> รายการเลื่อนเงินเดือนข้าราชการฯ

src/modules/13_salary/components/04_salaryLists/TabMain.vue

@@ -23,7 +23,7 @@ import DialogInfoCriteria from "@/modules/13_salary/components/04_salaryLists/Di
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 
-/** use*/
+/** use composables*/
 const $q = useQuasar();
 const store = useSalaryListSDataStore();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
@@ -41,6 +41,8 @@ const props = defineProps({
 const total = ref<number>(0);
 const splitterModel = ref<number>(13);
 const rows = ref<DataPeriod[]>([]);
+const modalDialogInfoCriteria = ref<boolean>(false); // ตัวแปรสำหรับแสดง Dialog แสดงหลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
+const isRetire = ref<boolean>(false); // ตัวแปรสำหรับแสดงเฉพาะผู้เกษียณอายุราชการ
 
 /** itemsTab กลุ่ม*/
 const itemsTabGroup = ref([
@@ -208,21 +210,21 @@ const itemsCard = ref([
   },
 ]);
 
-/** ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน*/
+/** ข้อมูลค้นหารายชื่อคนขึ้นเงินเดือน*/
 const formFilter = reactive<DataFilter>({
   page: 1,
   pageSize: 10,
   keyword: "",
   type: store.tabType,
 });
-const maxPage = ref<number>(1);
+const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
 
 /**
- * function เรียกข้อมูลจำนวนโควต้า
+ * ฟังก์ชันเรียกข้อมูลโควต้า
  * @param id กลุ่ม
  */
-function fetchDataQuota(id: string) {
+async function fetchDataQuota(id: string) {
-  http
+  await http
     .get(config.API.salaryListPeriodQuota(id))
     .then((res) => {
       const data = res.data.result;
@@ -250,12 +252,10 @@ function fetchDataQuota(id: string) {
 }
 
 /**
- * function เรียกข้อมูลรายชื่อ
+ * ฟังก์ชันเรียกข้อมูลรายชื่อเลื่อนเงินเดือนข้าราชการฯ
  * @param id กลุ่ม
  */
 async function fetchDataPeriod(id: string) {
-  showLoader();
-
   let formData = {
     page: formFilter.page.toString(),
     pageSize: formFilter.pageSize.toString(),
@@ -279,37 +279,62 @@ async function fetchDataPeriod(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-/**function เปลี่ยนกลุ่ม*/
+/**ฟังก์ชันเปลี่ยนกลุ่ม*/
-function changeTabGroup() {
+async function changeTabGroup() {
-  formFilter.page = 1;
+  showLoader();
-  formFilter.pageSize = 10;
+  try {
-  formFilter.keyword = "";
+    await Promise.all([
-  store.tabType = "PENDING";
+      (formFilter.page = 1),
-  props.periodLatest &&
+      (formFilter.pageSize = 10),
-    store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
+      (formFilter.keyword = ""),
-  store.groupId && fetchDataQuota(store.groupId);
+      (store.tabType = "PENDING"),
-  store.groupId && fetchDataPeriod(store.groupId);
+      props.periodLatest &&
-  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+        store.fetchPeriodLatest(props?.periodLatest, store.tabGroup),
+      store.groupId && fetchDataQuota(store.groupId),
+      store.groupId && fetchDataPeriod(store.groupId),
+      (splitterModel.value = store.roundMainCode === "APR" ? 13 : 16),
+    ]);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
-/**function เปลี่ยนขั้น*/
+/**ฟังก์ชันเปลี่ยนขั้น*/
-function changeTabType() {
+async function changeTabType() {
-  formFilter.page = 1;
+  if (!store.groupId) return;
-  formFilter.pageSize = 10;
+  showLoader();
-  formFilter.keyword = "";
+  try {
-  store.groupId && fetchDataPeriod(store.groupId);
+    formFilter.page = 1;
+    formFilter.pageSize = 10;
+    formFilter.keyword = "";
+    store.groupId && (await fetchDataPeriod(store.groupId));
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
-/** function เรียกข้อมูลรายชื่ออีกครั้ง*/
+/** ฟังก์ชันเรียกข้อมูลรายชื่ออีกครั้งและโควต้า */
-function fetchDataPeriodNew() {
+async function fetchDataPeriodNew() {
-  store.groupId && fetchDataPeriod(store.groupId);
+  if (!store.groupId) return;
-  store.groupId && fetchDataQuota(store.groupId);
+
+  showLoader();
+  try {
+    await Promise.all([
+      fetchDataPeriod(store.groupId),
+      fetchDataQuota(store.groupId),
+    ]);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 function onClickDownload(data: DataOption, type: string = "xlsx") {
@@ -386,20 +411,29 @@ function onClickDownload(data: DataOption, type: string = "xlsx") {
   }
 }
 
-const modalDialogInfoCriteria = ref<boolean>(false);
+/** ฟังก์ชันแสดงเฉพาะผู้เกษียณอายุราชการ*/
-onMounted(() => {
+async function updateIsShowRetire() {
+  isRetire.value = !isRetire.value;
+  await fetchDataPeriodNew();
+}
+
+/** ฟังก์ชันเรียกข้อมูลเมื่อ component ถูกเรียก */
+onMounted(async () => {
   if (props.rootId) {
-    fetchDataQuota(store.groupId);
+    showLoader();
-    fetchDataPeriod(store.groupId);
+    try {
-    splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+      await Promise.all([
+        fetchDataQuota(store.groupId),
+        fetchDataPeriod(store.groupId),
+        (splitterModel.value = store.roundMainCode === "APR" ? 13 : 16),
+      ]);
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
   }
 });
-
-const isRetire = ref<boolean>(false);
-const updateIsShowRetire = async () => {
-  isRetire.value = !isRetire.value;
-  fetchDataPeriodNew();
-};
 </script>
 
 <template>