จัดโค้ด ลาอุปสมบท

src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useQuasar } from "quasar";
+import type { FormRef06 } 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);
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
     type: Array,
@@ -17,7 +22,22 @@ const props = defineProps({
     default: () => "",
   },
 });
-const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const telRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+const birthdayRef = ref<object | null>(null);
+const governmentRef = ref<object | null>(null);
+const totalLeaveRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const dateOrdinationRef = ref<object | null>(null);
+const dateLeaveStartRef = ref<object | null>(null);
+const addressMeasureRef = ref<object | null>(null);
+const addressBuddhistRef = ref<object | null>(null);
+const measureLocationNameRef = ref<object | null>(null);
+const buddhistLocationNameRef = ref<object | null>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
   writeat: "",
   government: new Date(),
@@ -31,22 +51,11 @@ const formData = reactive<any>({
   addressMeasure: "",
   buddhistLocationName: "",
   addressBuddhist: "",
-  monk: "",
+  monk: "never",
+  file: null,
 });
 
-const writeatRef = ref<object | null>(null);
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-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,
@@ -62,9 +71,9 @@ const formRef: FormRef06 = {
   addressBuddhist: addressBuddhistRef,
 };
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
   const hasError = [];
-
   for (const key in formRef) {
     if (Object.prototype.hasOwnProperty.call(formRef, key)) {
       const property = formRef[key];
@@ -78,6 +87,8 @@ function onValidate() {
     onSubmit();
   }
 }
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -91,6 +102,7 @@ function onSubmit() {
 }
 </script>
 
+<!-- ฟอร์ม ลาอุปสมบท -->
 <template>
   <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
   <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
@@ -108,102 +120,7 @@ function onSubmit() {
           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"
@@ -291,6 +208,7 @@ function onSubmit() {
             </q-input>
           </template>
         </datepicker>
+
         <q-input
           class="col-12 col-md-4 col-sm-6"
           dense
@@ -302,9 +220,105 @@ function onSubmit() {
           readonly
         />
 
-        <div class="q-pl-sm text-weight-bold text-dark col-12">
+        <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
+            >
+              <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
+                  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
+              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
+                  ref="birthdayRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  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>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12"> เคยบวชหรือไม่ </div>
         <div class="col-12">
           <q-radio
             v-model="formData.monk"
@@ -319,6 +333,7 @@ function onSubmit() {
             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">
@@ -365,6 +380,7 @@ function onSubmit() {
                 </q-input>
               </template>
             </datepicker>
+
             <q-input
               class="col-12 col-sm-6 col-md-4"
               dense
@@ -392,7 +408,7 @@ function onSubmit() {
             />
           </div>
         </div>
-
+        
         <q-input
           class="col-12 q-mt-sm"
           dense
@@ -404,9 +420,8 @@ function onSubmit() {
           :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
           type="textarea"
         />
-        <div class="q-pl-sm text-weight-bold text-dark col-12">
+
-          สถานที่จำพรรษา
+        <div class="q-pl-sm text-weight-bold text-dark col-12"> สถานที่จำพรรษา </div>
-        </div>
         <q-input
           class="col-12 col-sm-6 col-md-4"
           dense
@@ -418,6 +433,7 @@ function onSubmit() {
           label="ชื่อวัด"
           :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
         />
+
         <q-input
           class="col-12"
           dense
@@ -428,7 +444,25 @@ function onSubmit() {
           label="ที่อยู่"
           :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
           type="textarea"
+          hide-bottom-space
         />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="fileRef"
+            v-model="formData.file"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
         <div class="col-12 row" v-if="!edit">
           <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
             <div class="q-pl-sm text-weight-bold text-dark">
@@ -451,7 +485,9 @@ function onSubmit() {
         </div>
       </div>
     </q-card>
+
     <q-separator class="q-mt-sm" />
+    
     <div class="row col-12 q-pt-md">
       <q-space />
       <q-btn

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

@@ -1,12 +1,24 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useQuasar } from "quasar";
+import type { FormRef07 } 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 fileRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+const governmentRef = ref<object | null>(null);
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
     type: Array,
@@ -17,7 +29,8 @@ const props = defineProps({
     default: () => "",
   },
 });
-const files = ref<any>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
   writeat: "",
   government: new Date(),
@@ -28,12 +41,7 @@ const formData = reactive<any>({
   file: null,
 });
 
-const fileRef = ref<object | null>(null);
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const writeatRef = ref<object | null>(null);
-const governmentRef = ref<object | null>(null);
-const dateLeaveStartRef = ref<object | null>(null);
-const dateLeaveEndRef = ref<object | null>(null);
-
 const formRef: FormRef07 = {
   file: fileRef,
   writeat: writeatRef,
@@ -42,9 +50,9 @@ const formRef: FormRef07 = {
   dateLeaveEnd: dateLeaveEndRef,
 };
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
   const hasError = [];
-
   for (const key in formRef) {
     if (Object.prototype.hasOwnProperty.call(formRef, key)) {
       const property = formRef[key];
@@ -58,6 +66,8 @@ function onValidate() {
     onSubmit();
   }
 }
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -88,6 +98,7 @@ function onSubmit() {
           label="เขียนที่"
           :rules="[(val) => !!val || `${'เขียนที่'}`]"
         />
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <datepicker
@@ -139,6 +150,7 @@ function onSubmit() {
             </datepicker>
           </div>
         </div>
+
         <datepicker
           class="col-12 col-md-4 col-sm-6"
           menu-class-name="modalfix"
@@ -226,6 +238,7 @@ function onSubmit() {
             </q-input>
           </template>
         </datepicker>
+
         <q-input
           class="col-12 col-md-4 col-sm-6"
           dense
@@ -237,9 +250,7 @@ function onSubmit() {
           readonly
         />
 
-        <div class="q-pl-sm text-weight-bold text-dark col-12">
+        <div class="q-pl-sm text-weight-bold text-dark col-12"> เคยไปประกอบพิธีฮัจย์หรือไม่ </div>
-          เคยไปประกอบพิธีฮัจย์หรือไม่
-        </div>
         <div class="col-12">
           <q-radio
             v-model="formData.monk"
@@ -254,6 +265,7 @@ function onSubmit() {
             checked-icon="task_alt"
           />
         </div>
+
         <q-input
           class="col-12 q-mt-sm"
           dense
@@ -262,6 +274,7 @@ function onSubmit() {
           v-model="formData.info"
           label="รายละเอียด"
         />
+
         <div class="col-12 col-sm-6">
           <q-file
             ref="fileRef"