ปรับ รายการเงินเดือน

src/modules/13_salary/views/salaryLists.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
 import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
 
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
@@ -12,44 +13,32 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
-const { messageError } = useCounterMixin();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 const store = useSalaryListSDataStore();
 const $q = useQuasar();
 
 const roundFilter = ref<any>();
 const roundOptions = ref<DataOptionShort[]>([]);
-const agencyFilter = ref<string>();
+const agencyFilter = ref<string>("");
 const agencyOptions = ref<DataOption[]>();
-const snapFilter = ref<string>();
+const snapFilter = ref<string>("");
 const snapOptions = ref<DataOption[]>();
 // const tabMain = ref<string>("first_snapshot");
+const periodLatest = ref<DataPeriodLatest>();
 
-async function getAgency() {
-  await http
-    .get(config.API.activeOrganizationRoot)
-    .then(async (res) => {
-      const data = res.data.result;
-
-      agencyOptions.value = await data.map((x: any) => ({
-        id: x.id,
-        name: x.orgRootName,
-      }));
-
-      agencyFilter.value = store.rootId;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
+const isLoad = ref<boolean>(false);
 
 async function getRound() {
+  showLoader();
   http
     .get(config.API.salaryPeriod() + `?page=1&pageSise=10&keyword=&year=0`)
     .then(async (res) => {
       const data = res.data.result.data;
+
       roundOptions.value = await data.map((x: any) => ({
         id: x.id,
+        revisionId: x.revisionId,
         shortCode: x.period,
         name:
           (x.period === "OCT"
@@ -65,9 +54,22 @@ async function getRound() {
         : "");
 
       await getSnap(roundFilter.value.shortCode);
+      await getAgency(roundFilter.value.revisionId);
+      await getAgencyPosition(roundFilter.value.revisionId);
+
+      if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+        await fetchSalalyPeriod(
+          agencyFilter.value,
+          roundFilter.value.id,
+          snapFilter.value
+        );
+      }
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -108,12 +110,107 @@ function getSnap(code: string) {
   snapFilter.value = snapOptions.value[0].id;
 }
 
-function onChangeRound() {
-  getSnap(roundFilter.value.shortCode);
+async function getAgency(id: string) {
+  await http
+    .get(config.API.activeOrganizationRootById(id))
+    .then(async (res) => {
+      const data = res.data.result;
+
+      agencyOptions.value = await data.map((x: any) => ({
+        id: x.id,
+        name: x.orgRootName,
+      }));
+
+      agencyFilter.value = store.rootId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function getAgencyPosition(id: string) {
+  await http
+    .get(config.API.keycloakPositionByid(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      const position = agencyOptions.value?.find(
+        (e: any) => e.id === data.rootId
+      );
+      agencyFilter.value = position ? position.id : "";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function fetchSalalyPeriod(
+  rootId: string,
+  periodId: string,
+  snap: string
+) {
+  showLoader();
+  const body = {
+    rootId: rootId,
+    salaryPeriodId: periodId,
+    snapshot: snap,
+  };
+
+  await http
+    .post(config.API.salaryListPeriodLatest, body)
+
+    .then(async (res) => {
+      const data = res.data.result;
+
+      if (Object.values(data).includes(null)) {
+        console.log("มีค่า null ในคุณสมบัติบางอย่าง");
+        isLoad.value = false;
+      } else {
+        data && store.fetchPeriodLatest(data, store.tabGroup);
+        periodLatest.value = data;
+        isLoad.value = true;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+async function onChangeRound() {
+  await getSnap(roundFilter.value.shortCode);
+  await getAgency(roundFilter.value.revisionId);
+  await getAgencyPosition(roundFilter.value.revisionId);
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
+}
+
+async function onChangeSnap() {
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
+}
+
+async function onChangeAgency() {
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
 }
 
 onMounted(() => {
-  getAgency();
   getRound();
 });
 </script>
@@ -121,7 +218,7 @@ onMounted(() => {
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      รายการเงินเดือน {{ store.titelPage }}
+      รายการเงินเดือน
     </div>
     <q-space />
     <q-select
@@ -152,6 +249,7 @@ onMounted(() => {
       lazy-rules
       hide-bottom-space
       bg-color="white"
+      @update:model-value="onChangeSnap"
     />
     <q-select
       class="q-ml-xs"
@@ -167,6 +265,7 @@ onMounted(() => {
       lazy-rules
       hide-bottom-space
       bg-color="white"
+      @update:model-value="onChangeAgency"
     />
   </div>
 
@@ -190,7 +289,7 @@ onMounted(() => {
     </q-tabs>
     <q-separator /> -->
   <q-card flat bordered>
-    <TabGroup />
+    <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
   </q-card>
   <!-- </q-card> -->
 </template>