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

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>