From 87c85c0f7781d69d265cc3491c982e10ace3e558 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Feb 2024 15:35:52 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/13_salary/api.salary.ts               |   8 +
 .../components/SalaryLists/TabGroup.vue       | 180 ---------
 .../components/SalaryLists/TabMain.vue        | 351 ++++++++++++++++++
 .../components/SalaryLists/TableTabType3.vue  |   6 -
 .../components/SalaryLists/TableTabType4.vue  |   6 -
 .../{TableTabType2.vue => TableTypeOther.vue} | 138 ++++---
 ...TableTabType1.vue => TableTypePending.vue} | 158 ++++++--
 .../13_salary/interface/index/SalaryList.ts   |   8 +
 .../interface/response/SalaryList.ts          |  14 +
 .../13_salary/store/SalaryListsStore.ts       |  47 ++-
 src/modules/13_salary/views/salaryLists.vue   |   7 +-
 11 files changed, 655 insertions(+), 268 deletions(-)
 delete mode 100644 src/modules/13_salary/components/SalaryLists/TabGroup.vue
 create mode 100644 src/modules/13_salary/components/SalaryLists/TabMain.vue
 delete mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType3.vue
 delete mode 100644 src/modules/13_salary/components/SalaryLists/TableTabType4.vue
 rename src/modules/13_salary/components/SalaryLists/{TableTabType2.vue => TableTypeOther.vue} (68%)
 rename src/modules/13_salary/components/SalaryLists/{TableTabType1.vue => TableTypePending.vue} (55%)
 create mode 100644 src/modules/13_salary/interface/index/SalaryList.ts
 create mode 100644 src/modules/13_salary/interface/response/SalaryList.ts

diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 436db3d6a..0f9550969 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -1,6 +1,7 @@
 import env from "../index";
 const salary = `${env.API_URI}/salary`;
 const salaryRate = `${env.API_URI}/salary/rate`;
