ปรับ tab ผู้เกษียณในเลื่อนเงินเดือน

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

@@ -60,11 +60,11 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        {
+        // {
-          lable: "รายชื่อผู้เกษียณอายุราชการ",
+        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
-          name: "tab5",
+        //   name: "tab5",
-          type: "RETIRE",
+        //   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,
+    type: store.tabType,
-    isRetire: store.tabType === "RETIRE" ? "1" : null,
+    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="
+                :style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
-                  store.roundMainCode === 'OCT'
-                    ? index === 1
-                      ? '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>

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

@@ -65,11 +65,11 @@ const itemsTabType = computed(() => {
           name: "tab1",
           type: "PENDING",
         },
-        {
+        // {
-          lable: "รายชื่อผู้เกษียณอายุราชการ",
+        //   lable: "รายชื่อผู้เกษียณอายุราชการ",
-          name: "tab5",
+        //   name: "tab5",
-          type: "RETIRE",
+        //   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,
+    type: store.tabType,
-    isRetire: store.tabType === "RETIRE" ? "1" : null,
+    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="
+                :style="index === 0 ? 'border-bottom: 1px solid #c8d3db;' : ''"
-                  store.roundMainCode === 'OCT'
-                    ? index === 1
-                      ? '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>