From 93cf36ad16525e76570950864c8d227d398871c3 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 9 Apr 2024 15:11:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AF=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B9=84=E0=B8=94?=
 =?UTF-8?q?=E0=B9=89=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=97=E0=B8=B8=E0=B8=99?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8=E0=B8=B6=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B2/=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A1=20=3D>=20btn=20updateStatus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/scholarship/DetailView.vue     | 459 ++++++++++--------
 1 file changed, 247 insertions(+), 212 deletions(-)

diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index bc500b20c..fcf2317b1 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -34,6 +34,7 @@ const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม
 const scholarshipId = ref<string | null>(
   route.params.id ? route.params.id.toLocaleString() : null
 );
+const isStatus = ref<string>();
 const modalDialogGov = ref<boolean>(false);
 
 const budgetSourceOp = ref<DataOption[]>([
@@ -226,8 +227,11 @@ function fetchDataDetail(id: string) {
     });
 }
 
+function fetchStatus(id: string) {
+  isStatus.value = "PENDING";
+}
+
 function onSubmit() {
- 
   dialogConfirm($q, async () => {
     showLoader();
     formBody.budgetApprove =
@@ -305,14 +309,17 @@ function changeStartDate(type: string) {
   }
 }
 
+function onClickUpdateStatus(type: string) {
+  dialogConfirm($q, () => {
+    isStatus.value = type;
+  });
+}
+
 function updateTotalPeriod(
   startDate: any,
   endDate: any,
   toDo: boolean = false
 ) {
-  console.log(startDate);
-  console.log(endDate);
-
   if (!toDo && startDate && endDate) {
     const start = new Date(startDate);
     const end = new Date(endDate);
@@ -367,22 +374,50 @@ function upDate(data: DataPerson) {
 }
 
 onMounted(() => {
-  scholarshipId.value && fetchDataDetail(scholarshipId.value);
+  if (scholarshipId.value) {
+    fetchDataDetail(scholarshipId.value);
+    fetchStatus(scholarshipId.value);
+  }
 });
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      flat
-      round
-      dense
-      class="q-mr-sm"
-      icon="mdi-arrow-left"
-      color="primary"
-      @click="router.go(-1)"
-    />
-    {{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
+  <div class="row items-center">
+    <div class="toptitle text-dark items-center">
+      <q-btn
+        flat
+        round
+        dense
+        class="q-mr-sm"
+        icon="mdi-arrow-left"
+        color="primary"
+        @click="router.go(-1)"
+      />
+      {{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
+    </div>
+    <q-space />
+    <div class="row" v-if="scholarshipId">
+      <div class="q-gutter-sm" v-if="isStatus === 'PENDING'">
+        <q-btn
+          dense
+          unelevated
+          color="green"
+          label="สำเร็จการศึกษา"
+          @click="onClickUpdateStatus('GRADUATE')"
+        />
+        <q-btn
+          dense
+          unelevated
+          color="red"
+          label="ไม่จบการศึกษา"
+          @click="onClickUpdateStatus('NOTGRADUATE')"
+        />
+      </div>
+      <div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
+        {{ isStatus === "GRADUATE" ? "สำเร็จการศึกษา" : "ไม่จบการศึกษา" }}
+      </div>
+    </div>
   </div>
+
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card flat bordered class="col-12">
       <div class="q-pa-md">
@@ -471,7 +506,7 @@ onMounted(() => {
                 :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
                 hide-bottom-space
                 :rules="[
-                  (val) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
+                  (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                 ]"
               >
                 <template v-slot:prepend>
@@ -500,9 +535,9 @@ onMounted(() => {
             emit-value
             map-options
             :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
-          ]"
+              (val: string) =>
+                !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
+            ]"
           />
         </div>
         <div class="col-6">
@@ -516,9 +551,9 @@ onMounted(() => {
             mask="###,###,###,###,###,###"
             reverse-fill-mask
             :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
-              ]"
+              (val: string) =>
+                !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
+            ]"
           />
         </div>
         <div class="col-3">
@@ -530,9 +565,9 @@ onMounted(() => {
             label="เลขที่หนังสิออนุมัติ"
             hide-bottom-space
             :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
-              ]"
+              (val: string) =>
+                !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
+            ]"
           />
         </div>
         <div class="col-3">
@@ -558,9 +593,9 @@ onMounted(() => {
                 :label="`${'ลงวันที่'}`"
                 hide-bottom-space
                 :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่'}`,
-        ]"
+                  (val: string) =>
+                    !!val || `${'กรุณาเลือกวันที่'}`,
+                ]"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -599,9 +634,9 @@ onMounted(() => {
                 :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
                 hide-bottom-space
                 :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
-        ]"
+                  (val: string) =>
+                    !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
+                ]"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -634,9 +669,9 @@ onMounted(() => {
             hide-bottom-space
             type="textarea"
             :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
-          ]"
+              (val: string) =>
+                !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
+            ]"
           />
         </div>
         <div class="col-9">
@@ -654,9 +689,9 @@ onMounted(() => {
             class="inputgreen"
             label="เลือกประเภททุน"
             :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกประเภททุน'}`,
-        ]"
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
           />
         </div>
         <div
@@ -680,9 +715,9 @@ onMounted(() => {
             map-options
             label="ประเภททุน"
             :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกประเภททุน'}`,
-        ]"
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
           />
         </div>
         <div
@@ -703,9 +738,9 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="formBody.contractNo"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
+                ]"
               />
             </div>
             <div class="col-2">
@@ -732,9 +767,9 @@ onMounted(() => {
                     :label="`${'ลงวันที่'}`"
                     hide-bottom-space
                     :rules="[
-      (val:string) =>
-        !!val || `${'กรุณาเลือกวันที่'}`,
-    ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -758,7 +793,7 @@ onMounted(() => {
                 v-model="formBody.reportBackNo"
                 label="เลขที่หนังสือรายงานตัวกลับ"
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
+                  (val: string) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
                 ]"
               />
             </div>
@@ -787,9 +822,9 @@ onMounted(() => {
                     :label="`${'ลงวันที่'}`"
                     hide-bottom-space
                     :rules="[
-      (val:string) =>
-        !!val || `${'กรุณาเลือกวันที่'}`,
-    ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -828,9 +863,9 @@ onMounted(() => {
                     :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
                     hide-bottom-space
                     :rules="[
-      (val:string) =>
-        !!val || `${'กรุณาเลือกวันที่'}`,
-    ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -917,9 +952,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.degreeLevel"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกระดับปริญญา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -932,9 +967,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.course"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -947,9 +982,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.field"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสาขาวิชา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -962,9 +997,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.faculty"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกคณะ'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกคณะ'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -977,9 +1012,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.educationalInstitution"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1009,9 +1044,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการศึกษา'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษา'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษา'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1050,9 +1085,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการศึกษา'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษา'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษา'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1076,9 +1111,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyPlace"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1091,9 +1126,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyTopic"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1123,9 +1158,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1166,9 +1201,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1193,9 +1228,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyCountry"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1208,9 +1243,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyAbroadTopic"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1242,9 +1277,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1291,9 +1326,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1317,9 +1352,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.totalPeriod"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+                    ]"
                   />
                 </div>
               </div>
@@ -1341,9 +1376,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.course"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1356,9 +1391,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.field"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสาขา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสาขา'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1371,9 +1406,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.educationalInstitution"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1403,9 +1438,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1444,9 +1479,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1470,9 +1505,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyPlace"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1485,9 +1520,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyTopic"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1517,9 +1552,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1566,9 +1601,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1592,9 +1627,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.totalPeriod"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกระยะเวลาในการฝึกอบรม'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกระยะเวลาในการฝึกอบรม'}`,
+                    ]"
                   />
                 </div>
               </div>
@@ -1616,9 +1651,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.course"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1631,9 +1666,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.field"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสาขา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสาขา'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1646,9 +1681,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.educationalInstitution"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1678,9 +1713,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1719,9 +1754,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1745,9 +1780,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyPlace"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1760,9 +1795,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyTopic"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1792,9 +1827,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1842,9 +1877,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1869,9 +1904,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyCountry"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-6">
@@ -1884,9 +1919,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.studyAbroadTopic"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+                    ]"
                   />
                 </div>
                 <div class="col-3">
@@ -1918,9 +1953,9 @@ onMounted(() => {
                         :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1967,9 +2002,9 @@ onMounted(() => {
                         :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
                         hide-bottom-space
                         :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
-        ]"
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
+                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -1993,9 +2028,9 @@ onMounted(() => {
                     class="inputgreen"
                     v-model="formBody.totalPeriod"
                     :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
-      ]"
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+                    ]"
                   />
                 </div>
               </div>
@@ -2019,9 +2054,9 @@ onMounted(() => {
                 label="หลักสูตรการฝึกอบรม"
                 v-model="formBody.course"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                ]"
               />
             </div>
             <div class="col-6">
@@ -2034,8 +2069,8 @@ onMounted(() => {
                 label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                 v-model="formBody.educationalInstitution"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                 ]"
               />
             </div>
@@ -2065,9 +2100,9 @@ onMounted(() => {
                     :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                     hide-bottom-space
                     :rules="[
-      (val:string) =>
-        !!val || `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม'}`,
-    ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -2106,9 +2141,9 @@ onMounted(() => {
                     :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                     hide-bottom-space
                     :rules="[
-      (val:string) =>
-        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
-    ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -2133,9 +2168,9 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="formBody.studyPlace"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                ]"
               />
             </div>
             <div class="col-6">
@@ -2148,9 +2183,9 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="formBody.studyTopic"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                ]"
               />
             </div>
             <div class="col-3">
@@ -2180,9 +2215,9 @@ onMounted(() => {
                     :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
                     hide-bottom-space
                     :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
-        ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -2229,9 +2264,9 @@ onMounted(() => {
                     :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
                     hide-bottom-space
                     :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
-        ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -2256,9 +2291,9 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="formBody.studyCountry"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+                ]"
               />
             </div>
             <div class="col-6">
@@ -2271,9 +2306,9 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="formBody.studyAbroadTopic"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+                ]"
               />
             </div>
             <div class="col-3">
@@ -2303,9 +2338,9 @@ onMounted(() => {
                     :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
                     hide-bottom-space
                     :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
-        ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -2352,9 +2387,9 @@ onMounted(() => {
                     :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
                     hide-bottom-space
                     :rules="[
-          (val:string) =>
-            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
-        ]"
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
+                    ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -2378,9 +2413,9 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="formBody.totalPeriod"
                 :rules="[
-        (val:string) =>
-          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
-      ]"
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+                ]"
               />
             </div>
           </div>