From 247989c9e853364d3228b98d7b4ef5d3adfda450 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Nov 2024 11:23:34 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2=E0=B8=9A=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=84=E0=B8=84=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/history/AddPage.vue            |   14 +-
 .../components/history/DialogGov.vue          |    4 +-
 .../components/historyEmployee/AddPage.vue    |    6 +-
 .../components/scholarship/DetailView.vue     | 4700 +++++++++--------
 .../15_development/views/EmployeeHistory.vue  |   14 +-
 src/modules/15_development/views/History.vue  |   16 +-
 .../15_development/views/Scholarship.vue      |    2 -
 7 files changed, 2387 insertions(+), 2369 deletions(-)

diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 042e43f47..1ad00f9df 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -60,9 +60,9 @@ function getClass() {
 }
 
 /** ดึงข้อมูล */
-function fetchData() {
+async function fetchData() {
   showLoader();
-  http
+  await http
     .get(config.API.developmentHistoryListByid("officer", id.value))
     .then((res) => {
       const data = res.data.result;
@@ -104,9 +104,9 @@ function fetchData() {
 }
 
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
-onMounted(() => {
+onMounted(async () => {
   if (id.value) {
-    fetchData();
+    await fetchData();
   }
 });
 </script>
@@ -232,7 +232,11 @@ onMounted(() => {
                 </div>
 
                 <div class="col-12 col-sm-12 col-md-7">
-                  {{ Number(formMainProject.year) + 543 ?? "-" }}
+                  {{
+                    formMainProject.year
+                      ? Number(formMainProject.year) + 543
+                      : "-"
+                  }}
                 </div>
               </div>
               <div class="row col-12">
diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
index 96541bfaa..753b7ecb2 100644
--- a/src/modules/15_development/components/history/DialogGov.vue
+++ b/src/modules/15_development/components/history/DialogGov.vue
@@ -254,7 +254,6 @@ watch(
               :options="govOp"
               map-options
               emit-value
-              :class="getClass()"
               @update:model-value="inputSearch = ''"
             />
           </div>
@@ -264,7 +263,6 @@ watch(
               outlined
               label="ค้นหา"
               v-model="inputSearch"
-              :class="getClass()"
               :mask="search === 'citizenId' ? '#############' : undefined"
             />
           </div>
@@ -274,7 +272,7 @@ watch(
               class="full-width full-height"
               unelevated
               color="teal"
-              @click="searchFilter()"
+              @click="(formFilter.page = 1), searchFilter()"
             >
             </q-btn>
           </div>
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index 4266de2b1..8319c75e2 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -235,7 +235,11 @@ onMounted(() => {
                 </div>
 
                 <div class="col-12 col-sm-12 col-md-7">
-                  {{ Number(formMainProject.year) + 543 ?? "-" }}
+                  {{
+                    formMainProject.year
+                      ? Number(formMainProject.year) + 543
+                      : "-"
+                  }}
                 </div>
               </div>
               <div class="row col-12">
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 438cdacbe..463bdf5c8 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -173,9 +173,9 @@ const formBody = reactive<FormsSholarship>({
  * ดึงข้อมูลรายละเอียด
  * @param id จาก id
  */
-function fetchDataDetail(id: string) {
+async function fetchDataDetail(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.devScholarshipByid(id))
     .then(async (res) => {
       const data: DataSholarship = await res.data.result;
@@ -303,7 +303,7 @@ function onSubmit() {
       await http[method](url, formBody);
 
       scholarshipId.value
-        ? fetchDataDetail(scholarshipId.value)
+        ? await fetchDataDetail(scholarshipId.value)
         : router.push("/development/scholarship");
       success($q, "บันทึกข้อมูลสำเร็จ");
     } catch (e) {
@@ -374,9 +374,9 @@ function onClickUpdateStatus(type: string) {
       showLoader();
       http
         .get(config.API.devScholarshipStatus(scholarshipId.value, type))
-        .then(() => {
+        .then(async () => {
           if (scholarshipId.value) {
-            fetchDataDetail(scholarshipId.value);
+            await fetchDataDetail(scholarshipId.value);
           }
         })
         .catch((err) => {
@@ -474,17 +474,12 @@ function upDate(data: DataPerson) {
  * @param id id ของรายการ
  */
 async function checkFileBackReceived(id: string) {
-  showLoader();
   await http
     .get(
       config.API.file("ระบบพัฒนาบุคคล", "ฟอร์มรายงานตัวกลับเข้ารับราชการ", id)
     )
     .then(async (res) => {
       fileBackReceived.value = res.data.length > 0 ? res.data[0].fileName : "";
-    })
-    .catch(() => {})
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -560,10 +555,10 @@ const convertCourse = () => {
 };
 
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
-onMounted(() => {
+onMounted(async () => {
   if (scholarshipId.value) {
-    fetchDataDetail(scholarshipId.value);
-    checkFileBackReceived(scholarshipId.value);
+    await fetchDataDetail(scholarshipId.value);
+    await checkFileBackReceived(scholarshipId.value);
   }
 });
 </script>
@@ -621,395 +616,153 @@ onMounted(() => {
     </div>
   </div>
 
-  <q-card flat bordered class="col-12">
-    <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <div class="q-pa-md">
-        <q-card bordered tyle="border: 1px solid #d6dee1">
-          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            ข้อมูลราชการ
-            <q-btn
-              v-if="!checkRouteDetail"
-              flat
-              dense
-              icon="add"
-              color="primary"
-              label="เลือกข้าราชการ"
-              @click="onSelectGov(true)"
-            >
-              <q-tooltip>เพิ่ม</q-tooltip>
-            </q-btn>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
-            <div class="col">
-              <div class="row q-col-gutter-md">
-                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                <div class="col-8 text-weight-medium">
-                  {{ dataPerson.citizenId }}
+  <div class="q-pa-sm">
+    <q-card flat bordered class="col-12">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <div class="q-pa-md">
+          <q-card bordered tyle="border: 1px solid #d6dee1">
+            <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              ข้อมูลราชการ
+              <q-btn
+                v-if="!checkRouteDetail"
+                flat
+                dense
+                icon="add"
+                color="primary"
+                label="เลือกข้าราชการ"
+                @click="onSelectGov(true)"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
+              <div class="col">
+                <div class="row q-col-gutter-md">
+                  <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.citizenId }}
+                  </div>
+                  <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.name }}
+                  </div>
+                  <div class="col-4 text-grey">ตำแหน่ง</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.position }}
+                  </div>
+                  <div class="col-4 text-grey">ตำแหน่งประเภท</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.type }}
+                  </div>
                 </div>
-                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                <div class="col-8 text-weight-medium">
-                  {{ dataPerson.name }}
-                </div>
-                <div class="col-4 text-grey">ตำแหน่ง</div>
-                <div class="col-8 text-weight-medium">
-                  {{ dataPerson.position }}
-                </div>
-                <div class="col-4 text-grey">ตำแหน่งประเภท</div>
-                <div class="col-8 text-weight-medium">
-                  {{ dataPerson.type }}
+              </div>
+              <div class="col">
+                <div class="row q-col-gutter-md">
+                  <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.level }}
+                  </div>
+                  <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.positionSide }}
+                  </div>
+                  <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                  <div class="col-8 text-weight-medium">
+                    {{ dataPerson.org }}
+                  </div>
                 </div>
               </div>
             </div>
-            <div class="col">
-              <div class="row q-col-gutter-md">
-                <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                <div class="col-8 text-weight-medium">
-                  {{ dataPerson.level }}
-                </div>
-                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                <div class="col-8 text-weight-medium">
-                  {{ dataPerson.positionSide }}
-                </div>
-                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                <div class="col-8 text-weight-medium">{{ dataPerson.org }}</div>
-              </div>
+            <div class="row col-12 q-pa-md" v-else>
+              <q-banner class="bg-grey-3 text-black col-12 text-center">
+                เลือกข้าราชการ
+              </q-banner>
             </div>
-          </div>
-          <div class="row col-12 q-pa-md" v-else>
-            <q-banner class="bg-grey-3 text-black col-12 text-center">
-              เลือกข้าราชการ
-            </q-banner>
-          </div>
-        </q-card>
-      </div>
-
-      <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
-        <div class="col-9">
-          <q-select
-            :class="classInput(!checkRouteDetail)"
-            :readonly="checkRouteDetail"
-            dense
-            outlined
-            hide-bottom-space
-            lazy-rules
-            v-model="formBody.scholarshipType"
-            :options="scholarshipTypeOp"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            label="เลือกประเภททุน"
-            :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกประเภททุน'}`,
-            ]"
-          />
-        </div>
-        <div
-          class="col-3"
-          v-if="
-            formBody.scholarshipType !== '' &&
-            formBody.scholarshipType !== 'EXECUTIVE' &&
-            formBody.scholarshipType !== 'RESEARCH'
-          "
-        >
-          <q-select
-            :readonly="checkRouteDetail"
-            dense
-            outlined
-            hide-bottom-space
-            lazy-rules
-            :class="classInput(!checkRouteDetail)"
-            v-model="formBody.fundType"
-            :options="fundTypeOp"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            label="ประเภททุน"
-            :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกประเภททุน'}`,
-            ]"
-          />
+          </q-card>
         </div>
 
-        <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
-          <q-radio
-            :disable="checkRouteDetail"
-            v-model="formBody.planType"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="INPLAN"
-            label="ในแผน ฯ"
-            dense
-          />
-          <q-radio
-            :disable="checkRouteDetail"
-            v-model="formBody.planType"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="OUTPLAN"
-            label="นอกแผน ฯ"
-            dense
-            class="q-pl-sm"
-          />
-        </div>
-
-        <div class="row col-12 q-col-gutter-md">
-          <div class="col-3">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="formBody.scholarshipYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              :readonly="checkRouteDetail"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  :readonly="checkRouteDetail"
-                  dense
-                  outlined
-                  :class="classInput(!checkRouteDetail)"
-                  :model-value="
-                    formBody.scholarshipYear
-                      ? Number(formBody.scholarshipYear) + 543
-                      : null
-                  "
-                  :label="`${
-                    formBody.scholarshipType === 'RESEARCH'
-                      ? 'ปีงบประมาณที่ได้รับอนุมัติ '
-                      : 'ปีงบประมาณที่ได้รับทุน'
-                  }`"
-                  hide-bottom-space
-                  :rules="[
-                  (val: string) => !!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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+        <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
+          <div class="col-9">
             <q-select
+              :class="classInput(!checkRouteDetail)"
               :readonly="checkRouteDetail"
               dense
               outlined
-              :class="classInput(!checkRouteDetail)"
-              label="แหล่งงบประมาณ"
               hide-bottom-space
-              v-model="formBody.budgetSource"
-              :options="budgetSourceOp"
+              lazy-rules
+              v-model="formBody.scholarshipType"
+              :options="scholarshipTypeOp"
               option-label="name"
               option-value="id"
               emit-value
               map-options
+              label="เลือกประเภททุน"
               :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
-            ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              :readonly="checkRouteDetail"
-              dense
-              outlined
-              hide-bottom-space
-              :class="classInput(!checkRouteDetail)"
-              v-model="formBody.budgetApprove"
-              label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
-              mask="###,###,###,###,###,###"
-              reverse-fill-mask
-              :rules="[
-                (val: any) => {
-                  if (!val && !formBody.isNoUseBudget) {
-                    return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
-                  }
-                  return true;
-                },
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกประเภททุน'}`,
               ]"
             />
           </div>
-          <div class="col-3">
-            <q-checkbox
-              :disable="checkRouteDetail"
-              keep-color
-              color="primary"
-              v-model="formBody.isNoUseBudget"
-              label="ไม่ใช้งบประมาณ"
-            />
-          </div>
-        </div>
-
-        <div class="row col-12 q-col-gutter-md">
-          <div class="col-3">
-            <q-input
+          <div
+            class="col-3"
+            v-if="
+              formBody.scholarshipType !== '' &&
+              formBody.scholarshipType !== 'EXECUTIVE' &&
+              formBody.scholarshipType !== 'RESEARCH'
+            "
+          >
+            <q-select
               :readonly="checkRouteDetail"
               dense
               outlined
-              :class="classInput(!checkRouteDetail)"
-              v-model="formBody.bookNo"
-              label="เลขที่หนังสืออนุมัติ"
               hide-bottom-space
+              lazy-rules
+              :class="classInput(!checkRouteDetail)"
+              v-model="formBody.fundType"
+              :options="fundTypeOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              label="ประเภททุน"
               :rules="[
-              (val: string) =>
-                !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
-            ]"
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกประเภททุน'}`,
+              ]"
             />
           </div>
-          <div class="col-3">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="formBody.bookNoDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              :readonly="checkRouteDetail"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  :readonly="checkRouteDetail"
-                  dense
-                  outlined
-                  :class="classInput(!checkRouteDetail)"
-                  :model-value="
-                    formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
-                  "
-                  :label="`${'ลงวันที่'}`"
-                  hide-bottom-space
-                  :rules="[
-                  (val: string) =>
-                    !!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 class="col-3">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="formBody.bookApproveDate"
-              :locale="'th'"
-              autoApply
-              :readonly="checkRouteDetail"
-              :enableTimePicker="false"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  :readonly="checkRouteDetail"
-                  outlined
-                  :class="classInput(!checkRouteDetail)"
-                  :model-value="
-                    formBody.bookApproveDate
-                      ? date2Thai(formBody.bookApproveDate)
-                      : null
-                  "
-                  :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                  hide-bottom-space
-                  :rules="[
-                  (val: string) =>
-                    !!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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
-            <q-checkbox
+
+          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+            <q-radio
               :disable="checkRouteDetail"
-              keep-color
-              color="primary"
-              v-model="formBody.useOfficialTime"
-              label="ใช้เวลาราชการ"
+              v-model="formBody.planType"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="INPLAN"
+              label="ในแผน ฯ"
+              dense
+            />
+            <q-radio
+              :disable="checkRouteDetail"
+              v-model="formBody.planType"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="OUTPLAN"
+              label="นอกแผน ฯ"
+              dense
+              class="q-pl-sm"
             />
           </div>
-        </div>
 
-        <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
-          <q-input
-            :readonly="checkRouteDetail"
-            outlined
-            dense
-            :class="classInput(!checkRouteDetail)"
-            v-model="formBody.changeDetail"
-            label="เปลี่ยนแปลงรายละเอียด"
-            rows="3"
-            hide-bottom-space
-            type="textarea"
-            :rules="[
-              (val: string) =>
-                !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
-            ]"
-          />
-        </div>
-
-        <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
           <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
-              <q-input
-                :readonly="checkRouteDetail"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                label="เลขที่สัญญา"
-                :class="classInput(!checkRouteDetail)"
-                v-model="formBody.contractNo"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
-                ]"
-              />
-            </div>
-            <div class="col-2">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formBody.contractDate"
+                v-model="formBody.scholarshipYear"
                 :locale="'th'"
                 autoApply
+                year-picker
                 :enableTimePicker="false"
                 :readonly="checkRouteDetail"
               >
@@ -1019,21 +772,24 @@ onMounted(() => {
                 }}</template>
                 <template #trigger>
                   <q-input
-                    dense
                     :readonly="checkRouteDetail"
+                    dense
                     outlined
                     :class="classInput(!checkRouteDetail)"
                     :model-value="
-                      formBody.contractDate
-                        ? date2Thai(formBody.contractDate)
+                      formBody.scholarshipYear
+                        ? Number(formBody.scholarshipYear) + 543
                         : null
                     "
-                    :label="`${'ลงวันที่'}`"
+                    :label="`${
+                      formBody.scholarshipType === 'RESEARCH'
+                        ? 'ปีงบประมาณที่ได้รับอนุมัติ '
+                        : 'ปีงบประมาณที่ได้รับทุน'
+                    }`"
                     hide-bottom-space
                     :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณาเลือกวันที่'}`,
-                    ]"
+                    (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
+                  ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -1048,24 +804,77 @@ onMounted(() => {
               </datepicker>
             </div>
             <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
-              <q-input
-                dense
+              <q-select
                 :readonly="checkRouteDetail"
+                dense
+                outlined
+                :class="classInput(!checkRouteDetail)"
+                label="แหล่งงบประมาณ"
+                hide-bottom-space
+                v-model="formBody.budgetSource"
+                :options="budgetSourceOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
+              ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                :readonly="checkRouteDetail"
+                dense
                 outlined
                 hide-bottom-space
-                lazy-rules
                 :class="classInput(!checkRouteDetail)"
-                v-model="formBody.reportBackNo"
-                label="เลขที่หนังสือรายงานตัวกลับ"
+                v-model="formBody.budgetApprove"
+                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+                mask="###,###,###,###,###,###"
+                reverse-fill-mask
                 :rules="[
-                  (val: string) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
+                  (val: any) => {
+                    if (!val && !formBody.isNoUseBudget) {
+                      return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
+                    }
+                    return true;
+                  },
                 ]"
               />
             </div>
-            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+            <div class="col-3">
+              <q-checkbox
+                :disable="checkRouteDetail"
+                keep-color
+                color="primary"
+                v-model="formBody.isNoUseBudget"
+                label="ไม่ใช้งบประมาณ"
+              />
+            </div>
+          </div>
+
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-3">
+              <q-input
+                :readonly="checkRouteDetail"
+                dense
+                outlined
+                :class="classInput(!checkRouteDetail)"
+                v-model="formBody.bookNo"
+                label="เลขที่หนังสืออนุมัติ"
+                hide-bottom-space
+                :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
+              ]"
+              />
+            </div>
+            <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formBody.reportBackNoDate"
+                v-model="formBody.bookNoDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -1082,16 +891,16 @@ onMounted(() => {
                     outlined
                     :class="classInput(!checkRouteDetail)"
                     :model-value="
-                      formBody.reportBackNoDate
-                        ? date2Thai(formBody.reportBackNoDate)
+                      formBody.bookNoDate
+                        ? date2Thai(formBody.bookNoDate)
                         : null
                     "
                     :label="`${'ลงวันที่'}`"
                     hide-bottom-space
                     :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณาเลือกวันที่'}`,
-                    ]"
+                    (val: string) =>
+                      !!val || `${'กรุณาเลือกวันที่'}`,
+                  ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -1105,14 +914,14 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+            <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formBody.reportBackDate"
+                v-model="formBody.bookApproveDate"
                 :locale="'th'"
                 autoApply
-                :enableTimePicker="false"
                 :readonly="checkRouteDetail"
+                :enableTimePicker="false"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -1120,21 +929,21 @@ onMounted(() => {
                 }}</template>
                 <template #trigger>
                   <q-input
-                    :readonly="checkRouteDetail"
                     dense
+                    :readonly="checkRouteDetail"
                     outlined
                     :class="classInput(!checkRouteDetail)"
                     :model-value="
-                      formBody.reportBackDate
-                        ? date2Thai(formBody.reportBackDate)
+                      formBody.bookApproveDate
+                        ? date2Thai(formBody.bookApproveDate)
                         : null
                     "
-                    :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
                     hide-bottom-space
                     :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณาเลือกวันที่'}`,
-                    ]"
+                    (val: string) =>
+                      !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
+                  ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -1148,1982 +957,2187 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-12">
-              <q-card bordered tyle="border: 1px solid #d6dee1">
-                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                  ข้อมูลผู้ค้ำประกัน
-                  <q-btn
-                    v-if="!checkRouteDetail"
-                    flat
-                    dense
-                    icon="add"
-                    color="primary"
-                    label="เลือกผู้ค้ำประกัน"
-                    @click="onSelectGov(false)"
-                  >
-                    <q-tooltip>เพิ่ม</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div
-                  class="row col-12 q-col-gutter-md q-pa-md"
-                  v-if="isGuarantor"
+            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+              <q-checkbox
+                :disable="checkRouteDetail"
+                keep-color
+                color="primary"
+                v-model="formBody.useOfficialTime"
+                label="ใช้เวลาราชการ"
+              />
+            </div>
+          </div>
+
+          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+            <q-input
+              :readonly="checkRouteDetail"
+              outlined
+              dense
+              :class="classInput(!checkRouteDetail)"
+              v-model="formBody.changeDetail"
+              label="เปลี่ยนแปลงรายละเอียด"
+              rows="3"
+              hide-bottom-space
+              type="textarea"
+              :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
+              ]"
+            />
+          </div>
+
+          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+            <div class="row col-12 q-col-gutter-md">
+              <div class="col-3">
+                <q-input
+                  :readonly="checkRouteDetail"
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  label="เลขที่สัญญา"
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.contractNo"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.contractDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :readonly="checkRouteDetail"
                 >
-                  <div class="col">
-                    <div class="row q-col-gutter-md">
-                      <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.citizenId }}
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      :readonly="checkRouteDetail"
+                      outlined
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.contractDate
+                          ? date2Thai(formBody.contractDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+                <q-input
+                  dense
+                  :readonly="checkRouteDetail"
+                  outlined
+                  hide-bottom-space
+                  lazy-rules
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.reportBackNo"
+                  label="เลขที่หนังสือรายงานตัวกลับ"
+                  :rules="[
+                    (val: string) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
+                  ]"
+                />
+              </div>
+              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.reportBackNoDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :readonly="checkRouteDetail"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="checkRouteDetail"
+                      dense
+                      outlined
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.reportBackNoDate
+                          ? date2Thai(formBody.reportBackNoDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.reportBackDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :readonly="checkRouteDetail"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="checkRouteDetail"
+                      dense
+                      outlined
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.reportBackDate
+                          ? date2Thai(formBody.reportBackDate)
+                          : null
+                      "
+                      :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-12">
+                <q-card bordered tyle="border: 1px solid #d6dee1">
+                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                    ข้อมูลผู้ค้ำประกัน
+                    <q-btn
+                      v-if="!checkRouteDetail"
+                      flat
+                      dense
+                      icon="add"
+                      color="primary"
+                      label="เลือกผู้ค้ำประกัน"
+                      @click="onSelectGov(false)"
+                    >
+                      <q-tooltip>เพิ่ม</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div
+                    class="row col-12 q-col-gutter-md q-pa-md"
+                    v-if="isGuarantor"
+                  >
+                    <div class="col">
+                      <div class="row q-col-gutter-md">
+                        <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.citizenId }}
+                        </div>
+                        <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.name }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่ง</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.position }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่งประเภท</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.type }}
+                        </div>
                       </div>
