From 69b6ad3a6c45c1a9dbfb058c85b1981120eb16c9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 22 Feb 2024 16:51:16 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B8=20=3D>=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   1 +
 .../components/probation/MainProbation.vue    | 128 +++++++++++++++---
 2 files changed, 108 insertions(+), 21 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index bde8568bc..5bec17793 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -55,4 +55,5 @@ export default {
   /** บรรจุแต่งตั้ง*/
   orgPosPlacement: `${orgPos}/placement/search`,
   orgPosFind: `${organization}/find/node`,
+  orgProfileProbation: `${organization}/profile/probation`,
 };
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 6fe63e94b..fe8f0f544 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
+import { ref, useAttrs, onMounted, reactive, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useTransferDataStore } from "@/modules/05_placement/store";
@@ -171,11 +171,11 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevelName",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "level",
+    field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -218,7 +218,7 @@ function ProbationMainFilter() {
 }
 
 /**
- * อัพเดท rows ตาม status 
+ * อัพเดท rows ตาม status
  * @param body {id:? , value: ?}
  */
 function updateRows(body: any) {
@@ -261,6 +261,43 @@ async function getpersonalList() {
     });
 }
 
+const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
+const maxPage = ref<number>(1);
+
+async function onclickAddProbation() {
+  modal.value = true;
+  modal.value && showLoader();
+  await http
+    .post(config.API.orgProfileProbation, formProbation)
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
+      rows2.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch([() => formProbation.page, () => formProbation.pageSize], () => {
+  onclickAddProbation();
+});
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formProbation.page = 1;
+  formProbation.pageSize = newPagination.rowsPerPage;
+}
+
+async function filterKeyword2Fn(page: number) {
+  page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
+}
+
 /** fecth profile */
 async function fecthlistPersonal() {
   showLoader();
@@ -335,18 +372,18 @@ async function findlist(id: string) {
 
 /**
  * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
- * @param id personal id 
+ * @param id personal id
  */
-function clickAdd(id: string) {
+function clickAdd(data: any) {
   dialogConfirm(
     $q,
     async () => {
       showLoader();
-      const postData = {
-        personal_id: id,
-      };
+      // const postData = {
+      //   personal_id: id,
+      // };
       await http
-        .post(config.API.personalAdd(), postData)
+        .post(config.API.personalAdd(), data)
         .then(() => {
           getpersonalList();
           success($q, "เพิ่มข้อมูลสำเร็จ");
@@ -456,7 +493,7 @@ onMounted(async () => {
 
             <div>
               <q-btn
-                @click="fecthlistPersonal"
+                @click="onclickAddProbation"
                 size="12px"
                 flat
                 round
@@ -469,7 +506,7 @@ onMounted(async () => {
           </div>
         </div>
         <q-space />
-        
+
         <q-input
           class="col-xs-12 col-sm-3 col-md-2"
           standout
@@ -577,11 +614,12 @@ onMounted(async () => {
             class="col-12"
             standout
             dense
-            v-model="filterKeyword2"
+            v-model="formProbation.keyword"
             ref="filterRef2"
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
@@ -598,7 +636,6 @@ onMounted(async () => {
               ref="table2"
               :columns="columns2"
               :rows="rows2"
-              :filter="filterKeyword2"
               row-key="Order"
               flat
               bordered
@@ -608,6 +645,8 @@ onMounted(async () => {
               v-bind="attrs"
               :pagination-label="paginationLabel2"
               v-model:pagination="pagination2"
+              @update:pagination="updatePagination"
+              :rows-per-page-options="[10, 25, 50, 100]"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -629,18 +668,66 @@ onMounted(async () => {
                     :props="props"
                   >
                     <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
+                      {{
+                        (formProbation.page - 1) * formProbation.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+
+                    <div v-else-if="col.name == 'fullname'">
+                      {{
+                        props.row.prefix +
+                        props.row.firstName +
+                        "  " +
+                        props.row.lastName
+                      }}
                     </div>
                     <div v-else-if="col.name == 'status'" class="text-center">
                       <q-icon
-                        v-if="col.value === true"
+                        v-if="props.row.isProbation === true"
                         name="mdi-check"
                         color="positive"
                         size="sm"
                       />
                     </div>
+                    <div
+                      v-else-if="col.name == 'organizationOrganization'"
+                      class="table_ellipsis"
+                    >
+                      <div
+                        v-if="
+                          props.row.orgChild4Name === null &&
+                          props.row.orgChild3Name === null &&
+                          props.row.orgChild2Name === null &&
+                          props.row.orgChild1Name === null &&
+                          props.row.orgRootName === null
+                        "
+                      >
+                        -
+                      </div>
+                      {{
+                        `${
+                          props.row.orgChild4Name
+                            ? props.row.orgChild4Name + "/"
+                            : ""
+                        }${
+                          props.row.orgChild3Name
+                            ? props.row.orgChild3Name + "/"
+                            : ""
+                        }${
+                          props.row.orgChild2Name
+                            ? props.row.orgChild2Name + "-"
+                            : ""
+                        }${
+                          props.row.orgChild1Name
+                            ? props.row.orgChild1Name + "/"
+                            : ""
+                        }${props.row.orgRootName ? props.row.orgRootName : ""}`
+                      }}
+                    </div>
                     <div v-else>
-                      {{ col.value }}
+                      {{ col.value ? col.value : "-" }}
                     </div>
                   </q-td>
                   <q-td auto-width>
@@ -650,7 +737,7 @@ onMounted(async () => {
                       outline
                       color="primary"
                       label="เพิ่ม"
-                      @click="clickAdd(props.row.id)"
+                      @click="clickAdd(props.row)"
                     >
                     </q-btn>
                   </q-td>
@@ -658,11 +745,10 @@ onMounted(async () => {
               </template>
               <template v-slot:pagination="scope">
                 <q-pagination
-                  v-model="pagination2.page"
+                  v-model="formProbation.page"
                   active-color="primary"
                   color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
+                  :max="maxPage"
                   size="sm"
                   boundary-links
                   direction-links

From 4874d3da8e2b3efe5ff421453e0e94f0722cdbc6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 22 Feb 2024 17:19:52 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20=3D>=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20Pagination?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/registry/registry.vue          | 61 +++++++++++++++++--
 1 file changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
index 0c43cbcc6..758c15e17 100644
--- a/src/modules/04_registryNew/components/registry/registry.vue
+++ b/src/modules/04_registryNew/components/registry/registry.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, reactive } from "vue";
 import type { QInput, QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
@@ -112,12 +112,24 @@ onMounted(async () => {
   fetchType();
 });
 
+/** queryString*/
+const formQuery = reactive({
+  page: 1, //*หน้า
+  pageSize: 10, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
+const maxPage = ref<number>(1);
+
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.registryNew)
+    .get(
+      config.API.registryNew +
+        `?page=${formQuery.page}&pageSise=${formQuery.pageSize}&keyword=${formQuery.keyword}`
+    )
     .then(async (res) => {
-      store.save(res.data.result);
+      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      store.save(res.data.result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -284,6 +296,23 @@ watch(posTypeId, () => {
   }, 200);
 });
 
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
+  await fetchData();
+});
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+async function filterFn(page: number) {
+  page !== 1 ? (formQuery.page = 1) : await fetchData();
+}
+
 /**
  * function ตรวจสอบเลขประจำตัวประชาชน
  * @param citizenId เลขประจำตัวประชาชน
@@ -333,7 +362,13 @@ async function changeCardID(citizenId: string | number | null) {
     </q-btn>
     <q-space />
     <div class="row q-gutter-sm">
-      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-input
+        outlined
+        dense
+        v-model="formQuery.keyword"
+        label="ค้นหา"
+        @keydown.enter.prevent="filterFn(formQuery.page)"
+      ></q-input>
       <q-select
         v-model="visibleColumns"
         multiple
@@ -355,7 +390,6 @@ async function changeCardID(citizenId: string | number | null) {
       ref="table"
       :columns="columns"
       :rows="store.row"
-      :filter="filterKeyword"
       row-key="name"
       flat
       bordered
@@ -363,6 +397,8 @@ async function changeCardID(citizenId: string | number | null) {
       dense
       class="custom-header-table"
       :visible-columns="visibleColumns"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      @update:pagination="updatePagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -376,7 +412,9 @@ async function changeCardID(citizenId: string | number | null) {
         <q-tr :props="props" class="cursor-pointer">
           <q-td v-for="col in props.cols" :key="col.id">
             <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
+              {{
+                (formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
+              }}
             </div>
             <div v-else-if="col.name == 'fullName'">
               {{ props.row.prefix }}{{ props.row.firstName }}
@@ -432,6 +470,17 @@ async function changeCardID(citizenId: string | number | null) {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="formQuery.page"
+          active-color="primary"
+          color="dark"
+          :max="maxPage"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
     </d-table>
   </div>
 

From 8c68986549f374348011e7059d92d66ca58f503a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 22 Feb 2024 17:27:05 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20maxp?=
 =?UTF-8?q?age?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/registry/registry.vue          |   1 +
 .../components/probation/MainProbation.vue    |   1 +
 .../components/SalaryLists/TabGroup.vue       | 180 ++++++++++++++
 .../components/SalaryLists/TableTabType1.vue  | 233 ++++++++++++++++++
 .../components/SalaryLists/TableTabType2.vue  |   6 +
 .../components/SalaryLists/TableTabType3.vue  |   6 +
 .../components/SalaryLists/TableTabType4.vue  |   6 +
 .../13_salary/store/SalaryListsStore.ts       |   8 +
 src/modules/13_salary/views/salaryChart.vue   |   1 +
 src/modules/13_salary/views/salaryLists.vue   |  14 +-
 src/modules/13_salary/views/salaryRate.vue    |   1 +
 11 files changed, 455 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType1.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType2.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType3.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType4.vue
 create mode 100644 src/modules/13_salary/store/SalaryListsStore.ts

diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
index 758c15e17..0527e9303 100644
--- a/src/modules/04_registryNew/components/registry/registry.vue
+++ b/src/modules/04_registryNew/components/registry/registry.vue
@@ -476,6 +476,7 @@ async function changeCardID(citizenId: string | number | null) {
           active-color="primary"
           color="dark"
           :max="maxPage"
+          :max-pages="5"
           size="sm"
           boundary-links
           direction-links
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index fe8f0f544..2b519e827 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -752,6 +752,7 @@ onMounted(async () => {
                   size="sm"
                   boundary-links
                   direction-links
+                  :max-pages="5"
                 ></q-pagination>
               </template>
             </d-table>
diff --git a/src/modules/13_salary/components/SalaryLists/TabGroup.vue b/src/modules/13_salary/components/SalaryLists/TabGroup.vue
index e69de29bb..dd31657cb 100644
--- a/src/modules/13_salary/components/SalaryLists/TabGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabGroup.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import TableTabType1 from "@/modules/13_salary/components/SalaryLists/TableTabType1.vue";
+import TableTabType2 from "@/modules/13_salary/components/SalaryLists/TableTabType2.vue";
+import TableTabType3 from "@/modules/13_salary/components/SalaryLists/TableTabType3.vue";
+import TableTabType4 from "@/modules/13_salary/components/SalaryLists/TableTabType4.vue";
+
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+const store = useSalaryListSDataStore();
+const itemsTabGroup = ref([
+  {
+    lable: "กลุ่ม 1",
+    name: "group1",
+  },
+  {
+    lable: "กลุ่ม 2",
+    name: "group2",
+  },
+]);
+
+const itemsTabType = ref([
+  {
+    lable: "รายชื่อถือครอง",
+    name: "tab1",
+  },
+  {
+    lable: "1 ขั้น",
+    name: "tab2",
+  },
+  {
+    lable: "ครึ่งขั้น",
+    name: "tab3",
+  },
+  {
+    lable: "ไม่ได้เลือก",
+    name: "tab4",
+  },
+]);
+
+const itemsCard = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+  },
+  {
+    lable: "ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+  },
+]);
+
+const splitterModel = ref<number>(15);
+
+function changeTabGroup() {
+  store.tabType = "tab1";
+}
+
+function changeTabType(name: string) {
+  console.log(name);
+}
+</script>
+
+<template>
+  <q-tabs
+    v-model="store.tabGroup"
+    dense
+    class="text-grey"
+    active-color="primary"
+    active-class="bg-teal-1"
+    indicator-color="primary"
+    align="left"
+  >
+    <div
+      v-for="(item, index) in itemsTabGroup"
+      :key="index"
+      @click="changeTabGroup"
+    >
+      <q-tab :name="item.name" :label="item.lable" />
+    </div>
+  </q-tabs>
+
+  <q-separator />
+  <q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1">
+    <q-tab-panel
+      style="padding: 0px"
+      v-for="(item, index) in itemsTabGroup"
+      :key="index"
+      :name="item.name"
+    >
+      <div class="row col-12 q-pa-md">
+        <div class="row col-12 items-start q-gutter-md items-center">
+          <div v-for="(item, index) in itemsCard" :key="index" class="my-card">
+            <q-card>
+              <q-card-section>
+                <div class="row items-center no-wrap">
+                  <div class="col">
+                    <div class="">{{ item.lable }}</div>
+                  </div>
+
+                  <div :class="`text-${item.color} text-bold`">1</div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="row col justify-end items-center">
+            <q-btn color="blue-5" icon="download" label="ดาว์นโหลด" />
+          </div>
+        </div>
+      </div>
+
+      <q-separator />
+
+      <q-card flat bordered>
+        <q-splitter v-model="splitterModel" disable>
+          <template v-slot:before>
+            <q-tabs
+              v-model="store.tabType"
+              vertical
+              dense
+              class="text-grey"
+              active-color="blue-5"
+              active-class="bg-blue-1"
+              indicator-color="blue-5"
+              align="left"
+            >
+              <div v-for="(item, index) in itemsTabType" :key="index">
+                <q-tab
+                  :name="item.name"
+                  :label="item.lable"
+                  @click="changeTabType(item.name)"
+                />
+              </div>
+            </q-tabs>
+          </template>
+          <template v-slot:after>
+            <q-tab-panels
+              v-model="store.tabType"
+              animated
+              swipeable
+              vertical
+              transition-prev="jump-up"
+              transition-next="jump-up"
+            >
+              <q-tab-panel
+                class="q-pa-md"
+                v-for="(item, index) in itemsTabType"
+                :key="index"
+                :name="item.name"
+              >
+                <TableTabType1 v-if="index + 1 === 1" />
+                <TableTabType2 v-if="index + 1 === 2" />
+                <TableTabType3 v-if="index + 1 === 3" />
+                <TableTabType4 v-if="index + 1 === 4" />
+              </q-tab-panel>
+            </q-tab-panels>
+          </template>
+        </q-splitter>
+      </q-card>
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 200px
+</style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType1.vue b/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
new file mode 100644
index 000000000..7832dc9f9
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื้อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สั่งกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isResult",
+    align: "center",
+    label: "ผลการประเมิน",
+    sortable: false,
+    field: "isResult",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isDuration",
+    align: "center",
+    label: "ระยะเวลา",
+    sortable: false,
+    field: "isDuration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isPunish",
+    align: "center",
+    label: "การลงโทษ",
+    sortable: false,
+    field: "isPunish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isRetired",
+    align: "center",
+    label: "พ้นราชการ",
+    sortable: false,
+    field: "isRetired",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isRetired2",
+    align: "center",
+    label: "ขาดราชการ",
+    sortable: false,
+    field: "isRetired",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "position",
+  "org",
+  "isResult",
+  "isDuration",
+  "isPunish",
+  "isRetired",
+  "isRetired2",
+]);
+const rows = ref<any>([
+  {
+    fullName: "sd",
+    position: "sd",
+    org: "sd",
+    isResult: true,
+    isDuration: true,
+    isPunish: false,
+    isRetired: true,
+    isRetired2: false,
+  },
+]);
+
+const filter = ref<string>("");
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn flat round dense icon="add">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="filter"
+      placeholder="ค้นหา"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width></q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name === 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name === 'isResult'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isResult"
+            />
+          </div>
+          <div v-else-if="col.name === 'isDuration'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isDuration"
+            />
+          </div>
+          <div v-else-if="col.name === 'isPunish'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isPunish"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired2'">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired2"
+              false
+            />
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+    <!-- <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formQuery.page"
+        active-color="primary"
+        color="dark"
+        :max="maxPage"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template> -->
+  </d-table>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType2.vue b/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
new file mode 100644
index 000000000..058e5ba78
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>222222222222222222</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType3.vue b/src/modules/13_salary/components/SalaryLists/TableTabType3.vue
new file mode 100644
index 000000000..ecebac15b
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType3.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>333333</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType4.vue b/src/modules/13_salary/components/SalaryLists/TableTabType4.vue
new file mode 100644
index 000000000..d3416b233
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TableTabType4.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>4444444444</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
new file mode 100644
index 000000000..504dc9b35
--- /dev/null
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
+  const tabGroup = ref<string>("group1");
+  const tabType = ref<string>("tab1");
+  return { tabGroup, tabType };
+});
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index 611a91217..2c57a3d1c 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -364,6 +364,7 @@ async function filterFn(page: number) {
             size="sm"
             boundary-links
             direction-links
+            :max-pages="5"
           ></q-pagination>
         </template>
       </d-table>
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index cf4e87628..00c235fc0 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TabGroup from "@/modules/13_salary/components/SalaryLists/TabGroup.vue";
+</script>
 
 <template>
   <div class="row items-center">
@@ -6,6 +8,14 @@
       รายการเงินเดือน
     </div>
   </div>
+
+  <q-card flat bordered>
+    <TabGroup />
+  </q-card>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 200px
+</style>
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index 1aaa946f0..887634fd9 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -364,6 +364,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
             size="sm"
             boundary-links
             direction-links
+            :max-pages="5"
           ></q-pagination>
         </template>
       </d-table>