From dc53e25868713aeed146c37b7c6541ae771dcb1d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 9 Nov 2023 13:31:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B9=84=E0=B8=9B=E0=B8=9D?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1=20?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B9=84=E0=B8=9B=E0=B8=9F=E0=B8=B7=E0=B9=89?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9F=E0=B8=B9=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=96=E0=B8=A0=E0=B8=B2=E0=B8=9E=E0=B8=94=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AD=E0=B8=B2=E0=B8=8A=E0=B8=B5=E0=B8=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componenst/Forms/10_TrainForm.vue         | 518 +++++++++++++++++-
 .../Forms/13_RehabilitationForm.vue           | 334 ++++++++++-
 .../05_leave/interface/request/AddAbsence.ts  | 107 ++--
 src/modules/05_leave/views/AddPage.vue        |   2 +-
 4 files changed, 880 insertions(+), 81 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
index eb8d4b0..4de1206 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
@@ -1,43 +1,503 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
-const edit = ref<boolean>(false);
+import { reactive, ref,computed } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm ,arabicNumberToText} = mixin;
+const edit = ref<boolean>(true);
 const props = defineProps({
   data: {
     type: Array,
     default: null,
   },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+const files = ref<any>(null);
+const formData = reactive<any>({
+  writeat: "",
+  dateLeaveStart: null,
+  dateLeaveEnd: null,
+  birthday: new Date(),
+  dateGovernment: new Date(),
+  salary: 10000,
+  salaryText: arabicNumberToText(10000),
+  tel: "",
+  addressLeave: "test",
+  capital: "",
+  country: "",
+  course: "",
+  location: "",
+  file: "",
+  info: "",
+});
+
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const birthdayRef = ref<object | null>(null);
+const dateGovernmentRef = ref<object | null>(null);
+const salaryRef = ref<object | null>(null);
+const telRef = ref<object | null>(null);
+const addressLeaveRef = ref<object | null>(null);
+const capitalRef = ref<object | null>(null);
+const countryRef = ref<object | null>(null);
+const courseRef = ref<object | null>(null);
+const locationRef = ref<object | null>(null);
+const fileRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+
+const formRef: FormRef10 = {
+  dateLeaveStart: dateLeaveStartRef,
+  dateLeaveEnd: dateLeaveEndRef,
+  birthday: birthdayRef,
+  dateGovernment: dateGovernmentRef,
+  salary: salaryRef,
+  tel: telRef,
+  addressLeave: addressLeaveRef,
+  capital: capitalRef,
+  country: countryRef,
+  course: courseRef,
+  location: locationRef,
+  file: fileRef,
+  writeat: writeatRef,
+};
+
+function onValidate() {
+  const hasError = [];
+
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+function calculateDuration(startDate: string | null, endDate: string | null) {
+  if (startDate && endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    const duration = end.getTime() - start.getTime(); // ระยะเวลาในมิลลิวินาที
+
+    const days = Math.floor(duration / (1000 * 60 * 60 * 24));
+    const months = Math.floor(duration / (1000 * 60 * 60 * 24 * 30.44));
+    const years = Math.floor(duration / (1000 * 60 * 60 * 24 * 30.44 * 12));
+    
+    // return `${days} วัน, ${months} เดือน, ${years} ปี`;
+    return `${years} ปี, ${months} เดือน, ${days} วัน`;
+  }
+
+  return "";
+}
+const formattedSalary = computed(() => {
+  return formData.salary !== null
+    ? formData.salary.toLocaleString("th-TH")
+    : "";
 });
 </script>
 
 <template>
   <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
   <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
-    ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
-    <ul>
-      <li>ลาตั้งแต่วันที่</li>
-      <li>ลาถึงวันที่</li>
-      <li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
-      <li>วันเดือนปีเกิด (Auto)</li>
-      <li>วันที่เข้ารับราชการ (Auto)</li>
-      <li>เงินเดือนปัจจุบัน (Auto)</li>
-      <li>
-        เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
-      </li>
-      <li>ด้าน/หลักสูตร</li>
-      <li>ณ สถานที่</li>
-      <li>ประเทศ</li>
-      <li>ด้วยทุน</li>
-      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา</li>
-      <li>หมายเลขโทรศัพท์</li>
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
-      <li>เอกสารประกอบ</li>
-    </ul>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="writeatRef"
+          class="col-12 col-sm-12"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formData.writeat"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formData.dateGovernment"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              readonly
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  ref="dateGovernmentRef"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formData.dateGovernment != null
+                      ? date2Thai(formData.dateGovernment)
+                      : null
+                  "
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formData.birthday"
+              :locale="'th'"
+              autoApply
+              borderless
+              readonly
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  readonly
+                  ref="birthdayRef"
+                  bg-color="white"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formData.birthday != null
+                      ? date2Thai(formData.birthday)
+                      : null
+                  "
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
 
-    <p>
-      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
-      (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
-    </p>
-  </div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveStart"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              lazy-rules
+              ref="dateLeaveStartRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveStart != null
+                  ? date2Thai(formData.dateLeaveStart)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveEnd"
+          :locale="'th'"
+          autoApply
+          borderless
+          :readonly="!formData.dateLeaveStart"
+          :enableTimePicker="false"
+          week-start="0"
+          :min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              :readonly="!formData.dateLeaveStart"
+              lazy-rules
+              ref="dateLeaveEndRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveEnd != null
+                  ? date2Thai(formData.dateLeaveEnd)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="col-12 col-md-4 col-sm-6">
+          <p
+            v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
+            class="text-weight-bold text-subtitle1 q-mb-none"
+            style="padding-top: 7px; color: #26a69a"
+          >
+            ระยะเวลา
+            {{
+              calculateDuration(formData.dateLeaveStart, formData.dateLeaveEnd)
+            }}
+          </p>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="salaryRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formattedSalary"
+              label="เงินเดือนปัจจุบัน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+            />
+            <q-input
+              ref="salaryRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              readonly
+              outlined
+              bg-color="white"
+              v-model="formData.salaryText"
+              label="เงินเดือนปัจจุบัน(คำอ่าน)"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+            />
+          </div>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="courseRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.course"
+              label="ด้าน/หลักสูตร"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+            />
+            <q-input
+              ref="locationRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.location"
+              label="ณ สถานที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+            />
+            <q-input
+              ref="countryRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.country"
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+            <q-input
+              ref="capitalRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.capital"
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+            <q-input
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              outlined
+              bg-color="white"
+              ref="telRef"
+              v-model="formData.tel"
+              mask="(###)-###-####"
+              unmasked-value
+              hide-bottom-space
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+            <q-input
+              ref="addressLeaveRef"
+              class="col-12"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.addressLeave"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          class="col-12 q-mt-sm"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formData.info"
+          label="รายละเอียด"
+        />
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="fileRef"
+            v-model="formData.file"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            lazy-rules
+            hide-bottom-space
+            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+      />
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
index 8437198..6ad1915 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
@@ -1,17 +1,98 @@
 <script setup lang="ts">
+import { reactive, ref, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { ref } from "vue";
-
-const mixin = useCounterMixin()
-const { arabicNumberToText } = mixin
-
-const edit = ref<boolean>(false);
+import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, arabicNumberToText } = mixin;
+const edit = ref<boolean>(true);
+const isSave = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
     default: null,
   },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
 });
+const files = ref<any>(null);
+const filesUpload = ref<any>(null);
+const formData = reactive<any>({
+  writeat: "",
+  dateLeaveStart: null,
+  dateLeaveEnd: null,
+  file: "",
+  info: "",
+});
+
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const fileRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+
+const formRef: FormRef13 = {
+  dateLeaveStart: dateLeaveStartRef,
+  dateLeaveEnd: dateLeaveEndRef,
+  file: fileRef,
+  writeat: writeatRef,
+};
+
+function onValidate() {
+  const hasError = [];
+
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      if(isSave.value === false){
+        props.onSubmit();
+        console.log(formData);
+        isSave.value = true;
+      }else{
+        console.log('savefile อัปโหลด',filesUpload.value)
+      }
+    },
+    !isSave.value ?
+    "ยืนยันการบันทึกข้อมูล":"ยืนยันการอัพโหลดไฟล์",
+    !isSave.value ? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?":"ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+function calculateDuration(startDate: string | null, endDate: string | null) {
+  if (startDate && endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    const duration = end.getTime() - start.getTime(); // ระยะเวลาในมิลลิวินาที
+
+    const days = Math.floor(duration / (1000 * 60 * 60 * 24));
+    const months = Math.floor(duration / (1000 * 60 * 60 * 24 * 30.44));
+    const years = Math.floor(duration / (1000 * 60 * 60 * 24 * 30.44 * 12));
+
+    // return `${days} วัน, ${months} เดือน, ${years} ปี`;
+    return `${years} ปี, ${months} เดือน, ${days} วัน`;
+  }
+
+  return "";
+}
+function upLoadFile(){
+  console.log('upload',filesUpload.value)
+}
 </script>
 
 <template>
@@ -30,11 +111,244 @@ const props = defineProps({
       <li>*หลังจากบันทึก แสดง input ให้อัพโหลดเอกสารกลับเข้าระบบ</li>
     </ul>
 
-    <p>*หมายเหตุ 
-      รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
-      และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
+    <p>
+      *หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร
+      docx ให้ดาวน์โหลด เพื่อกรอก และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
     </p>
 
-   ตัวอย่างการ convert ตัวเลขเป็นข้อความ {{ arabicNumberToText(15500) }}
+    ตัวอย่างการ convert ตัวเลขเป็นข้อความ {{ arabicNumberToText(15500) }}
   </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="writeatRef"
+          class="col-12 col-sm-12"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formData.writeat"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveStart"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              lazy-rules
+              ref="dateLeaveStartRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveStart != null
+                  ? date2Thai(formData.dateLeaveStart)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveEnd"
+          :locale="'th'"
+          autoApply
+          borderless
+          :readonly="!formData.dateLeaveStart"
+          :enableTimePicker="false"
+          week-start="0"
+          :min-date="
+            formData.dateLeaveStart
+              ? new Date(
+                  formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
+                )
+              : null
+          "
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              :readonly="!formData.dateLeaveStart"
+              lazy-rules
+              ref="dateLeaveEndRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveEnd != null
+                  ? date2Thai(formData.dateLeaveEnd)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="col-12 col-md-4 col-sm-6">
+          <p
+            v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
+            class="text-weight-bold text-subtitle1 q-mb-none"
+            style="padding-top: 7px; color: #26a69a"
+          >
+            ระยะเวลา
+            {{
+              calculateDuration(formData.dateLeaveStart, formData.dateLeaveEnd)
+            }}
+          </p>
+        </div>
+
+        <q-input
+          class="col-12 q-mt-sm"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formData.info"
+          label="รายละเอียด"
+          type="textarea"
+        />
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="fileRef"
+            v-model="formData.file"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            lazy-rules
+            hide-bottom-space
+            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <div v-if="isSave" class="q-mt-md">
+      <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+      <div class="q-pl-sm text-weight-bold text-dark">
+        ดาวน์โหลด/อัพโหลดแบบฟอร์ม
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm ">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัพโหลด
+              </div>
+                <q-file
+                  v-model="filesUpload"
+                  dense
+                  label="แบบฟอร์ม"
+                  outlined
+                  bg-color="white"
+                  multiple
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                </q-file>
+                
+            </div>
+          </div>
+          <div class="col-md-1 self-end q-mb-sm">
+            <q-btn v-if="filesUpload" flat round color="primary" icon="mdi-arrow-up-bold" @click="upLoadFile"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div v-if="!isSave">
+
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+      />
+    </div>
+  </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/interface/request/AddAbsence.ts b/src/modules/05_leave/interface/request/AddAbsence.ts
index 2324fe9..527766a 100644
--- a/src/modules/05_leave/interface/request/AddAbsence.ts
+++ b/src/modules/05_leave/interface/request/AddAbsence.ts
@@ -12,55 +12,78 @@ interface FormData {
 
 }
 interface FormRef06 {
-    writeat:object|null;
-    government:object|null;
-    birthday:object|null;
-    dateLeaveStart:object|null;
-    dateLeaveEnd:object|null;
-    totalLeave:object|null;
-    dateOrdination:object|null;
-    measureLocationName:object|null;
-    tel:object|null;
-    addressMeasure:object|null;
-    buddhistLocationName:object|null;
-    addressBuddhist:object|null;
+    writeat: object | null;
+    government: object | null;
+    birthday: object | null;
+    dateLeaveStart: object | null;
+    dateLeaveEnd: object | null;
+    totalLeave: object | null;
+    dateOrdination: object | null;
+    measureLocationName: object | null;
+    tel: object | null;
+    addressMeasure: object | null;
+    buddhistLocationName: object | null;
+    addressBuddhist: object | null;
     [key: string]: any;
 }
 interface FormRef07 {
-    file:object|null
-    writeat:object|null
-    government:object|null
-    dateLeaveStart:object|null
-    dateLeaveEnd:object|null
+    file: object | null
+    writeat: object | null
+    government: object | null
+    dateLeaveStart: object | null
+    dateLeaveEnd: object | null
     [key: string]: any;
 }
 interface FormRef08 {
-    dateLeaveStart:object|null
-    dateLeaveEnd:object|null
-    file:object|null
-    writeat:object|null
-    received:object|null
-    at:object|null
-    dateAt:object|null
-    admitted:object|null
-    atPlace:object|null
+    dateLeaveStart: object | null
+    dateLeaveEnd: object | null
+    file: object | null
+    writeat: object | null
+    received: object | null
+    at: object | null
+    dateAt: object | null
+    admitted: object | null
+    atPlace: object | null
     [key: string]: any;
 }
 interface FormRef09 {
-    dateLeaveStart:object|null
-    dateLeaveEnd:object|null
-    birthday:object|null
-    dateGovernment:object|null
-    salary:object|null
-    tel:object|null
-    addressLeave:object|null
-    capital:object|null
-    country:object|null
-    nameEducation:object|null
-    degree:object|null
-    study:object|null
-    file:object|null
-    writeat:object|null
+    dateLeaveStart: object | null
+    dateLeaveEnd: object | null
+    birthday: object | null
+    dateGovernment: object | null
+    salary: object | null
+    tel: object | null
+    addressLeave: object | null
+    capital: object | null
+    country: object | null
+    nameEducation: object | null
+    degree: object | null
+    study: object | null
+    file: object | null
+    writeat: object | null
+    [key: string]: any;
+}
+interface FormRef10 {
+    dateLeaveStart: object | null
+    dateLeaveEnd: object | null
+    birthday: object | null
+    dateGovernment: object | null
+    salary: object | null
+    tel: object | null
+    addressLeave: object | null
+    capital: object | null
+    country: object | null
+    course: object | null
+    location: object | null
+    file: object | null
+    writeat: object | null
+    [key: string]: any;
+}
+interface FormRef13 {
+    dateLeaveStart: object | null
+    dateLeaveEnd: object | null
+    file: object | null
+    writeat: object | null
     [key: string]: any;
 }
 export type {
@@ -68,5 +91,7 @@ export type {
     FormRef06,
     FormRef07,
     FormRef08,
-    FormRef09
+    FormRef09,
+    FormRef10,
+    FormRef13,
 }
\ No newline at end of file
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 6df28d5..7262113 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -27,7 +27,7 @@ const route = useRoute();
 const myform = ref<QForm | null>(null);
 const $q = useQuasar();
 
-const model = ref("");
+const model = ref("10");
 const modelSpecific = ref("");
 
 const clickBack = () => {