no message

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

@@ -40,7 +40,7 @@
                 }}
               </div>
               <div v-else-if="col.name == 'status'" class="table_ellipsis">
-                {{ statusLeave(col.value) }}
+                {{ col.value ? statusLeave(col.value) : "-" }}
                 <!-- {{ col.value }} -->
               </div>
               <div
@@ -51,13 +51,15 @@
                 "
                 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
@@ -69,7 +71,7 @@
               >
                 <q-tooltip>ประวัติแก้ไขการลา </q-tooltip>
               </q-btn>
-            </q-td>
+            </q-td> -->
           </q-tr>
         </template>
       </ProfileTable>
@@ -82,7 +84,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 +170,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 +211,128 @@
                 @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 />
@@ -282,12 +389,12 @@
                     >
                       {{
                         col.value == null
-                          ? ""
+                          ? "-"
                           : col.value.toLocaleString("en-US")
                       }}
                     </div>
                     <div v-else>
-                      {{ col.value }}
+                      {{ col.value ? col.value : "-" }}
                     </div>
                   </q-td>
                 </q-tr>
@@ -329,21 +436,30 @@
             "
             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">
-            {{ statusLeave(col.value) }}
+            {{ 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 { 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 +472,7 @@ import type {
   RequestItemsObject,
   RequestItemsTotalObject,
   DataProps,
+  DetailData,
 } from "@/modules/04_registry/interface/request/Leave";
 import type {
   ResponseObject,
@@ -369,6 +486,7 @@ 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: {
@@ -381,6 +499,16 @@ 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,
@@ -391,6 +519,9 @@ const {
   dateToISO,
   showLoader,
   hideLoader,
+  dialogConfirm,
+  convertDate,
+  convertDateDisplay,
 } = mixin;
 const route = useRoute();
 
@@ -431,6 +562,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 +580,140 @@ 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
-  ? (visibleColumns.value = [
-      "no",
-      "typeLeave",
-      "dateStartLeave",
-      "numLeave",
-      "sumLeave",
-      "totalLeave",
-      "status",
-      "reason",
-    ])
-  : (visibleColumns.value = profileData.leave.columns);
+
+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 columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -478,83 +727,61 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "typeLeave",
+    name: "leaveYear",
     align: "left",
-    label: "ประเภทการลา",
+    label: "ปี",
     sortable: true,
-    field: "typeLeave",
+    field: "leaveYear",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "dateStartLeave",
+    name: "sumSick",
     align: "left",
-    label: "วัน เดือน ปี ที่ลา",
+    label: "ลาป่วย",
     sortable: true,
-    field: "dateStartLeave",
+    field: "sumSick",
     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",
+    name: "sumRest",
     align: "left",
-    label: "สถานะ",
+    label: "ลากิจและพักผ่อน",
     sortable: true,
-    field: "status",
+    field: "sumRest",
     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: "เหตุผล",
+    name: "sumLate",
+    align: "left",
+    label: "มาสาย",
     sortable: true,
-    field: "reason",
+    field: "sumLate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "sumAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "sumAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "sumEducation",
+    align: "left",
+    label: "ลาศึกษาต่อ",
+    sortable: true,
+    field: "sumEducation",
     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 +950,22 @@ const fetchData = async () => {
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
+        // rows.value = data
         const data = res.data.result;
-        data.map((e: ResponseObject) => {
+        data.map((e: DetailData) => {
           rows.value.push({
             id: e.id,
-            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
-                : "",
+            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 : "-",
           });
         });
       })
       .catch((e) => {
-        messageError($q, e);
+        // messageError($q, e);
       })
       .finally(() => {
         store.isLoad++;
@@ -786,18 +1008,12 @@ const clickHistory = async (row: RequestItemsObject) => {
       data.map((e: ResponseObject) => {
         rowsHistory.value.push({
           id: e.id,
-          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
-              : "",
+          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 : "-",
         });
       });
     })
@@ -862,13 +1078,21 @@ const getData = () => {
   //   agencyDay.value = row.agencyDay;
   //   coupleDay.value = row.coupleDay;
   //   therapyDay.value = row.therapyDay;
-  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;
+  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;
 };
 
 // /**
@@ -904,6 +1128,8 @@ const clickAdd = async () => {
 };
 
 const clickAddLeave = async () => {
+  clearForm();
+  inputDateLaeaveYear.value = "";
   editRow.value = false;
   edit.value = true;
   modalAdd.value = true;
@@ -960,9 +1186,13 @@ const clickSave = async () => {
   myFormAdd.value.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
-        await editData();
+        // await dialogConfirm($q, () => {
+        editData();
+        // });
       } else {
-        await saveData();
+        // await dialogConfirm($q, () => {
+        saveData();
+        // });
       }
     }
   });
@@ -972,23 +1202,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), {
-        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,
+        leaveYear: formData.leaveYear,
+        sumSick: formData.sumSick,
+        sumRest: formData.sumRest,
+        sumLate: formData.sumLate,
+        sumAbsent: formData.sumAbsent,
+        sumEducation: formData.sumEducation,
       })
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
+
         modalAdd.value = false;
       })
       .catch((e) => {
@@ -1008,15 +1238,13 @@ 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,
+    .put(config.API.profileLeaveId(formData.id), {
+      leaveYear: formData.leaveYear,
+      sumSick: formData.sumSick,
+      sumRest: formData.sumRest,
+      sumLate: formData.sumLate,
+      sumAbsent: formData.sumAbsent,
+      sumEducation: formData.sumEducation,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1033,7 +1261,7 @@ const editData = async () => {
 const deleteData = async () => {
   showLoader();
   await http
-    .delete(config.API.profileLeaveId(id.value))
+    .delete(config.API.profileLeaveId(formData.id))
     .then((res) => {
       success($q, "ลบข้อมูลสำเร็จ");
       modalAdd.value = false;
@@ -1119,22 +1347,35 @@ 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;
-  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;
+  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;
+
+  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;
   await clickTotal();
   //   if (rowsTotal.value.length > 0) {
   //     let data: DataOptionLeave[] = [];
@@ -1155,9 +1396,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();
 };
 
@@ -1269,6 +1510,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.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 {