-                      <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.name }}
-                      </div>
-                      <div class="col-4 text-grey">ตำแหน่ง</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.position }}
-                      </div>
-                      <div class="col-4 text-grey">ตำแหน่งประเภท</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.type }}
+                    </div>
+                    <div class="col">
+                      <div class="row q-col-gutter-md">
+                        <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.level }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.positionSide }}
+                        </div>
+                        <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.org }}
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="col">
-                    <div class="row q-col-gutter-md">
-                      <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.level }}
-                      </div>
-                      <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.positionSide }}
-                      </div>
-                      <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                      <div class="col-8 text-weight-medium">
-                        {{ dataGuarantor.org }}
-                      </div>
-                    </div>
+                </q-card>
+              </div>
+
+              <!-- เลือกทุน 1 -->
+              <div
+                class="col-12"
+                v-if="formBody.scholarshipType === 'DOMESTICE'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-3">
+                    <q-input
+                      :readonly="checkRouteDetail"
+                      dense
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="ระดับปริญญา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.degreeLevel"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      :readonly="checkRouteDetail"
+                      dense
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="หลักสูตรการศึกษา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      :readonly="checkRouteDetail"
+                      dense
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="สาขาวิชา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      :readonly="checkRouteDetail"
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="คณะ"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.faculty"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกคณะ'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      :readonly="checkRouteDetail"
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถาบันการศึกษา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :readonly="checkRouteDetail"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          :readonly="checkRouteDetail"
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษา'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                      :readonly="checkRouteDetail"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          :readonly="checkRouteDetail"
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษา'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถานที่ไปศึกษาดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปศึกษาดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyTopic"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      :readonly="checkRouteDetail"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      :readonly="checkRouteDetail"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-6"></div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      :readonly="checkRouteDetail"
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่ไปศึกษาดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      :readonly="checkRouteDetail"
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyAbroadTopic"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :readonly="checkRouteDetail"
+                      @update:model-value="
+                        changeStartDate('studyAbroadStartDate')
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :readonly="checkRouteDetail"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      :readonly="checkRouteDetail"
+                      week-start="0"
+                      :min-date="formBody.studyAbroadStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyAbroadStartDate,
+                          formBody.studyAbroadEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการศึกษา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.totalPeriod"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+                      ]"
+                    />
                   </div>
                 </div>
