From 26c7a669062087a36f990653235d1561828923f7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Mar 2024 09:53:01 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=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=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SalaryEmployeeLists/Dashboard.vue         |   3 +
 .../SalaryEmployeeLists/DialogAddPerson.vue   | 316 ++++++++++
 .../SalaryEmployeeLists/DialogFormEdit.vue    | 112 ++++
 .../DialogInfoCriteria.vue                    | 160 +++++
 .../SalaryEmployeeLists/DialogMoveGroup.vue   | 135 ++++
 .../SalaryEmployeeLists/DialogMoveLevel.vue   | 178 ++++++
 .../SalaryEmployeeLists/DialogProperties.vue  | 176 ++++++
 .../SalaryEmployeeLists/ProcessStep.vue       | 189 ++++++
 .../SalaryEmployeeLists/TabMain.vue           | 492 +++++++++++++++
 .../SalaryEmployeeLists/TableTypeOther.vue    | 493 +++++++++++++++
 .../SalaryEmployeeLists/TableTypePending.vue  | 589 ++++++++++++++++++
 .../store/SalaryEmployeeListsStore.ts         | 162 +++++
 .../13_salary/views/salaryEmployeeLists.vue   |   6 +-
 13 files changed, 3008 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
 create mode 100644 src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
 create mode 100644 src/modules/13_salary/store/SalaryEmployeeListsStore.ts

diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue b/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
new file mode 100644
index 000000000..eb3aae344
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
@@ -0,0 +1,3 @@
+<template>
+  <q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
+</template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
new file mode 100644
index 000000000..b178d0430
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
+import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำเเหน่ง",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<DataPerson[]>([]);
+
+/** ข้อมูุลค้นหา*/
+const formFilter = reactive<DataFilterPerson>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  rootId: "",
+  year: 0,
+  period: "",
+});
+const maxPage = ref<number>(1);
+
+/** function close popup*/
+function closeModal() {
+  modal.value = false;
+  formFilter.page = 1;
+  formFilter.keyword = "";
+}
+
+/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
+function fetchListPerson() {
+  showLoader();
+  formFilter.rootId = store.rootId;
+  formFilter.period = store.roundMainCode;
+  formFilter.year = store.roundYear;
+  http
+    .post(config.API.salaryListPerson, formFilter)
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closeModal();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
+ * @param data ข้อมูลคนที่เพิ่ม
+ */
+function onClickAddPerson(data: DataPerson) {
+  const body: DataPersonReq = {
+    id: store.groupId,
+    type: store.tabType,
+    ...data,
+  };
+
+  dialogConfirm(
+    $q,
+    () => {
+      http
+        .post(config.API.salaryPeriodProfile, body)
+        .then(() => {
+          props.fetchData?.();
+          success($q, "เพื่มรายชื่อสำเร็จ");
+          closeModal();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
+  );
+}
+
+/** function updatePage*/
+async function updatePagePagination() {
+  fetchListPerson();
+}
+
+/** function updatePageSize*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูลตาม keyword*/
+function searchData() {
+  formFilter.page = 1;
+  fetchListPerson();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchListPerson();
+    }
+  }
+);
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 100vw">
+      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              dense
+              debounce="300"
+              outlined
+              placeholder="ค้นหา"
+              v-model="formFilter.keyword"
+              @keydown.enter.prevent="searchData"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @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-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'">
+                      {{
+                        (formFilter.page - 1) * formFilter.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>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="onClickAddPerson(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <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>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <!-- <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center"
+          color="light-blue-10"
+          label="บันทึก"
+        />
+      </q-card-actions> -->
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
new file mode 100644
index 000000000..832096723
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success, messageError } = mixin;
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const amount = defineModel<number | null>("amount", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+const amountRef = ref<any>();
+
+/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (amountRef.value.validate()) {
+    onSubmit();
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  amount.value = null;
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    if (amount.value !== null) {
+      const amountString: string = amount.value.toString();
+      const body = {
+        profileId: profileId.value,
+        amount:
+          typeof amount.value === "number"
+            ? amount.value
+            : Number(amountString.replace(/,/g, "")),
+      };
+      http
+        .post(config.API.salaryPeriod() + `/change/amount`, body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          close();
+        });
+    }
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-input
+            ref="amountRef"
+            dense
+            outlined
+            v-model="amount"
+            label="เงินเดือนฐาน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
new file mode 100644
index 000000000..7eeb283a2
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Header from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const separator = ref<any>("cell");
+/** ปิด Dialog */
+function closeDialog() {
+  modal.value = !modal.value;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" full-width>
+      <Header
+        tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="q-pa-md">
+          <q-markup-table
+            :separator="separator"
+            flat
+            bordered
+            class="custom-header-table"
+          >
+            <thead>
+              <tr>
+                <th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
+                <th class="text-center">หนึ่งขั้น</th>
+                <th class="text-center">ครึ่งขั้น</th>
+                <th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- ข้อ1 -->
+              <tr>
+                <td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
+                <td class="text-center">
+                  ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
+                </td>
+                <td class="text-center">
+                  ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
+                </td>
+                <td class="text-center">
+                  ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
+                </td>
+              </tr>
+
+              <!-- ข้อ2 -->
+              <tr>
+                <td class="text-left">
+                  2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
+                </td>
+                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
+                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
+                <td class="text-center">
+                  น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
+                </td>
+              </tr>
+
+              <!-- ข้อ3 -->
+              <tr>
+                <td class="text-left">3. การลงโทษทางวินัย</td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+              </tr>
+
+              <!-- ข้อ4 -->
+              <tr>
+                <td class="text-left">4. พักราชการ</td>
+                <td class="text-center">ไม่ถูกสั่งพักราชการ</td>
+                <td class="text-center">
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
+                </td>
+                <td class="text-center">
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
+                </td>
+              </tr>
+
+              <!-- ข้อ5 -->
+              <tr>
+                <td class="text-left">5. ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+              </tr>
+
+              <!-- ข้อ6 -->
+              <tr class="vertical-top">
+                <td class="text-left">6. วันลา</td>
+                <td class="text-left">
+                  <p class="q-mb-none txt-under">
+                    ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
+                    - ลาอุปสมบท
+                    <br />
+                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+                <td class="text-left">
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
+                    - ลาอุปสมบท
+                    <br />
+                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+                <td class="text-left">
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p>(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <br />
+                  <br />
+                  <p class="q-mb-none">
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </q-markup-table>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.txt-under {
+  text-decoration: underline;
+}
+
+.q-table th {
+  font-size: 14px !important;
+}
+</style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
new file mode 100644
index 000000000..409210efc
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, defineModel, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  group: { type: String },
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** ตัวแปร*/
+const group = ref<string>("");
+const groupRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (groupRef.value.validate()) {
+    onSubmit();
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  group.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      profileId: profileId.value,
+      groupId: group.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/group`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        close();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      group.value =
+        props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
+    }
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="groupRef"
+            :class="inputEdit(isReadonly)"
+            v-model="group"
+            label="กลุ่ม"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="store.groupOp.filter((e) => e.name !== props.group)"
+            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
new file mode 100644
index 000000000..75e6a2f7d
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  typeLevel: { type: String, required: true },
+  isReserve: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isReserve = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (typeRef.value.validate()) {
+    // if (
+    //   store.roundMainCode === "APR" &&
+    //   store.remaining === 0 &&
+    //   type.value === "FULL"
+    // ) {
+    //   dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
+    // } else {
+    onSubmit();
+    // }
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      profileId: profileId.value,
+      type: type.value,
+      isReserve: isReserve.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/type`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
+    isReserve.value = props.isReserve;
+    isChange.value = false;
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายขั้น`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="typeRef"
+            :class="inputEdit(isReadonly)"
+            v-model="type"
+            label="เลื่อนขั้น"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="typeRangeOps"
+            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+            lazy-rules
+            hide-bottom-space
+            @update:model-value="isChange = true"
+          />
+          <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
+
+          <q-checkbox
+            v-if="type === 'FULL'"
+            keep-color
+            label="สำรอง"
+            dense
+            v-model="isReserve"
+            @update:model-value="isChange = true"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            :disabled="!isChange"
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
new file mode 100644
index 000000000..0bad57794
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("id", { required: true });
+const props = defineProps({
+  isPunish: { type: Boolean, required: true },
+  isSuspension: { type: Boolean, required: true },
+  isAbsent: { type: Boolean, required: true },
+  isLeave: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isSuspension = ref<boolean>(false); // สำรองหรือไม่
+const isAbsent = ref<boolean>(false); // สำรองหรือไม่
+const isLeave = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+    onSubmit();
+  }
+
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+        isPunish: isPunish.value,
+        isSuspension: isSuspension.value,
+        isAbsent: isAbsent.value,
+        isLeave: isLeave.value,
+    };
+    http
+      .put(config.API.salaryProperty(profileId.value), body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    isPunish.value = props.isPunish;
+    isSuspension.value = props.isSuspension;
+    isAbsent.value = props.isAbsent;
+    isLeave.value = props.isLeave;
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 20%">
+      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm column">
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกลงโทษทางวินัย"
+            dense
+            v-model="isPunish"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกพักราชการ"
+            dense
+            v-model="isSuspension"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ขาดราชการ"
+            dense
+            v-model="isAbsent"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="วันลาไม่เกิน"
+            dense
+            v-model="isLeave"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
new file mode 100644
index 000000000..b48a39e29
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+
+const sendStep = ref<number>(1);
+const fileUpload = ref<any>(null);
+const document = ref<string>("");
+/**
+ * function อัปโหลดไฟล์เจ้าหน้าที่
+ * @param event file
+ */
+async function uploadFile(event: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = event;
+      const formdata = new FormData();
+      formdata.append("Document", selectedFile);
+      // await http
+      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
+      //   .then(async () => {
+      //     await fecthInsigniaByOc(
+      //       round.value,
+      //       DataStore.agency,
+      //       "officer",
+      //       tab.value
+      //     );
+      //     success($q, "อัปโหลดไฟล์สำเร็จ");
+      //     fileUpload.value = null;
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   }),
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+function saveReccommend() {
+  dialogConfirm(
+    $q,
+    async () => {
+      sendStep.value = sendStep.value + 1;
+      modalRecommend.value = false;
+    },
+    "ยืนยันการ" + titleRecommend.value,
+    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
+  );
+}
+
+function sendToDirector(msg: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
+    },
+    "ยืนยันการ" + msg,
+    "ต้องการยืนยันการ" + msg + "หรือไม่?"
+  );
+}
+
+const modalRecommend = ref<boolean>(false);
+const titleRecommend = ref<string>("");
+function sendAndRecommend(title: string) {
+  modalRecommend.value = true;
+  titleRecommend.value = title;
+}
+</script>
+
+<template>
+  <div class="row col-12 q-pa-md">
+    <q-toolbar>
+      <q-file
+        v-if="sendStep == 1"
+        bg-color="white"
+        clearable
+        outlined
+        dense
+        v-model="fileUpload"
+        accept=".pdf"
+        label="อัปโหลดไฟล์"
+      >
+        <template v-slot:prepend>
+          <q-icon color="light-blue" name="attach_file" />
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </template>
+      </q-file>
+
+      <q-btn
+        flat
+        color="light-blue"
+        icon="upload"
+        @click="uploadFile(fileUpload)"
+        v-if="fileUpload !== null"
+      />
+      <div v-if="document">
+        <q-btn
+          dense
+          color="primary"
+          icon-right="mdi-download"
+          label="ดาวน์โหลดไฟล์"
+          outline
+          :href="document"
+          target="_blank"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+        >
+      </div>
+
+      <q-toolbar-title>
+        <!-- Toolbar -->
+      </q-toolbar-title>
+      <div>
+        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
+        <q-btn
+          v-if="sendStep == 1"
+          unelevated
+          color="public"
+          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
+          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
+        />
+
+        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
+        <q-btn
+          v-if="sendStep == 2"
+          unelevated
+          color="public"
+          label="ยืนยันและส่งเอกสารให้ สกจ."
+          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          unelevated
+          color="green"
+          label="ยืนยันการตรวจสอบ"
+          @click="sendToDirector('ยืนยันการตรวจสอบ')"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          class="q-ml-sm"
+          unelevated
+          color="warning"
+          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+        />
+
+        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
+        <q-btn
+          v-if="sendStep == 4"
+          unelevated
+          color="public"
+          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+        />
+
+        <q-btn
+          v-if="sendStep > 4"
+          unelevated
+          color="public"
+          label="ส่งไปออกคำสั่ง"
+        />
+      </div>
+    </q-toolbar>
+
+    <DialogPopupReason
+      v-model:modal="modalRecommend"
+      :title="titleRecommend"
+      label="คำแนะนำ"
+      :savaForm="saveReccommend"
+      textReport=""
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
new file mode 100644
index 000000000..7652d8b19
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -0,0 +1,492 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
+import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
+
+/** importType*/
+import type { DataOption } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+import type {
+  DataPeriodLatest,
+  DataPeriod,
+} from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import TableTabType1 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue";
+import TableTabType2 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+/** props*/
+const props = defineProps({
+  periodLatest: { type: Object as () => DataPeriodLatest, require: true },
+});
+
+const total = ref<number>();
+const splitterModel = ref<number>(13);
+const rows = ref<DataPeriod[]>([]);
+
+/** itemsTab กลุ่ม*/
+const itemsTabGroup = ref([
+  {
+    lable: "กลุ่ม 1",
+    name: "group1",
+  },
+  {
+    lable: "กลุ่ม 2",
+    name: "group2",
+  },
+]);
+
+/** itemsTab ขั้น*/
+const itemsTabType = computed(() => {
+  return store.roundMainCode === "OCT"
+    ? [
+        {
+          lable: "รายชื่อคนครอง",
+          name: "tab1",
+          type: "PENDING",
+        },
+        {
+          lable: "รายชื่อผู้เกษียณอายุราชการ",
+          name: "tab5",
+          type: "RETIRE",
+        },
+        {
+          lable: "1 ขั้น",
+          name: "tab2",
+          type: "FULL",
+        },
+        {
+          lable: "0.5 ขั้น",
+          name: "tab3",
+          type: "HAFT",
+        },
+        {
+          lable: "1.5 ขั้น",
+          name: "tab4",
+          type: "FULLHAFT",
+        },
+        {
+          lable: "ไม่ได้เลื่อน",
+          name: "tab4",
+          type: "NONE",
+        },
+      ]
+    : [
+        {
+          lable: "รายชื่อคนครอง",
+          name: "tab1",
+          type: "PENDING",
+        },
+        {
+          lable: "1 ขั้น",
+          name: "tab2",
+          type: "FULL",
+        },
+        {
+          lable: "0.5 ขั้น",
+          name: "tab3",
+          type: "HAFT",
+        },
+        {
+          lable: "ไม่ได้เลื่อน",
+          name: "tab4",
+          type: "NONE",
+        },
+      ];
+});
+
+/** itemsCard*/
+const itemsCard = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+  {
+    lable: "15% ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+  {
+    lable: "จำนวนเงินคนครองปัจจุบัน",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+
+  {
+    lable: "วงเงิน 6%",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "ใช้ไปเท่าไหร่",
+    name: "group2",
+    color: "blue-6",
+    total: 0,
+  },
+  {
+    lable: "เหลือเท่าไหร่",
+    name: "group2",
+    color: "green-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+]);
+
+/** ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน*/
+const formFilter = reactive<DataFilter>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  type: store.tabType,
+});
+const maxPage = ref<number>(1);
+
+/**
+ * function เรียกข้อมูลจำนวนโควต้า
+ * @param id กลุ่ม
+ */
+function fetchDataQuota(id: string) {
+  // showLoader();
+  http
+    .get(config.API.salaryListPeriodQuota(id))
+    .then((res) => {
+      const data = res.data.result;
+      store.remaining = data.remaining;
+      itemsCard.value[0].total = data.total;
+      itemsCard.value[1].total = data.fifteenPercent;
+      itemsCard.value[2].total = data.chosen;
+      itemsCard.value[3].total = data.remaining;
+      itemsCard.value[4].total = data.totalBackup;
+
+      itemsCard.value[5].total = data.currentAmount;
+      itemsCard.value[6].total = data.sixPercentAmount;
+      itemsCard.value[7].total = data.spentAmount;
+      itemsCard.value[8].total = data.sixPercentSpentAmount;
+      itemsCard.value[9].total = data.useAmount;
+      itemsCard.value[10].total = data.remainingAmount;
+
+      itemsCard.value[11].total = data.totalBackup;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+  // .finally(() => {
+  //   hideLoader();
+  // });
+}
+
+/**
+ * function เรียกข้อมูลรายชื่อ
+ * @param id กลุ่ม
+ */
+function fetchDataPeriod(id: string) {
+  rows.value = [];
+  const formData = {
+    page: formFilter.page.toString(),
+    pageSize: formFilter.pageSize.toString(),
+    keyword: formFilter.keyword,
+    type: store.tabType === "RETIRE" ? "" : store.tabType,
+    isRetire: store.tabType === "RETIRE" ? true : null,
+  };
+
+  http
+    .put(config.API.salaryListPeriodORG(id), formData)
+    .then((res) => {
+      rows.value = res.data.result.data;
+      total.value = res.data.result.total;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**function เปลี่ยนกลุ่ม*/
+function changeTabGroup() {
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formFilter.keyword = "";
+  store.tabType = "PENDING";
+  props.periodLatest &&
+    store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
+  store.groupId && fetchDataQuota(store.groupId);
+  store.groupId && fetchDataPeriod(store.groupId);
+  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+}
+
+/**function เปลี่ยนขั้น*/
+function changeTabType() {
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formFilter.keyword = "";
+  store.groupId && fetchDataPeriod(store.groupId);
+}
+
+/** function เรียกข้อมูลรายชื่ออีกครั้ง*/
+function fetchDataPeriodNew() {
+  store.groupId && fetchDataPeriod(store.groupId);
+  store.groupId && fetchDataQuota(store.groupId);
+}
+
+function onClickDownload(data: DataOption) {
+  console.log(data);
+  // showLoader();
+  // http
+  //   .get(config.API.salaryReportByid(salaryId.value))
+  //   .then((res) => {
+  //     const dataList = res.data.result;
+  //     genReportXLSX(dataList, "อัตราเงินเดือน");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+const modalDialogInfoCriteria = ref<boolean>(false);
+onMounted(async () => {
+  await fetchDataQuota(store.groupId);
+  await fetchDataPeriod(store.groupId);
+  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+});
+</script>
+
+<template>
+  <!-- Tab กลุ่ม -->
+  <!-- <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-space />
+    <q-btn
+      dense
+      flat
+      icon="info"
+      class="q-mr-sm"
+      label="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
+      @click="() => (modalDialogInfoCriteria = true)"
+    />
+  </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"
+    >
+      <!-- Card โควต้า -->
+      <div class="row col-12 q-pa-md">
+        <div
+          :class="`row col-12 ${
+            store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
+          } items-start`"
+        >
+          <div
+            v-for="(item, index) in store.roundMainCode === 'APR'
+              ? itemsCard.slice(0, 5)
+              : store.roundMainCode === 'OCT'
+              ? itemsCard.slice(5, 12)
+              : itemsCard"
+            :key="index"
+            :class="
+              store.roundMainCode === 'APR'
+                ? 'col-6 col-sm-4 col-md-3 col-lg-2'
+                : 'col-3'
+            "
+          >
+            <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 ? item.total.toLocaleString() : 0 }}
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="row col justify-end self-center">
+            <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.roundMainCode === 'APR'
+                    ? store.itemDownloadApr
+                    : store.roundMainCode === 'OCT'
+                    ? store.itemDownloadOct
+                    : []"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="onClickDownload(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+            <!-- <q-btn color="blue-5" icon="download" label="ดาวน์โหลด" /> -->
+          </div>
+        </div>
+      </div>
+      <q-separator />
+
+      <!-- Tab ขั้น -->
+      <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-black"
+              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"
+                :style="
+                  store.roundMainCode === 'OCT'
+                    ? index === 1
+                      ? 'border-bottom: 1px solid #c8d3db;'
+                      : ''
+                    : ''
+                "
+              >
+                <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 === 0"
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :fetchDataTable="fetchDataPeriodNew"
+                  :total="total"
+                />
+                <TableTabType2
+                  v-else
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :fetchDataTable="fetchDataPeriodNew"
+                  :total="total"
+                />
+              </q-tab-panel>
+            </q-tab-panels>
+          </template>
+        </q-splitter>
+      </q-card>
+    </q-tab-panel>
+  </q-tab-panels>
+
+  <DialogInfoCriteria v-model:modal="modalDialogInfoCriteria" />
+</template>
+
+<style scoped>
+.my-card {
+  width: 100%;
+  max-width: 200px;
+}
+
+.q-tabs--vertical .q-tab {
+  padding: 0 20px;
+}
+</style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
new file mode 100644
index 000000000..734a5ad74
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** 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";
+
+/** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  total: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: false,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือนฐาน",
+    sortable: false,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amountUse",
+    align: "left",
+    label: "จำนวนเงินที่ใช้เลื่อน",
+    sortable: false,
+    field: "amountUse",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินเดือนหลังเลื่อน",
+    sortable: false,
+    field: "positionSalaryAmount",
+    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",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "posNo",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "posExecutive",
+  "amount",
+  "amountUse",
+  "positionSalaryAmount",
+  "isRetired",
+]);
+
+/** modalDialog*/
+const modalDialogAddPerson = ref<boolean>(false);
+const modalDialogForm = ref<boolean>(false);
+const modalDialogMoveGroup = ref<boolean>(false);
+const modalDialogMoveLeve = ref<boolean>(false);
+
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
+}
+
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function updatePageTable*/
+function updatePagePagination() {
+  props.fetchDataTable?.();
+}
+
+/** function updatePageSizeTable*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูล Table*/
+function searchData() {
+  formFilter.value.page = 1;
+  props.fetchDataTable?.();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn
+      v-if="!store.isClosedRound"
+      flat
+      round
+      dense
+      icon="add"
+      @click="onClickAddPerson"
+    >
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
+    >
+      <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="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+      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="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+    :rows="props.rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :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-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"
+          :class="
+            store.tabType !== 'RETIRE'
+              ? props.row.isNext == true
+                ? 'text-red'
+                : ''
+              : ''
+          "
+        >
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize +
+              props.rowIndex +
+              1 +
+              (store.tabType == "FULL" && props.row.isReserve == true
+                ? " (สำรอง)"
+                : "")
+            }}
+          </div>
+          <div v-else-if="col.name === 'posNo'">
+            {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
+          </div>
+          <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 !== null ? props.row.amount.toLocaleString() : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'amountUse'">
+            {{
+              props.row.amountUse !== null
+                ? props.row.amountUse.toLocaleString()
+                : ""
+            }}
+            {{
+              props.row.amountSpecial > 0
+                ? `(${props.row.amountSpecial.toLocaleString()})`
+                : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'positionSalaryAmount'">
+            {{
+              props.row.positionSalaryAmount !== null
+                ? props.row.positionSalaryAmount.toLocaleString()
+                : ""
+            }}
+            {{
+              props.row.amountSpecial > 0
+                ? `(${props.row.amountSpecial.toLocaleString()})`
+                : ""
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name === 'isRetired' && store.roundMainCode === 'OCT'
+            "
+          >
+            <q-icon
+              name="check"
+              color="primary"
+              size="24px"
+              v-if="props.row.isRetired"
+            />
+          </div>
+
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+            v-if="!store.isClosedRound"
+            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.filter((x:any)=>x.type != 'properties')"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : 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">
+      ทั้งหมด {{ props.total }} รายการ
+      <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>
+    </template>
+  </d-table>
+
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.fetchDataTable"
+    :type="store.tabType"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
new file mode 100644
index 000000000..bc2db8d56
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
@@ -0,0 +1,589 @@
+<script setup lang="ts">
+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";
+
+/** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
+import DialogProperties from "@/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** Props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  maxPage: {
+    type: Number,
+  },
+  total: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
+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: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    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: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    field: "posLevel",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    field: "amount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "result",
+    align: "center",
+    label: "ผลการประเมินฯ",
+    sortable: false,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "duration",
+    align: "center",
+    label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
+    sortable: false,
+    field: "duration",
+    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: "isSuspension",
+    align: "center",
+    label: "ไม่ถูกพักราชการ",
+    sortable: false,
+    field: "isSuspension",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isAbsent",
+    align: "center",
+    label: "ไม่ขาดราชการ",
+    sortable: false,
+    field: "isAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isLeave",
+    align: "center",
+    label: "วันลาไม่เกิน",
+    sortable: false,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "posType",
+  "posExecutive",
+  "position",
+  "posLevel",
+  "amount",
+  "organization",
+  "result",
+  "duration",
+  "isPunish",
+  "isSuspension",
+  "isAbsent",
+  "isLeave",
+]);
+
+/** modalDialog*/
+const modalDialogAddPerson = ref<boolean>(false);
+const modalDialogForm = ref<boolean>(false);
+const modalDialogMoveGroup = ref<boolean>(false);
+const modalDialogMoveLeve = ref<boolean>(false);
+const modalDialogProperties = ref<boolean>(false);
+
+/** ตัวแปร*/
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+const isPunish = ref<boolean>(false)
+const isSuspension = ref<boolean>(false)
+const isAbsent = ref<boolean>(false)
+const isLeave = ref<boolean>(false)
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
+}
+
+/** function updatePageTable*/
+function updatePagePagination() {
+  props.fetchDataTable?.();
+}
+
+/** function updatePageSizeTable*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูล Table*/
+function searchData() {
+  formFilter.value.page = 1;
+  props.fetchDataTable?.();
+}
+
+function onProperties(data:any){
+  console.log(data)
+  modalDialogProperties.value = true
+  profileId.value = data.id
+  isPunish.value = data.isPunish
+  isSuspension.value = data.isSuspension
+  isAbsent.value = data.isAbsent
+  isLeave.value = data.isLeave
+}
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn           v-if="!store.isClosedRound" flat round dense icon="add" @click="onClickAddPerson">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
+    >
+      <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="props.rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :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">
+      <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'">
+            {{
+              (formFilter.page - 1) * formFilter.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 == '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"
+            />
+          </div>
+          <div v-else-if="col.name === 'isDuration'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isDuration"
+            />
+          </div>
+          <div v-else-if="col.name === 'isPunish'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isPunish"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired2'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired2"
+              false
+            />
+          </div> -->
+          <div v-else-if="col.name == 'isPunish'">
+            <q-icon
+              v-if="props.row.isPunish !== null"
+              :name="props.row.isPunish ? 'done' : 'close'"
+              :color="props.row.isPunish ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isPunish == null">
+              {{ props.row.isPunish == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'isSuspension'">
+            <q-icon
+              v-if="props.row.isSuspension !== null"
+              :name="props.row.isSuspension ? 'done' : 'close'"
+              :color="props.row.isSuspension ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isSuspension == null">
+              {{ props.row.isSuspension == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'isAbsent'">
+            <q-icon
+              v-if="props.row.isAbsent !== null"
+              :name="props.row.isAbsent ? 'done' : 'close'"
+              :color="props.row.isAbsent ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isAbsent == null">
+              {{ props.row.isAbsent == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'amount'">
+              {{Number(props.row.amount).toLocaleString()}}
+            </div>
+          <div v-else-if="col.name == 'isLeave'">
+            <q-icon
+              v-if="props.row.isLeave !== null"
+              :name="props.row.isLeave ? 'done' : 'close'"
+              :color="props.row.isLeave ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isLeave == null">
+              {{ props.row.isLeave == null ? '-':''}}
+            </div>
+          
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+          v-if="!store.isClosedRound"
+            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"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : item.type === 'properties'
+                      ? onProperties(props.row)
+                      : 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">
+      ทั้งหมด {{ props.total }} รายการ
+      <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>
+    </template>
+  </d-table>
+
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogProperties
+  v-model:modal="modalDialogProperties"
+  v-model:id="profileId"
+  :is-punish="isPunish"
+  :is-suspension="isSuspension"
+  :is-absent="isAbsent"
+  :is-leave="isLeave"
+  :fetch-data="props.fetchDataTable"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
new file mode 100644
index 000000000..538bc58e8
--- /dev/null
+++ b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
@@ -0,0 +1,162 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+/** importType*/
+import type {
+  ItemsMenu,
+  DataOption,
+} from "@/modules/13_salary/interface/index/Main";
+import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
+
+export const useSalaryEmployeeListSDataStore = defineStore(
+  "salaryEmployeeListStore",
+  () => {
+    const tabGroup = ref<string>("group1");
+    const tabType = ref<string>("PENDING");
+    const groupOp = ref<DataOption[]>([
+      { id: "", name: "กลุ่ม1" },
+      { id: "", name: "กลุ่ม2" },
+    ]);
+
+    const remaining = ref<number>(0);
+
+    const groupId = ref<string>("");
+    const rootId = ref<string>("");
+    const roundMainCode = ref<string>("");
+    const roundYear = ref<number>(0);
+    const roundCode = ref<string>("");
+    const isClosedRound = ref<boolean>(false); // การปิดรอบ
+    /** 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-swap-vertical-bold",
+        color: "green-6",
+        type: "moveLevel",
+      },
+      {
+        label: "แก้ไขคุณสมบัติ",
+        icon: "mdi-format-list-checks",
+        color: "blue-6",
+        type: "properties",
+      },
+      {
+        label: "ลบ",
+        icon: "delete",
+        color: "red",
+        type: "delete",
+      },
+    ]);
+
+    /** List Download รายงานของรอบเมษายน*/
+    const itemDownloadApr = ref<DataOption[]>([
+      {
+        id: "gov1-01",
+        name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
+      },
+      {
+        id: "gov1-02",
+        name: "บัญชีการคำนวณโควตาเลื่อนเงินเดือน รอบเมษายน",
+      },
+      {
+        id: "gov1-03",
+        name: "รายชื่อข้าราชการที่ได้รับการเสนอขอเลื่อนหนึ่งขั้น",
+      },
+      {
+        id: "gov1-04",
+        name: "แบบ 1 กท รอบเมษายน",
+      },
+      {
+        id: "gov1-05",
+        name: "แบบ 2 กท รอบเมษายน",
+      },
+      {
+        id: "gov1-06",
+        name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก.",
+      },
+      {
+        id: "gov1-07",
+        name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
+      },
+      {
+        id: "gov1-08",
+        name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
+      },
+    ]);
+
+    /** List Download รายงานของรอบตุลาคม*/
+    const itemDownloadOct = ref<DataOption[]>([
+      {
+        id: "gov2-01",
+        name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 กันยายน",
+      },
+      {
+        id: "gov2-02",
+        name: "บัญชีการคำนวณวงเงินเลื่อนเงินเดือน รอบตุลาคม",
+      },
+      {
+        id: "gov2-03",
+        name: "รายชื่อข้าราชการผู้ที่ได้รับการเสนอขอเลื่อนเงินเดือนทั้งปีสองขั้น",
+      },
+      {
+        id: "gov2-04",
+        name: "แบบ 1 กท รอบตุลาคม",
+      },
+      {
+        id: "gov2-05",
+        name: "แบบ 2 กท รอบตุลาคม",
+      },
+      {
+        id: "gov2-06",
+        name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก. ",
+      },
+      {
+        id: "gov2-07",
+        name: "คำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
+      },
+      {
+        id: "gov2-08",
+        name: "คำสั่งเลื่อนเงินเดือน รอบตุลาคม",
+      },
+      {
+        id: "gov2-09",
+        name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
+      },
+    ]);
+
+    function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
+      groupId.value = type === "group1" ? data.group1id : data.group2id;
+      roundCode.value = data.period;
+      groupOp.value[0].id = data.group1id;
+      groupOp.value[1].id = data.group2id;
+    }
+    return {
+      tabGroup,
+      tabType,
+      itemMenu,
+      itemDownloadOct,
+      itemDownloadApr,
+      groupId,
+      fetchPeriodLatest,
+      rootId,
+      roundCode,
+      groupOp,
+      roundMainCode,
+      remaining,
+      isClosedRound,
+      roundYear,
+    };
+  }
+);
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index c9b5c17fc..81283d7b2 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -17,14 +17,14 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importComponents*/
-import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue";
 
 /** importStore*/
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const store = useSalaryListSDataStore();
+const store = useSalaryEmployeeListSDataStore();
 const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
 

From 2852ac8026b2fc9edd2dd937661d7434b1b53870 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 14 Mar 2024 11:23:51 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=88=E0=B8=B3=20=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=AB=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81=E0=B9=80=E0=B8=81=E0=B8=93=E0=B8=91=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DialogEmployeeChart.vue                   |  16 +-
 .../DialogFormCriteria.vue                    | 304 ++++++++++++++++++
 .../salaryEmployeeChart/TabCriteria.vue       | 155 ++++++---
 .../salaryEmployeeChart/TabStructure.vue      |   6 +-
 .../13_salary/views/salaryEmployeeChart.vue   |   2 +-
 5 files changed, 430 insertions(+), 53 deletions(-)
 create mode 100644 src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue

diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
index 0ccf1fb82..75fee022d 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
@@ -32,8 +32,8 @@ const props = defineProps({
   },
 });
 const formData = reactive<FormDataChar>({
-  name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
-  group: "", //*กลุ่มบัญชีค่าจ้าง
+  name: "", //ชื่อผังบัญชีอัตราค่าจ้าง
+  group: "", //*กลุ่มของผังบัญชีอัตราค่าจ้าง
   isActive: false, //*สถานะการใช้งาน
   date: null, //ให้ไว้ ณ วันที่
   startDate: null, //วันที่มีผลบังคับใช้
@@ -166,11 +166,9 @@ watch(
                     hide-bottom-space
                     outlined
                     v-model="formData.name"
-                    label="ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง"
+                    label="ชื่อผังบัญชีอัตราค่าจ้าง"
                     :rules="[
-                      (val) =>
-                        !!val ||
-                        'กรุณากรอกชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง',
+                      (val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง',
                     ]"
                     lazy-rules
                   />
@@ -184,10 +182,12 @@ watch(
                     dense
                     outlined
                     v-model="formData.group"
-                    label="กลุ่มบัญชีค่าจ้าง"
+                    label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                     hide-bottom-space
                     mask="########"
-                    :rules="[(val) => !!val || 'กรุณากรอกกลุ่มบัญชีค่าจ้าง']"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
+                    ]"
                   />
                 </div>
 
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
new file mode 100644
index 000000000..db62795d3
--- /dev/null
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { ObjectReteRef } from "@/modules/13_salary/interface/index/EmployeeChart";
+// import type { FormDataRate } from "@/modules/13_salary/interface/request/EmployeeChart";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+// const salaryEmployeeId = ref<string>(route.params.id.toString());
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  isStatusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  data: {
+    type: Object,
+    defult: [],
+  },
+  // fetchData: {
+  //   type: Function,
+  //   required: true,
+  // },
+});
+
+const formData = reactive<any>({
+  salaryNo: null,
+  salaryMonth: null,
+  salaryDay: null,
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const salaryNoRef = ref<Object | null>(null);
+const salaryMonthRef = ref<Object | null>(null);
+const salaryDayRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectReteRef = {
+  salaryNo: salaryNoRef,
+  salaryMonth: salaryMonthRef,
+  salaryDay: salaryDayRef,
+};
+
+function closeDialog() {
+  modal.value = !modal.value;
+  clearFormData();
+}
+
+function clearFormData() {
+  formData.salaryNo = null;
+  formData.salaryMonth = null;
+  formData.salaryDay = null;
+}
+
+function onClickSubmit() {
+  const hasError = [];
+  for (const key in ObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
+      const property = ObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+
+function onSubmit() {
+  // dialogConfirm($q, async () => {
+  //   showLoader();
+  //   const body: FormDataRate = {
+  //     salaryEmployeeId: !props.isStatusEdit
+  //       ? salaryEmployeeId.value
+  //       : undefined,
+  //     step:
+  //       typeof formData.salaryNo === "number"
+  //         ? formData.salaryNo
+  //         : Number(formData.salaryNo.replace(/,/g, "")),
+  //     salaryMonth:
+  //       typeof formData.salaryMonth === "number"
+  //         ? formData.salaryMonth
+  //         : Number(formData.salaryMonth.replace(/,/g, "")), //*เงินเดือนฐาน
+  //     salaryDay:
+  //       typeof formData.salaryDay === "number"
+  //         ? formData.salaryDay
+  //         : Number(formData.salaryDay.replace(/,/g, "")), //0.5 ขั้น
+  //   };
+  //   try {
+  //     const url = !props.isStatusEdit
+  //       ? config.API.salaryEmployeeRateList
+  //       : config.API.salaryEmployeeRateListByid(props?.data?.id);
+  //     await http[!props.isStatusEdit ? "post" : "put"](url, body);
+  //     success($q, "บันทีกข้อมูลสำเร็จ");
+  //     props.fetchData?.();
+  //   } catch (err) {
+  //     messageError($q, err);
+  //     hideLoader();
+  //   } finally {
+  //     closeDialog();
+  //   }
+  // });
+}
+
+// watch(
+//   () => modal.value,
+//   () => {
+//     if (modal.value && props.isStatusEdit) {
+//       if (props.data) {
+//         const data = props.data;
+//         console.log(data);
+//         formData.salaryNo = data.step;
+//         formData.salaryMonth = data.salaryMonth;
+//         formData.salaryDay = data.salaryDay;
+//       }
+//     }
+//   }
+// );
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <Header
+        :tittle="props.isStatusEdit ? 'แก้ไขหลักเกณฑ์' : 'เพิ่มหลักเกณฑ์'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-gutter-sm q-pa-sm">
+          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+            <div class="col-4">
+              <q-select
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="กลุ่มงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-4">
+              <q-select
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ตำแหน่ง"
+                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-4">
+              <q-select
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ระดับชั้นงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-8">
+              <q-input
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="หมายเหตุ"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
+            <div class="col-4">
+              <q-input
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="ขั้นต่ำสุด"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-4">
+              <q-select
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="กลุ่มบัญชีค่าจ้าง"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มบัญชีค่าจ้าง'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="ขั้นสูงสุดเดิม"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-12 text-bold">
+              อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
+            </div>
+            <div class="col-4">
+              <q-select
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="กลุ่มบัญชีค่าจ้าง"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="อัตราค่าจ้างขั้นสูงใหม่"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
index 8f46b898a..8b82e75f6 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 
+import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
+
 /** importType*/
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
 const {
   date2Thai,
   dialogRemove,
@@ -30,16 +34,25 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "groupPos",
     align: "left",
-    label: "กลุ่มงานช่างตำแหน่ง",
+    label: "กลุ่มงาน",
     sortable: true,
     field: "groupPos",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "posName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "posName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "level",
     align: "left",
-    label: "ระดับ",
+    label: "ระดับชั้นงาน",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",
@@ -57,7 +70,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "groupOld",
     align: "left",
-    label: "อัตราค่าจ้าง กลุ่มกบัญชีค่าจ่าง",
+    label: "อัตราค่าจ้าง กลุ่มบัญชีค่าจ่าง",
     sortable: true,
     field: "groupOld",
     headerStyle: "font-size: 14px",
@@ -75,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "groupHigher",
     align: "left",
-    label: "อัตราค่าจ้างสูงกว่า กลุ่มกบัญชีค่าจ่าง",
+    label: "อัตราค่าจ้างสูงกว่าฯ กลุ่มบัญชีค่าจ่าง",
     sortable: true,
     field: "groupHigher",
     headerStyle: "font-size: 14px",
@@ -84,7 +97,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "maximumNew",
     align: "left",
-    label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
+    label: "อัตราค่าจ้างสูงกว่าฯ ขั้นสูงใหม่",
     sortable: true,
     field: "maximumNew",
     headerStyle: "font-size: 14px",
@@ -93,9 +106,9 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "reson",
     align: "left",
-    label: "อัตราค่าจ้างสูงกว่า ขั้นสูงใหม่",
+    label: "หมายเหตุ",
     sortable: true,
-    field: "maximumNew",
+    field: "reson",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -104,28 +117,30 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>([
   "no",
   "groupPos",
+  "posName",
   "level",
   "minimumOld",
   "groupOld",
   "maximumOld",
   "groupHigher",
+  "maximumNew",
+  "reson",
 ]);
 
 const rows = ref<any>([
   {
     id: "1",
-    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 1",
-    group: 1,
-    date: new Date(),
+    groupPos: "ช่าง",
+    posName: "ผู้ช่วยช่างทั่วไป",
+    level: "ช 1",
+    minimumOld: (7690).toLocaleString(),
+    groupOld: "กลุ่มที่ 1",
+    maximumOld: (17880).toLocaleString(),
+    groupHigher: "กลุ่มที่ 1",
+    maximumNew: (20000).toLocaleString(),
+    reson: "",
     isActive: true,
   },
-  {
-    id: "2",
-    name: "ผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง 2",
-    group: 2,
-    date: new Date(),
-    isActive: false,
-  },
 ]);
 
 const formFilter = reactive({
@@ -134,12 +149,75 @@ const formFilter = reactive({
   keyword: "",
 });
 
+function filterFn() {
+  formFilter.page = 1;
+  // fetchListData();
+}
+
 const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
+
+const modalForm = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const dataRow = ref<any>({});
+function editPopup(params: any) {
+  modalForm.value = true;
+  isStatusEdit.value = true;
+}
+
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    // http
+    //   .delete(config.API.salaryEmployeeChartByid(id))
+    //   .then(() => {
+    //     fetchListChart();
+    //     success($q, "ลบข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   });
+  });
+}
 </script>
+
 <template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn flat round dense icon="add" @click="() => (modalForm = true)">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.pervrnt="filterFn"
+    >
+      <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
     flat
     bordered
@@ -163,22 +241,22 @@ const pagination = ref({
     <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 === 'date'">
-            {{ col.value ? date2Thai(col.value) : "-" }}
+          <div v-if="col.name === 'no'">
+            {{ props.rowIndex + 1 }}
           </div>
-          <div v-else-if="col.name === 'group'">
+          <!-- <div v-else-if="col.name === 'group'">
             {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
-          </div>
-          <div v-else-if="col.name === 'isActive'">
+          </div> -->
+          <!-- <div v-else-if="col.name === 'isActive'">
             <q-icon
               :name="col.value ? 'done' : 'close'"
               :color="col.value ? 'primary' : 'grey'"
               size="24px"
             ></q-icon>
-          </div>
-          <div v-else>{{ col.value ? col.value : "-" }}</div>
+          </div> -->
+          <div v-else>{{ col.value != "" ? col.value : "-" }}</div>
         </q-td>
-        <!-- <q-td>
+        <q-td>
           <q-btn
             flat
             dense
@@ -189,26 +267,15 @@ const pagination = ref({
           >
             <q-menu>
               <q-list dense style="min-width: 200px">
-                <q-item
-                  v-for="(item, index) in itemMenu"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click.stop="onClickAction(item.type, props.row)"
-                >
+                <q-item clickable v-close-popup>
                   <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 class="row items-center" @click="editPopup(props.row)">
+                      <q-icon color="edit" size="17px" name="edit" />
+                      <div class="q-pl-md">แก้ไขข้อมูล</div>
                     </div>
                   </q-item-section>
                 </q-item>
                 <q-item
-                  v-if="props.row.isActive == false"
                   clickable
                   v-close-popup
                   @click.stop="onClickDelete(props.row.id)"
@@ -223,7 +290,7 @@ const pagination = ref({
               </q-list>
             </q-menu>
           </q-btn>
-        </q-td> -->
+        </q-td>
       </q-tr>
     </template>
     <!-- <template v-slot:pagination="scope">
@@ -239,6 +306,12 @@ const pagination = ref({
       ></q-pagination>
     </template> -->
   </d-table>
+
+  <DialogFormCriteria
+    v-model:modal="modalForm"
+    :isStatusEdit="isStatusEdit"
+    :data="dataRow"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
index a8acc6c20..d2c45c331 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
@@ -45,7 +45,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง",
+    label: "ชื่อผังบัญชีอัตราค่าจ้าง",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -54,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "group",
     align: "left",
-    label: "กลุ่มบัญชีค่าจ้าง",
+    label: "กลุ่มของผังบัญชีอัตราค่าจ้าง",
     sortable: true,
     field: "group",
     headerStyle: "font-size: 14px",
@@ -289,7 +289,7 @@ onMounted(() => {
             {{ col.value ? date2Thai(col.value) : "-" }}
           </div>
           <div v-else-if="col.name === 'group'">
-            {{ col.value ? `กลุ่มที่ (${col.value})` : "-" }}
+            {{ col.value ? `กลุ่มที่ ${col.value}` : "-" }}
           </div>
           <div v-else-if="col.name === 'isActive'">
             <q-icon
diff --git a/src/modules/13_salary/views/salaryEmployeeChart.vue b/src/modules/13_salary/views/salaryEmployeeChart.vue
index add4984af..ffa47f32c 100644
--- a/src/modules/13_salary/views/salaryEmployeeChart.vue
+++ b/src/modules/13_salary/views/salaryEmployeeChart.vue
@@ -23,7 +23,7 @@ const store = useSalaryEmployeeChartDataStore();
       active-color="primary"
       indicator-color="primary"
     >
-      <q-tab name="structure" label="บัญชีโครงสร้างอัตราค่าจ้าง" />
+      <q-tab name="structure" label="ชื่อผังบัญชีอัตราค่าจ้าง" />
       <q-tab name="criteria" label="หลักเกณฑ์" />
     </q-tabs>
     <q-separator />

From 9662fbedd888b71238787e26e07c75a9b432f4aa Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 14 Mar 2024 11:49:18 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9ACardView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    | 40 +++++----
 .../detail/Achievement/02_Train.vue           | 51 +++++++-----
 .../PersonalInformation/05_Education.vue      | 81 ++++++++++++++-----
 .../PersonalInformation/06_SpecialSkill.vue   | 39 +++++----
 4 files changed, 139 insertions(+), 72 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index 80f71b65f..ddf8b2574 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -268,10 +268,10 @@ function closeHistoryDialog() {
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -293,24 +293,26 @@ function closeHistoryDialog() {
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
               :key="col.name"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
+              <div></div>
+              <div class="col label-color">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div
                   v-if="col.name === 'issueDate' || col.name === 'expireDate'"
                 >
                   {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
+                </div>
 
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+                <div v-else>{{ col.value }}</div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -552,4 +554,12 @@ function closeHistoryDialog() {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.bg-color {
+  background-color: #fafafa;
+}
+
+.label-color {
+  color: #747474cc;
+}
+</style>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 02afee66d..9204dc0ce 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -434,7 +434,7 @@ watch(
         class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -456,28 +456,29 @@ watch(
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              v-for="(col, index) in props.cols"
               :key="col.name"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
-                  v-if="
-                    col.name === 'startDate' ||
-                    col.name === 'endDate' ||
-                    col.name === 'graduateDate'
-                  "
-                >
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
-
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+              <div class="row q-pa-sm">
+                <div class="col-7 label-color">
+                  <div>{{ col.label }}</div>
+                </div>
+                <div class="col">
+                  <div
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'endDate' ||
+                      col.name === 'dateOrder'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>{{ col.value }}</div>
+                </div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -928,4 +929,12 @@ watch(
 .borderCard {
   border: 1px solid #d0d0d0;
 }
+
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
 </style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index 57484d532..e377befbb 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -168,6 +168,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const backgroundColor = "grey-2";
 const isDate = ref<string>("false");
 const educationOption = ["ใช่", "ไม่ใช่"];
 const historyDialog = ref<boolean>(false);
@@ -483,32 +484,60 @@ watch(
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <q-list>
-            <div
-              class="q-pa-md"
-              v-for="(col, index) in props.cols"
-              :key="col.name"
-            >
-              <div class="row">
-                <div class="col-5">
-                  <div>{{ col.label }}</div>
+          <div class="row">
+            <div class="col-3 q-pa-sm label-color">ระดับการศึกษา</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[0].value }}</div>
+            <div class="col-2 q-pa-sm label-color">สถานศึกษา</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[1].value }}</div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-3 q-pa-sm label-color">ตั้งแต่</div>
+                <div class="col-4 q-pa-sm">
+                  {{ date2Thai(props.cols[2].value) }}
                 </div>
-                <div class="col-7">
-                  <div
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'finishDate' ||
-                      col.name === 'graduateDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-
-                  <div v-else>{{ col.value }}</div>
+                <div class="col-2 q-pa-sm label-color">ถึง</div>
+                <div class="col-3 q-pa-sm">
+                  {{ date2Thai(props.cols[3].value) }}
                 </div>
               </div>
             </div>
-          </q-list>
+            <div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div>
+            <div class="col-9 q-pa-sm">
+              {{ date2Thai(props.cols[4].value) }}
+            </div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-4 q-pa-sm label-color">
+                  เป็นวุฒิการศึกษาในตำแหน่ง
+                </div>
+                <div class="col-3 q-pa-sm">{{ props.cols[5].value }}</div>
+                <div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
+                <div class="col-3 q-pa-sm">{{ props.cols[6].value }}</div>
+              </div>
+            </div>
+            <div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[7].value }}</div>
+            <div class="col-2 q-pa-sm label-color">ทุน</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[8].value }}</div>
+            <div class="col-12">
+              <div :class="`row bg-color`">
+                <div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
+                <div class="col-4 q-pa-sm">{{ props.cols[9].value }}</div>
+                <div class="col-2 q-pa-sm label-color">ประเทศ</div>
+                <div class="col-3 q-pa-sm">{{ props.cols[10].value }}</div>
+              </div>
+            </div>
+            <div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
+            <div class="col-4 q-pa-sm">{{ props.cols[11].value }}</div>
+            <div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
+            <div class="col-3 q-pa-sm">{{ props.cols[12].value }}</div>
+          </div>
+          <div class="col-12">
+            <div :class="`row bg-color`">
+              <div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร</div>
+              <div class="col-4 q-pa-sm">{{ props.cols[13].value }}</div>
+            </div>
+          </div>
         </q-card>
       </div>
     </template>
@@ -974,4 +1003,12 @@ watch(
 .borderCard {
   border: 1px solid #d0d0d0;
 }
+
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
 </style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index ea7dcf2e7..4c789a446 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -84,7 +84,7 @@ const rows = [
   },
 ];
 const dialog = ref<boolean>(false);
-
+const backgroundColor = "grey-2";
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -242,10 +242,10 @@ async function onSubmit() {
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -267,16 +267,18 @@ async function onSubmit() {
             </q-btn>
           </q-card-actions>
           <q-separator />
-          <q-list>
-            <q-item v-for="col in props.cols" :key="col.name">
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label caption>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
+          <div class="row">
+            <div class="col q-pa-sm label-color">ด้าน</div>
+            <div class="col q-pa-sm">{{ props.cols[0].value }}</div>
+            <div class="col q-pa-sm label-color">รายละเอียด</div>
+            <div class="col q-pa-sm">{{ props.cols[1].value }}</div>
+          </div>
+          <div :class="`row bg-color`">
+            <div class="col q-pa-sm label-color">หมายเหตุ</div>
+            <div class="col q-pa-sm">{{ props.cols[2].value }}</div>
+            <div class="col q-pa-sm label-color">เอกสารอ้างอิง</div>
+            <div class="col q-pa-sm">{{ props.cols[3].value }}</div>
+          </div>
         </q-card>
       </div>
     </template>
@@ -350,6 +352,7 @@ async function onSubmit() {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
+      console.log("🚀 ~ bg-white:", bg-white)
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
@@ -427,4 +430,12 @@ async function onSubmit() {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.label-color {
+  color: #747474cc;
+}
+
+.bg-color {
+  background-color: #fafafa;
+}
+</style>