From de63beef4f80b25d5ed9621ff09f71bed0a4b511 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 12 Mar 2024 16:18:32 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/04_registry/components/Leave.vue  | 574 +++--------
 .../GovernmentInformation/02_Discipline.vue   |   6 +-
 .../detail/GovernmentInformation/03_Leave.vue | 928 +++++++++++++++++-
 .../GovernmentInformation/03_LeaveHistory.vue | 316 ++++++
 .../04_registryNew/interface/index/leave.ts   |  52 +
 5 files changed, 1448 insertions(+), 428 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
 create mode 100644 src/modules/04_registryNew/interface/index/leave.ts

diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index 0539ab664..16400f334 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -40,7 +40,7 @@
                 }}
               </div>
               <div v-else-if="col.name == 'status'" class="table_ellipsis">
-                {{ col.value ? statusLeave(col.value) : "-" }}
+                {{ statusLeave(col.value) }}
                 <!-- {{ col.value }} -->
               </div>
               <div
@@ -51,15 +51,13 @@
                 "
                 class="table_ellipsis"
               >
-                {{
-                  col.value == null ? "-" : col.value.toLocaleString("en-US")
-                }}
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
               </div>
               <div v-else class="table_ellipsis">
-                {{ col.value ? col.value : "-" }}
+                {{ col.value }}
               </div>
             </q-td>
-            <!-- <q-td auto-width>
+            <q-td auto-width>
               <q-btn
                 color="info"
                 flat
@@ -71,7 +69,7 @@
               >
                 <q-tooltip>ประวัติแก้ไขการลา </q-tooltip>
               </q-btn>
-            </q-td> -->
+            </q-td>
           </q-tr>
         </template>
       </ProfileTable>
@@ -84,7 +82,7 @@
         <DialogHeader tittle="การลา" :close="clickCloseLeave" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <!-- <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
@@ -170,6 +168,23 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <!-- <div class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(false)"
+                :outlined="true"
+                dense
+                lazy-rules
+                :readonly="false"
+                :borderless="false"
+                disable
+                v-model="numUsedLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div> -->
             <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
@@ -211,128 +226,6 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-          </div> -->
-          <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <q-input
-                v-if="edit"
-                outlined
-                v-model="inputDateLaeaveYear"
-                :label="`${'ปี'}`"
-                mask="####"
-                dense
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
-                :class="getClass(edit)"
-                :readonly="!edit"
-                :borderless="!edit"
-              />
-
-              <datepicker
-                v-else
-                menu-class-name="modalfix"
-                v-model="formData.leaveYear"
-                class="col-2"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                :readonly="!edit"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    hide-bottom-space
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="
-                      formData.leaveYear === 0
-                        ? null
-                        : Number(formData.leaveYear) + 543
-                    "
-                    :label="`${'ปี'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                    <template v-if="formData.leaveYear && edit" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="formData.leaveYear = 0"
-                        class="cursor-pointer"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                v-model="formData.sumSick"
-                label="ลาป่วย"
-                dense
-                :outlined="edit"
-                :readonly="!edit"
-                :borderless="!edit"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                v-model="formData.sumRest"
-                label="ลากิจและพักผ่อน"
-                dense
-                :outlined="edit"
-                :readonly="!edit"
-                :borderless="!edit"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                v-model="formData.sumLate"
-                label="มาสาย"
-                dense
-                :outlined="edit"
-                :readonly="!edit"
-                :borderless="!edit"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                v-model="formData.sumAbsent"
-                label="ขาดราชการ"
-                dense
-                :outlined="edit"
-                :readonly="!edit"
-                :borderless="!edit"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                :class="getClass(edit)"
-                v-model="formData.sumEducation"
-                label="ลาศึกษาต่อ"
-                dense
-                :outlined="edit"
-                :readonly="!edit"
-                :borderless="!edit"
-              />
-            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -389,12 +282,12 @@
                     >
                       {{
                         col.value == null
-                          ? "-"
+                          ? ""
                           : col.value.toLocaleString("en-US")
                       }}
                     </div>
                     <div v-else>
-                      {{ col.value ? col.value : "-" }}
+                      {{ col.value }}
                     </div>
                   </q-td>
                 </q-tr>