-              </q-card>
-            </div>
+              </div>
 
-            <!-- เลือกทุน 1 -->
-            <div class="col-12" v-if="formBody.scholarshipType === 'DOMESTICE'">
-              <div class="row q-col-gutter-md">
-                <div class="col-3">
-                  <q-input
-                    :readonly="checkRouteDetail"
-                    dense
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="ระดับปริญญา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.degreeLevel"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกระดับปริญญา'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <q-input
-                    :readonly="checkRouteDetail"
-                    dense
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="หลักสูตรการศึกษา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.course"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <q-input
-                    :readonly="checkRouteDetail"
-                    dense
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="สาขาวิชา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.field"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสาขาวิชา'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <q-input
-                    dense
-                    :readonly="checkRouteDetail"
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="คณะ"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.faculty"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกคณะ'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    :readonly="checkRouteDetail"
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="สถาบันการศึกษา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.educationalInstitution"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.startDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="checkRouteDetail"
-                    @update:model-value="changeStartDate('startDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        :readonly="checkRouteDetail"
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.startDate
-                            ? date2Thai(formBody.startDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการศึกษา'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.endDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.startDate"
-                    :readonly="checkRouteDetail"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        :readonly="checkRouteDetail"
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.endDate ? date2Thai(formBody.endDate) : null
-                        "
-                        :label="`${'วันสิ้นสุดการศึกษา'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="สถานที่ไปศึกษาดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyPlace"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="หัวข้อการไปศึกษาดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyTopic"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyStartDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    :readonly="checkRouteDetail"
-                    week-start="0"
-                    @update:model-value="changeStartDate('studyStartDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyStartDate
-                            ? date2Thai(formBody.studyStartDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyEndDate"
-                    :locale="'th'"
-                    :readonly="checkRouteDetail"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.studyStartDate"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
+              <!-- เลือกทุน 2 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'NOABROAD'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หลักสูตรการฝึกอบรม"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="สาขา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :readonly="checkRouteDetail"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      :readonly="checkRouteDetail"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="สถานที่ไปศึกษาดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปศึกษาดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyTopic"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      :readonly="checkRouteDetail"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          :readonly="checkRouteDetail"
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :readonly="checkRouteDetail"
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyStartDate,
                           formBody.studyEndDate
-                            ? date2Thai(formBody.studyEndDate)
-                            : null
-                        "
-                        :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-6"></div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    :readonly="checkRouteDetail"
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="ประเทศที่ไปศึกษาดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyCountry"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    :readonly="checkRouteDetail"
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyAbroadTopic"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyAbroadStartDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="checkRouteDetail"
-                    @update:model-value="
-                      changeStartDate('studyAbroadStartDate')
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :readonly="checkRouteDetail"
-                        :model-value="
-                          formBody.studyAbroadStartDate
-                            ? date2Thai(formBody.studyAbroadStartDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyAbroadEndDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    :readonly="checkRouteDetail"
-                    week-start="0"
-                    :min-date="formBody.studyAbroadStartDate"
-                    @update:model-value="
-                      updateTotalPeriod(
-                        formBody.studyAbroadStartDate,
-                        formBody.studyAbroadEndDate
-                      )
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyAbroadEndDate
-                            ? date2Thai(formBody.studyAbroadEndDate)
-                            : null
-                        "
-                        :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="รวมระยะเวลาในการศึกษา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.totalPeriod"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
-                    ]"
-                  />
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          :readonly="checkRouteDetail"
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.totalPeriod"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระยะเวลาในการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <!-- เลือกทุน 2 -->
-            <div
-              class="col-12"
-              v-else-if="formBody.scholarshipType === 'NOABROAD'"
-            >
-              <div class="row q-col-gutter-md">
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="หลักสูตรการฝึกอบรม"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.course"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="สาขา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.field"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสาขา'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.educationalInstitution"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.startDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="checkRouteDetail"
-                    @update:model-value="changeStartDate('startDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.startDate
-                            ? date2Thai(formBody.startDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.endDate"
-                    :locale="'th'"
-                    :readonly="checkRouteDetail"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.startDate"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.endDate ? date2Thai(formBody.endDate) : null
-                        "
-                        :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="สถานที่ไปศึกษาดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyPlace"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="หัวข้อการไปศึกษาดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyTopic"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyStartDate"
-                    :locale="'th'"
-                    :readonly="checkRouteDetail"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeStartDate('studyStartDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        :readonly="checkRouteDetail"
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyStartDate
-                            ? date2Thai(formBody.studyStartDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyEndDate"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="checkRouteDetail"
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.studyStartDate"
-                    @update:model-value="
-                      updateTotalPeriod(
-                        formBody.studyStartDate,
-                        formBody.studyEndDate
-                      )
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        :readonly="checkRouteDetail"
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyEndDate
-                            ? date2Thai(formBody.studyEndDate)
-                            : null
-                        "
-                        :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="รวมระยะเวลาในการฝึกอบรม"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.totalPeriod"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกระยะเวลาในการฝึกอบรม'}`,
-                    ]"
-                  />
+              <!-- เลือกทุน 3 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'ABROAD'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หลักสูตรการฝึกอบรม"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="สาขา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      :readonly="checkRouteDetail"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :readonly="checkRouteDetail"
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          :readonly="checkRouteDetail"
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถานที่ไปศึกษาดูงานในประเทศ"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyTopic"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      :readonly="checkRouteDetail"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :readonly="checkRouteDetail"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :readonly="checkRouteDetail"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyStartDate,
+                          formBody.studyEndDate,
+                          true
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-6"></div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่เดินทางไปศึกษาดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกประเทศที่เดินทางไปศึกษาดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyAbroadTopic"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      :readonly="checkRouteDetail"
+                      week-start="0"
+                      @update:model-value="
+                        changeStartDate('studyAbroadStartDate')
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      :readonly="checkRouteDetail"
+                      week-start="0"
+                      :min-date="formBody.studyAbroadStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyAbroadStartDate,
+                          formBody.studyAbroadEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :class="classInput(!checkRouteDetail)"
+                          :readonly="checkRouteDetail"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการศึกษา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.totalPeriod"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+                      ]"
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <!-- เลือกทุน 3 -->
-            <div
-              class="col-12"
-              v-else-if="formBody.scholarshipType === 'ABROAD'"
-            >
-              <div class="row q-col-gutter-md">
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="หลักสูตรการฝึกอบรม"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.course"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="สาขา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.field"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสาขา'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.educationalInstitution"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.startDate"
-                    :locale="'th'"
-                    :readonly="checkRouteDetail"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeStartDate('startDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.startDate
-                            ? date2Thai(formBody.startDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.endDate"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="checkRouteDetail"
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.startDate"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        :readonly="checkRouteDetail"
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.endDate ? date2Thai(formBody.endDate) : null
-                        "
-                        :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="สถานที่ไปศึกษาดูงานในประเทศ"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyPlace"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="หัวข้อการไปศึกษาดูงานในประเทศ"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyTopic"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyStartDate"
-                    :locale="'th'"
-                    :readonly="checkRouteDetail"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeStartDate('studyStartDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :readonly="checkRouteDetail"
-                        :model-value="
-                          formBody.studyStartDate
-                            ? date2Thai(formBody.studyStartDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyEndDate"
-                    :readonly="checkRouteDetail"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.studyStartDate"
-                    @update:model-value="
-                      updateTotalPeriod(
-                        formBody.studyStartDate,
-                        formBody.studyEndDate,
-                        true
-                      )
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyEndDate
-                            ? date2Thai(formBody.studyEndDate)
-                            : null
-                        "
-                        :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-6"></div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="ประเทศที่เดินทางไปศึกษาดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyCountry"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกประเทศที่เดินทางไปศึกษาดูงาน'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyAbroadTopic"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
-                    ]"
-                  />
-                </div>
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyAbroadStartDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    :readonly="checkRouteDetail"
-                    week-start="0"
-                    @update:model-value="
-                      changeStartDate('studyAbroadStartDate')
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyAbroadStartDate
-                            ? date2Thai(formBody.studyAbroadStartDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyAbroadEndDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    :readonly="checkRouteDetail"
-                    week-start="0"
-                    :min-date="formBody.studyAbroadStartDate"
-                    @update:model-value="
-                      updateTotalPeriod(
-                        formBody.studyAbroadStartDate,
-                        formBody.studyAbroadEndDate
-                      )
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :class="classInput(!checkRouteDetail)"
-                        :readonly="checkRouteDetail"
-                        :model-value="
+              <!-- เลือกทุน 5 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'RESEARCH'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-3">
+                    <q-select
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      :class="classInput(!checkRouteDetail)"
+                      label="ประเภทการพัฒนา"
+                      v-model="formBody.studyTopic"
+                      :options="[
+                        'ศึกษา',
+                        'ฝึกอบรม',
+                        'ประชุม',
+                        'ดูงาน',
+                        'ปฏิบัติการวิจัย',
+                      ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
+                  ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="ระดับปริญญา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.degreeLevel"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      :class="classInput(!checkRouteDetail)"
+                      :label="convertCourse()"
+                      v-model="formBody.course"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `กรุณากรอก${convertCourse()}`,
+                  ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="สาขาวิชา"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="คณะ"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.faculty"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกคณะ'}`,
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัด"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัด'}`,
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :readonly="checkRouteDetail"
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้น'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :readonly="checkRouteDetail"
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุด'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!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 class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      :label="convertStudyPlace()"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอก${convertStudyPlace()}`,
+                      ]"
+                    />
+                  </div>
+
+                  <div v-if="formBody.studyTopic == 'ดูงาน'" class="col-3">
+                    <q-input
+                      dense
+                      :readonly="checkRouteDetail"
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่ไปดูงาน"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadStartDate"
+                      :locale="'th'"
+                      autoApply
+                      :readonly="checkRouteDetail"
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="
+                        changeStartDate('studyAbroadStartDate')
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`"
+                          hide-bottom-space
+                          :rules="[
+                        (val: string) =>
+                          !!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 class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyAbroadEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      :readonly="checkRouteDetail"
+                      week-start="0"
+                      :min-date="formBody.studyAbroadStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyAbroadStartDate,
                           formBody.studyAbroadEndDate
-                            ? date2Thai(formBody.studyAbroadEndDate)
-                            : null
-                        "
-                        :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="รวมระยะเวลาในการศึกษา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.totalPeriod"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
-                    ]"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- เลือกทุน 5 -->
-            <div
-              class="col-12"
-              v-else-if="formBody.scholarshipType === 'RESEARCH'"
-            >
-              <div class="row q-col-gutter-md">
-                <div class="col-3">
-                  <q-select
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    :class="classInput(!checkRouteDetail)"
-                    label="ประเภทการพัฒนา"
-                    v-model="formBody.studyTopic"
-                    :options="[
-                      'ศึกษา',
-                      'ฝึกอบรม',
-                      'ประชุม',
-                      'ดูงาน',
-                      'ปฏิบัติการวิจัย',
-                    ]"
-                    :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
-                ]"
-                  />
-                </div>
-
-                <div class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="ระดับปริญญา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.degreeLevel"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกระดับปริญญา'}`,
-                    ]"
-                  />
-                </div>
-
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    :class="classInput(!checkRouteDetail)"
-                    :label="convertCourse()"
-                    v-model="formBody.course"
-                    :rules="[
-                  (val: string) =>
-                    !!val || `กรุณากรอก${convertCourse()}`,
-                ]"
-                  />
-                </div>
-
-                <div class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="สาขาวิชา"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.field"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสาขาวิชา'}`,
-                    ]"
-                  />
-                </div>
-
-                <div class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="คณะ"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.faculty"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกคณะ'}`,
-                    ]"
-                  />
-                </div>
-
-                <div class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    lazy-rules
-                    hide-bottom-space
-                    label="สถาบันการศึกษา/หน่วยงานผู้จัด"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyPlace"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัด'}`,
-                    ]"
-                  />
-                </div>
-
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.startDate"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="checkRouteDetail"
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="changeStartDate('startDate')"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.startDate
-                            ? date2Thai(formBody.startDate)
-                            : null
-                        "
-                        :label="`${'วันเริ่มต้น'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.endDate"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="checkRouteDetail"
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formBody.startDate"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.endDate ? date2Thai(formBody.endDate) : null
-                        "
-                        :label="`${'วันสิ้นสุด'}`"
-                        hide-bottom-space
-                        :rules="[
-                          (val: string) =>
-                            !!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 class="col-6">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    :label="convertStudyPlace()"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyPlace"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `กรุณากรอก${convertStudyPlace()}`,
-                    ]"
-                  />
-                </div>
-
-                <div v-if="formBody.studyTopic == 'ดูงาน'" class="col-3">
-                  <q-input
-                    dense
-                    :readonly="checkRouteDetail"
-                    outlined
-                    lazy-rules
-                    hide-bottom-space
-                    label="ประเทศที่ไปดูงาน"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.studyCountry"
-                    :rules="[
-                      (val: string) =>
-                        !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
-                    ]"
-                  />
-                </div>
-
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyAbroadStartDate"
-                    :locale="'th'"
-                    autoApply
-                    :readonly="checkRouteDetail"
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="
-                      changeStartDate('studyAbroadStartDate')
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyAbroadStartDate
-                            ? date2Thai(formBody.studyAbroadStartDate)
-                            : null
-                        "
-                        :label="`${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`"
-                        hide-bottom-space
-                        :rules="[
-                      (val: string) =>
-                        !!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 class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formBody.studyAbroadEndDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    :readonly="checkRouteDetail"
-                    week-start="0"
-                    :min-date="formBody.studyAbroadStartDate"
-                    @update:model-value="
-                      updateTotalPeriod(
-                        formBody.studyAbroadStartDate,
-                        formBody.studyAbroadEndDate
-                      )
-                    "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        outlined
-                        :readonly="checkRouteDetail"
-                        :class="classInput(!checkRouteDetail)"
-                        :model-value="
-                          formBody.studyAbroadEndDate
-                            ? date2Thai(formBody.studyAbroadEndDate)
-                            : null
-                        "
-                        :label="`${'วันเดินทางกลับถึงประเทศไทย'}`"
-                        hide-bottom-space
-                        :rules="[
-                      (val: string) =>
-                        !!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 class="col-3">
-                  <q-input
-                    dense
-                    outlined
-                    lazy-rules
-                    :readonly="checkRouteDetail"
-                    hide-bottom-space
-                    label="รวมระยะเวลาทั้งสิ้น"
-                    :class="classInput(!checkRouteDetail)"
-                    v-model="formBody.totalPeriod"
-                  />
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :readonly="checkRouteDetail"
+                          :class="classInput(!checkRouteDetail)"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันเดินทางกลับถึงประเทศไทย'}`"
+                          hide-bottom-space
+                          :rules="[
+                        (val: string) =>
+                          !!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 class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      :readonly="checkRouteDetail"
+                      hide-bottom-space
+                      label="รวมระยะเวลาทั้งสิ้น"
+                      :class="classInput(!checkRouteDetail)"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <!-- เลือกทุน 4 -->
-        <div
-          class="col-12"
-          v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
-        >
-          <div class="row q-col-gutter-md">
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                :readonly="checkRouteDetail"
-                hide-bottom-space
-                :class="classInput(!checkRouteDetail)"
-                label="หลักสูตรการฝึกอบรม"
-                v-model="formBody.course"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
-                ]"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                :readonly="checkRouteDetail"
-                hide-bottom-space
-                :class="classInput(!checkRouteDetail)"
-                label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
-                v-model="formBody.educationalInstitution"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
-                ]"
-              />
-            </div>
-            <div class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.startDate"
-                :locale="'th'"
-                autoApply
-                :readonly="checkRouteDetail"
-                :enableTimePicker="false"
-                week-start="0"
-                @update:model-value="changeStartDate('startDate')"
-              >
+          <!-- เลือกทุน 4 -->
+          <div
+            class="col-12"
+            v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
+          >
+            <div class="row q-col-gutter-md">
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  :readonly="checkRouteDetail"
+                  hide-bottom-space
+                  :class="classInput(!checkRouteDetail)"
+                  label="หลักสูตรการฝึกอบรม"
+                  v-model="formBody.course"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  :readonly="checkRouteDetail"
+                  hide-bottom-space
+                  :class="classInput(!checkRouteDetail)"
+                  label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                  v-model="formBody.educationalInstitution"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.startDate"
+                  :locale="'th'"
+                  autoApply
+                  :readonly="checkRouteDetail"
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('startDate')"
                 >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :class="classInput(!checkRouteDetail)"
