From 2cb11a74455df203d9a260236d2d5a8155e5ab5b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 24 Apr 2025 14:38:39 +0700
Subject: [PATCH 1/8] =?UTF-8?q?=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B8=82=E0=B8=B1=E0=B9=89=E0=B8=99=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_salaryLists/DialogMoveLevelMulti.vue   |   5 -
 .../04_salaryLists/TableTypePending.vue       |  21 +-
 .../DialogMoveLevelMulti.vue                  | 383 ++++++++++++++++++
 .../05_salaryListsEmployee/TabMain.vue        |   5 +-
 .../05_salaryListsEmployee/TableTypeOther.vue |   8 +-
 .../TableTypePending.vue                      |  75 +++-
 6 files changed, 457 insertions(+), 40 deletions(-)
 create mode 100644 src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue

diff --git a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
index 0777f5f88..16fa30827 100644
--- a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
@@ -309,11 +309,6 @@ watch(
                     <div v-if="col.name === 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div v-else-if="col.name === 'fullName'">
-                      {{
-                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
-                      }}
-                    </div>
                     <div
                       v-else-if="col.name == 'organization'"
                       class="text-html"
diff --git a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
index 76477f805..153ec2db1 100644
--- a/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/04_salaryLists/TableTypePending.vue
@@ -14,7 +14,6 @@ import DialogFormEdit from "@/modules/13_salary/components/04_salaryLists/Dialog
 import DialogMoveGroup from "@/modules/13_salary/components/04_salaryLists/DialogMoveGroup.vue"; // ย้ายกลุ่ม
 import DialogMoveLevel from "@/modules/13_salary/components/04_salaryLists/DialogMoveLevel.vue"; // เลื่อนขั้น
 import DialogMoveLevelMulti from "@/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue";
-
 import DialogProperties from "@/modules/13_salary/components/04_salaryLists/DialogProperties.vue"; //แก้ไขคุณสมบัติ
 import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
 
@@ -76,6 +75,9 @@ const columns = ref<QTableColumn[]>([
     label: "ชื่อ-นามสกุล",
     sortable: false,
     field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -331,11 +333,7 @@ function onProperties(data: any) {
   isLeave.value = data.isLeave;
 }
 
-/**
- * function openPopup ย้ายกขั้น
- * @param id profileId
- *
- */
+/** function openPopup ย้ายกขั้น*/
 function onClickMoveLevelMulti() {
   modalDialogMoveLeveMulti.value = !modalDialogMoveLeve.value;
 }
@@ -381,11 +379,7 @@ function onClickViewInfo(type: string, id: string) {
     </q-btn>
 
     <q-btn
-      v-if="
-        !store.isClosedRound &&
-        checkPermission($route)?.attrIsCreate &&
-        !isClose
-      "
+      v-if="!store.isClosedRound && !isClose"
       flat
       round
       dense
@@ -514,11 +508,6 @@ function onClickViewInfo(type: string, id: string) {
               (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="text-html">
             {{ findOrgNameHtml(props.row) }}
           </div>
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
new file mode 100644
index 000000000..705a5404d
--- /dev/null
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableColumn } from "quasar";
+import type { PropType } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  findOrgNameHtml,
+  onSearchDataTable,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const columns = defineModel<QTableColumn[]>("columns", {
+  required: true,
+});
+const visibleColumns = defineModel<string[]>("visibleColumns", {
+  required: true,
+});
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+  total: {
+    type: Number,
+  },
+  columns: {
+    type: Array as PropType<QTableColumn[]>,
+  },
+  visibleColumns: {
+    type: Array as PropType<string[]>,
+  },
+  isRetire: {
+    type: Boolean,
+  },
+});
+
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const selectedData = ref<any[]>([]); //ตำแหน่งที่ต้องการย้าย
+
+const type = ref<string>(""); //เลื่อนขั้น
+const note = ref<string>(""); //หมายเหตุ
+const isReadonly = 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 ขั้น" },
+      ]
+    : store.roundMainCode == "APR"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ]
+    : [
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+const keyword = ref<string>("");
+
+/**
+ * function เรียกข้อมูลรายชื่อ
+ * @param id กลุ่ม
+ */
+async function fetchDataPeriod() {
+  showLoader();
+  let formData = {
+    page: "1",
+    pageSize: props.total?.toString(),
+    keyword: keyword.value,
+    type: store.tabType,
+    isRetire: store.roundMainCode !== "OCT" ? null : props.isRetire ? "1" : "0",
+  };
+
+  await http
+    .put(config.API.salaryListPeriodORGEmp(store.groupId), formData)
+    .then((res) => {
+      rowsMain.value = res.data.result.data;
+      rows.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ปืด Popup
+ */
+function close() {
+  modal.value = false;
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const ArrayProfileId = selectedData.value.map((e) => e.id);
+    const body = {
+      type: type.value,
+      isReserve: isReserve.value,
+      remark: type.value === "NONE" ? note.value : undefined,
+      profileId: ArrayProfileId,
+    };
+    await http
+      .post(config.API.salaryPeriodEmp() + `/change/type-multi`, body)
+      .then(async () => {
+        await props.fetchData?.();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        close();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function เปลี่ยนระดับ
+ */
+function chengType() {}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    props.columns ? props.columns : []
+  );
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataPeriod();
+    } else {
+      rows.value = [];
+      rowsMain.value = [];
+      keyword.value = "";
+      type.value = "";
+      selectedData.value = [];
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <Header :tittle="`เลื่อนขั้น`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 80vh">
+        <div class="q-col-gutter-sm">
+          <div class="row q-col-gutter-sm jus">
+            <div class="col-3">
+              <q-select
+                class="inputgreen"
+                v-model="type"
+                label="เลื่อนขั้น"
+                dense
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="typeRangeOps"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+                lazy-rules
+                hide-bottom-space
+                @update:model-value="chengType()"
+                style="min-width: 140px"
+              />
+            </div>
+
+            <div class="row col-9 items-center">
+              <q-checkbox
+                v-if="type === 'FULL'"
+                keep-color
+                label="สำรอง"
+                dense
+                v-model="isReserve"
+              />
+
+              <q-input
+                v-if="type === 'NONE'"
+                outlined
+                dense
+                v-model="note"
+                label="หมายเหตุ"
+                type="textarea"
+                :class="inputEdit(isReadonly)"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <q-separator class="col-12" />
+          </div>
+
+          <div class="row justify-end q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="keyword"
+              ref="filterRef"
+              outlined
+              placeholder="ค้นหา"
+              @keydown.enter.pervent="serchDataTable"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+
+          <div class="row justify-end">ทั้งหมด {{ rows.length }} รายการ</div>
+
+          <div class="col-12 q-mt-sm">
+            <q-table
+              class="custom-header-table"
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              dense
+              hide-pagination
+              :visible-columns="visibleColumns"
+              selection="multiple"
+              v-model:selected="selectedData"
+              :pagination="{ page: 1, rowsPerPage: total }"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td auto-width>
+                    <q-checkbox
+                      v-model="props.selected"
+                      keep-color
+                      color="primary"
+                      dense
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="col.name == 'organization'"
+                      class="text-html"
+                    >
+                      {{ findOrgNameHtml(props.row) }}
+                    </div>
+                    <div v-else-if="col.name == 'amount'">
+                      {{ Number(props.row.amount).toLocaleString() }}
+                    </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>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          :disable="selectedData.length === 0 || type === ''"
+          @click="onSubmit"
+          color="secondary"
+          label="บันทึก"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
index 8cef3686d..eb7675cf3 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TabMain.vue
@@ -40,7 +40,7 @@ const props = defineProps({
 
 const splitterModel = ref<number>(13);
 const modalDialogInfoCriteria = ref<boolean>(false); //popup หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ
-const isRetire = ref<boolean | string>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
+const isRetire = ref<boolean>(false); //แสดงเฉพาะผู้เกษียณอายุราชการ
 const rows = ref<DataPeriod[]>([]); //ข้อมูลรายชื่อ
 const total = ref<number>(0); //จำนวนรายการ
 const maxPage = ref<number>(1); //จำนวนหน้า
@@ -515,6 +515,8 @@ onMounted(() => {
                   :rows="rows"
                   :total="total"
                   :snap-shot="props?.snapShot"
+                  :is-retire="isRetire"
+                  :is-close="props.periodLatest?.group1IsClose ?? false"
                 />
                 <TableTabType2
                   v-else
@@ -525,6 +527,7 @@ onMounted(() => {
                   :total="total"
                   :type="item.type"
                   :snap-shot="props?.snapShot"
+                  :is-close="props.periodLatest?.group1IsClose ?? false"
                 />
               </q-tab-panel>
             </q-tab-panels>
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
index 306e3ce17..74fe96c70 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
@@ -28,6 +28,7 @@ const { dialogRemove, messageError, showLoader, hideLoader, success } =
 /** props*/
 const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
+const isClose = defineModel<boolean>("isClose", { required: true });
 const snapShot = defineModel<string>("snapShot");
 const props = defineProps({
   rows: { type: Array },
@@ -311,7 +312,11 @@ watch(
     <!-- &&
     snapShot === 'SNAP1' -->
     <q-btn
-      v-if="!store.isClosedRound && checkPermission($route)?.attrIsCreate"
+      v-if="
+        !store.isClosedRound &&
+        !isClose &&
+        checkPermission($route)?.attrIsCreate
+      "
       flat
       round
       dense
@@ -390,6 +395,7 @@ watch(
           <q-btn
             v-if="
               !store.isClosedRound &&
+              !isClose &&
               (checkPermission($route)?.attrIsUpdate ||
                 checkPermission($route)?.attrIsDelete)
             "
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
index 16f0a8759..3612e107c 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue
@@ -9,7 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
 
@@ -20,6 +20,7 @@ import DialogMoveGroup from "@/modules/13_salary/components/05_salaryListsEmploy
 import DialogMoveLevel from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevel.vue";
 import DialogProperties from "@/modules/13_salary/components/05_salaryListsEmployee/DialogProperties.vue";
 import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
+import DialogMoveLevelMulti from "@/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -30,12 +31,14 @@ const {
   showLoader,
   hideLoader,
   success,
+  findOrgName,
   findOrgNameHtml,
 } = useCounterMixin();
 
 /** Props*/
 const formFilter = defineModel<DataFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
+const isClose = defineModel<boolean>("isClose", { required: true });
 const snapShot = defineModel<string>("snapShot");
 
 const props = defineProps({
@@ -49,10 +52,13 @@ const props = defineProps({
   total: {
     type: Number,
   },
+  isRetire: {
+    type: Boolean,
+  },
 });
 
 /** ข้อมูล Table*/
-const columns = ref<QTableProps["columns"]>([
+const columns = ref<QTableColumn[]>([
   {
     name: "no",
     align: "left",
@@ -68,6 +74,9 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-นามสกุล",
     sortable: false,
     field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -149,6 +158,9 @@ const columns = ref<QTableProps["columns"]>([
     label: "สังกัด",
     sortable: false,
     field: "organization",
+    format(val, row) {
+      return findOrgName(row);
+    },
     headerStyle: "font-size: 14px;min-width:280px",
     style: "font-size: 14px",
   },
@@ -223,6 +235,7 @@ const modalDialogMoveGroup = ref<boolean>(false); //popup ย้ายกลุ
 const modalDialogMoveLeve = ref<boolean>(false); //popup เลื่อนขั้น
 const modalDialogProperties = ref<boolean>(false); //popup คุณสมบัติ
 const modalDialogInfo = ref<boolean>(false); //popup ข้อมูลส่วนตัว
+const modalDialogMoveLeveMulti = ref<boolean>(false); //popup เลื่อนขั้น
 
 /** ตัวแปร*/
 const profileId = ref<string>(""); //id คน
@@ -256,9 +269,7 @@ function onClickDelete(id: string) {
   });
 }
 
-/**
- * function openPopup เพิ่มคนเลื่อนค่าจ้าง
- */
+/** function openPopup เพิ่มคนเลื่อนค่าจ้าง*/
 function onClickAddPerson() {
   modalDialogAddPerson.value = !modalDialogAddPerson.value;
 }
@@ -297,9 +308,7 @@ function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
   isReserve.value = isReserveVal;
 }
 
-/**
- * function updatePageTable
- */
+/** function updatePageTable*/
 function updatePagePagination() {
   props.fetchDataTable?.();
 }
@@ -312,9 +321,7 @@ function updatePageSizePagination(newPagination: NewPagination) {
   formFilter.value.pageSize = newPagination.rowsPerPage;
 }
 
-/**
- * function ค้นหาข้อมูล Table
- */
+/** function ค้นหาข้อมูล Table*/
 function searchData() {
   formFilter.value.page = 1;
   props.fetchDataTable?.();
@@ -345,6 +352,11 @@ function onClickViewInfo(type: string, id: string) {
   modalDialogInfo.value = true;
 }
 
+/** function openPopup ย้ายกขั้น*/
+function onClickMoveLevelMulti() {
+  modalDialogMoveLeveMulti.value = !modalDialogMoveLeve.value;
+}
+
 /**
  * callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize
  */
@@ -361,7 +373,11 @@ watch(
     <!-- &&
     snapShot === 'SNAP1' -->
     <q-btn
-      v-if="!store.isClosedRound && checkPermission($route)?.attrIsCreate"
+      v-if="
+        !store.isClosedRound &&
+        checkPermission($route)?.attrIsCreate &&
+        !isClose
+      "
       flat
       round
       dense
@@ -370,6 +386,18 @@ watch(
     >
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
+
+    <q-btn
+      v-if="!store.isClosedRound && !isClose"
+      flat
+      round
+      dense
+      color="green-6"
+      icon="mdi-swap-vertical-bold"
+      @click="onClickMoveLevelMulti"
+    >
+      <q-tooltip>เลื่อนขั้น</q-tooltip>
+    </q-btn>
     <q-space />
     <q-input
       borderless
@@ -431,6 +459,7 @@ watch(
           <q-btn
             v-if="
               !store.isClosedRound &&
+              !isClose &&
               (checkPermission($route)?.attrIsUpdate ||
                 checkPermission($route)?.attrIsDelete)
             "
@@ -490,11 +519,6 @@ watch(
               (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="text-html">
             {{ findOrgNameHtml(props.row) }}
           </div>
@@ -600,6 +624,23 @@ watch(
     :type="infoType"
     :employee-class="'-employee'"
   />
+
+  <!-- เลื่อนขั้นเลือกหลายคน -->
+  <DialogMoveLevelMulti
+    v-model:modal="modalDialogMoveLeveMulti"
+    :fetch-data="props.fetchDataTable"
+    :columns="
+      columns.filter(
+        (e) =>
+          e.name !== 'leave' &&
+          e.name !== 'discipline' &&
+          e.name !== 'posSalary'
+      )
+    "
+    :visible-columns="visibleColumns"
+    :total="props?.total"
+    :is-retire="isRetire"
+  />
 </template>
 
 <style scoped></style>

From 543ae775bd448dab3de77e5bb662fc64d960991d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 24 Apr 2025 15:06:32 +0700
Subject: [PATCH 2/8] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20Eva?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/step/step2.vue          | 59 +++++++----------
 .../components/Detail/step/step5.vue          | 33 ++++------
 .../components/Detail/step/step6.vue          | 64 +++++++------------
 3 files changed, 59 insertions(+), 97 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
index 122218c2e..8c82e9109 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@@ -136,7 +136,6 @@ onMounted(async () => {
                       outlined
                       v-model="formCommand.elementaryFullName"
                       label="ชื่อ-นามสกุล"
-                      lazy-rules
                       hide-bottom-space
                     />
 
@@ -144,42 +143,38 @@ onMounted(async () => {
                       <div class="row col-12 q-col-gutter-sm">
                         <q-input
                           readonly
-                          class="col-xs-6 col-sm-3"
+                          class="col-xs-6 col-sm-6"
                           dense
                           outlined
                           v-model="formCommand.elementaryPosition"
                           label="ตำแหน่ง"
-                          lazy-rules
                           hide-bottom-space
                         />
                         <q-input
                           readonly
-                          class="col-xs-6 col-sm-3"
-                          dense
-                          outlined
-                          v-model="formCommand.elementaryPositionOld"
-                          label="ตำแหน่งเดิม"
-                          lazy-rules
-                          hide-bottom-space
-                        />
-                        <q-input
-                          readonly
-                          class="col-xs-6 col-sm-3"
+                          class="col-xs-6 col-sm-6"
                           dense
                           outlined
                           v-model="formCommand.elementaryOrg"
                           label="สังกัด"
-                          lazy-rules
                           hide-bottom-space
                         />
                         <q-input
                           readonly
-                          class="col-xs-6 col-sm-3"
+                          class="col-xs-6 col-sm-6"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryPositionOld"
+                          label="ตำแหน่งเดิม"
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-6"
                           dense
                           outlined
                           v-model="formCommand.elementaryOrgOld"
                           label="สังกัดเดิม"
-                          lazy-rules
                           hide-bottom-space
                         />
                       </div>
@@ -202,50 +197,44 @@ onMounted(async () => {
                       outlined
                       v-model="formCommand.abovelevelFullname"
                       label="ชื่อ-นามสกุล"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                      lazy-rules
                       hide-bottom-space
                     />
                     <div class="col-12">
                       <div class="row col-12 q-col-gutter-sm">
                         <q-input
                           readonly
-                          class="col-xs-6 col-sm-3"
+                          class="col-xs-6 col-sm-6"
                           dense
                           outlined
                           v-model="formCommand.abovelevelPosition"
                           label="ตำแหน่ง"
-                          lazy-rules
                           hide-bottom-space
                         />
                         <q-input
                           readonly
-                          class="col-xs-6 col-sm-3"
-                          dense
-                          outlined
-                          v-model="formCommand.abovelevelPositionOld"
-                          label="ตำแหน่งเดิม"
-                          lazy-rules
-                          hide-bottom-space
-                        />
-                        <q-input
-                          readonly
-                          class="col-xs-6 col-sm-3"
+                          class="col-xs-6 col-sm-6"
                           dense
                           outlined
                           v-model="formCommand.abovelevelOrg"
                           label="สังกัด"
-                          lazy-rules
                           hide-bottom-space
                         />
                         <q-input
                           readonly
-                          class="col-xs-6 col-sm-3"
+                          class="col-xs-6 col-sm-6"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelPositionOld"
+                          label="ตำแหน่งเดิม"
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-6"
                           dense
                           outlined
                           v-model="formCommand.abovelevelOrgOld"
                           label="สังกัดเดิม"
-                          lazy-rules
                           hide-bottom-space
                         />
                       </div>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
index f2ea25601..5c01eaa20 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@@ -72,17 +72,17 @@ async function save() {
   ) {
     dialogConfirm($q, async () => {
       showLoader();
-      http
+      await http
         .put(config.API.evaluationNext5To6(id.value))
         .then(() => {
           success($q, "บันทึกแจ้งผลการประกาศคัดเลือกสำเร็จ");
+          store.step = 6;
+          store.currentStep = 6;
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          store.step = 6;
-          store.currentStep = 6;
           hideLoader();
         });
     });
@@ -164,7 +164,6 @@ async function copyLink(name: string) {
 
 /** function เรียกข้อมูลวันที่ประกาศ */
 async function getDate() {
-  showLoader();
   await http
     .get(config.API.evaluationDateAnnounce(id.value))
     .then((res) => {
@@ -174,11 +173,6 @@ async function getDate() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
@@ -186,7 +180,6 @@ const download10Url = ref<string>("");
 
 /** function เช็คไฟล์อัปโหลด*/
 async function checkDocResult() {
-  showLoader();
   await http
     .get(
       config.API.evaluationPatchData(
@@ -197,11 +190,6 @@ async function checkDocResult() {
     )
     .then((res: any) => {
       download10Url.value = res.data.downloadUrl;
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
@@ -209,7 +197,6 @@ async function checkDocResult() {
  * function เรียกข้อมูลผลงาน
  */
 async function fetchDataSigner() {
-  showLoader();
   await http
     .get(config.API.evaluationSigner(id.value, 1))
     .then((res) => {
@@ -221,16 +208,18 @@ async function fetchDataSigner() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
 onMounted(async () => {
-  await Promise.all([getDate(), checkDocResult(), fetchDataSigner()]);
+  try {
+    showLoader();
+    await Promise.all([getDate(), checkDocResult(), fetchDataSigner()]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
index 29227328f..4af879af6 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
@@ -179,52 +179,44 @@ onMounted(async () => {
                     outlined
                     label="ชื่อ-นามสกุล"
                     v-model="formCommand.elementaryFullName"
-                    lazy-rules
                     hide-bottom-space
                   />
                   <div class="col-12">
                     <div class="row col-12 q-col-gutter-sm">
                       <q-input
                         readonly
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.elementaryPosition"
                         label="ตำแหน่ง"
-                        lazy-rules
                         hide-bottom-space
                       />
-
                       <q-input
                         readonly
-                        class="col-xs-6 col-sm-3"
-                        dense
-                        outlined
-                        v-model="formCommand.elementaryPositionOld"
-                        label="ตำแหน่งเดิม"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-
-                      <q-input
-                        readonly
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.elementaryOrg"
                         label="สังกัด"
-                        lazy-rules
                         hide-bottom-space
                       />
                       <q-input
                         readonly
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryPositionOld"
+                        label="ตำแหน่งเดิม"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.elementaryOrgOld"
                         label="สังกัดเดิม"
-                        lazy-rules
                         hide-bottom-space
                       />
                     </div>
@@ -247,8 +239,6 @@ onMounted(async () => {
                     outlined
                     v-model="formCommand.abovelevelFullname"
                     label="ชื่อ-นามสกุล"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                    lazy-rules
                     hide-bottom-space
                   />
 
@@ -256,45 +246,39 @@ onMounted(async () => {
                     <div class="row col-12 q-col-gutter-sm">
                       <q-input
                         readonly
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.abovelevelPosition"
                         label="ตำแหน่ง"
-                        lazy-rules
                         hide-bottom-space
                       />
 
                       <q-input
                         readonly
-                        class="col-xs-6 col-sm-3"
-                        dense
-                        outlined
-                        v-model="formCommand.abovelevelPositionOld"
-                        label="ตำแหน่งเดิม"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-
-                      <q-input
-                        readonly
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.abovelevelOrg"
                         label="สังกัด"
-                        lazy-rules
                         hide-bottom-space
                       />
                       <q-input
                         readonly
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelPositionOld"
+                        label="ตำแหน่งเดิม"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.abovelevelOrgOld"
                         label="สังกัดเดิม"
-                        lazy-rules
                         hide-bottom-space
                       />
                     </div>

From b090d8fe9b46a7989a4efb84e9e08b7dfb95659a Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 25 Apr 2025 09:30:37 +0700
Subject: [PATCH 3/8] fixing display phone org

---
 .../components/DialogStructureDetail.vue             | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/modules/02_organization/components/DialogStructureDetail.vue b/src/modules/02_organization/components/DialogStructureDetail.vue
index 14e9dc543..aaaa56ba4 100644
--- a/src/modules/02_organization/components/DialogStructureDetail.vue
+++ b/src/modules/02_organization/components/DialogStructureDetail.vue
@@ -156,19 +156,13 @@ watch(
             <div class="row q-col-gutter-sm q-mb-xs">
               <div class="col-4 text-bold">เบอร์โทร</div>
               <div class="col-8 text-grey-8">
-                <p v-if="formData.orgPhoneEx != ''">
+                <p v-if="formData.orgPhoneEx">
                   {{ `ภายนอก ${formData.orgPhoneEx}` }}
                 </p>
-                <p v-if="formData.orgPhoneIn != ''">
+                <p v-if="formData.orgPhoneIn">
                   {{ `ภายใน ${formData.orgPhoneIn}` }}
                 </p>
-                <p
-                  v-show="
-                    formData.orgPhoneEx == '' && formData.orgPhoneIn == ''
-                  "
-                >
-                  -
-                </p>
+                <p v-show="!formData.orgPhoneEx && !formData.orgPhoneIn">-</p>
               </div>
             </div>
 

From debfd5b45995362933ae5ae741f27f2a996c7d9f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 25 Apr 2025 11:17:45 +0700
Subject: [PATCH 4/8] =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20posi?=
 =?UTF-8?q?tion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../16_positionEmployee/components/DialogSelectPerson.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
index e378803f7..e1a171523 100644
--- a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -93,6 +93,7 @@ const visibleColumnsResult = ref<String[]>([
   "no",
   "citizenId",
   "name",
+  "positionName",
   "posTypeName",
   "posLevelName",
 ]);
@@ -621,7 +622,6 @@ watch(
                     map-options
                     :options="columnsResult"
                     option-value="name"
-                    
                     style="min-width: 140px"
                     class="col-xs-12 col-sm-3 col-md-2"
                   />

From 9d1955b5aa9b7114c9231a80835f42ef041ebe4d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Apr 2025 13:58:59 +0700
Subject: [PATCH 5/8] =?UTF-8?q?UI=20API=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B9=89=E0=B8=AD=E0=B8=99=E0=B8=AB=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/09_leave/api.leave.ts                 |   1 +
 .../components/07_LeaveHistory/DialogForm.vue | 505 ++++++++++++++++++
 src/modules/09_leave/interface/index/Main.ts  |   9 +-
 .../interface/response/leaveHistory.ts        |  32 ++
 src/modules/09_leave/router.ts                |  14 +-
 .../09_leave/stores/LeaveHistoryStore.ts      |  16 +
 .../09_leave/views/07_LeaveHistoryMain.vue    | 420 +++++++++++++++
 7 files changed, 995 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
 create mode 100644 src/modules/09_leave/interface/response/leaveHistory.ts
 create mode 100644 src/modules/09_leave/stores/LeaveHistoryStore.ts
 create mode 100644 src/modules/09_leave/views/07_LeaveHistoryMain.vue

diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 6fc2d10a2..e290a261b 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -38,6 +38,7 @@ export default {
   leaveReportReject: (id: string) => `${leave}/report/reject/${id}`,
   leaveDeleteApprove: (id: string) => `${leave}/admin/delete/approve/${id}`,
   leaveDeleteReject: (id: string) => `${leave}/admin/delete/reject/${id}`,
+  leaveBeginning: `${leave}-beginning`,
 
   /**รายงาน */
   leaveReportTimeRecords: (type: string) =>
diff --git a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
new file mode 100644
index 000000000..c71aee677
--- /dev/null
+++ b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
+
+import type { QTableColumn } from "quasar";
+import type {
+  DataOption,
+  DataPagination,
+} from "@/modules/09_leave/interface/index/Main";
+import type {
+  DataLeaveType,
+  DataLeaveBeginning,
+} from "@/modules/09_leave/interface/response/leaveHistory";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** useStore*/
+const $q = useQuasar();
+const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
+const { dialogConfirm, showLoader, success, messageError, hideLoader } =
+  useCounterMixin();
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const rowData = defineModel<DataLeaveBeginning>("rowData", {
+  default: {} as DataLeaveBeginning,
+});
+
+const props = defineProps({
+  fetchDataLeaveBeginning: { type: Function, required: true },
+});
+
+const formFilter = reactive({
+  citizenId: "",
+  type: "citizenId",
+  keyword: "",
+  page: 1,
+  pageSize: 10,
+});
+const searchTypeOption = ref<DataOption[]>([
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "firstName", name: "ชื่อ" },
+  { id: "lastName", name: "นามสกุล" },
+]);
+const rows = ref<DataLeaveBeginning[]>([]);
+const selected = ref<DataLeaveBeginning[]>([]);
+const total = ref<number>(0);
+const maxPage = ref<number>(0);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: " เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    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",
+  },
+]);
+
+const leaveTypeCode = ref<string>("");
+const profileId = ref<string>("");
+const rowId = ref<string>("");
+const formData = reactive({
+  leaveTypeId: "",
+  leaveYear: new Date().getFullYear(),
+  leaveDays: "",
+  leaveDaysUsed: "",
+});
+const leaveTypeOptions = ref<DataLeaveType[]>([]);
+const leaveTypeOptionsMain = ref<DataLeaveType[]>([]);
+
+/** ฟังก์ชันบันทึกข้อมูล*/
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const pathAPI = !isStatusEdit.value
+      ? config.API.leaveBeginning
+      : `${config.API.leaveBeginning}/${rowId.value}`;
+    const method = !isStatusEdit.value ? "post" : "put";
+    await http[method](pathAPI, {
+      profileId: !isStatusEdit.value
+        ? selected.value[0].profileId
+        : profileId.value,
+      leaveTypeId: formData.leaveTypeId,
+      leaveYear: formData.leaveYear,
+      leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
+      leaveDaysUsed: formData.leaveDaysUsed
+        ? Number(formData.leaveDaysUsed)
+        : 0,
+    })
+
+      .then(async () => {
+        await props?.fetchDataLeaveBeginning();
+        onClose();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ฟังก์ชันเรียกรายชื่อคน*/
+async function fetchDataPerson() {
+  await http
+    .post(config.API.leaveSearch(), {
+      citizenId:
+        formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน
+      firstname:
+        formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
+      lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
+      page: formFilter.page, //หน้า
+      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+async function defineDataLeaveBeginning(data: DataLeaveBeginning) {
+  profileId.value = data.profileId;
+  rowId.value = data.id;
+  formData.leaveTypeId = data.leaveTypeId;
+  formData.leaveYear = data.leaveYear;
+  formData.leaveDays = data.leaveDays ? data.leaveDays.toString() : "";
+  formData.leaveDaysUsed = data.leaveDaysUsed
+    ? data.leaveDaysUsed.toString()
+    : "";
+}
+
+/**
+ * ฟังก์ชันค้นหารายชื่อคน
+ * @param newSearch สถานะการค้นข้อมูล true ค้นหาหน้าแรก false ค้นหาหน้าต่อไป
+ */
+async function onSearchData(newSearch: boolean) {
+  try {
+    showLoader();
+    if (newSearch) {
+      formFilter.page = 1;
+    }
+    await fetchDataPerson();
+  } finally {
+    hideLoader();
+  }
+}
+
+/**
+ * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: DataPagination) {
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** ฟังก์ชันปิด Dialog*/
+function onClose() {
+  modal.value = false;
+  formFilter.citizenId = "";
+  formFilter.type = "citizenId";
+  formFilter.keyword = "";
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formData.leaveTypeId = "";
+  formData.leaveYear = new Date().getFullYear();
+  formData.leaveDays = "";
+  formData.leaveDaysUsed = "";
+  rows.value = [];
+  selected.value = [];
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    leaveTypeOptions.value = leaveTypeOptionsMain.value.filter(
+      (e: DataLeaveType) => e.name.search(val) !== -1
+    );
+  });
+}
+
+/** ฟังก์ชันกำหนดประเภทการลา*/
+function filterLeaveTypeData() {
+  //ตัดรายการทั้งหมดออก
+  const typeOptions = leaveTypeData.value.filter(
+    (e: DataLeaveType) => e.id !== "00000000-0000-0000-0000-000000000000"
+  );
+  leaveTypeOptionsMain.value = typeOptions;
+  leaveTypeOptions.value = typeOptions;
+}
+
+/**
+ * ฟังก์ชันค้นหา Code ประเภทการลา
+ * @param id ประเภทการลา
+ */
+function filterCodeLeaveTypeData(id: string) {
+  //หา Code ประเภทการลา
+  const code = leaveTypeData.value.find(
+    (e: DataLeaveType) => e.id === id
+  )?.code;
+  leaveTypeCode.value = code ?? "";
+  formData.leaveDays = code !== "LV-005" ? "0" : "";
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    modal.value && onSearchData(true);
+  }
+);
+
+watch(modal, async (val) => {
+  if (val) {
+    try {
+      showLoader();
+      await Promise.all([
+        filterLeaveTypeData(),
+        isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
+      ]);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      hideLoader();
+    }
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card :style="!isStatusEdit ? 'min-width: 80vw' : 'min-width: 30vw'">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="!isStatusEdit ? 'บันทึกวันลาย้อนหลัง' : 'แก้ไขวันลาย้อนหลัง'"
+          :close="onClose"
+        />
+        <q-separator />
+
+        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
+          <div class="row col-12 q-gutter-sm">
+            <!-- รายชื่อ -->
+            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12 col-sm-6 col-md-3">
+                  <q-select
+                    label="ค้นหาจาก"
+                    v-model="formFilter.type"
+                    :options="searchTypeOption"
+                    outlined
+                    emit-value
+                    dense
+                    emit-option
+                    option-label="name"
+                    option-value="id"
+                    map-options
+                  />
+                </div>
+                <div class="col-12 col-sm-6 col-md-9">
+                  <q-input
+                    v-model="formFilter.keyword"
+                    outlined
+                    hide-bottom-space
+                    dense
+                    label="คำค้น"
+                  >
+                    <template v-slot:after>
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-py-sm q-px-md"
+                        outline
+                        @click.prevent="onSearchData(true)"
+                      >
+                      </q-btn>
+                    </template>
+                  </q-input>
+                </div>
+              </div>
+
+              <div class="col-12 q-pt-sm">
+                <d-table
+                  ref="table"
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="profileId"
+                  flat
+                  bordered
+                  :paging="true"
+                  dense
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                  selection="single"
+                  v-model:selected="selected"
+                  @update:pagination="updatePagination"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th auto-width></q-th>
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td>
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div>
+                          {{ col.value ? col.value : "-" }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+
+                  <template v-slot:pagination="scope">
+                    ทั้งหมด {{ total.toLocaleString() }} รายการ
+                    <q-pagination
+                      v-model="formFilter.page"
+                      active-color="primary"
+                      color="dark"
+                      :max="Number(maxPage)"
+                      size="sm"
+                      boundary-links
+                      direction-links
+                      :max-pages="5"
+                      @update:model-value="onSearchData(false)"
+                    ></q-pagination>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+
+            <q-separator vertical />
+
+            <!-- input -->
+            <div class="q-pa-md col">
+              <!-- <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md" >
+                  ข้อมูลวันลาย้อนหลัง
+                </div>
+                <div class="col-12"><q-separator /></div> -->
+
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.leaveYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    @update:model-value="onSearchData"
+                    readonly
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        readonly
+                        dense
+                        outlined
+                        :model-value="Number(formData.leaveYear) + 543"
+                        bg-color="white"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <div class="col-12">
+                  <q-select
+                    :class="classInput(true)"
+                    emit-value
+                    map-options
+                    outlined
+                    dense
+                    option-value="id"
+                    option-label="name"
+                    label="ประเภทการลา"
+                    use-input
+                    v-model="formData.leaveTypeId"
+                    hide-selected
+                    fill-input
+                    hide-bottom-space
+                    @update:model-value="filterCodeLeaveTypeData"
+                    :options="leaveTypeOptions"
+                    @filter="(inputValue:string,
+                            doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`,]"
+                    lazy-rules
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    :class="classInput(leaveTypeCode == 'LV-005')"
+                    :readonly="leaveTypeCode !== 'LV-005'"
+                    v-model="formData.leaveDays"
+                    dense
+                    outlined
+                    label="วันลาที่ยกมา"
+                    hide-bottom-space
+                    mask="##"
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    :class="classInput(true)"
+                    v-model="formData.leaveDaysUsed"
+                    dense
+                    outlined
+                    label="วันลาที่ใช้ไป"
+                    hide-bottom-space
+                    mask="##"
+                  />
+                </div>
+              </div>
+              <!-- </q-card> -->
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            :disable="!isStatusEdit && selected.length === 0"
+            label="บันทึก"
+            color="secondary"
+            type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/modules/09_leave/interface/index/Main.ts b/src/modules/09_leave/interface/index/Main.ts
index 0f0a59dd5..ff9221e9f 100644
--- a/src/modules/09_leave/interface/index/Main.ts
+++ b/src/modules/09_leave/interface/index/Main.ts
@@ -11,4 +11,11 @@ interface DataDateMonthObject {
   month: number;
   year: number;
 }
-export type { DataOption, DataOption2, DataDateMonthObject };
+
+interface DataPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+export type { DataOption, DataOption2, DataDateMonthObject, DataPagination };
diff --git a/src/modules/09_leave/interface/response/leaveHistory.ts b/src/modules/09_leave/interface/response/leaveHistory.ts
new file mode 100644
index 000000000..502cae1ea
--- /dev/null
+++ b/src/modules/09_leave/interface/response/leaveHistory.ts
@@ -0,0 +1,32 @@
+interface DataLeaveType {
+  code?: string;
+  createdAt?: string;
+  createdFullName?: string;
+  createdUserId?: string;
+  id: string;
+  lastUpdateFullName?: string;
+  lastUpdateUserId?: string;
+  lastUpdatedAt?: string;
+  limit?: number;
+  name: string;
+}
+
+interface DataLeaveBeginning {
+  createdAt: string;
+  createdFullName: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  leaveDays: number;
+  leaveDaysUsed: number;
+  leaveType: string;
+  leaveTypeCode: string;
+  leaveTypeId: string;
+  leaveYear: number;
+  prefix: string;
+  profileId: string;
+}
+
+export type { DataLeaveType, DataLeaveBeginning };
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 5ec1f7604..8c745e47d 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -13,6 +13,9 @@ const leaveReport = () => import("@/modules/09_leave/views/06_ReportMain.vue");
 
 // const CheckinReport = () =>
 //   import("@/modules/09_leave/views/!07_ReportCheckin.vue");
+
+const LeaveHistoryMain = () =>
+  import("@/modules/09_leave/views/07_LeaveHistoryMain.vue");
 export default [
   {
     path: "/round-time",
@@ -94,7 +97,6 @@ export default [
       Role: "STAFF",
     },
   },
-
   {
     path: "/checkin-report",
     name: "checkinReport",
@@ -105,4 +107,14 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/leave-history",
+    name: "leaveHistory",
+    component: LeaveHistoryMain,
+    meta: {
+      Auth: true,
+      Key: "SYS_LEAVE_HISTORY",
+      Role: "STAFF",
+    },
+  },
 ];
diff --git a/src/modules/09_leave/stores/LeaveHistoryStore.ts b/src/modules/09_leave/stores/LeaveHistoryStore.ts
new file mode 100644
index 000000000..bafe489a7
--- /dev/null
+++ b/src/modules/09_leave/stores/LeaveHistoryStore.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataLeaveType } from "@/modules/09_leave/interface/response/leaveHistory";
+
+export const useLeaveHistoryDataStore = defineStore("leaveHistory", () => {
+  const leaveTypeData = ref<DataLeaveType[]>([
+    {
+      id: "00000000-0000-0000-0000-000000000000",
+      name: "ทั้งหมด",
+    },
+  ]);
+  return {
+    leaveTypeData,
+  };
+});
diff --git a/src/modules/09_leave/views/07_LeaveHistoryMain.vue b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
new file mode 100644
index 000000000..06da571b3
--- /dev/null
+++ b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
@@ -0,0 +1,420 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
+
+import type { QTableColumn } from "quasar";
+import type { DataPagination } from "@/modules/09_leave/interface/index/Main";
+import type {
+  DataLeaveType,
+  DataLeaveBeginning,
+} from "@/modules/09_leave/interface/response/leaveHistory";
+
+import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm.vue";
+
+const $q = useQuasar();
+const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
+const { showLoader, hideLoader, messageError, dialogRemove, success } =
+  useCounterMixin();
+
+const formFilter = reactive({
+  year: new Date().getFullYear(),
+  type: "00000000-0000-0000-0000-000000000000",
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const leaveTypeOptions = ref<DataLeaveType[]>([]);
+
+const rows = ref<DataLeaveBeginning[]>([]);
+const total = ref<number>(0);
+const maxPage = ref<number>(0);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveType",
+    align: "left",
+    label: " ประเภทการลา",
+    sortable: true,
+    field: "leaveType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveYear",
+    align: "left",
+    label: "ปี",
+    sortable: true,
+    field: "leaveYear",
+    format(val, row) {
+      return row.leaveYear ? `${Number(row.leaveYear) + 543}` : "-";
+    },
+
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveDays",
+    align: "left",
+    label: "วันลาที่ยกมา",
+    sortable: true,
+    field: "leaveDays",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveDaysUsed",
+    align: "left",
+    label: " วันลาที่ใช้ไป",
+    sortable: true,
+    field: "leaveDaysUsed",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "fullName",
+  "leaveType",
+  "leaveYear",
+  "leaveDays",
+  "leaveDaysUsed",
+]);
+
+const modalDialogForm = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const rowData = ref<DataLeaveBeginning>();
+
+/** ฟังก์ชันเรียกข้อมูลประเภทการลา*/
+async function fetchLeaveType() {
+  if (leaveTypeData.value.length === 1) {
+    try {
+      const res = await http.get(config.API.leaveType());
+      leaveTypeData.value.push(...res.data.result);
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+  leaveTypeOptions.value = leaveTypeData.value;
+}
+
+async function fetchDataLeaveBeginning() {
+  await http
+    .post(config.API.leaveBeginning + `/list`, {
+      ...formFilter,
+      keyword: formFilter.keyword.trim(),
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันค้นหารายชื่อคน
+ * @param newSearch สถานะการค้นข้อมูล true ค้นหาหน้าแรก false ค้นหาหน้าต่อไป
+ */
+async function onSearchData(newSearch: boolean = true) {
+  try {
+    showLoader();
+    if (newSearch) {
+      formFilter.page = 1;
+    }
+    await fetchDataLeaveBeginning();
+  } finally {
+    hideLoader();
+  }
+}
+
+function onOpenDialogForm(
+  isEdit: boolean,
+  data: DataLeaveBeginning = {} as DataLeaveBeginning
+) {
+  isStatusEdit.value = isEdit;
+  rowData.value = data;
+  modalDialogForm.value = true;
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    leaveTypeOptions.value = leaveTypeData.value.filter(
+      (e: DataLeaveType) => e.name.search(val) !== -1
+    );
+  });
+}
+
+function onDeleteLeaveBeginning(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.leaveBeginning + `/${id}`)
+      .then(async () => {
+        await fetchDataLeaveBeginning();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: DataPagination) {
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    onSearchData(true);
+  }
+);
+onMounted(async () => {
+  try {
+    showLoader();
+    await fetchLeaveType();
+    await fetchDataLeaveBeginning();
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลรายการการลาย้อนหลัง
+  </div>
+
+  <q-card flat bordered class="q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-y-sm">
+          <div class="row q-col-gutter-sm items-center">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formFilter.year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              style="width: 150px"
+              @update:model-value="onSearchData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  :model-value="Number(formFilter.year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                  bg-color="white"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-select
+              emit-value
+              map-options
+              outlined
+              dense
+              option-value="id"
+              option-label="name"
+              label="ประเภทการลา"
+              use-input
+              v-model="formFilter.type"
+              hide-selected
+              fill-input
+              :options="leaveTypeOptions"
+              @update:model-value="onSearchData()"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <div>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
+                dense
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click.stop.pervent="onOpenDialogForm(false)"
+              >
+                <q-tooltip>เพิ่มข้อมูลวันลาย้อนหลัง</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+
+          <q-space />
+          <div class="row q-col-gutter-sm">
+            <q-input
+              standout
+              dense
+              v-model="formFilter.keyword"
+              outlined
+              placeholder="ค้นหา"
+              @keydown.enter.prevent="onSearchData()"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              style="min-width: 140px"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+          @update:pagination="updatePagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  dense
+                  flat
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click.stop.pervent="onOpenDialogForm(true, props.row)"
+                  ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  icon="delete"
+                  @click.stop.pervent="onDeleteLeaveBeginning(props.row.id)"
+                  ><q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            ทั้งหมด {{ total.toLocaleString() }} รายการ
+            <q-pagination
+              v-model="formFilter.page"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+              :max-pages="5"
+              @update:model-value="onSearchData(false)"
+            ></q-pagination>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogForm
+    v-model:modal="modalDialogForm"
+    :is-status-edit="isStatusEdit"
+    :row-data="rowData"
+    :fetch-data-leave-beginning="fetchDataLeaveBeginning"
+  />
+</template>
+
+<style scoped></style>

From bf29f6d058278cd3873bbfab0ac10a5ca0b38684 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Apr 2025 14:45:52 +0700
Subject: [PATCH 6/8] =?UTF-8?q?fix=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B8=82=E0=B8=B1=E0=B9=89=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_salaryLists/DialogMoveLevelMulti.vue   | 44 +++++--------------
 .../DialogMoveLevelMulti.vue                  | 43 +++++-------------
 2 files changed, 21 insertions(+), 66 deletions(-)

diff --git a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
index 16fa30827..1f2c3b884 100644
--- a/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
+++ b/src/modules/13_salary/components/04_salaryLists/DialogMoveLevelMulti.vue
@@ -166,6 +166,11 @@ function inputEdit(val: boolean) {
   };
 }
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 50,
+});
+
 watch(
   () => modal.value,
   () => {
@@ -177,6 +182,8 @@ watch(
       keyword.value = "";
       type.value = "";
       selectedData.value = [];
+      pagination.value.page = 1;
+      pagination.value.rowsPerPage = 50;
     }
   }
 );
@@ -267,8 +274,7 @@ watch(
           <div class="row justify-end">ทั้งหมด {{ rows.length }} รายการ</div>
 
           <div class="col-12 q-mt-sm">
-            <q-table
-              class="custom-header-table"
+            <d-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -276,11 +282,10 @@ watch(
               flat
               bordered
               dense
-              hide-pagination
               :visible-columns="visibleColumns"
               selection="multiple"
               v-model:selected="selectedData"
-              :pagination="{ page: 1, rowsPerPage: total }"
+              v-model:pagination="pagination"
             >
               <template v-slot:header-selection="scope">
                 <q-checkbox
@@ -336,7 +341,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </div>
       </q-card-section>
@@ -353,31 +358,4 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
index 705a5404d..bb4bc9ca9 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/DialogMoveLevelMulti.vue
@@ -83,6 +83,10 @@ const typeRangeOps = computed(() => {
 });
 
 const keyword = ref<string>("");
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 50,
+});
 
 /**
  * function เรียกข้อมูลรายชื่อ
@@ -177,6 +181,8 @@ watch(
       keyword.value = "";
       type.value = "";
       selectedData.value = [];
+      pagination.value.page = 1;
+      pagination.value.rowsPerPage = 50;
     }
   }
 );
@@ -267,8 +273,7 @@ watch(
           <div class="row justify-end">ทั้งหมด {{ rows.length }} รายการ</div>
 
           <div class="col-12 q-mt-sm">
-            <q-table
-              class="custom-header-table"
+            <d-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -276,11 +281,10 @@ watch(
               flat
               bordered
               dense
-              hide-pagination
               :visible-columns="visibleColumns"
               selection="multiple"
               v-model:selected="selectedData"
-              :pagination="{ page: 1, rowsPerPage: total }"
+              v-model:pagination="pagination"
             >
               <template v-slot:header-selection="scope">
                 <q-checkbox
@@ -336,7 +340,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </div>
       </q-card-section>
@@ -353,31 +357,4 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

From 50a8f9c5feb6254758c9b0e27ef26567b028fbaf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Apr 2025 16:01:15 +0700
Subject: [PATCH 7/8] =?UTF-8?q?fix=20=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=20Staff?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/13_salary/views/04_salaryLists.vue         | 10 +++++++++-
 src/modules/13_salary/views/05_salaryListsEmployee.vue | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/modules/13_salary/views/04_salaryLists.vue b/src/modules/13_salary/views/04_salaryLists.vue
index 62646e971..c1ceebf50 100644
--- a/src/modules/13_salary/views/04_salaryLists.vue
+++ b/src/modules/13_salary/views/04_salaryLists.vue
@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -542,6 +543,7 @@ onMounted(async () => {
       />
 
       <q-select
+        :readonly="checkPermission($route)?.attrOwnership === 'STAFF'"
         v-model="agencyFilter"
         label="หน่วยงาน"
         lazy-rules
@@ -568,7 +570,13 @@ onMounted(async () => {
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
         </template>
-        <template v-if="agencyFilter !== 'ALL'" v-slot:append>
+        <template
+          v-if="
+            agencyFilter !== 'ALL' &&
+            checkPermission($route)?.attrOwnership === 'OWNER'
+          "
+          v-slot:append
+        >
           <q-icon
             name="cancel"
             @click.stop.prevent="
diff --git a/src/modules/13_salary/views/05_salaryListsEmployee.vue b/src/modules/13_salary/views/05_salaryListsEmployee.vue
index 20522fa8c..401b8c257 100644
--- a/src/modules/13_salary/views/05_salaryListsEmployee.vue
+++ b/src/modules/13_salary/views/05_salaryListsEmployee.vue
@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -496,6 +497,7 @@ onMounted(async () => {
         :disable="!isDisable"
       />
       <q-select
+        :readonly="checkPermission($route)?.attrOwnership === 'STAFF'"
         v-model="agencyFilter"
         label="หน่วยงาน"
         dense
@@ -517,7 +519,13 @@ onMounted(async () => {
       doneFn:Function) => filterSelector(inputValue, doneFn,'agencyFilter'
       ) "
       >
-        <template v-if="agencyFilter !== 'ALL'" v-slot:append>
+        <template
+          v-if="
+            agencyFilter !== 'ALL' &&
+            checkPermission($route)?.attrOwnership === 'OWNER'
+          "
+          v-slot:append
+        >
           <q-icon
             name="cancel"
             @click.stop.prevent="

From aa1270cb6409351e651c0c0f5f6bd2234914cb62 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Apr 2025 16:05:57 +0700
Subject: [PATCH 8/8] =?UTF-8?q?fix=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B2=E0=B8=A1=20=E0=B8=9B=E0=B8=B4=E0=B8=94?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../13_salary/views/04_salaryLists.vue        | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/modules/13_salary/views/04_salaryLists.vue b/src/modules/13_salary/views/04_salaryLists.vue
index c1ceebf50..19f593ebf 100644
--- a/src/modules/13_salary/views/04_salaryLists.vue
+++ b/src/modules/13_salary/views/04_salaryLists.vue
@@ -393,31 +393,36 @@ async function fetchCheckisOfficer() {
 }
 
 function onClosePeriodSalalry() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .put(
-        config.API.salaryChangeIsclose +
-          `/${snapFilter.value}/${roundFilter.value.id}`,
-        {
-          isClose: true,
-        }
-      )
-      .then(async () => {
-        await fetchSalalyPeriod(
-          agencyFilter.value,
-          roundFilter.value.id,
-          snapFilter.value
-        );
-        success($q, "ปิดการแก้ไขสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(
+          config.API.salaryChangeIsclose +
+            `/${snapFilter.value}/${roundFilter.value.id}`,
+          {
+            isClose: true,
+          }
+        )
+        .then(async () => {
+          await fetchSalalyPeriod(
+            agencyFilter.value,
+            roundFilter.value.id,
+            snapFilter.value
+          );
+          success($q, "ปิดการแก้ไขสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ปิดการแก้ไข",
+    "ต้องการปิดการแก้ไขรอบการขึ้นเงินเดือนนี้ใข่หรือไม่"
+  );
 }
 
 onMounted(async () => {