การลา จำลอง

src/modules/02_organizationalNew/components/DialogSelectPerson.vue

@@ -187,6 +187,15 @@ const columnsResult = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "posLevelName",
     align: "left",
@@ -360,6 +369,7 @@ function searchData() {
       citizenId: "test1",
       name: "test1",
       posTypeName: "test1",
+      positionName: "test1",
       posLevelName: "test1",
     },
     {
@@ -367,6 +377,7 @@ function searchData() {
       citizenId: "test2",
       name: "test2",
       posTypeName: "test2",
+      positionName: "test2",
       posLevelName: "test2",
     },
   ];

src/modules/04_registry/components/DialogFormLeave.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+interface DetailData {
+  id: string;
+  sick: string;
+  absence: string;
+  late: string;
+  government: string;
+  study: string;
+  year: number;
+}
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
+const myForm = ref<any>(); //form data input
+const checkValidate = ref<boolean>(false);
+const modal = defineModel<boolean>("modal", { required: true });
+const edit = defineModel<boolean>("edit", { required: true });
+const data = defineModel<Array<any>>("data", { required: true });
+
+const clear = ref<boolean>(false);
+const editForm = ref<boolean>(false);
+const editForms = ref<boolean>(false);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const formData = reactive<DetailData>({
+  id: "",
+  sick: "",
+  absence: "",
+  late: "",
+  government: "",
+  study: "",
+  year: new Date().getFullYear(),
+});
+
+function close() {
+  modal.value = false;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    } else saveForm();
+  });
+};
+
+function saveForm() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+    modal.value = false;
+  });
+}
+function clearForm() {
+  formData.sick = "";
+  formData.absence = "";
+  formData.late = "";
+  formData.government = "";
+  formData.study = "";
+  editForm.value = false;
+  editForms.value = false;
+  clear.value = false;
+}
+
+function clickDelete() {}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      clearForm();
+      if (edit.value == false) {
+        clear.value = true
+        const dataList: any = data.value;
+        formData.id = dataList.id;
+        formData.sick = dataList.sick == "-" ? "" : dataList.sick;
+        formData.absence = dataList.absence == "-" ? "" : dataList.absence;
+        formData.late = dataList.late == "-" ? "" : dataList.late;
+        formData.government =
+          dataList.government == "-" ? "" : dataList.government;
+        formData.study = dataList.study == "-" ? "" : dataList.study;
+        formData.year =
+          dataList.year == "-" ? new Date().getFullYear() : dataList.year;
+        editForm.value = true;
+        console.log(dataList);
+      }
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 30vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="`การลา`" :close="close" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                class="col-2"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                :readonly="!edit && !editForms"
+              >
+                <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="inputEdit(isReadonly)"
+                    :outlined="edit || editForms"
+                    :borderless="!edit"
+                    :readonly="!edit && !editForms"
+                    :model-value="
+                      formData.year === 0 ? null : Number(formData.year) + 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.year && clear == false " v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="formData.year = 0"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.sick"
+                label="ลาป่วย"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.absence"
+                label="ลากิจและพักผ่อน"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.late"
+                label="มาสาย"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.government"
+                label="ขาดราชการ"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.study"
+                label="ลาศึกษาต่อ"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="bg-white text-teal">
+          <q-space />
+          <q-btn
+            v-if="editForm == true"
+            flat
+            round
+            color="red"
+            @click="clickDelete()"
+            icon="mdi-delete"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="editForms == true"
+            icon="mdi-undo"
+            color="red"
+            flat
+            round
+            @click="() => {editForms = false; clear = true;}"
+            ><q-tooltip>ยกเลิก</q-tooltip></q-btn
+          >
+          <q-btn
+            v-if="editForm == true && editForms == false"
+            @click="() => {editForms = true ; clear = false;}"
+            flat
+            round
+            icon="mdi-pencil-outline"
+            color="primary"
+            ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+          >
+
+          <q-btn
+            v-if="edit || editForms"
+            :label="`บันทึก`"
+            color="public"
+            @click="validateData()"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/04_registry/components/Leave.vue

@@ -82,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)"
@@ -168,23 +168,6 @@
                 @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)"
@@ -226,6 +209,112 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
+          </div> -->
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                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.year === 0 ? null : Number(formData.year) + 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.year && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="formData.year = 0"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.sick"
+                label="ลาป่วย"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.absence"
+                label="ลากิจและพักผ่อน"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.late"
+                label="มาสาย"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.government"
+                label="ขาดราชการ"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.study"
+                label="ลาศึกษาต่อ"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -341,9 +430,18 @@
       </q-tr>
     </template>
   </HistoryTable>
