updated รายการเงินเดือน

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

@@ -56,4 +56,6 @@ export default {
   orgPosPlacement: `${orgPos}/placement/search`,
   orgPosFind: `${organization}/find/node`,
   orgProfileProbation: `${organization}/profile/probation`,
+
+  activeOrganizationRoot: `${organization}/active/root`,
 };

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

@@ -42,7 +42,7 @@ const itemsTabGroup = ref([
 
 const itemsTabType = ref([
   {
-    lable: "รายชื่อถือครอง",
+    lable: "รายชื่อคนครอง",
     name: "tab1",
     type: "PENDING",
   },
@@ -98,6 +98,7 @@ async function fetchKeycloakPosition() {
     .then((res) => {
       const data = res.data.result;
       rootId.value = data.rootId;
+      store.rootId = data.rootId
       fetchSalalyPeriod(rootId.value);
     })
     .catch((err) => {
@@ -264,7 +265,7 @@ onMounted(async () => {
               v-model="store.tabType"
               vertical
               dense
-              class="text-grey"
+              class="text-grey-black"
               active-color="blue-5"
               active-class="bg-blue-1"
               indicator-color="blue-5"
@@ -274,6 +275,8 @@ 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':''"
+                
               >
                 
                   <q-tab
@@ -346,6 +349,6 @@ onMounted(async () => {
 }
 
 .q-tabs--vertical .q-tab {
-  padding: 0 50px;
+  padding: 0 20px;
 }
 </style>

src/modules/13_salary/interface/index/Main.ts

@@ -3,6 +3,12 @@ interface DataOption {
   name: string;
 }
 
+interface DataOptionShort {
+  id: string;
+  name: string;
+  shortCode: string
+}
+
 interface NewPagination {
   descending: boolean;
   page: number;
@@ -45,4 +51,5 @@ export type {
   ItemsMenu,
   ObjectSalaryRef,
   ObjectSalaryRateRef,
+  DataOptionShort
 };

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

@@ -10,6 +10,8 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
   const tabGroup = ref<string>("group1");
   const tabType = ref<string>("PENDING");
   const groupId = ref<string>("");
+  const rootId = ref<string>("");
+  const roundCode = ref<string>("OCT");
   /** List Menu*/
   const itemMenu = ref<ItemsMenu[]>([
     {
@@ -40,6 +42,7 @@ 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"
         ? "รอบพิเศษ"
@@ -47,5 +50,14 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
         ? "รอบเมษายน"
         : "รอบตุลาคม";
   }
-  return { titelPage, tabGroup, tabType, itemMenu, groupId, fetchPeriodLatest };
+  return {
+    titelPage,
+    tabGroup,
+    tabType,
+    itemMenu,
+    groupId,
+    fetchPeriodLatest,
+    rootId,
+    roundCode,
+  };
 });

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

@@ -2,7 +2,116 @@
 import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
 
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { onMounted, ref } from "vue";
+import type {
+  DataOption,
+  DataOptionShort,
+} from "@/modules/13_salary/interface/index/Main";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const { messageError } = useCounterMixin();
+
 const store = useSalaryListSDataStore();
+const $q = useQuasar();
+
+const roundFilter = ref<any>();
+const roundOptions = ref<DataOptionShort[]>([]);
+const agencyFilter = ref<string>();
+const agencyOptions = ref<DataOption[]>();
+const snapFilter = ref<string>();
+const snapOptions = ref<DataOption[]>();
+// const tabMain = ref<string>("first_snapshot");
+
+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);
+    });
+}
+
+async function getRound() {
+  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,
+        shortCode: x.period,
+        name:
+          (x.period === "OCT"
+            ? "รอบตุลาคม "
+            : x.period === "SPECIAL"
+            ? "รอบพิเศษ"
+            : "รอบเมษายน ") +
+          (Number(x.year) + 543),
+      }));
+
+      roundFilter.value = await (roundOptions.value
+        ? roundOptions.value[0]
+        : "");
+
+      await getSnap(roundFilter.value.shortCode);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+function getSnap(code: string) {
+  snapOptions.value =
+    code === "OCT"
+      ? [
+          {
+            id: "OCT1",
+            name: "1 กันยายน",
+          },
+          {
+            id: "OCT2",
+            name: "1 ตุลาคม",
+          },
+        ]
+      : code === "APR"
+      ? [
+          {
+            id: "APR1",
+            name: "1 มีนาคม",
+          },
+          {
+            id: "APR2",
+            name: "1 เมษายน",
+          },
+        ]
+      : [
+          {
+            id: "SPECIAL",
+            name: "พิเศษ",
+          },
+        ];
+  snapFilter.value = snapOptions.value[0].id;
+}
+
+function onChangeRound() {
+  getSnap(roundFilter.value.shortCode);
+}
+
+onMounted(() => {
+  getAgency();
+  getRound();
+});
 </script>
 
 <template>
@@ -10,11 +119,76 @@ const store = useSalaryListSDataStore();
     <div class="toptitle text-dark row items-center q-py-xs">
       รายการเงินเดือน {{ store.titelPage }}
     </div>
+    <q-space />
+    <q-select
+      v-model="roundFilter"
+      label="รอบการขึ้นเงินเดือน"
+      dense
+      outlined
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="roundOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeRound"
+    />
+    <q-select
+      class="q-ml-xs"
+      v-model="snapFilter"
+      label="รอบ"
+      dense
+      outlined
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="snapOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+    />
+    <q-select
+      class="q-ml-xs"
+      v-model="agencyFilter"
+      label="หน่วยงาน"
+      dense
+      outlined
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="agencyOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+    />
   </div>
 
+  <!-- <q-card> -->
+  <!-- <q-tabs
+      v-model="tabMain"
+      dense
+      class="text-grey"
+      active-color="secondary"
+      indicator-color="secondary"
+      align="justify"
+    >
+      <q-tab
+        name="first_snapshot"
+        :label="store.titelPage === 'OCT' ? '1 มีนาคม' : '1 กันยายน'"
+      />
+      <q-tab
+        name="two_snapshot"
+        :label="store.titelPage === 'OCT' ? '1 เมษายน' : '1 ตุลาคม'"
+      />
+    </q-tabs>
+    <q-separator /> -->
   <q-card flat bordered>
     <TabGroup />
   </q-card>
+  <!-- </q-card> -->
 </template>
 
 <style lang="sass" scoped>