-                    :readonly="checkRouteDetail"
-                    :model-value="
-                      formBody.startDate ? date2Thai(formBody.startDate) : null
-                    "
-                    :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
-                    hide-bottom-space
-                    :rules="[
-                      (val: string) =>
-                        !!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 class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.endDate"
-                :locale="'th'"
-                :readonly="checkRouteDetail"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :min-date="formBody.startDate"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    :class="classInput(!checkRouteDetail)"
-                    :model-value="
-                      formBody.endDate ? date2Thai(formBody.endDate) : null
-                    "
-                    :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
-                    hide-bottom-space
-                    :rules="[
-                      (val: string) =>
-                        !!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 class="col-6"></div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                :readonly="checkRouteDetail"
-                hide-bottom-space
-                label="สถานที่ไปศึกษาดูงานในประเทศ"
-                :class="classInput(!checkRouteDetail)"
-                v-model="formBody.studyPlace"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
-                ]"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                :readonly="checkRouteDetail"
-                lazy-rules
-                hide-bottom-space
-                label="หัวข้อการไปศึกษาดูงานในประเทศ"
-                :class="classInput(!checkRouteDetail)"
-                v-model="formBody.studyTopic"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
-                ]"
-              />
-            </div>
-            <div class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.studyStartDate"
-                :locale="'th'"
-                :readonly="checkRouteDetail"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                @update:model-value="changeStartDate('studyAbroadStartDate')"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    :class="classInput(!checkRouteDetail)"
-                    :model-value="
-                      formBody.studyStartDate
-                        ? date2Thai(formBody.studyStartDate)
-                        : null
-                    "
-                    :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
-                    hide-bottom-space
-                    :rules="[
-                      (val: string) =>
-                        !!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 class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.studyEndDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :readonly="checkRouteDetail"
-                week-start="0"
-                :min-date="formBody.studyStartDate"
-                @update:model-value="
-                  updateTotalPeriod(
-                    formBody.studyStartDate,
-                    formBody.studyEndDate
-                  )
-                "
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    :class="classInput(!checkRouteDetail)"
-                    :model-value="
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :class="classInput(!checkRouteDetail)"
+                      :readonly="checkRouteDetail"
+                      :model-value="
+                        formBody.startDate
+                          ? date2Thai(formBody.startDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.endDate"
+                  :locale="'th'"
+                  :readonly="checkRouteDetail"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formBody.startDate"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.endDate ? date2Thai(formBody.endDate) : null
+                      "
+                      :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-6"></div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  :readonly="checkRouteDetail"
+                  hide-bottom-space
+                  label="สถานที่ไปศึกษาดูงานในประเทศ"
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.studyPlace"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  :readonly="checkRouteDetail"
+                  lazy-rules
+                  hide-bottom-space
+                  label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.studyTopic"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyStartDate"
+                  :locale="'th'"
+                  :readonly="checkRouteDetail"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('studyAbroadStartDate')"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.studyStartDate
+                          ? date2Thai(formBody.studyStartDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyEndDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :readonly="checkRouteDetail"
+                  week-start="0"
+                  :min-date="formBody.studyStartDate"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyStartDate,
                       formBody.studyEndDate
-                        ? date2Thai(formBody.studyEndDate)
-                        : null
-                    "
-                    :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
-                    hide-bottom-space
-                    :rules="[
-                      (val: string) =>
-                        !!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 class="col-6"></div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                :readonly="checkRouteDetail"
-                hide-bottom-space
-                label="ประเทศที่ไปศึกษาดูงาน"
-                :class="classInput(!checkRouteDetail)"
-                v-model="formBody.studyCountry"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
-                ]"
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                :readonly="checkRouteDetail"
-                hide-bottom-space
-                label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
-                :class="classInput(!checkRouteDetail)"
-                v-model="formBody.studyAbroadTopic"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
-                ]"
-              />
-            </div>
-            <div class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.studyAbroadStartDate"
-                :locale="'th'"
-                autoApply
-                :readonly="checkRouteDetail"
-                :enableTimePicker="false"
-                week-start="0"
-                @update:model-value="changeStartDate('studyAbroadStartDate')"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    :class="classInput(!checkRouteDetail)"
-                    :model-value="
-                      formBody.studyAbroadStartDate
-                        ? date2Thai(formBody.studyAbroadStartDate)
-                        : null
-                    "
-                    :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
-                    hide-bottom-space
-                    :rules="[
-                      (val: string) =>
-                        !!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 class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.studyAbroadEndDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :readonly="checkRouteDetail"
-                week-start="0"
-                :min-date="formBody.studyAbroadStartDate"
-                @update:model-value="
-                  updateTotalPeriod(
-                    formBody.studyAbroadStartDate,
-                    formBody.studyAbroadEndDate
-                  )
-                "
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRouteDetail"
-                    :class="classInput(!checkRouteDetail)"
-                    :model-value="
+                    )
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.studyEndDate
+                          ? date2Thai(formBody.studyEndDate)
+                          : null
+                      "
+                      :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-6"></div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  :readonly="checkRouteDetail"
+                  hide-bottom-space
+                  label="ประเทศที่ไปศึกษาดูงาน"
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.studyCountry"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  :readonly="checkRouteDetail"
+                  hide-bottom-space
+                  label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.studyAbroadTopic"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyAbroadStartDate"
+                  :locale="'th'"
+                  autoApply
+                  :readonly="checkRouteDetail"
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('studyAbroadStartDate')"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.studyAbroadStartDate
+                          ? date2Thai(formBody.studyAbroadStartDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyAbroadEndDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  :readonly="checkRouteDetail"
+                  week-start="0"
+                  :min-date="formBody.studyAbroadStartDate"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyAbroadStartDate,
                       formBody.studyAbroadEndDate
-                        ? date2Thai(formBody.studyAbroadEndDate)
-                        : null
-                    "
-                    :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
-                    hide-bottom-space
-                    :rules="[
-                      (val: string) =>
-                        !!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 class="col-3">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                :readonly="checkRouteDetail"
-                hide-bottom-space
-                label="รวมระยะเวลาในการฝึกอบรม "
-                :class="classInput(!checkRouteDetail)"
-                v-model="formBody.totalPeriod"
-                :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณากรอกรวมระยะเวลาในการฝึกอบรม '}`,
-                ]"
-              />
+                    )
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRouteDetail"
+                      :class="classInput(!checkRouteDetail)"
+                      :model-value="
+                        formBody.studyAbroadEndDate
+                          ? date2Thai(formBody.studyAbroadEndDate)
+                          : null
+                      "
+                      :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!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 class="col-3">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  :readonly="checkRouteDetail"
+                  hide-bottom-space
+                  label="รวมระยะเวลาในการฝึกอบรม "
+                  :class="classInput(!checkRouteDetail)"
+                  v-model="formBody.totalPeriod"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกรวมระยะเวลาในการฝึกอบรม '}`,
+                  ]"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <q-separator v-if="isGov && !checkRouteDetail" />
-      <q-card-actions align="right" v-if="isGov && !checkRouteDetail">
-        <q-btn label="บันทึก" color="secondary" type="submit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-    </q-form>
-  </q-card>
+        <q-separator v-if="isGov && !checkRouteDetail" />
+        <q-card-actions align="right" v-if="isGov && !checkRouteDetail">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </div>
 
   <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
 </template>
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index eca482159..eec0c747b 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -134,12 +134,13 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 /** ดึงข้อมูลหน่วยงาน เเละ เรียกใช้ฟังชั่น ดึงข้อมูล */
-function fetchListOrg() {
+async function fetchListOrg() {
   showLoader();
-  http
+  await http
     .get(config.API.developmentHistoryListOrg("employee", formFilter.year))
     .then(async (res) => {
       formFilter.root = null;
+      formFilter.page = 1;
       rows.value = [];
       const option = [{ name: "ทั้งหมด", id: null }];
       const optionNew = await res.data.result.map((e: string) => ({
@@ -192,9 +193,9 @@ function onEdit(id: string) {
 }
 
 /** ดึงข้อมูล */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .post(config.API.developmentHistoryList("employee"), formFilter)
     .then((res) => {
       const data = res.data.result.data;
@@ -241,8 +242,8 @@ watch(
 );
 
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
-onMounted(() => {
-  fetchListOrg();
+onMounted(async () => {
+  await fetchListOrg();
 });
 </script>
 
@@ -387,7 +388,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 2c9e27452..8866491f9 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -167,10 +167,12 @@ function fetchListOrg() {
       }));
       option.push(...optionNew);
       agencyOp.value = option;
-      getData();
+      await getData();
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -178,9 +180,9 @@ function fetchListOrg() {
 /**
  * function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .post(config.API.developmentHistoryList("officer"), formFilter)
     .then((res) => {
       const data = res.data.result.data;
@@ -217,10 +219,9 @@ function onDownload(type: string) {
       year: formFilter.year,
       root: formFilter.root,
     })
-    .then((res) => {
-      const dataList = res.data.result;
-
-      genReportXLSX(
+    .then(async (res) => {
+      const dataList = await res.data.result;
+      await genReportXLSX(
         dataList,
         "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ",
         type
@@ -408,7 +409,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index de34070b2..3ad5622ad 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -11,7 +11,6 @@ import genReportXLSX from "@/plugins/genreportxlsx";
 
 import type {
   DataOption,
-  ItemsDownload,
   NewPagination,
 } from "@/modules/15_development/interface/index/Main";
 import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
@@ -327,7 +326,6 @@ onMounted(() => {
           map-options
           :options="columns"
           option-value="name"
-          
           style="min-width: 140px"
         />
       </div>