@@ -436,30 +329,21 @@
             "
             class="table_ellipsis"
           >
-            {{ col.value == null ? "-" : col.value.toLocaleString("en-US") }}
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
           </div>
           <div v-else-if="col.name == 'status'" class="table_ellipsis">
-            {{ col.value ? statusLeave(col.value) : "-" }}
+            {{ statusLeave(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
-            {{ col.value ? col.value : "-" }}
+            {{ col.value }}
           </div>
         </q-td>
       </q-tr>
     </template>
   </HistoryTable>
-
-  <!-- <DialogFormLeave 
-  v-model:modal="modalAdd" 
-  v-model:edit="edit" 
-  v-model:data="formData" 
-  
-  /> -->
 </template>
 <script setup lang="ts">
-import DialogFormLeave from "@/modules/04_registry/components/DialogFormLeave.vue";
-
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
@@ -472,7 +356,6 @@ import type {
   RequestItemsObject,
   RequestItemsTotalObject,
   DataProps,
-  DetailData,
 } from "@/modules/04_registry/interface/request/Leave";
 import type {
   ResponseObject,
@@ -486,7 +369,6 @@ import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
-import moment from "moment";
 
 const props = defineProps({
   statusEdit: {
@@ -499,16 +381,6 @@ const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
-const formData = reactive<DetailData>({
-  id: "",
-  sumSick: "",
-  sumRest: "",
-  sumLate: "",
-  sumAbsent: "",
-  sumEducation: "",
-  leaveYear: "",
-});
-
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -519,9 +391,6 @@ const {
   dateToISO,
   showLoader,
   hideLoader,
-  dialogConfirm,
-  convertDate,
-  convertDateDisplay,
 } = mixin;
 const route = useRoute();
 
@@ -562,7 +431,6 @@ const id = ref<string>("");
 const myFormAdd = ref<any>(); //form data input
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
-const editForm = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 
@@ -580,140 +448,23 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
-const rows = ref<DetailData[]>([]);
+const rows = ref<RequestItemsObject[]>([]);
 const filterTotal = ref<string>("");
 const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
 const filter = ref<string>(""); //search data table
-
-const inputDateLaeaveYear = ref<string>("");
-/** ตรวจเวลา */
-watch(
-  () => inputDateLaeaveYear.value,
-  (value: string) => {
-    if (value.length === 4) {
-      formData.leaveYear = parseInt(value) - 543;
-    }
-  }
-);
-/**old */
-// const visibleColumns = ref<String[]>([]);
-// profileData.leave.columns.length == 0
-//   ? (visibleColumns.value = [
-//       "no",
-//       "typeLeave",
-//       "dateStartLeave",
-//       "numLeave",
-//       "sumLeave",
-//       "totalLeave",
-//       "status",
-//       "reason",
-//     ])
-//   : (visibleColumns.value = profileData.leave.columns);
-
-/** NEW */
-const visibleColumns = ref<String[]>([
-  "no",
-  "leaveYear",
-  "sumSick",
-  "sumRest",
-  "sumLate",
-  "sumAbsent",
-  "sumEducation",
-]);
-
-/** old */
-// const columns = ref<QTableProps["columns"]>([
-//   {
-//     name: "no",
-//     align: "left",
-//     label: "ลำดับ",
-//     sortable: false,
-//     field: "no",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "typeLeave",
-//     align: "left",
-//     label: "ประเภทการลา",
-//     sortable: true,
-//     field: "typeLeave",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "dateStartLeave",
-//     align: "left",
-//     label: "วัน เดือน ปี ที่ลา",
-//     sortable: true,
-//     field: "dateStartLeave",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "numLeave",
-//     align: "right",
-//     label: "จำนวนวันลา",
-//     sortable: true,
-//     field: "numLeave",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "sumLeave",
-//     align: "right",
-//     label: "ลามาแล้ว",
-//     sortable: true,
-//     field: "sumLeave",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "totalLeave",
-//     align: "right",
-//     label: "รวมเป็น",
-//     sortable: true,
-//     field: "totalLeave",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "status",
-//     align: "left",
-//     label: "สถานะ",
-//     sortable: true,
-//     field: "status",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-//   {
-//     name: "reason",
-//     align: "right",
-//     label: "เหตุผล",
-//     sortable: true,
-//     field: "reason",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//     sort: (a: string, b: string) =>
-//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-//   },
-// ]);
-
-/** NEW */
+const visibleColumns = ref<String[]>([]);
+profileData.leave.columns.length == 0
+  ? (visibleColumns.value = [
+      "no",
+      "typeLeave",
+      "dateStartLeave",
+      "numLeave",
+      "sumLeave",
+      "totalLeave",
+      "status",
+      "reason",
+    ])
+  : (visibleColumns.value = profileData.leave.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -727,61 +478,83 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "leaveYear",
+    name: "typeLeave",
     align: "left",
-    label: "ปี",
+    label: "ประเภทการลา",
     sortable: true,
-    field: "leaveYear",
+    field: "typeLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sumSick",
+    name: "dateStartLeave",
     align: "left",
-    label: "ลาป่วย",
+    label: "วัน เดือน ปี ที่ลา",
     sortable: true,
-    field: "sumSick",
+    field: "dateStartLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sumRest",
-    align: "left",
-    label: "ลากิจและพักผ่อน",
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
     sortable: true,
-    field: "sumRest",
+    field: "numLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sumLate",
-    align: "left",
-    label: "มาสาย",
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
     sortable: true,
-    field: "sumLate",
+    field: "sumLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sumAbsent",
-    align: "left",
-    label: "ขาดราชการ",
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
     sortable: true,
-    field: "sumAbsent",
+    field: "totalLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sumEducation",
+    name: "status",
     align: "left",
-    label: "ลาศึกษาต่อ",
+    label: "สถานะ",
     sortable: true,
-    field: "sumEducation",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "right",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -950,22 +723,27 @@ const fetchData = async () => {
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
-        // rows.value = data
         const data = res.data.result;
-        data.map((e: DetailData) => {
+        data.map((e: ResponseObject) => {
           rows.value.push({
             id: e.id,
-            sumSick: e.sumSick ? e.sumSick : "-",
-            sumRest: e.sumRest ? e.sumRest : "-",
-            sumLate: e.sumLate ? e.sumLate : "-",
-            sumAbsent: e.sumAbsent ? e.sumAbsent : "-",
-            sumEducation: e.sumEducation ? e.sumEducation : "-",
-            leaveYear: e.leaveYear ? Number(e.leaveYear) + 543 : "-",
+            typeLeave: e.typeLeave,
+            dateStartLeave: new Date(e.dateStartLeave),
+            dateEndLeave: new Date(e.dateEndLeave),
+            numLeave: e.numLeave,
+            sumLeave: e.sumLeave,
+            totalLeave: e.totalLeave,
+            status: e.status,
+            reason: e.reason,
+            typeLeaveId:
+              e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
+                ? e.typeLeaveId
+                : "",
           });
         });
       })
       .catch((e) => {
-        // messageError($q, e);
+        messageError($q, e);
       })
       .finally(() => {
         store.isLoad++;
@@ -1008,12 +786,18 @@ const clickHistory = async (row: RequestItemsObject) => {
       data.map((e: ResponseObject) => {
         rowsHistory.value.push({
           id: e.id,
-          sumSick: e.sumSick ? e.sumSick : "-",
-          sumRest: e.sumRest ? e.sumRest : "-",
-          sumLate: e.sumLate ? e.sumLate : "-",
-          sumAbsent: e.sumAbsent ? e.sumAbsent : "-",
-          sumEducation: e.sumEducation ? e.sumEducation : "-",
-          leaveYear: e.leaveYear ? e.leaveYear : "-",
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave),
+          dateEndLeave: new Date(e.dateEndLeave),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId:
+            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
+              ? e.typeLeaveId
+              : "",
         });
       });
     })
@@ -1078,21 +862,13 @@ const getData = () => {
   //   agencyDay.value = row.agencyDay;
   //   coupleDay.value = row.coupleDay;
   //   therapyDay.value = row.therapyDay;
-  formData.id = row.id;
-  formData.sumSick = row.sumSick == "-" ? "" : row.sumSick;
-  formData.sumRest = row.sumRest == "-" ? "" : row.sumRest;
-  formData.sumLate = row.sumLate == "-" ? "" : row.sumLate;
-  formData.sumAbsent = row.sumAbsent == "-" ? "" : row.sumAbsent;
-  formData.sumEducation = row.sumEducation == "-" ? "" : row.sumEducation;
-  formData.leaveYear = row.leaveYear == "-" ? 0 : Number(row.leaveYear) - 543;
-
-  // id.value = row.id;
-  // typeLeave.value = row.typeLeaveId;
-  // statLeave.value = row.status;
-  // reason.value = row.reason;
-  // dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
-  // numLeave.value = row.numLeave;
-  // numUsedLeave.value = row.sumLeave;
+  id.value = row.id;
+  typeLeave.value = row.typeLeaveId;
+  statLeave.value = row.status;
+  reason.value = row.reason;
+  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
+  numLeave.value = row.numLeave;
+  numUsedLeave.value = row.sumLeave;
 };
 
 // /**
@@ -1128,8 +904,6 @@ const clickAdd = async () => {
 };
 
 const clickAddLeave = async () => {
-  clearForm();
-  inputDateLaeaveYear.value = "";
   editRow.value = false;
   edit.value = true;
   modalAdd.value = true;
@@ -1186,13 +960,9 @@ const clickSave = async () => {
   myFormAdd.value.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
-        // await dialogConfirm($q, () => {
-        editData();
-        // });
+        await editData();
       } else {
-        // await dialogConfirm($q, () => {
-        saveData();
-        // });
+        await saveData();
       }
     }
   });
@@ -1202,23 +972,23 @@ const clickSave = async () => {
 //  * บันทึกเพิ่มข้อมูล
 //  */
 const saveData = async () => {
-  formData.leaveYear = (await Number(inputDateLaeaveYear.value)) - 543;
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
   if (profileId.value) {
     showLoader();
     await http
       .post(config.API.profileLeaveId(profileId.value), {
-        leaveYear: formData.leaveYear,
-        sumSick: formData.sumSick,
-        sumRest: formData.sumRest,
-        sumLate: formData.sumLate,
-        sumAbsent: formData.sumAbsent,
-        sumEducation: formData.sumEducation,
+        dateStartLeave: dateToISO(dateRange.value[0]),
+        dateEndLeave: dateToISO(dateRange.value[1]),
+        numLeave: numLeave.value,
+        sumLeave: numUsedLeave.value,
+        totalLeave: sum,
+        status: statLeave.value,
+        reason: reason.value,
+        typeLeaveId: typeLeave.value,
       })
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
-
         modalAdd.value = false;
       })
       .catch((e) => {
@@ -1238,13 +1008,15 @@ const editData = async () => {
 
   showLoader();
   await http
-    .put(config.API.profileLeaveId(formData.id), {
-      leaveYear: formData.leaveYear,
-      sumSick: formData.sumSick,
-      sumRest: formData.sumRest,
-      sumLate: formData.sumLate,
-      sumAbsent: formData.sumAbsent,
-      sumEducation: formData.sumEducation,
+    .put(config.API.profileLeaveId(id.value), {
+      dateStartLeave: dateToISO(dateRange.value[0]),
+      dateEndLeave: dateToISO(dateRange.value[1]),
+      numLeave: numLeave.value,
+      sumLeave: numUsedLeave.value,
+      totalLeave: sum,
+      status: statLeave.value,
+      reason: reason.value,
+      typeLeaveId: typeLeave.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1261,7 +1033,7 @@ const editData = async () => {
 const deleteData = async () => {
   showLoader();
   await http
-    .delete(config.API.profileLeaveId(formData.id))
+    .delete(config.API.profileLeaveId(id.value))
     .then((res) => {
       success($q, "ลบข้อมูลสำเร็จ");
       modalAdd.value = false;
@@ -1347,35 +1119,22 @@ const clickClose = async () => {
 //  * @param props ค่า props ใน row ที่เลือก
 //  */
 const selectData = async (props: DataProps) => {
-  console.log(props);
   modalEdit.value = true;
   //   modal.value = true;
   modalAdd.value = true;
   edit.value = false;
-
   rowIndex.value = props.rowIndex;
-  formData.id = props.row.id;
-  formData.sumSick = props.row.sumSick == "-" ? "" : props.row.sumSick;
-  formData.sumRest = props.row.sumRest == "-" ? "" : props.row.sumRest;
-  formData.sumLate = props.row.sumLate == "-" ? "" : props.row.sumLate;
-  formData.sumAbsent = props.row.sumAbsent == "-" ? "" : props.row.sumAbsent;
-  formData.sumEducation =
-    props.row.sumEducation == "-" ? "" : props.row.sumEducation;
-  formData.leaveYear =
-    props.row.leaveYear == "-" ? 0 : Number(props.row.leaveYear) - 543;
+  id.value = props.row.id;
 
-  inputDateLaeaveYear.value = ((formData.leaveYear as number) + 543).toString();
-
-  // id.value = props.row.id;
-  // typeLeave.value = props.row.typeLeaveId;
-  // statLeave.value = props.row.status;
-  // reason.value = props.row.reason;
-  // dateRange.value = [
-  //   new Date(props.row.dateStartLeave),
-  //   new Date(props.row.dateEndLeave),
-  // ];
-  // numLeave.value = props.row.numLeave;
-  // numUsedLeave.value = props.row.sumLeave;
+  typeLeave.value = props.row.typeLeaveId;
+  statLeave.value = props.row.status;
+  reason.value = props.row.reason;
+  dateRange.value = [
+    new Date(props.row.dateStartLeave),
+    new Date(props.row.dateEndLeave),
+  ];
+  numLeave.value = props.row.numLeave;
+  numUsedLeave.value = props.row.sumLeave;
   await clickTotal();
   //   if (rowsTotal.value.length > 0) {
   //     let data: DataOptionLeave[] = [];
@@ -1396,9 +1155,9 @@ const selectData = async (props: DataProps) => {
  * กดปุ่มเพิ่มบน table
  */
 const addData = async () => {
-  //modalEdit.value = false;
+  //   modalEdit.value = false;
   modal.value = true;
-  //edit.value = true;
+  //   edit.value = true;
   await clickTotal();
 };
 
@@ -1510,35 +1269,6 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
-
-// function selectData(data:any){
-//   console.log(data)
-//   modalAdd.value = true
-//   edit.value = false
-//   editForm.value = true
-//   formData.id = data.row.id
-//   formData.sick = data.row.sick
-//   formData.absence = data.row.absence
-//   formData.late = data.row.late
-//   formData.government = data.row.government
-//   formData.study = data.row.study
-//   formData.year = data.row.year
-// }
-
-function clearForm() {
-  formData.id = "";
-  formData.sumSick = "";
-  formData.sumRest = "";
-  formData.sumLate = "";
-  formData.sumAbsent = "";
-  formData.sumEducation = "";
-  formData.leaveYear = 0;
-}
-// watch(()=>modalAdd.value,()=>{
-//   clearForm()
-//   if(modalAdd.value == true){
-//   }
-// })
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
index 52e204a02..0bcce85f1 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
@@ -335,10 +335,10 @@ const editData = async () => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
-const openDialogHistory = async (idOrder: string) => {
+function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
   id.value = idOrder;
-};
+}
 
 function getData() {
   // showLoader();
@@ -471,7 +471,7 @@ onMounted(() => {
     <q-btn-toggle
       v-model="mode"
       dense
-      class="no-shadow"
+      class="no-shadow toggle-borderd"
       toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
index 81dda8c85..27b9c9caf 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
@@ -1,6 +1,928 @@
-<script setup lang="ts"></script>
+div
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  DetailData,
+  FormFilter,
+  DataOptionLeave,
+  DataOption,
+  ResponseTotalObject,
+  MyObjectRef,
+} from "@/modules/04_registryNew/interface/index/leave";
+
+import DialogHistory from "@/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+
+const rowsTotal = ref<ResponseTotalObject[]>([]);
+const id = ref<string>("");
+const route = useRoute();
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  date2Thai,
+  dateToISO,
+} = mixin;
+
+const mode = ref<string>("card");
+const filterKeyword = ref<string>("");
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const rows = ref<DetailData[]>([]);
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const formData = reactive<DetailData>({
+  id: "",
+  typeLeave: "",
+  dateStartLeave: null,
+  dateEndLeave: null,
+  numLeave: 0,
+  sumLeave: 0,
+  totalLeave: 0,
+  status: "",
+  reason: "",
+  typeLeaveId: "",
+});
+
+const modal = ref<boolean>(false);
+const edit = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+
+const reason = ref<string>(""); //เหตุผล
+const numLeave = ref<number>(0);
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]);
+const numUsedLeave = ref<number>(0);
+const typeLeave = ref<string>("");
+const typeLeaveOption = ref<DataOptionLeave[]>([]);
+const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
+
+const statLeave = ref<string>("");
+const statLeaveOption = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const statLeaveOptionFilter = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+
+const statusLeave = (val: string) => {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+};
+
+const clickEditRowType = () => {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+};
+
+const typeLeaveRef = ref<object | null>(null);
+const dateRangeRef = ref<object | null>(null);
+const numLeaveRef = ref<object | null>(null);
+const statLeaveRef = ref<object | null>(null);
+const reasonRef = ref<object | null>(null);
+const objectRef: MyObjectRef = {
+  typeLeave: typeLeaveRef,
+  dateRange: dateRangeRef,
+  numLeave: numLeaveRef,
+  statLeave: statLeaveRef,
+  reason: reasonRef,
+};
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "left",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "left",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "left",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function openDialogAdd() {
+  modal.value = true;
+
+  showLoader();
+  http
+    .get(config.API.profileLeaveTotalId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      typeLeaveOption.value = data;
+      typeLeaveOptionFilter.value = data;
+      data.map((e: ResponseTotalObject) => {
+        rowsTotal.value.push({
+          typeLeaveId: e.typeLeaveId,
+          totalLeave: e.totalLeave,
+          limitLeave: e.limitLeave,
+          remainLeave: e.remainLeave,
+          typeLeave: e.typeLeave,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+function clickTotal() {
+  rowsTotal.value = [];
+  showLoader();
+  http
+    .get(config.API.profileLeaveTotalId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      typeLeaveOption.value = data;
+      typeLeaveOptionFilter.value = data;
+      data.map((e: ResponseTotalObject) => {
+        rowsTotal.value.push({
+          typeLeaveId: e.typeLeaveId,
+          totalLeave: e.totalLeave,
+          limitLeave: e.limitLeave,
+          remainLeave: e.remainLeave,
+          typeLeave: e.typeLeave,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function openDialogEdit(props: DetailData) {
+  modal.value = true;
+  formData.id = props.id;
+  id.value = props.id;
+  typeLeave.value = props.typeLeave;
+  statLeave.value = props.status;
+  reason.value = props.reason;
+  dateRange.value = [
+    new Date(props.dateStartLeave as Date),
+    new Date(props.dateEndLeave as Date),
+  ];
+  numLeave.value = props.numLeave;
+  numUsedLeave.value = props.sumLeave;
+  clickTotal();
+  if (rowsTotal.value.length > 0) {
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  edit.value = false;
+
+  id.value = "";
+  typeLeave.value = "";
+  statLeave.value = "";
+  reason.value = "";
+  dateRange.value = [new Date(), new Date()];
+  numLeave.value = 0;
+  numUsedLeave.value = 0;
+}
+
+function filterSelector(val: any, update: Function, filtername: string) {
+  switch (filtername) {
+    case "typeLeaveOption":
+      update(() => {
+        typeLeaveOption.value = typeLeaveOptionFilter.value.filter(
+          (v: DataOptionLeave) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    case "statLeaveOption":
+      update(() => {
+        statLeaveOption.value = statLeaveOptionFilter.value.filter(
+          (v: DataOption) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+function dateThaiRange(val: [Date, Date]) {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+}
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+function openDialogHistory(idOrder: string) {
+  modalHistory.value = true;
+  id.value = idOrder;
+}
+
+/** validate check*/
+function validateForm() {
+  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)) {
+    if ((edit.value = false)) {
+      saveData();
+    } else {
+      editData();
+    }
+  }
+}
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+function saveData() {
+  // showLoader();
+  //   await http
+  //     .post(config.API.profileLeaveId(profileId.value), {
+  //       dateStartLeave: dateToISO(dateRange.value[0]),
+  //       dateEndLeave: dateToISO(dateRange.value[1]),
+  //       numLeave: numLeave.value,
+  //       sumLeave: numUsedLeave.value,
+  //       totalLeave: sum,
+  //       status: statLeave.value,
+  //       reason: reason.value,
+  //       typeLeaveId: typeLeave.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //       modalAdd.value = false;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       await fetchData();
+  //     });
+  closeDialog();
+}
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  // showLoader();
+  // await http
+  //   .put(config.API.profileLeaveId(id.value), {
+  //     dateStartLeave: dateToISO(dateRange.value[0]),
+  //     dateEndLeave: dateToISO(dateRange.value[1]),
+  //     numLeave: numLeave.value,
+  //     sumLeave: numUsedLeave.value,
+  //     totalLeave: sum,
+  //     status: statLeave.value,
+  //     reason: reason.value,
+  //     typeLeaveId: typeLeave.value,
+  //   })
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //     modalAdd.value = false;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     await fetchData();
+  //   });
+  closeDialog();
+};
+
+onMounted(() => {
+  const data = [
+    {
+      id: "test",
+      typeLeave: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
+      typeLeaveId: "08db52ec-d1c1-4ecc-868c-ff2a3bcdb32a",
+      dateStartLeave: new Date("2024-02-20T12:59:47.193103"),
+      dateEndLeave: new Date("2024-02-25T12:59:47.193103"),
+      numLeave: 0,
+      sumLeave: 0,
+      totalLeave: 0,
+      status: "reject",
+      reason: "test",
+    },
+  ];
+  rows.value = data;
+});
+</script>
 <template>
-  <div>การลา</div>
+  <div class="row items-center q-gutter-x-sm q-py-sm">
+    <div class="text-weight-bold text-subtitle1">การลา</div>
+
+    <q-btn color="teal-5" icon="add" flat round @click="openDialogAdd()"
+      ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-input
+      standout
+      dense
+      v-model="filterKeyword"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      debounce="300"
+    >
+      <template v-slot:append>
+        <q-icon
+          v-if="filterKeyword == ''"
+          name="search"
+          @click.stop.prevent="filterKeyword = ''"
+          class="cursor-pointer"
+        />
+        <q-icon
+          v-if="filterKeyword"
+          name="cancel"
+          @click.stop.prevent="filterKeyword = ''"
+          class="cursor-pointer"
+        />
+      </template>
+    </q-input>
+    <q-select
+      v-if="mode == 'table'"
+      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"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    bordered
+    dense
+    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
+    :columns="columns"
+    :rows="rows"
+    :grid="mode === 'card'"
+    :paging="true"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    :filter="filterKeyword"
+  >
+    >
+    <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" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="openDialogEdit(props.row)"
+        >
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
+          </div>
+          <div v-else-if="col.name == 'dateStartLeave'">
+            {{
+              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+            }}
+          </div>
+          <div v-else-if="col.name == 'status'">
+            {{ statusLeave(col.value) }}
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="openDialogHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
+        <q-card flat bordered class="q-pa-md">
+          <div class="row q-pb-sm items-center">
+            <div class="column">
+              <div class="text-weight-bold">
+                {{ props.row.typeLeave !== "" ? props.row.typeLeave : "-" }}
+              </div>
+            </div>
+            <q-space />
+            <div class="q-gutter-x-sm">
+              <q-btn
+                color="teal-5"
+                icon="mdi-pencil-outline"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไข</q-tooltip></q-btn
+              >
+              <q-btn
+                color="edit"
+                icon="mdi-history"
+                flat
+                round
+                @click="openDialogHistory(props.row.id)"
+                ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <q-separator />
+          <q-card-section class="q-pa-none">
+            <q-list>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>วัน/เดือน/ปี ที่ลา</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>{{
+                    dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>จำนวนวันลา</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.numLeave ? props.row.numLeave : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label>ลามาเเล้ว</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.sumLeave
+                        ? props.row.sumLeave
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >รวมเป็น</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.totalLeave
+                        ? props.row.totalLeave
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >สถานะ</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.status
+                        ? statusLeave(props.row.status)
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+              <q-item class="q-pa-none">
+                <q-item-section>
+                  <q-item-label
+                    >เหตุผล</q-item-label
+                  ></q-item-section
+                >
+                <q-item-section side>
+                  <q-item-label caption>
+                    {{
+                      props.row.reason
+                        !== ''? props.row.reason
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
+  </d-table>
+
+  <!-- dialog add edit -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 600px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader tittle="การลา" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                ref="typeLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="typeLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลา'}`"
+                @update:modelValue="clickEditRowType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="typeLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateRange"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                range
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    ref="dateRangeRef"
+                    :model-value="dateThaiRange(dateRange)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
+                    hide-bottom-space
+                    :label="`${'วัน เดือน ปีที่ลา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                ref="numLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="numLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลา'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                ref="statLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="statLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
+                hide-bottom-space
+                :label="`${'สถานะการลา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="statLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                ref="reasonRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="reason"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                hide-bottom-space
+                :label="`${'เหตุผล'}`"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
new file mode 100644
index 000000000..dad3408d1
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DetailData,
+  FormFilter,
+} from "@/modules/04_registryNew/interface/index/leave";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const filterKeyword = ref<string>("");
+const rows = ref<DetailData[]>([]); //select data history
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStartLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateStartLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
+    sortable: true,
+    field: "sumLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+function getHistory() {
+  showLoader();
+http
+    .get(config.API.profileLeaveHisId(id.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: DetailData) => {
+        rows.value.push({
+          id: e.id,
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave as Date),
+          dateEndLeave: new Date(e.dateEndLeave as Date),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId:
+            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
+              ? e.typeLeaveId
+              : "",
+        });
+      });
+    })
+    .catch((e) => {
+    //   messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(modal, (status) => {
+  if (status == true) {
+    getHistory();
+    filterKeyword.value = "";
+  } else {
+    filterKeyword.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <DialogHeader
+          tittle="ประวัติแก้ไขการลา"
+          :close="() => (modal = false)"
+        />
+      </q-card-section>
+
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+            </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"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterKeyword"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{
+                    (formFilter.page - 1) * formFilter.pageSize +
+                    props.rowIndex +
+                    1
+                  }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'refCommandDate' ||
+                    col.name == 'date' ||
+                    col.name == 'createdAt'
+                  "
+                >
+                  {{ col.value == null ? null : date2Thai(col.value) }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="currentPage"
+              active-color="primary"
+              color="dark"
+              :max="Number(maxPage)"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+          <template v-slot:no-data="{ icon, message, filter }">
+            <div class="full-width row flex-center text-accent q-gutter-sm">
+              <span
+                ><div
+                  style="
+                    height: 50vh;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  class="text-grey-5"
+                >
+                  <q-icon name="search" size="4rem" />
+
+                  <span>ไม่พบข้อมูล</span>
+                </div>
+              </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/04_registryNew/interface/index/leave.ts b/src/modules/04_registryNew/interface/index/leave.ts
new file mode 100644
index 000000000..f5e801dde
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/leave.ts
@@ -0,0 +1,52 @@
+interface DetailData{
+  id: string;
+  typeLeave: string;
+  dateStartLeave: Date|null;
+  dateEndLeave: Date|null;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+interface FormFilter {
+    page: number;
+    pageSize: number;
+    keyword: string;
+    type: string;
+    posType: string;
+    posLevel: string;
+    retireYear: string | null;
+    rangeYear: { min: number; max: number };
+    isShowRetire: boolean;
+    isProbation: boolean;
+  }
+  interface DataOptionLeave {
+    id: string;
+    name: string;
+    totalLeave: number;
+  }
+  interface DataOption {
+    id: string;
+    name: string;
+    disable?: boolean;
+  }
+  interface ResponseTotalObject {
+    typeLeaveId: string;
+    typeLeave: string;
+    totalLeave: number;
+    limitLeave: string;
+    remainLeave: string;
+  }
+  
+  interface MyObjectRef {
+    typeLeave: object | null;
+    dateRange: object | null;
+    numLeave: object | null;
+    statLeave: object | null;
+    reason: object | null;
+    [key: string]: any;
+}
+  export type { DetailData,FormFilter,DataOptionLeave,DataOption,ResponseTotalObject,MyObjectRef };
+  
\ No newline at end of file