จัด ฟอร์มลา เเก้ ui 06/07/08/09/10/13

src/modules/05_leave/componenst/Forms/07_HajjForm.vue

@@ -12,7 +12,6 @@ const edit = ref<boolean>(true);
 const files = ref<any>(null);
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const fileRef = ref<object | null>(null);
 const writeatRef = ref<object | null>(null);
 const governmentRef = ref<object | null>(null);
 const dateLeaveStartRef = ref<object | null>(null);
@@ -37,13 +36,12 @@ const formData = reactive<any>({
   dateLeaveStart: new Date(),
   dateLeaveEnd: new Date(),
   totalLeave: new Date(),
-  monk: "",
+  monk: "never",
   file: null,
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: FormRef07 = {
-  file: fileRef,
   writeat: writeatRef,
   government: governmentRef,
   dateLeaveStart: dateLeaveStartRef,
@@ -88,29 +86,28 @@ function onSubmit() {
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
         <q-input
+          v-model="formData.writeat"
           ref="writeatRef"
           class="col-12 col-sm-12"
+          bg-color="white"
           dense
           outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formData.writeat"
           label="เขียนที่"
+          hide-bottom-space
           :rules="[(val) => !!val || `${'เขียนที่'}`]"
         />
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <datepicker
+              v-model="formData.dateLeaveStart"
               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"
+              :enableTimePicker="false"
+              :locale="'th'"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -120,19 +117,119 @@ function onSubmit() {
               </template>
               <template #trigger>
                 <q-input
-                  outlined
+                  ref="dateLeaveStartRef"
-                  ref="governmentRef"
-                  dense
                   bg-color="white"
-                  hide-bottom-space
-                  :readonly="!edit"
                   class="full-width datepicker"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  :model-value="
+                    formData.dateLeaveStart != null
+                      ? date2Thai(formData.dateLeaveStart)
+                      : null
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formData.dateLeaveEnd"
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="dateLeaveEndRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :label="`${'ลาถึงวันที่'}`"
+                  :model-value="
+                    formData.dateLeaveEnd != null
+                      ? date2Thai(formData.dateLeaveEnd)
+                      : null
+                  "
+                  :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
+              v-model="formData.totalLeave"
+              class="col-12 col-md-4 col-sm-6"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              type="number"
+              label="จำนวนวันที่ลา"
+            />
+
+            <datepicker
+              v-model="formData.government"
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :locale="'th'"
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="governmentRef"
+                  bg-color="white"
+                  class="full-width datepicker"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
                   :model-value="
                     formData.government != null
                       ? date2Thai(formData.government)
                       : null
                   "
-                  :label="`${'วันที่เข้ารับราชการ'}`"
                   :rules="[
                     (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
@@ -151,142 +248,43 @@ function onSubmit() {
           </div>
         </div>
 
-        <datepicker
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
-          class="col-12 col-md-4 col-sm-6"
+          เคยไปประกอบพิธีฮัจย์หรือไม่
-          menu-class-name="modalfix"
+        </div>
-          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"
+            label="เคย"
           />
           <q-radio
             v-model="formData.monk"
             val="never"
-            label="ไม่เคยไปประกอบพิธีฮัจย์"
             checked-icon="task_alt"
+            label="ไม่เคยไปประกอบพิธีฮัจย์"
           />
         </div>
 
         <q-input
-          class="col-12 q-mt-sm"
-          dense
-          bg-color="white"
-          outlined
           v-model="formData.info"
+          class="col-12 q-mt-sm"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
           label="รายละเอียด"
         />
 
         <div class="col-12 col-sm-6">
           <q-file
-            ref="fileRef"
             v-model="formData.file"
-            dense
-            label="เอกสารประกอบ"
-            outlined
             bg-color="white"
+            label="เอกสารประกอบ"
+            dense
+            outlined
             multiple
-            lazy-rules
             hide-bottom-space
-            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
           >
             <template v-slot:prepend>
               <q-icon name="attach_file" color="primary" />

src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue

@@ -1,12 +1,27 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useQuasar } from "quasar";
+import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { date2Thai, dialogConfirm } = mixin;
+
 const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+const receivedRef = ref<object | null>(null);
+const atRef = ref<object | null>(null);
+const dateAtRef = ref<object | null>(null);
+const admittedRef = ref<object | null>(null);
+const atPlaceRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
     type: Array,
@@ -17,7 +32,8 @@ const props = defineProps({
     default: () => "",
   },
 });
-const files = ref<any>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
   dateLeaveStart: null,
   dateLeaveEnd: null,
@@ -32,20 +48,10 @@ const formData = reactive<any>({
   info:''
 });
 
-const dateLeaveStartRef = ref<object | null>(null);
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const dateLeaveEndRef = ref<object | null>(null);
-const fileRef = ref<object | null>(null);
-const writeatRef = ref<object | null>(null);
-const receivedRef = ref<object | null>(null);
-const atRef = ref<object | null>(null);
-const dateAtRef = ref<object | null>(null);
-const admittedRef = ref<object | null>(null);
-const atPlaceRef = ref<object | null>(null);
-
 const formRef: FormRef08 = {
   dateLeaveStart: dateLeaveStartRef,
   dateLeaveEnd: dateLeaveEndRef,
-  file: fileRef,
   writeat: writeatRef,
   received: receivedRef,
   at: atRef,
@@ -54,9 +60,9 @@ const formRef: FormRef08 = {
   atPlace: atPlaceRef,
 };
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
   const hasError = [];
-
   for (const key in formRef) {
     if (Object.prototype.hasOwnProperty.call(formRef, key)) {
       const property = formRef[key];
@@ -70,6 +76,8 @@ function onValidate() {
     onSubmit();
   }
 }
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -188,6 +196,7 @@ function onSubmit() {
             </q-input>
           </template>
         </datepicker>
+
         <q-input
           class="col-12 col-md-4 col-sm-6"
           dense
@@ -212,6 +221,7 @@ function onSubmit() {
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
             />
+
             <q-input
               ref="atRef"
               class="col-12 col-sm-6 col-md-4"
@@ -225,6 +235,7 @@ function onSubmit() {
             />
           </div>
         </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <datepicker
@@ -268,6 +279,7 @@ function onSubmit() {
                 </q-input>
               </template>
             </datepicker>
+
             <q-input
               class="col-12 col-sm-6 col-md-4"
               dense
@@ -279,6 +291,7 @@ function onSubmit() {
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
             />
+
             <q-input
               class="col-12 col-sm-6 col-md-4"
               dense
@@ -292,26 +305,26 @@ function onSubmit() {
             />
           </div>
         </div>
+
         <q-input
           class="col-12 q-mt-sm"
           dense
           bg-color="white"
           outlined
           v-model="formData.info"
+          type="textarea"
           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" />

src/modules/05_leave/componenst/Forms/09_StudyForm.vue

@@ -1,12 +1,33 @@
 <script setup lang="ts">
-import { reactive, ref,computed } from "vue";
+import { reactive, ref, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useQuasar } from "quasar";
+import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm ,arabicNumberToText, calculateDurationYmd} = mixin;
+const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
+  mixin;
+
 const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+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 nameEducationRef = ref<object | null>(null);
+const degreeRef = ref<object | null>(null);
+const studyRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
     type: Array,
@@ -17,7 +38,8 @@ const props = defineProps({
     default: () => "",
   },
 });
-const files = ref<any>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
   writeat: "",
   dateLeaveStart: null,
@@ -37,21 +59,7 @@ const formData = reactive<any>({
   info: "",
 });
 
-const dateLeaveStartRef = ref<object | null>(null);
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-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 nameEducationRef = ref<object | null>(null);
-const degreeRef = ref<object | null>(null);
-const studyRef = ref<object | null>(null);
-const fileRef = ref<object | null>(null);
-const writeatRef = ref<object | null>(null);
-
 const formRef: FormRef09 = {
   dateLeaveStart: dateLeaveStartRef,
   dateLeaveEnd: dateLeaveEndRef,
@@ -65,13 +73,12 @@ const formRef: FormRef09 = {
   nameEducation: nameEducationRef,
   degree: degreeRef,
   study: studyRef,
-  file: fileRef,
   writeat: writeatRef,
 };
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
   const hasError = [];
-
   for (const key in formRef) {
     if (Object.prototype.hasOwnProperty.call(formRef, key)) {
       const property = formRef[key];
@@ -85,6 +92,8 @@ function onValidate() {
     onSubmit();
   }
 }
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -111,122 +120,26 @@ const formattedSalary = computed(() => {
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
         <q-input
+          v-model="formData.writeat"
           ref="writeatRef"
           class="col-12 col-sm-12"
+          bg-color="white"
           dense
           outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formData.writeat"
           label="เขียนที่"
+          hide-bottom-space
           :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>
 
         <datepicker
+          v-model="formData.dateLeaveStart"
           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"
+          :enableTimePicker="false"
+          :locale="'th'"
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -236,19 +149,19 @@ const formattedSalary = computed(() => {
           </template>
           <template #trigger>
             <q-input
-              outlined
+              ref="dateLeaveStartRef"
+              class="full-width datepicker"
               bg-color="white"
+              outlined
               dense
               lazy-rules
-              ref="dateLeaveStartRef"
               hide-bottom-space
-              class="full-width datepicker"
+              :label="`${'ลาตั้งแต่วันที่'}`"
               :model-value="
                 formData.dateLeaveStart != null
                   ? date2Thai(formData.dateLeaveStart)
                   : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
               :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
               <template v-slot:prepend>
@@ -264,16 +177,22 @@ const formattedSalary = computed(() => {
         </datepicker>
 
         <datepicker
+          v-model="formData.dateLeaveEnd"
           class="col-12 col-md-4 col-sm-6"
           menu-class-name="modalfix"
-          v-model="formData.dateLeaveEnd"
-          :locale="'th'"
           autoApply
           borderless
+          week-start="0"
+          :locale="'th'"
           :readonly="!formData.dateLeaveStart"
           :enableTimePicker="false"
-          week-start="0"
+          :min-date="
-          :min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
+            formData.dateLeaveStart
+              ? new Date(
+                  formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
+                )
+              : null
+          "
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -283,20 +202,20 @@ const formattedSalary = computed(() => {
           </template>
           <template #trigger>
             <q-input
+              ref="dateLeaveEndRef"
+              class="full-width datepicker"
               outlined
               dense
-              :readonly="!formData.dateLeaveStart"
               lazy-rules
-              ref="dateLeaveEndRef"
               bg-color="white"
               hide-bottom-space
-              class="full-width datepicker"
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formData.dateLeaveStart"
               :model-value="
                 formData.dateLeaveEnd != null
                   ? date2Thai(formData.dateLeaveEnd)
                   : null
               "
-              :label="`${'ลาถึงวันที่'}`"
               :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
@@ -310,6 +229,7 @@ const formattedSalary = computed(() => {
             </q-input>
           </template>
         </datepicker>
+
         <div class="col-12 col-md-4 col-sm-6">
           <p
             v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
@@ -318,116 +238,221 @@ const formattedSalary = computed(() => {
           >
             ระยะเวลา
             {{
-              calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+              calculateDurationYmd(
+                formData.dateLeaveStart,
+                formData.dateLeaveEnd
+              )
             }}
           </p>
         </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formData.dateGovernment"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="dateGovernmentRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  readonly
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formData.dateGovernment != null
+                      ? date2Thai(formData.dateGovernment)
+                      : null
+                  "
+                  :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
+              v-model="formData.birthday"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="birthdayRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    formData.birthday != null
+                      ? date2Thai(formData.birthday)
+                      : null
+                  "
+                  :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
-              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"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="formData.salaryText"
+              ref="salaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
               dense
               readonly
               outlined
-              bg-color="white"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-              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
+              v-model="formData.nameEducation"
               ref="nameEducationRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.nameEducation"
               label="ชื่อสถานศึกษา"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
             />
+
             <q-input
+              v-model="formData.degree"
               ref="degreeRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.degree"
               label="ชั้นปริญญา"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
             />
+
             <q-input
+              v-model="formData.study"
               ref="studyRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.study"
               label="ศึกษาวิชา"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
             />
+
             <q-input
+              v-model="formData.country"
               ref="countryRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.country"
               label="ประเทศ"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
             />
+
             <q-input
+              v-model="formData.capital"
               ref="capitalRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.capital"
               label="ด้วยทุน"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
             />
+
             <q-input
+              v-model="formData.tel"
+              ref="telRef"
               class="col-12 col-sm-6 col-md-4"
+              bg-color="white"
               dense
               outlined
-              bg-color="white"
-              ref="telRef"
-              v-model="formData.tel"
-              mask="(###)-###-####"
               unmasked-value
               hide-bottom-space
+              mask="(###)-###-####"
               label="หมายเลขโทรศัพท์ที่ติดต่อได้"
               :rules="[
                 (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
             />
+
             <q-input
+              v-model="formData.addressLeave"
               ref="addressLeaveRef"
               class="col-12"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.addressLeave"
               label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
               hide-bottom-space
               :rules="[
@@ -436,26 +461,25 @@ const formattedSalary = computed(() => {
             />
           </div>
         </div>
+
         <q-input
-          class="col-12 q-mt-sm"
-          dense
-          bg-color="white"
-          outlined
           v-model="formData.info"
+          class="col-12 q-mt-sm"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
           label="รายละเอียด"
         />
+
         <div class="col-12 col-sm-6">
           <q-file
-            ref="fileRef"
             v-model="formData.file"
-            dense
-            label="เอกสารประกอบ"
-            outlined
             bg-color="white"
+            dense
+            outlined
             multiple
-            lazy-rules
+            label="เอกสารประกอบ"
-            hide-bottom-space
-            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
           >
             <template v-slot:prepend>
               <q-icon name="attach_file" color="primary" />

src/modules/05_leave/componenst/Forms/10_TrainForm.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref,computed } from "vue";
+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, calculateDurationYmd} = mixin;
+const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
+  mixin;
 const edit = ref<boolean>(true);
 const props = defineProps({
   data: {
@@ -40,14 +41,12 @@ 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 = {
@@ -55,14 +54,12 @@ const formRef: FormRef10 = {
   dateLeaveEnd: dateLeaveEndRef,
   birthday: birthdayRef,
   dateGovernment: dateGovernmentRef,
-  salary: salaryRef,
   tel: telRef,
   addressLeave: addressLeaveRef,
   capital: capitalRef,
   country: countryRef,
   course: courseRef,
   location: locationRef,
-  file: fileRef,
   writeat: writeatRef,
 };
 
@@ -108,122 +105,26 @@ const formattedSalary = computed(() => {
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
         <q-input
+          v-model="formData.writeat"
           ref="writeatRef"
           class="col-12 col-sm-12"
+          bg-color="white"
           dense
           outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formData.writeat"
           label="เขียนที่"
+          hide-bottom-space
           :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>
 
         <datepicker
+          v-model="formData.dateLeaveStart"
           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"
+          :enableTimePicker="false"
+          :locale="'th'"
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -233,19 +134,19 @@ const formattedSalary = computed(() => {
           </template>
           <template #trigger>
             <q-input
-              outlined
+              ref="dateLeaveStartRef"
+              class="full-width datepicker"
               bg-color="white"
+              outlined
               dense
               lazy-rules
-              ref="dateLeaveStartRef"
               hide-bottom-space
-              class="full-width datepicker"
+              :label="`${'ลาตั้งแต่วันที่'}`"
               :model-value="
                 formData.dateLeaveStart != null
                   ? date2Thai(formData.dateLeaveStart)
                   : null
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
               :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
               <template v-slot:prepend>
@@ -261,16 +162,22 @@ const formattedSalary = computed(() => {
         </datepicker>
 
         <datepicker
+          v-model="formData.dateLeaveEnd"
           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"
+          :readonly="!formData.dateLeaveStart"
+          :locale="'th'"
+          :enableTimePicker="false"
+          :min-date="
+            formData.dateLeaveStart
+              ? new Date(
+                  formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
+                )
+              : null
+          "
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -280,20 +187,20 @@ const formattedSalary = computed(() => {
           </template>
           <template #trigger>
             <q-input
+              ref="dateLeaveEndRef"
+              class="full-width datepicker"
               outlined
               dense
-              :readonly="!formData.dateLeaveStart"
               lazy-rules
-              ref="dateLeaveEndRef"
               bg-color="white"
               hide-bottom-space
-              class="full-width datepicker"
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formData.dateLeaveStart"
               :model-value="
                 formData.dateLeaveEnd != null
                   ? date2Thai(formData.dateLeaveEnd)
                   : null
               "
-              :label="`${'ลาถึงวันที่'}`"
               :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
@@ -307,6 +214,7 @@ const formattedSalary = computed(() => {
             </q-input>
           </template>
         </datepicker>
+
         <div class="col-12 col-md-4 col-sm-6">
           <p
             v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
@@ -315,105 +223,205 @@ const formattedSalary = computed(() => {
           >
             ระยะเวลา
             {{
-              calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+              calculateDurationYmd(
+                formData.dateLeaveStart,
+                formData.dateLeaveEnd
+              )
             }}
           </p>
         </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formData.dateGovernment"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="dateGovernmentRef"
+                  class="full-width datepicker"
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formData.dateGovernment != null
+                      ? date2Thai(formData.dateGovernment)
+                      : null
+                  "
+                  :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
+              v-model="formData.birthday"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="birthdayRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    formData.birthday != null
+                      ? date2Thai(formData.birthday)
+                      : null
+                  "
+                  :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
-              ref="salaryRef"
-              class="col-12 col-sm-6 col-md-4"
-              dense
-              bg-color="white"
-              outlined
               v-model="formattedSalary"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
               label="เงินเดือนปัจจุบัน"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
             />
+
             <q-input
-              ref="salaryRef"
+              v-model="formData.salaryText"
-              class="col-12 col-sm-6 col-md-4"
+              class="col-12 col-sm-6 col-md-3"
               dense
               readonly
               outlined
               bg-color="white"
-              v-model="formData.salaryText"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-              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"
+              class="col-12 col-sm-6 col-md-4"
+              ref="courseRef"
+              bg-color="white"
+              dense
+              outlined
               label="ด้าน/หลักสูตร"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
             />
+
             <q-input
+              v-model="formData.location"
               ref="locationRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.location"
               label="ณ สถานที่"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
             />
+
             <q-input
+              v-model="formData.country"
               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
+              v-model="formData.capital"
               ref="capitalRef"
               class="col-12 col-sm-6 col-md-4"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.capital"
               label="ด้วยทุน"
               hide-bottom-space
               :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
             />
+
             <q-input
+              v-model="formData.tel"
               class="col-12 col-sm-6 col-md-4"
+              ref="telRef"
               dense
               outlined
-              bg-color="white"
-              ref="telRef"
-              v-model="formData.tel"
-              mask="(###)-###-####"
               unmasked-value
               hide-bottom-space
+              bg-color="white"
+              mask="(###)-###-####"
               label="หมายเลขโทรศัพท์ที่ติดต่อได้"
               :rules="[
                 (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
             />
+
             <q-input
+              v-model="formData.addressLeave"
               ref="addressLeaveRef"
               class="col-12"
-              dense
               bg-color="white"
+              dense
               outlined
-              v-model="formData.addressLeave"
               label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
               hide-bottom-space
               :rules="[
@@ -422,26 +430,25 @@ const formattedSalary = computed(() => {
             />
           </div>
         </div>
+
         <q-input
-          class="col-12 q-mt-sm"
-          dense
-          bg-color="white"
-          outlined
           v-model="formData.info"
+          class="col-12 q-mt-sm"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
           label="รายละเอียด"
         />
+
         <div class="col-12 col-sm-6">
           <q-file
-            ref="fileRef"
             v-model="formData.file"
-            dense
-            label="เอกสารประกอบ"
-            outlined
             bg-color="white"
+            dense
+            outlined
             multiple
-            lazy-rules
+            label="เอกสารประกอบ"
-            hide-bottom-space
-            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
           >
             <template v-slot:prepend>
               <q-icon name="attach_file" color="primary" />

src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue

@@ -1,13 +1,24 @@
 <script setup lang="ts">
 import { reactive, ref, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useQuasar } from "quasar";
+import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin;
+const { date2Thai, dialogConfirm } = mixin;
+
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
+const files = ref<any>(null);
+const filesUpload = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
     type: Array,
@@ -18,8 +29,8 @@ const props = defineProps({
     default: () => "",
   },
 });
-const files = ref<any>(null);
+
-const filesUpload = ref<any>(null);
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
   writeat: "",
   dateLeaveStart: null,
@@ -28,21 +39,16 @@ const formData = reactive<any>({
   info: "",
 });
 
-const dateLeaveStartRef = ref<object | null>(null);
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-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];
@@ -56,25 +62,24 @@ function onValidate() {
     onSubmit();
   }
 }
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      if (isSave.value === false) {
+      props.onSubmit();
-        props.onSubmit();
+      console.log(formData);
-        console.log(formData);
+      isSave.value = true;
-        isSave.value = true;
-      } else {
-        console.log("savefile อัปโหลด", filesUpload.value);
-      }
     },
-    !isSave.value ? "ยืนยันการบันทึกข้อมูล" : "ยืนยันการอัพโหลดไฟล์",
+    "ยืนยันการบันทึกข้อมูล",
-    !isSave.value
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-      ? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-      : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
   );
 }
 
+/** ฟังชั่น อัปโหลด
+ * consolelog ไว้ก่อน
+ */
 function upLoadFile() {
   console.log("upload", filesUpload.value);
 }
@@ -87,25 +92,26 @@ function upLoadFile() {
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
         <q-input
-          ref="writeatRef"
+          v-model="formData.writeat"
           class="col-12 col-sm-12"
+          ref="writeatRef"
           dense
           outlined
           bg-color="white"
-          hide-bottom-space
-          v-model="formData.writeat"
           label="เขียนที่"
+          hide-bottom-space
           :rules="[(val) => !!val || `${'เขียนที่'}`]"
         />
+
         <datepicker
+          v-model="formData.dateLeaveStart"
           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"
+          :enableTimePicker="false"
+          :locale="'th'"
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -115,13 +121,13 @@ function upLoadFile() {
           </template>
           <template #trigger>
             <q-input
-              outlined
+              ref="dateLeaveStartRef"
+              class="full-width datepicker"
               bg-color="white"
+              outlined
               dense
               lazy-rules
-              ref="dateLeaveStartRef"
               hide-bottom-space
-              class="full-width datepicker"
               :model-value="
                 formData.dateLeaveStart != null
                   ? date2Thai(formData.dateLeaveStart)
@@ -143,15 +149,15 @@ function upLoadFile() {
         </datepicker>
 
         <datepicker
+          v-model="formData.dateLeaveEnd"
           class="col-12 col-md-4 col-sm-6"
           menu-class-name="modalfix"
-          v-model="formData.dateLeaveEnd"
-          :locale="'th'"
           autoApply
           borderless
+          week-start="0"
+          :locale="'th'"
           :readonly="!formData.dateLeaveStart"
           :enableTimePicker="false"
-          week-start="0"
           :min-date="
             formData.dateLeaveStart
               ? new Date(
@@ -168,14 +174,14 @@ function upLoadFile() {
           </template>
           <template #trigger>
             <q-input
+              ref="dateLeaveEndRef"
+              class="full-width datepicker"
               outlined
               dense
-              :readonly="!formData.dateLeaveStart"
               lazy-rules
-              ref="dateLeaveEndRef"
               bg-color="white"
               hide-bottom-space
-              class="full-width datepicker"
+              :readonly="!formData.dateLeaveStart"
               :model-value="
                 formData.dateLeaveEnd != null
                   ? date2Thai(formData.dateLeaveEnd)
@@ -195,40 +201,25 @@ function upLoadFile() {
             </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"
-          >
-            ระยะเวลา
-            {{
-              calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
-            }}
-          </p>
-        </div>
 
         <q-input
-          class="col-12 q-mt-sm"
-          dense
-          bg-color="white"
-          outlined
           v-model="formData.info"
-          label="รายละเอียด"
+          class="col-12 q-mt-sm"
+          bg-color="white"
+          dense
+          outlined
           type="textarea"
+          label="รายละเอียด"
         />
+
         <div class="col-12 col-sm-6">
           <q-file
-            ref="fileRef"
             v-model="formData.file"
-            dense
-            label="เอกสารประกอบ"
-            outlined
             bg-color="white"
+            dense
+            outlined
             multiple
-            lazy-rules
+            label="เอกสารประกอบ"
-            hide-bottom-space
-            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
           >
             <template v-slot:prepend>
               <q-icon name="attach_file" color="primary" />
@@ -262,7 +253,7 @@ function upLoadFile() {
     <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">
@@ -281,7 +272,7 @@ function upLoadFile() {
           <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"
@@ -290,6 +281,7 @@ function upLoadFile() {
                 outlined
                 bg-color="white"
                 multiple
+                accept="application/pdf"
               >
                 <template v-slot:prepend>
                   <q-icon name="attach_file" color="primary" />

src/modules/05_leave/interface/request/AddAbsence.ts

@@ -27,7 +27,6 @@ interface FormRef06 {
     [key: string]: any;
 }
 interface FormRef07 {
-    file: object | null
     writeat: object | null
     government: object | null
     dateLeaveStart: object | null
@@ -37,7 +36,6 @@ interface FormRef07 {
 interface FormRef08 {
     dateLeaveStart: object | null
     dateLeaveEnd: object | null
-    file: object | null
     writeat: object | null
     received: object | null
     at: object | null
@@ -59,7 +57,6 @@ interface FormRef09 {
     nameEducation: object | null
     degree: object | null
     study: object | null
-    file: object | null
     writeat: object | null
     [key: string]: any;
 }
@@ -68,21 +65,18 @@ interface FormRef10 {
     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;
 }