+const salaryPeriod = `${env.API_URI}/salary/period`;
 
 export default {
   salaryChart: salary,
@@ -17,4 +18,11 @@ export default {
   salaryRateListByid: (id: string) => `${salaryRate}/${id}`,
   salaryReportByid: (id: string) => `${salary}/report/${id}`,
   salaryPeriod: () => `${salary}/period`,
+
+  /** รายการเงินเดือน*/
+  keycloakPosition: `${env.API_URI}/org/profile/keycloak/position`,
+  salaryListPeriodLatest: (id: string) => `${salaryPeriod}/latest/${id}`,
+  salaryListPeriodQuota: (id: string) => `${salaryPeriod}/quota/${id}`,
+  salaryListPeriodORG: (id: string) => `${salaryPeriod}/org/${id}`,
+  salaryListPeriodProfileById: (id: string) => `${salaryPeriod}/profile/${id}`,
 };
diff --git a/src/modules/13_salary/components/SalaryLists/TabGroup.vue b/src/modules/13_salary/components/SalaryLists/TabGroup.vue
deleted file mode 100644
index dd31657cb..000000000
--- a/src/modules/13_salary/components/SalaryLists/TabGroup.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<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/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
new file mode 100644
index 000000000..0efa98b25
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
+
+import TableTabType1 from "@/modules/13_salary/components/SalaryLists/TableTypePending.vue";
+import TableTabType2 from "@/modules/13_salary/components/SalaryLists/TableTypeOther.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const router = useRouter();
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
+
+const splitterModel = ref<number>(13);
+const itemsTabGroup = ref([
+  {
+    lable: "กลุ่ม 1",
+    name: "group1",
+  },
+  {
+    lable: "กลุ่ม 2",
+    name: "group2",
+  },
+]);
+
+const itemsTabType = ref([
+  {
+    lable: "รายชื่อถือครอง",
+    name: "tab1",
+    type: "PENDING",
+  },
+  {
+    lable: "1 ขั้น",
+    name: "tab2",
+    type: "FULL",
+  },
+  {
+    lable: "0.5 ขั้น",
+    name: "tab3",
+    type: "HAFT",
+  },
+  {
+    lable: "ไม่ได้เลื่อน",
+    name: "tab4",
+    type: "NONE",
+  },
+]);
+
+const itemsCard = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+  {
+    lable: "ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+]);
+
+const rootId = ref<string>("");
+async function fetchKeycloakPosition() {
+  showLoader();
+  await http
+    .get(config.API.keycloakPosition)
+    .then((res) => {
+      const data = res.data.result;
+      rootId.value = data.rootId;
+      fetchSalalyPeriod(rootId.value);
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const dataPeriod = ref<DataPeriodLatest>();
+
+async function fetchSalalyPeriod(id: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryListPeriodLatest(id))
+    .then(async (res) => {
+      dataPeriod.value = res.data.result;
+      dataPeriod.value &&
+        store.fetchPeriodLatest(dataPeriod.value, store.tabGroup);
+
+      store.groupId && fetchDataQuota(store.groupId);
+      store.groupId && fetchDataPeriod(store.groupId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchDataQuota(id: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryListPeriodQuota(id))
+    .then((res) => {
+      const data = res.data.result;
+      itemsCard.value[0].total = data.total;
+      itemsCard.value[1].total = data.fifteenPercent;
+      itemsCard.value[2].total = data.chosen;
+      itemsCard.value[3].total = data.remaining;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const formFilter = reactive<DataFilter>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  type: store.tabType,
+});
+const maxPage = ref<number>(1);
+
+const rows = ref<any>();
+async function fetchDataPeriod(id: string) {
+  rows.value = [];
+  const formData = {
+    page: formFilter.page.toString(),
+    pageSize: formFilter.pageSize.toString(),
+    keyword: formFilter.keyword,
+    type: store.tabType,
+  };
+
+  await http
+    .put(config.API.salaryListPeriodORG(id), formData)
+    .then((res) => {
+      rows.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      // maxPage.value = 10;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function changeTabGroup() {
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formFilter.keyword = "";
+  store.tabType = "PENDING";
+  dataPeriod.value && store.fetchPeriodLatest(dataPeriod.value, store.tabGroup);
+  store.groupId && fetchDataQuota(store.groupId);
+  store.groupId && fetchDataPeriod(store.groupId);
+}
+
+function changeTabType() {
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formFilter.keyword = "";
+  store.groupId && fetchDataPeriod(store.groupId);
+}
+
+function updatePagination() {
+  store.groupId && fetchDataPeriod(store.groupId);
+}
+
+onMounted(async () => {
+  await fetchKeycloakPosition();
+});
+</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`">
+                    {{ item.total }}
+                  </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"
+                class="row"
+              >
+                
+                  <q-tab
+                    class="col-12"
+                    style="justify-content: left"
+                    :name="item.type"
+                    :label="item.lable"
+                    @click="changeTabType()"
+                  />
+               
+              </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.type"
+              >
+                <TableTabType1
+                  v-if="index + 1 === 1"
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :updatePagination="updatePagination"
+                />
+                <TableTabType2
+                  v-if="index + 1 === 2"
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :updatePagination="updatePagination"
+                />
+                <TableTabType2
+                  v-if="index + 1 === 3"
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :updatePagination="updatePagination"
+                />
+                <TableTabType2
+                  v-if="index + 1 === 4"
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :updatePagination="updatePagination"
+                />
+              </q-tab-panel>
+            </q-tab-panels>
+          </template>
+        </q-splitter>
+      </q-card>
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped>
+.my-card {
+  width: 100%;
+  max-width: 200px;
+}
+
+.q-tabs--vertical .q-tab {
+  padding: 0 50px;
+}
+</style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType3.vue b/src/modules/13_salary/components/SalaryLists/TableTabType3.vue
deleted file mode 100644
index ecebac15b..000000000
--- a/src/modules/13_salary/components/SalaryLists/TableTabType3.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<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
deleted file mode 100644
index d3416b233..000000000
--- a/src/modules/13_salary/components/SalaryLists/TableTabType4.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup lang="ts"></script>
-<template>
-  <div>4444444444</div>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType2.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
similarity index 68%
rename from src/modules/13_salary/components/SalaryLists/TableTabType2.vue
rename to src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index 5625fe9d5..f60870d8b 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTabType2.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -8,6 +10,7 @@ import type {
   NewPagination,
   ItemsMenu,
 } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -22,6 +25,15 @@ const {
   success,
 } = useCounterMixin();
 
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  updatePagination: {
+    type: Function,
+  },
+});
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -61,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "posLevel",
-    align: "center",
+    align: "left",
     label: "ตำแหน่งประเภทระดับ",
     sortable: false,
     field: "posLevel",
@@ -70,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "posExecutive",
-    align: "center",
+    align: "left",
     label: "ตำแหน่งทางการบริหาร",
     sortable: false,
     field: "posExecutive",
@@ -78,20 +90,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "salary",
-    align: "center",
+    name: "amount",
+    align: "left",
     label: "เงินเดือนฐาน",
     sortable: false,
-    field: "salary",
+    field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "salary2",
-    align: "center",
+    name: "amountUse",
+    align: "left",
     label: "จำนวนเงินที่ใช้เลื่อน",
     sortable: false,
-    field: "salary2",
+    field: "amountUse",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -103,19 +115,8 @@ const visibleColumns = ref<string[]>([
   "posPath",
   "posLevel",
   "posExecutive",
-  "salary",
-  "salary2",
-]);
-const rows = ref<any>([
-  {
-    posNo: "กบห.1",
-    fullName: "นางสาวจักกริน ทองดี",
-    posPath: "ผู้อำนวยการ",
-    posLevel: true,
-    posExecutive: true,
-    salary: false,
-    salary2: true,
-  },
+  "amount",
+  "amountUse",
 ]);
 
 /** List Mune*/
@@ -147,11 +148,43 @@ const itemMenu = ref<ItemsMenu[]>([
 ]);
 const filter = ref<string>("");
 
-function onClickDelete() {
-  dialogRemove($q, () => {
-    success($q, "ลบข้อมูลสำเร็จ");
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.updatePagination?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
+
+function updatePagePagination() {
+  props.updatePagination?.();
+}
+
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+function searchData() {
+  formFilter.value.page = 1;
+  props.updatePagination?.();
+}
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
@@ -164,8 +197,9 @@ function onClickDelete() {
       dense
       debounce="300"
       outlined
-      v-model="filter"
+      v-model="formFilter.keyword"
       placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -188,10 +222,11 @@ function onClickDelete() {
       class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
     />
   </q-toolbar>
+
   <d-table
     ref="table"
     :columns="columns"
-    :rows="rows"
+    :rows="props.rows"
     row-key="id"
     flat
     bordered
@@ -200,6 +235,7 @@ function onClickDelete() {
     :filter="filter"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -215,19 +251,21 @@ function onClickDelete() {
           <div v-if="col.name === 'no'">
             {{ props.rowIndex + 1 }}
           </div>
-          <div v-else-if="col.name === 'posLevel'">
-            <q-icon name="close" size="1.5em" />
+          <div v-else-if="col.name === 'posNo'">
+            {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
           </div>
-          <div v-else-if="col.name === 'posExecutive'">
-            <q-icon name="close" size="1.5em" />
+          <div v-else-if="col.name === 'fullName'">
+            {{
+              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+            }}
+          </div>
+          <div v-else-if="col.name === 'amount'">
+            {{ props.row.amount.toLocaleString() }}
+          </div>
+          <div v-else-if="col.name === 'amountUse'">
+            {{ props.row.amountUse.toLocaleString() }}
           </div>
 
-          <div v-else-if="col.name === 'salary'">
-            <q-icon name="close" size="1.5em" />
-          </div>
-          <div v-else-if="col.name === 'salary2'">
-            <q-icon name="close" size="1.5em" />
-          </div>
           <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
@@ -248,7 +286,9 @@ function onClickDelete() {
                   :key="index"
                   clickable
                   v-close-popup
-                  @click="item.type === 'delete' ? onClickDelete() : null"
+                  @click="
+                    item.type === 'delete' ? onClickDelete(props.row.id) : null
+                  "
                 >
                   <q-item-section>
                     <div class="row items-center">
@@ -267,17 +307,17 @@ function onClickDelete() {
         </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> -->
+    <q-pagination
+      v-model="formFilter.page"
+      active-color="primary"
+      color="dark"
+      :max="Number(maxPage)"
+      :max-pages="5"
+      size="sm"
+      boundary-links
+      direction-links
+      @update:model-value="updatePagePagination()"
+    ></q-pagination>
   </d-table>
 </template>
 
diff --git a/src/modules/13_salary/components/SalaryLists/TableTabType1.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
similarity index 55%
rename from src/modules/13_salary/components/SalaryLists/TableTabType1.vue
rename to src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index c155af576..b49a53bc4 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTabType1.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -1,8 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+const store = useSalaryListSDataStore();
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -33,11 +52,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "org",
+    name: "organization",
     align: "left",
-    label: "สั่งกัด",
+    label: "สังกัด",
     sortable: true,
-    field: "org",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -91,27 +110,53 @@ const visibleColumns = ref<string[]>([
   "no",
   "fullName",
   "position",
-  "org",
+  "organization",
   "isResult",
   "isDuration",
   "isPunish",
   "isRetired",
   "isRetired2",
 ]);
-const rows = ref<any>([
-  {
-    fullName: "นางสาวจักกริน ทองดี",
-    position: "ผู้อำนวยการ",
-    org: "กลุ่มงานช่วยนักบริหาร",
-    isResult: true,
-    isDuration: true,
-    isPunish: false,
-    isRetired: true,
-    isRetired2: false,
+
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  updatePagination: {
+    type: Function,
   },
-]);
+  maxPage: {
+    type: Number,
+  },
+});
 
 const filter = ref<string>("");
+
+function onClickDelete() {
+  dialogRemove($q, () => {
+    success($q, "ลบข้อมูลสำเร็จ");
+  });
+}
+
+function updatePagePagination() {
+  props.updatePagination?.();
+}
+
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+function searchData() {
+  formFilter.value.page = 1;
+  props.updatePagination?.();
+}
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
@@ -124,8 +169,9 @@ const filter = ref<string>("");
       dense
       debounce="300"
       outlined
-      v-model="filter"
+      v-model="formFilter.keyword"
       placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -151,21 +197,22 @@ const filter = ref<string>("");
   <d-table
     ref="table"
     :columns="columns"
-    :rows="rows"
+    :rows="props.rows"
     row-key="id"
     flat
     bordered
     :paging="true"
     dense
-    :filter="filter"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
   >
     <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-tr>
     </template>
     <template v-slot:body="props">
@@ -174,8 +221,34 @@ const filter = ref<string>("");
           <div v-if="col.name === 'no'">
             {{ 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 == 'organization'" class="table_ellipsis">
+            <div
+              v-if="
+                props.row.child4 === null &&
+                props.row.child3 === null &&
+                props.row.child2 === null &&
+                props.row.child1 === null &&
+                props.row.root === null
+              "
+            >
+              -
+            </div>
+            {{
+              `${props.row.child4 ? props.row.child4 + "/" : ""}${
+                props.row.child3 ? props.row.child3 + "/" : ""
+              }${props.row.child2 ? props.row.child2 + "-" : ""}${
+                props.row.child1 ? props.row.child1 + "/" : ""
+              }${props.row.root ? props.row.root : ""}`
+            }}
+          </div>
           <div v-else-if="col.name === 'isResult'">
             <q-checkbox
+              disable
               keep-color
               color="primary"
               v-model="props.row.isResult"
@@ -183,6 +256,7 @@ const filter = ref<string>("");
           </div>
           <div v-else-if="col.name === 'isDuration'">
             <q-checkbox
+              disable
               keep-color
               color="primary"
               v-model="props.row.isDuration"
@@ -190,6 +264,7 @@ const filter = ref<string>("");
           </div>
           <div v-else-if="col.name === 'isPunish'">
             <q-checkbox
+              disable
               keep-color
               color="primary"
               v-model="props.row.isPunish"
@@ -197,6 +272,7 @@ const filter = ref<string>("");
           </div>
           <div v-else-if="col.name === 'isRetired'">
             <q-checkbox
+              disable
               keep-color
               color="primary"
               v-model="props.row.isRetired"
@@ -204,6 +280,7 @@ const filter = ref<string>("");
           </div>
           <div v-else-if="col.name === 'isRetired2'">
             <q-checkbox
+              disable
               keep-color
               color="primary"
               v-model="props.row.isRetired2"
@@ -214,19 +291,54 @@ const filter = ref<string>("");
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
+        <q-td>
+          <q-btn
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 150px">
+                <q-item
+                  v-for="(item, index) in store.itemMenu.slice(0, 3)"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="item.type === 'delete' ? onClickDelete() : null"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        :color="item.color"
+                        size="17px"
+                        :name="item.icon"
+                      />
+                      <div class="q-pl-md">{{ item.label }}</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
       </q-tr>
     </template>
-    <!-- <template v-slot:pagination="scope">
+    <template v-slot:pagination="scope">
       <q-pagination
-        v-model="formQuery.page"
+        v-model="formFilter.page"
         active-color="primary"
         color="dark"
-        :max="maxPage"
+        :max="Number(maxPage)"
+        :max-pages="5"
         size="sm"
         boundary-links
         direction-links
+        @update:model-value="updatePagePagination()"
       ></q-pagination>
-    </template> -->
+    </template>
   </d-table>
 </template>
 
diff --git a/src/modules/13_salary/interface/index/SalaryList.ts b/src/modules/13_salary/interface/index/SalaryList.ts
new file mode 100644
index 000000000..0f8d7fa16
--- /dev/null
+++ b/src/modules/13_salary/interface/index/SalaryList.ts
@@ -0,0 +1,8 @@
+interface DataFilter {
+  page: number;
+  pageSize: number;
+  keyword: string;
+  type: string;
+}
+
+export type { DataFilter };
diff --git a/src/modules/13_salary/interface/response/SalaryList.ts b/src/modules/13_salary/interface/response/SalaryList.ts
new file mode 100644
index 000000000..4f9848b6f
--- /dev/null
+++ b/src/modules/13_salary/interface/response/SalaryList.ts
@@ -0,0 +1,14 @@
+interface DataPeriodLatest {
+  group1id: string; // Id กลุ่ม1
+  group2id: string; // Id กลุ่ม2
+  effectiveDate: string; // วันที่มีผลบังคับใช้
+  period: string; // ประเภทผัง (SPECIAL->รอบพิเศษ,APR->รอบเมษายน,OCT->รอบตุลาคม)
+}
+
+interface DataPeriodQuota {
+  total: number; //จำนวนคนทั้งหมด
+  fifteenPercent: number; //15% ของจำนวนคน
+  chosen: number; //เลือกไปแล้ว
+  remaining: number; //คงเหลือโควตาnumber
+}
+export type { DataPeriodLatest, DataPeriodQuota };
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
index 504dc9b35..b36e2cc4e 100644
--- a/src/modules/13_salary/store/SalaryListsStore.ts
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -1,8 +1,51 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+/** importType*/
+import type { ItemsMenu } from "@/modules/13_salary/interface/index/Main";
+import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
+
 export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
+  const titelPage = ref<string>("");
   const tabGroup = ref<string>("group1");
-  const tabType = ref<string>("tab1");
-  return { tabGroup, tabType };
+  const tabType = ref<string>("PENDING");
+  const groupId = ref<string>("");
+  /** List Menu*/
+  const itemMenu = ref<ItemsMenu[]>([
+    {
+      label: "แก้ไขเงินเดือน",
+      icon: "edit",
+      color: "edit",
+      type: "edit",
+    },
+    {
+      label: "ย้ายกลุ่ม",
+      icon: "mdi-account-arrow-right-outline",
+      color: "indigo-6",
+      type: "moveGroup",
+    },
+    {
+      label: "ย้ายขั้น",
+      icon: "mdi-account-arrow-left-outline",
+      color: "green-6",
+      type: "moveStep",
+    },
+    {
+      label: "ลบ",
+      icon: "delete",
+      color: "red",
+      type: "delete",
+    },
+  ]);
+
+  function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
+    groupId.value = type === "group1" ? data.group1id : data.group2id;
+    titelPage.value =
+      data.period === "SPECIAL"
+        ? "รอบพิเศษ"
+        : data.period === "APR"
+        ? "รอบเมษายน"
+        : "รอบตุลาคม";
+  }
+  return { titelPage, tabGroup, tabType, itemMenu, groupId, fetchPeriodLatest };
 });
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 00c235fc0..3a1d38f46 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import TabGroup from "@/modules/13_salary/components/SalaryLists/TabGroup.vue";
+import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+const store = useSalaryListSDataStore();
 </script>
 
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      รายการเงินเดือน
+      รายการเงินเดือน {{ store.titelPage }}
     </div>
   </div>