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

src/api/02_organizational/api.organization.ts

@@ -58,4 +58,6 @@ export default {
   orgProfileProbation: `${organization}/profile/probation`,
 
   activeOrganizationRoot: `${organization}/active/root`,
+  activeOrganizationRootById: (id: string) =>
+    `${organization}/active/root/${id}`,
 };

src/api/13_salary/api.salary.ts

@@ -20,8 +20,9 @@ export default {
   salaryPeriod: () => `${salary}/period`,
 
   /** รายการเงินเดือน*/
-  keycloakPosition: `${env.API_URI}/org/profile/keycloak/position`,
+  keycloakPositionByid: (id: string) =>
-  salaryListPeriodLatest: (id: string) => `${salaryPeriod}/latest/${id}`,
+    `${env.API_URI}/org/profile/keycloak/position/${id}`,
+  salaryListPeriodLatest: `${salaryPeriod}/latest`,
   salaryListPeriodQuota: (id: string) => `${salaryPeriod}/quota/${id}`,
   salaryListPeriodORG: (id: string) => `${salaryPeriod}/org/${id}`,
   salaryListPeriodProfileById: (id: string) => `${salaryPeriod}/profile/${id}`,

src/modules/13_salary/components/SalaryLists/TabMain.vue

@@ -28,6 +28,10 @@ const {
   success,
 } = useCounterMixin();
 
+const props = defineProps({
+  periodLatest: { type: Object as () => DataPeriodLatest, require: true },
+});
+
 const splitterModel = ref<number>(13);
 const itemsTabGroup = ref([
   {
@@ -90,47 +94,6 @@ const itemsCard = ref([
   },
 ]);
 
-const rootId = ref<string>("");
-async function fetchKeycloakPosition() {
-  showLoader();
-  await http
-    .get(config.API.keycloakPosition)
-    .then((res) => {
-      const data = res.data.result;
-      rootId.value = data.rootId;
-      store.rootId = data.rootId
-      fetchSalalyPeriod(rootId.value);
-    })
-    .catch((err) => {
-      console.log(err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-const dataPeriod = ref<DataPeriodLatest>();
-
-async function fetchSalalyPeriod(id: string) {
-  showLoader();
-  await http
-    .get(config.API.salaryListPeriodLatest(id))
-    .then(async (res) => {
-      dataPeriod.value = res.data.result;
-      dataPeriod.value &&
-        store.fetchPeriodLatest(dataPeriod.value, store.tabGroup);
-
-      store.groupId && fetchDataQuota(store.groupId);
-      store.groupId && fetchDataPeriod(store.groupId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 async function fetchDataQuota(id: string) {
   showLoader();
   await http
@@ -185,7 +148,8 @@ async function changeTabGroup() {
   formFilter.pageSize = 10;
   formFilter.keyword = "";
   store.tabType = "PENDING";
-  dataPeriod.value && store.fetchPeriodLatest(dataPeriod.value, store.tabGroup);
+  props.periodLatest &&
+    store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
   store.groupId && fetchDataQuota(store.groupId);
   store.groupId && fetchDataPeriod(store.groupId);
 }
@@ -202,7 +166,8 @@ function updatePagination() {
 }
 
 onMounted(async () => {
-  await fetchKeycloakPosition();
+  await fetchDataQuota(store.groupId);
+  await fetchDataPeriod(store.groupId);
 });
 </script>
 
@@ -275,18 +240,21 @@ onMounted(async () => {
                 v-for="(item, index) in itemsTabType"
                 :key="index"
                 class="row"
-                :style="index==1?'border-top: 1px solid #ccc;':index==3?'border-bottom: 1px solid #ccc':''"
+                :style="
-                
+                  index == 1
+                    ? 'border-top: 1px solid #ccc;'
+                    : index == 3
+                    ? 'border-bottom: 1px solid #ccc'
+                    : ''
+                "
               >
-                
+                <q-tab
-                  <q-tab
+                  class="col-12"
-                    class="col-12"
+                  style="justify-content: left"
-                    style="justify-content: left"
+                  :name="item.type"
-                    :name="item.type"
+                  :label="item.lable"
-                    :label="item.lable"
+                  @click="changeTabType()"
-                    @click="changeTabType()"
+                />
-                  />
-               
               </div>
             </q-tabs>
           </template>

src/modules/13_salary/store/SalaryListsStore.ts

@@ -9,13 +9,13 @@ import type {
 import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
 
 export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
-  const titelPage = ref<string>("");
   const tabGroup = ref<string>("group1");
   const tabType = ref<string>("PENDING");
   const groupOp = ref<DataOption[]>([
     { id: "", name: "กลุ่ม1" },
     { id: "", name: "กลุ่ม2" },
   ]);
+
   const groupId = ref<string>("");
   const rootId = ref<string>("");
   const roundCode = ref<string>("OCT");
@@ -50,17 +50,10 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
   function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
     groupId.value = type === "group1" ? data.group1id : data.group2id;
     roundCode.value = data.period;
-    titelPage.value =
-      data.period === "SPECIAL"
-        ? "รอบพิเศษ"
-        : data.period === "APR"
-        ? "รอบเมษายน"
-        : "รอบตุลาคม";
     groupOp.value[0].id = data.group1id;
     groupOp.value[1].id = data.group2id;
   }
   return {
-    titelPage,
     tabGroup,
     tabType,
     itemMenu,

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() {
+const isLoad = ref<boolean>(false);
-  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);
-    });
-}
 
 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() {
+async function getAgency(id: string) {
-  getSnap(roundFilter.value.shortCode);
+  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>