+
+  <!-- <DialogFormLeave 
+  v-model:modal="modalAdd" 
+  v-model:edit="edit" 
+  v-model:data="formData" 
+  
+  /> -->
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import DialogFormLeave from "@/modules/04_registry/components/DialogFormLeave.vue";
+
+import { onMounted, ref, watch, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
@@ -356,6 +454,7 @@ import type {
   RequestItemsObject,
   RequestItemsTotalObject,
   DataProps,
+  DetailData,
 } from "@/modules/04_registry/interface/request/Leave";
 import type {
   ResponseObject,
@@ -381,6 +480,16 @@ const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
+const formData = reactive<DetailData>({
+  id: "",
+  sick: "",
+  absence: "",
+  late: "",
+  government: "",
+  study: "",
+  year: new Date().getFullYear(),
+});
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -431,6 +540,7 @@ 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 ที่แสดงใช้สำหรับแก้ไขหรือไม่
 
@@ -448,23 +558,130 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
-const rows = ref<RequestItemsObject[]>([]);
+const rows = ref<DetailData[]>([]);
 const filterTotal = ref<string>("");
 const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
 const filter = ref<string>(""); //search data table
-const visibleColumns = ref<String[]>([]);
+
-profileData.leave.columns.length == 0
+/**old */
-  ? (visibleColumns.value = [
+// const visibleColumns = ref<String[]>([]);
-      "no",
+// profileData.leave.columns.length == 0
-      "typeLeave",
+//   ? (visibleColumns.value = [
-      "dateStartLeave",
+//       "no",
-      "numLeave",
+//       "typeLeave",
-      "sumLeave",
+//       "dateStartLeave",
-      "totalLeave",
+//       "numLeave",
-      "status",
+//       "sumLeave",
-      "reason",
+//       "totalLeave",
-    ])
+//       "status",
-  : (visibleColumns.value = profileData.leave.columns);
+//       "reason",
+//     ])
+//   : (visibleColumns.value = profileData.leave.columns);
+
+/** NEW */
+const visibleColumns = ref<String[]>([
+  "no",
+  "year",
+  "sick",
+  "absence",
+  "late",
+  "government",
+  "study",
+]);
+
+/** 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 columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -478,83 +695,73 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "typeLeave",
+    name: "year",
     align: "left",
-    label: "ประเภทการลา",
+    label: "ปี",
     sortable: true,
-    field: "typeLeave",
+    field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "dateStartLeave",
+    name: "sick",
     align: "left",
-    label: "วัน เดือน ปี ที่ลา",
+    label: "ลาป่วย",
     sortable: true,
-    field: "dateStartLeave",
+    field: "sick",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "numLeave",
+    name: "absence",
-    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: "สถานะ",
+    label: "ลากิจและพักผ่อน",
     sortable: true,
-    field: "status",
+    field: "absence",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "reason",
+    name: "late",
-    align: "right",
+    align: "left",
-    label: "เหตุผล",
+    label: "มาสาย",
     sortable: true,
-    field: "reason",
+    field: "late",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "government",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "government",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "study",
+    align: "left",
+    label: "ลาศึกษาต่อ",
+    sortable: true,
+    field: "study",
     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",
@@ -723,27 +930,44 @@ const fetchData = async () => {
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
-        const data = res.data.result;
+        const data = [
-        data.map((e: ResponseObject) => {
+          {
-          rows.value.push({
+            id: "11",
-            id: e.id,
+            sick: "11",
-            typeLeave: e.typeLeave,
+            absence: "11",
-            dateStartLeave: new Date(e.dateStartLeave),
+            late: "11",
-            dateEndLeave: new Date(e.dateEndLeave),
+            government: "11",
-            numLeave: e.numLeave,
+            study: "11",
-            sumLeave: e.sumLeave,
+            year: new Date().getFullYear(),
-            totalLeave: e.totalLeave,
+          },
-            status: e.status,
+          {
-            reason: e.reason,
+            id: "22",
-            typeLeaveId:
+            sick: "22",
-              e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
+            absence: "22",
-                ? e.typeLeaveId
+            late: "22",
-                : "",
+            government: "22",
-          });
+            study: "22",
-        });
+            year: new Date().getFullYear(),
+          },
+        ];
+
+        rows.value = data
+        // const data = res.data.result;
+        // data.map((e: DetailData) => {
+        //   rows.value.push({
+        //     id: e.id,
+        //     sick: e.sick ? e.sick : "-",
+        //     absence: e.absence ? e.absence : "-",
+        //     late: e.late ? e.late : "-",
+        //     government: e.government ? e.government : "-",
+        //     study: e.study ? e.study : "-",
+        //     year: e.year ? e.year : "-",
+
+        // });
+        // });
       })
       .catch((e) => {
-        messageError($q, e);
+        // messageError($q, e);
       })
       .finally(() => {
         store.isLoad++;
@@ -786,18 +1010,12 @@ const clickHistory = async (row: RequestItemsObject) => {
       data.map((e: ResponseObject) => {
         rowsHistory.value.push({
           id: e.id,
-          typeLeave: e.typeLeave,
+          sick: e.sick ? e.sick : "-",
-          dateStartLeave: new Date(e.dateStartLeave),
+          absence: e.absence ? e.absence : "-",
-          dateEndLeave: new Date(e.dateEndLeave),
+          late: e.late ? e.late : "-",
-          numLeave: e.numLeave,
+          government: e.government ? e.government : "-",
-          sumLeave: e.sumLeave,
+          study: e.study ? e.study : "-",
-          totalLeave: e.totalLeave,
+          year: e.year ? e.year : "-",
-          status: e.status,
-          reason: e.reason,
-          typeLeaveId:
-            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-              ? e.typeLeaveId
-              : "",
         });
       });
     })
@@ -862,13 +1080,21 @@ const getData = () => {
   //   agencyDay.value = row.agencyDay;
   //   coupleDay.value = row.coupleDay;
   //   therapyDay.value = row.therapyDay;
-  id.value = row.id;
+  formData.id = row.id;
-  typeLeave.value = row.typeLeaveId;
+  formData.sick = row.sick;
-  statLeave.value = row.status;
+  formData.absence = row.absence;
-  reason.value = row.reason;
+  formData.late = row.late;
-  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
+  formData.government = row.government;
-  numLeave.value = row.numLeave;
+  formData.study = row.study;
-  numUsedLeave.value = row.sumLeave;
+  formData.year = row.year == "-" ? 0 : row.year;
+
+  // 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;
 };
 
 // /**
@@ -904,6 +1130,7 @@ const clickAdd = async () => {
 };
 
 const clickAddLeave = async () => {
+  clearForm();
   editRow.value = false;
   edit.value = true;
   modalAdd.value = true;
@@ -1123,18 +1350,26 @@ const selectData = async (props: DataProps) => {
   //   modal.value = true;
   modalAdd.value = true;
   edit.value = false;
-  rowIndex.value = props.rowIndex;
-  id.value = props.row.id;
 
-  typeLeave.value = props.row.typeLeaveId;
+  rowIndex.value = props.rowIndex;
-  statLeave.value = props.row.status;
+  formData.id = props.row.id;
-  reason.value = props.row.reason;
+  formData.sick = props.row.sick;
-  dateRange.value = [
+  formData.absence = props.row.absence;
-    new Date(props.row.dateStartLeave),
+  formData.late = props.row.late;
-    new Date(props.row.dateEndLeave),
+  formData.government = props.row.government;
-  ];
+  formData.study = props.row.study;
-  numLeave.value = props.row.numLeave;
+  formData.year = props.row.year == "-" ? 0 : props.row.year;
-  numUsedLeave.value = props.row.sumLeave;
+
+  // 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;
   await clickTotal();
   //   if (rowsTotal.value.length > 0) {
   //     let data: DataOptionLeave[] = [];
@@ -1156,6 +1391,7 @@ const selectData = async (props: DataProps) => {
  */
 const addData = async () => {
   //   modalEdit.value = false;
+
   modal.value = true;
   //   edit.value = true;
   await clickTotal();
@@ -1269,6 +1505,35 @@ 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.sick = "";
+  formData.absence = "";
+  formData.late = "";
+  formData.government = "";
+  formData.study = "";
+  formData.year = 0;
+}
+// watch(()=>modalAdd.value,()=>{
+//   clearForm()
+//   if(modalAdd.value == true){
+//   }
+// })
 </script>
 <style lang="scss">
 .modalfix {

src/modules/04_registry/interface/request/Leave.ts

@@ -3,18 +3,29 @@ interface DataProps {
   rowIndex: number;
 }
 
+//ข้อมูล
+// interface RequestItemsObject {
+//   id: string;
+//   typeLeave: string;
+//   dateStartLeave: Date;
+//   dateEndLeave: Date;
+//   numLeave: number;
+//   sumLeave: number;
+//   totalLeave: number;
+//   status: string;
+//   reason: string;
+//   typeLeaveId: string;
+// }
+
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
-  typeLeave: string;
+  year: string|number;
-  dateStartLeave: Date;
+  sick: string;
-  dateEndLeave: Date;
+  absence: string;
-  numLeave: number;
+  late: string;
-  sumLeave: number;
+  government: string;
-  totalLeave: number;
+  study: string;
-  status: string;
-  reason: string;
-  typeLeaveId: string;
 }
 
 //ข้อมูล
@@ -39,4 +50,14 @@ interface Columns {
   };
 }
 
-export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };
+interface DetailData {
+  id: string;
+  sick: string;
+  absence: string;
+  late: string;
+  government: string;
+  study: string;
+  year: string|number;
+}
+
+export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject,DetailData };

src/modules/04_registry/interface/response/Leave.ts

@@ -1,16 +1,27 @@
 //ข้อมูล
+// interface ResponseObject {
+//   id: string;
+//   typeLeave: string;
+//   dateStartLeave: Date;
+//   dateEndLeave: Date;
+//   numLeave: number;
+//   sumLeave: number;
+//   totalLeave: number;
+//   status: string;
+//   reason: string;
+//   typeLeaveId: string;
+// }
+
 interface ResponseObject {
   id: string;
-  typeLeave: string;
+  year: string|number;
-  dateStartLeave: Date;
+  sick: string;
-  dateEndLeave: Date;
+  absence: string;
-  numLeave: number;
+  late: string;
-  sumLeave: number;
+  government: string;
-  totalLeave: number;
+  study: string;
-  status: string;
-  reason: string;
-  typeLeaveId: string;
 }
+
 interface ResponseTotalObject {
   typeLeaveId: string;
   typeLeave: string;