From 14388119e90a458353337e6757830ac953d0d4d3 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 8 Nov 2023 13:55:39 +0700
Subject: [PATCH] =?UTF-8?q?form=20=E0=B8=A2=E0=B8=B7=E0=B9=88=E0=B8=99?=
 =?UTF-8?q?=E0=B9=83=E0=B8=9A=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 368 +++++++-------
 .../componenst/Forms/04_HelpWifeBirthForm.vue |   9 +-
 .../componenst/Forms/05_VacationForm.vue      |   6 +-
 .../componenst/Forms/06_OrdinationForm.vue    | 475 +++++++++++++++++-
 .../05_leave/componenst/Forms/07_HajjForm.vue |  11 +-
 .../componenst/Forms/08_MilitaryForm.vue      |  11 +-
 .../componenst/Forms/09_StudyForm.vue         |  13 +-
 .../componenst/Forms/10_TrainForm.vue         |  13 +-
 .../Forms/11_WorkInternationalForm.vue        |  10 +-
 .../componenst/Forms/12_FollowSpouseForm.vue  |  20 +-
 .../Forms/13_RehabilitationForm.vue           |  10 +-
 .../05_leave/componenst/{ => Forms}/Form.vue  |  10 +
 .../05_leave/interface/request/AddAbsence.ts  |  38 +-
 src/modules/05_leave/views/AddPage.vue        |  76 ++-
 src/stores/mixin.ts                           |  61 ++-
 15 files changed, 863 insertions(+), 268 deletions(-)
 rename src/modules/05_leave/componenst/{ => Forms}/Form.vue (94%)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 382a2d6..f936dab 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -32,202 +32,200 @@ const props = defineProps({
       (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p> -->
 
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12"
+          dense
+          outlined
+          v-model="Writeat"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-        <q-card bordered class="q-pa-md bg-grey-1">
-          <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <div class="col-md-4 col-sm-12">
+          <q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
+          <q-radio
+            v-model="halfDay"
+            val="half_day_morning"
+            label="ลาครึ่งวันเช้า"
+          />
+          <q-radio
+            v-model="halfDay"
+            val="half_day_afternoon"
+            label="ลาครึ่งวันบ่าย"
+          />
+        </div>
+
+        <datepicker
+          class="col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="dateLeaveStart"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
             <q-input
-              class="col-12 col-sm-12"
-              dense
               outlined
-              v-model="Writeat"
-              label="เขียนที่"
-              :readonly="!edit"
-              :rules="[(val) => !!val || `${'เขียนที่'}`]"
-            />
-
-            <div class="col-md-4 col-sm-12">
-              <q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
-              <q-radio
-                v-model="halfDay"
-                val="half_day_morning"
-                label="ลาครึ่งวันเช้า"
-              />
-              <q-radio
-                v-model="halfDay"
-                val="half_day_afternoon"
-                label="ลาครึ่งวันบ่าย"
-              />
-            </div>
-
-            <datepicker
-              class="col-md-3 col-sm-12"
-              menu-class-name="modalfix"
-              v-model="dateLeaveStart"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :readonly="!edit"
-                  class="full-width datepicker"
-                  :model-value="
-                    dateLeaveStart != null ? date2Thai(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-md-3 col-sm-12"
-              menu-class-name="modalfix"
-              v-model="dateLeaveEnd"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :readonly="!edit"
-                  class="full-width datepicker"
-                  :model-value="
-                    dateLeaveEnd != null ? date2Thai(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>
-            <q-input
-              class="col-md-2 col-sm-12"
               dense
-              outlined
-              type="number"
-              v-model="dateTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-              :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-            />
-
-            <q-input
-              class="col-3"
-              dense
-              outlined
-              v-model="tel"
-              mask="(###)-###-####"
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              hide-bottom-space
               :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
-
-            <q-input
-              class="col-md-9 col-sm-12"
-              dense
-              outlined
-              v-model="locationAbsence"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-
-            <q-input
-              type="textarea"
-              class="col-md-12 col-sm-12"
-              dense
-              outlined
-              v-model="detail"
-              label="รายละเอียด"
-              :readonly="!edit"
-              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-            />
-
-            <q-file
-              v-model="files"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              multiple
-              class="q-pl-sm col-6"
+              class="full-width datepicker"
+              :model-value="
+                dateLeaveStart != null ? date2Thai(dateLeaveStart) : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
               <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
               </template>
-            </q-file>
+            </q-input>
+          </template>
+        </datepicker>
 
-            <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>
+        <datepicker
+          class="col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="dateLeaveEnd"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              hide-bottom-space
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                dateLeaveEnd != null ? date2Thai(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>
+        <q-input
+          class="col-md-2 col-sm-12"
+          dense
+          outlined
+          type="number"
+          v-model="dateTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+        />
 
-                      <q-item-label caption> </q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
+        <q-input
+          class="col-3"
+          dense
+          outlined
+          v-model="tel"
+          mask="(###)-###-####"
+          unmasked-value
+          label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+          :readonly="!edit"
+          :rules="[
+            (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+          ]"
+        />
+
+        <q-input
+          class="col-md-9 col-sm-12"
+          dense
+          outlined
+          v-model="locationAbsence"
+          label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+          :readonly="!edit"
+          :rules="[
+            (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+          ]"
+        />
+
+        <q-input
+          type="textarea"
+          class="col-md-12 col-sm-12"
+          dense
+          outlined
+          v-model="detail"
+          label="รายละเอียด"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+        />
+
+        <q-file
+          v-model="files"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-6"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <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>
-      </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>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index 963cc5e..9032f3d 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,6 +11,8 @@ const props = defineProps({
 </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>
@@ -26,7 +28,8 @@ const props = defineProps({
       <li>เอกสารประกอบ</li>
     </ul>
     <p>
-      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
+      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
+      (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p>
   </div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index cb40641..b5a776e 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,6 +11,8 @@ const props = defineProps({
 </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>
diff --git a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
index 4e8b47b..edbce20 100644
--- a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
@@ -1,30 +1,467 @@
 <script setup lang="ts">
-import { ref } from "vue"
-
-const edit = ref<boolean>(false)
+import { reactive, ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm } = 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: "",
+  government: new Date(),
+  birthday: new Date(),
+  dateLeaveStart: new Date(),
+  dateLeaveEnd: new Date(),
+  totalLeave: new Date(),
+  dateOrdination: new Date(),
+  measureLocationName: "",
+  tel: null,
+  addressMeasure: "",
+  buddhistLocationName: "",
+  addressBuddhist: "",
+  monk: "",
+});
+
+const writeatRef = ref<object | null>(null);
+const governmentRef = ref<object | null>(null);
+const birthdayRef = ref<object | null>(null);
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const totalLeaveRef = ref<object | null>(null);
+const dateOrdinationRef = ref<object | null>(null);
+const measureLocationNameRef = ref<object | null>(null);
+const telRef = ref<object | null>(null);
+const addressMeasureRef = ref<object | null>(null);
+const buddhistLocationNameRef = ref<object | null>(null);
+const addressBuddhistRef = ref<object | null>(null);
+
+const formRef: FormRef06 = {
+  writeat: writeatRef,
+  government: governmentRef,
+  birthday: birthdayRef,
+  dateLeaveStart: dateLeaveStartRef,
+  dateLeaveEnd: dateLeaveEndRef,
+  totalLeave: totalLeaveRef,
+  dateOrdination: dateOrdinationRef,
+  measureLocationName: measureLocationNameRef,
+  tel: telRef,
+  addressMeasure: addressMeasureRef,
+  buddhistLocationName: buddhistLocationNameRef,
+  addressBuddhist: addressBuddhistRef,
+};
+
+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();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
 </script>
 
 <template>
-  <div>
-    ลาอุปสมบท
-    <ul>
-      <li>ลาตั้งแต่วันที่</li>
-      <li>ลาถึงวันที่</li>
-      <li>จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง backend)</li>
-      <li>วันเดือนปีเกิด (Auto)</li>
-      <li>วันที่เข้ารับราชการ (Auto)</li>
-      <li>เคย/ไม่เคยบวช (ให้เลือก)</li>
-      <li>สถานที่บวช มีข้อมูล ชื่อวัด, ที่อยู่, หมายเลขโทรศัพท์</li>
-      <li>วันอุปสมบท</li>
-      <li>สถานที่จำพรรษา มีข้อมูล ชื่อวัด, ที่อยู่</li>
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
-      <li>เอกสารประกอบ</li>
-    </ul>
-  </div>
+  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <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.government"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="governmentRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  :readonly="!edit"
+                  class="full-width datepicker"
+                  :model-value="
+                    formData.government != null
+                      ? date2Thai(formData.government)
+                      : 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
+              :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
+                  ref="birthdayRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  :readonly="!edit"
+                  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>
+        <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
+              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
+          :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
+              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>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          type="number"
+          v-model="formData.totalLeave"
+          label="จำนวนวันที่ลา"
+          readonly
+        />
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยบวชหรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formData.monk"
+            val="ever"
+            label="เคยบวช"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formData.monk"
+            val="never"
+            label="ไม่เคยบวช"
+            checked-icon="task_alt"
+          />
+        </div>
+        <div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
+        <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.dateOrdination"
+              :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
+                  ref="dateOrdinationRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formData.dateOrdination != null
+                      ? date2Thai(formData.dateOrdination)
+                      : 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>
+            <q-input
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              hide-bottom-space
+              ref="measureLocationNameRef"
+              bg-color="white"
+              outlined
+              v-model="formData.measureLocationName"
+              label="ชื่อวัด"
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+            />
+
+            <q-input
+              class="col-12 col-sm-6 col-md-4"
+              ref="telRef"
+              dense
+              outlined
+              v-model="formData.tel"
+              bg-color="white"
+              mask="(###)-###-####"
+              unmasked-value
+              hide-bottom-space
+              label="หมายเลขโทรศัพท์"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          class="col-12 q-mt-sm"
+          dense
+          ref="addressMeasureRef"
+          bg-color="white"
+          outlined
+          v-model="formData.addressMeasure"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+        />
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          สถานที่จำพรรษา
+        </div>
+        <q-input
+          class="col-12 col-sm-6 col-md-4"
+          dense
+          ref="buddhistLocationNameRef"
+          bg-color="white"
+          hide-bottom-space
+          outlined
+          v-model="formData.buddhistLocationName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+        <q-input
+          class="col-12"
+          dense
+          ref="addressBuddhistRef"
+          bg-color="white"
+          outlined
+          v-model="formData.addressBuddhist"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+        />
+        <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/07_HajjForm.vue b/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
index e3a2f64..0142cdb 100644
--- a/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
+++ b/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,12 +11,17 @@ const props = defineProps({
 </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>จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง backend)</li>
+      <li>
+        จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
+        backend)
+      </li>
       <li>วันที่เข้ารับราชการ (Auto)</li>
       <li>เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก)</li>
       <li>รายละเอียด (ไม่บังคับกรอก)</li>
diff --git a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
index b2c30ff..038b794 100644
--- a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
+++ b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,12 +11,17 @@ const props = defineProps({
 </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>จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง backend)</li>
+      <li>
+        จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
+        backend)
+      </li>
       <li>ได้รับหมายเรียกของ</li>
       <li>ที่</li>
       <li>ลงวันที่</li>
diff --git a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
index 2eaf34a..386c460 100644
--- a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,6 +11,8 @@ const props = defineProps({
 </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>
@@ -20,7 +22,9 @@ const props = defineProps({
       <li>วันเดือนปีเกิด (Auto)</li>
       <li>วันที่เข้ารับราชการ (Auto)</li>
       <li>เงินเดือนปัจจุบัน (Auto)</li>
-      <li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
+      <li>
+        เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
+      </li>
       <li>ศึกษาวิชา</li>
       <li>ขั้นปริญญา</li>
       <li>ชื่อสถานศึกษา</li>
@@ -33,7 +37,8 @@ const props = defineProps({
     </ul>
 
     <p>
-      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
+      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
+      (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p>
   </div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
index 0748e2a..eb8d4b0 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,6 +11,8 @@ const props = defineProps({
 </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>
@@ -20,7 +22,9 @@ const props = defineProps({
       <li>วันเดือนปีเกิด (Auto)</li>
       <li>วันที่เข้ารับราชการ (Auto)</li>
       <li>เงินเดือนปัจจุบัน (Auto)</li>
-      <li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
+      <li>
+        เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
+      </li>
       <li>ด้าน/หลักสูตร</li>
       <li>ณ สถานที่</li>
       <li>ประเทศ</li>
@@ -32,7 +36,8 @@ const props = defineProps({
     </ul>
 
     <p>
-      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
+      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
+      (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p>
   </div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index d9d2a95..8d97985 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,10 +11,10 @@ const props = defineProps({
 </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>
     ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
-    <p>
-      *หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm
-    </p>
+    <p>*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm</p>
   </div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 4cb78cf..acee368 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,6 +11,8 @@ const props = defineProps({
 </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>
@@ -20,9 +22,17 @@ const props = defineProps({
       <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>
diff --git a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
index ff8ff06..1645e0a 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -11,10 +11,10 @@ const props = defineProps({
 </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>
     ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
-    <p>
-      *หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm
-    </p>
+    <p>*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm</p>
   </div>
 </template>
diff --git a/src/modules/05_leave/componenst/Form.vue b/src/modules/05_leave/componenst/Forms/Form.vue
similarity index 94%
rename from src/modules/05_leave/componenst/Form.vue
rename to src/modules/05_leave/componenst/Forms/Form.vue
index 86ffba1..a8d3cf1 100644
--- a/src/modules/05_leave/componenst/Form.vue
+++ b/src/modules/05_leave/componenst/Forms/Form.vue
@@ -58,6 +58,7 @@ const formData = reactive<FormData>({
           <q-input
             outlined
             dense
+            bg-color="white"
             hide-bottom-space
             readonly
             class="full-width datepicker"
@@ -81,6 +82,7 @@ const formData = reactive<FormData>({
       <q-input
         class="col-12 col-sm-4"
         dense
+        bg-color="white"
         outlined
         readonly
         v-model="dataStore.typeLeave"
@@ -91,6 +93,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.who"
         label="เรียน"
       />
@@ -99,6 +102,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.requestName"
         label="ชื่อผู้ยื่นขอ"
       />
@@ -107,6 +111,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.position"
         label="ตำแหน่งผู้ยื่นขอ"
       />
@@ -115,6 +120,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.level"
         label="ระดับผู้ยื่นขอ"
       />
@@ -123,6 +129,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.ocRequest"
         label="สังกัดผู้ยื่นขอ"
       />
@@ -131,6 +138,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.leaveReceived"
         label="จำนวนสิทธิ์การลาที่ได้รับในแต่ละประเภท"
       />
@@ -139,6 +147,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.leaveUse"
         label="จำนวนสิทธิ์การลาที่ใช้ไปในแต่ละประเภท"
       />
@@ -147,6 +156,7 @@ const formData = reactive<FormData>({
         dense
         outlined
         readonly
+        bg-color="white"
         v-model="formData.leaveRemaining"
         label="จำนวนสิทธิ์การลาคงเหลือในแต่ละประเภท"
       />
diff --git a/src/modules/05_leave/interface/request/AddAbsence.ts b/src/modules/05_leave/interface/request/AddAbsence.ts
index 96c6368..cb29903 100644
--- a/src/modules/05_leave/interface/request/AddAbsence.ts
+++ b/src/modules/05_leave/interface/request/AddAbsence.ts
@@ -1,16 +1,32 @@
 interface FormData {
-    dateStart:Date
-    subject:string
-    who:string
-    requestName:string
-    position:string
-    level:string
-    ocRequest:string
-    leaveReceived:string
-    leaveUse:string
-    leaveRemaining:string
+    dateStart: Date
+    subject: string
+    who: string
+    requestName: string
+    position: string
+    level: string
+    ocRequest: string
+    leaveReceived: string
+    leaveUse: string
+    leaveRemaining: string
 
 }
+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;
+    [key: string]: any;
+}
 export type {
-    FormData
+    FormData,
+    FormRef06
 }
\ 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 acf7f44..d7662bc 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -3,8 +3,18 @@ import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
-import Form from "@/modules/05_leave/componenst/Form.vue";
+import Form from "@/modules/05_leave/componenst/Forms/Form.vue";
 import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
+import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
+import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue";
+import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue";
+import Form7 from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue";
+import Form8 from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue";
+import Form9 from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue";
+import Form10 from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue";
+import Form11 from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue";
+import Form12 from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue";
+import Form13 from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue";
 import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -18,7 +28,7 @@ const myform = ref<QForm | null>(null);
 const $q = useQuasar();
 
 const model = ref("");
-const modelSpecific = ref(null);
+const modelSpecific = ref("");
 
 const clickBack = () => {
   router.push(`/leave`);
@@ -48,6 +58,10 @@ const saveAbsence = () => {
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+
+const onSubmit = async () => {
+  console.log("save");
+};
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -85,7 +99,7 @@ const saveAbsence = () => {
                   emit-value
                   map-options
                   prefix="ประเภทใบลา :"
-                  @update:model-value="dataStore.typeConvert(model,null)"
+                  @update:model-value="dataStore.typeConvert(model, null)"
                 />
                 <!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
                 <div
@@ -107,7 +121,9 @@ const saveAbsence = () => {
                     emit-value
                     map-options
                     prefix="ประเภทใบลา :"
-                    @update:model-value="dataStore.typeConvert(model,modelSpecific)"
+                    @update:model-value="
+                      dataStore.typeConvert(model, modelSpecific)
+                    "
                   />
                 </div>
               </div>
@@ -116,22 +132,46 @@ const saveAbsence = () => {
               <Form :model="model" />
             </div>
             <div v-if="model">
-              <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-              <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-              <Form3 v-if="model === '0' || model === '1' || model === '2'"/>
+              <Form3
+                :on-submit="onSubmit"
+                v-if="model === '0' || model === '1' || model === '2'"
+              />
+              <Form4
+                :on-submit="onSubmit"
+                v-if="model === '3'"
+              />
+              <Form5
+                :on-submit="onSubmit"
+                v-if="model === '4'"
+              />
+              <Form6
+                :on-submit="onSubmit"
+                v-if="model === '5' && modelSpecific === '0'"
+              />
+              <Form7
+                :on-submit="onSubmit"
+                v-if="model === '5' && modelSpecific === '1'"
+              />
+              <Form8 :on-submit="onSubmit" v-if="model === '6'" />
+              <Form9
+                :on-submit="onSubmit"
+                v-if="model === '7' && modelSpecific === '0'"
+              />
+              <Form10
+                :on-submit="onSubmit"
+                v-if="
+                  model === '7' &&
+                  (modelSpecific === '1' ||
+                    modelSpecific === '2' ||
+                    modelSpecific === '3')
+                "
+              />
+              <Form11 :on-submit="onSubmit" v-if="model === '8'" />
+              <Form12 :on-submit="onSubmit" v-if="model === '9'" />
+              <Form13 :on-submit="onSubmit" v-if="model === '10'" />
             </div>
           </div>
-          <q-separator />
-          <div class="row col-12 q-pa-md">
-            <q-space />
-            <q-btn
-              unelevated
-              dense
-              class="q-px-md items-center btnBlue"
-              label="บันทึก"
-              @click="saveAbsence"
-            />
-          </div>
+
         </q-card>
       </q-form>
     </div>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a6ef613..a268354 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -628,7 +628,63 @@ export const useCounterMixin = defineStore("mixin", () => {
 				return "-"
 		}
 	}
-
+	const dialogConfirm = (
+		q: any,
+		ok?: Function,
+		title?: string, // ถ้ามี cancel action ใส่เป็น null
+		desc?: string, // ถ้ามี cancel action ใส่เป็น null
+		cancel?: Function
+	  ) => {
+		q.dialog({
+		  component: CustomComponent,
+		  componentProps: {
+			title: title && title != null ? title : "ยืนยันการบันทึก",
+			message:
+			  desc && desc != null
+				? desc
+				: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+			icon: "info",
+			color: "public",
+			textOk: "ตกลง",
+			onlycancel: false,
+		  },
+		})
+		  .onOk(() => {
+			if (ok) ok();
+		  })
+		  .onCancel(() => {
+			if (cancel) cancel();
+		  });
+	  };
+	
+	  const dialogRemove = (
+		q: any,
+		ok?: Function,
+		title?: string, // ถ้ามี cancel action ใส่เป็น null
+		desc?: string, // ถ้ามี cancel action ใส่เป็น null
+		cancel?: Function
+	  ) => {
+		q.dialog({
+		  component: CustomComponent,
+		  componentProps: {
+			title: title && title != null ? title : "ยืนยันการลบข้อมูล",
+			message:
+			  desc && desc != null
+				? desc
+				: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
+			icon: "delete",
+			color: "red",
+			textOk: "ตกลง",
+			onlycancel: false,
+		  },
+		})
+		  .onOk(() => {
+			if (ok) ok();
+		  })
+		  .onCancel(() => {
+			if (cancel) cancel();
+		  });
+	  };
 	return {
 		calAge,
 		date2Thai,
@@ -658,5 +714,8 @@ export const useCounterMixin = defineStore("mixin", () => {
 		statusLeave,
 		modalWarning,
 		fails,
+		dialogConfirm,
+		dialogRemove
+
 	}
 })