From 95935c2cbaba9633b1d6dd8b2e0d4c0779386cbc Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 26 Mar 2024 15:32:13 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20tab=20?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B9=80=E0=B8=81=E0=B8=A9=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=93=E0=B9=83=E0=B8=99=E0=B9=80=E0=B8=A5=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SalaryEmployeeLists/TabMain.vue           | 48 +++++++++++------
 .../components/SalaryLists/TabMain.vue        | 52 +++++++++++--------
 2 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index 1eba9574e..e67c304a0 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -60,11 +60,11 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        {
-          lable: "รายชื่อผู้เกษียณอายุราชการ",
-          name: "tab5",
-          type: "RETIRE",
-        },
+        // {
+        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
+        //   name: "tab5",
+        //   type: "RETIRE",
+        // },
         {
           lable: "1 ขั้น",
           name: "tab2",
@@ -251,12 +251,12 @@ function fetchDataQuota(id: string) {
  */
 function fetchDataPeriod(id: string) {
   rows.value = [];
-  const formData = {
+  let formData = {
     page: formFilter.page.toString(),
     pageSize: formFilter.pageSize.toString(),
     keyword: formFilter.keyword,
-    type: store.tabType === "RETIRE" ? "" : store.tabType,
-    isRetire: store.tabType === "RETIRE" ? "1" : null,
+    type: store.tabType,
+    isRetire: isRetire.value === true ? "1" : "0",
   };
 
   http
@@ -354,6 +354,12 @@ onMounted(() => {
   fetchDataPeriod(store.groupId);
   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
 });
+
+const isRetire = ref<boolean | string>(false);
+const updateIsShowRetire = async () => {
+  isRetire.value = await !isRetire.value;
+  fetchDataPeriodNew();
+};
 </script>
 
 <template>
@@ -455,7 +461,19 @@ onMounted(() => {
 
       <!-- Tab ขั้น -->
       <q-card flat bordered>
-        <q-splitter v-model="splitterModel" disable>
+        <div class="row col-12 q-pa-sm">
+          <q-toggle
+            dense
+            :model-value="isRetire"
+            color="primary"
+            @update:model-value="updateIsShowRetire"
+            class="q-pr-md"
+          >
+            เฉพาะผู้เกษียณอายุราชการ
+          </q-toggle>
+        </div>
+
+        <q-splitter v-model="splitterModel" disable class="border-top">
           <template v-slot:before>
             <q-tabs
               v-model="store.tabType"
@@ -471,13 +489,7 @@ onMounted(() => {
                 v-for="(item, index) in itemsTabType"
                 :key="index"
                 class="row"
-                :style="
-                  store.roundMainCode === 'OCT'
-                    ? index === 1
-                      ? 'border-bottom: 1px solid #c8d3db;'
-                      : ''
-                    : ''
-                "
+                :style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
               >
                 <q-tab
                   class="col-12"
@@ -536,8 +548,10 @@ onMounted(() => {
   width: 100%;
   max-width: 200px;
 }
-
 .q-tabs--vertical .q-tab {
   padding: 0 20px;
 }
+.border-top {
+  border-top: 1px solid #ededed;
+}
 </style>
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 4f2d8d190..bd07f336e 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -65,11 +65,11 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        {
-          lable: "รายชื่อผู้เกษียณอายุราชการ",
-          name: "tab5",
-          type: "RETIRE",
-        },
+        // {
+        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
+        //   name: "tab5",
+        //   type: "RETIRE",
+        // },
         {
           lable: "1 ขั้น",
           name: "tab2",
@@ -261,12 +261,12 @@ function fetchDataQuota(id: string) {
  */
 function fetchDataPeriod(id: string) {
   rows.value = [];
-  const formData = {
+  let formData = {
     page: formFilter.page.toString(),
     pageSize: formFilter.pageSize.toString(),
     keyword: formFilter.keyword,
-    type: store.tabType === "RETIRE" ? "" : store.tabType,
-    isRetire: store.tabType === "RETIRE" ? "1" : null,
+    type: store.tabType,
+    isRetire: isRetire.value === true ? "1" : "0",
   };
 
   http
@@ -336,10 +336,6 @@ function onClickDownload(data: DataOption) {
       });
   } else {
     if (props.rootId && props.periodId) {
-      console.log("id==>", data.id);
-      console.log("rootId==>", props.rootId);
-      console.log("periodId==>", props.periodId);
-
       http
         .get(
           config.API.salaryReportListsByid(
@@ -368,6 +364,12 @@ onMounted(() => {
   fetchDataPeriod(store.groupId);
   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
 });
+
+const isRetire = ref<boolean>(false);
+const updateIsShowRetire = async () => {
+  isRetire.value = await !isRetire.value;
+  fetchDataPeriodNew();
+};
 </script>
 
 <template>
@@ -538,7 +540,19 @@ onMounted(() => {
 
       <!-- Tab ขั้น -->
       <q-card flat bordered>
-        <q-splitter v-model="splitterModel" disable>
+        <div class="row col-12 q-pa-sm">
+          <q-toggle
+            dense
+            :model-value="isRetire"
+            color="primary"
+            @update:model-value="updateIsShowRetire"
+            class="q-pr-md"
+          >
+            เฉพาะผู้เกษียณอายุราชการ
+          </q-toggle>
+        </div>
+
+        <q-splitter v-model="splitterModel" disable class="border-top">
           <template v-slot:before>
             <q-tabs
               v-model="store.tabType"
@@ -554,13 +568,7 @@ onMounted(() => {
                 v-for="(item, index) in itemsTabType"
                 :key="index"
                 class="row"
-                :style="
-                  store.roundMainCode === 'OCT'
-                    ? index === 1
-                      ? 'border-bottom: 1px solid #c8d3db;'
-                      : ''
-                    : ''
-                "
+                :style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
               >
                 <q-tab
                   class="col-12"
@@ -619,11 +627,13 @@ onMounted(() => {
   width: 100%;
   max-width: 200px;
 }
-
 .q-tabs--vertical .q-tab {
   padding: 0 20px;
 }
 .tootip-txt-normal {
   font-size: 0.8rem;
 }
+.border-top {
+  border-top: 1px solid #ededed;
+}
 </style>