From 3b6172ee037cda5fce93592858da6871fa1ecaf1 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 24 Apr 2025 11:04:38 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B8=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../09_scholarship/interface/request/index.ts |    1 +
 src/modules/09_scholarship/views/detail.vue   | 2094 ++++++++++-------
 src/modules/09_scholarship/views/main.vue     |   14 +-
 3 files changed, 1226 insertions(+), 883 deletions(-)

diff --git a/src/modules/09_scholarship/interface/request/index.ts b/src/modules/09_scholarship/interface/request/index.ts
index 1ad74ac..a25579f 100644
--- a/src/modules/09_scholarship/interface/request/index.ts
+++ b/src/modules/09_scholarship/interface/request/index.ts
@@ -61,6 +61,7 @@ interface FormsSholarship {
   totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
   planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
   isNoUseBudget: boolean; //
+  budgetSourceOther: string; //
 }
 
 interface DataSholarship {
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 5f13b1c..a3fa770 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -48,6 +48,21 @@ const budgetSourceOp = ref<DataOptions[]>([
   { id: "OTHER", name: "เงินอื่นๆ" },
 ]);
 
+const useOfficialTimeOp = ref<DataOptions[]>([
+  {
+    id: "NOUSETIME",
+    name: "ไม่ใช้เวลาราชการ",
+  },
+  {
+    id: "USETIME",
+    name: "ใช้เวลาราชการ",
+  },
+  {
+    id: "SOMETIME",
+    name: "ใช้เวลาราชการบางส่วน",
+  },
+]);
+
 const formBody = reactive<FormsSholarship>({
   profileId: "",
   rank: "", //ยศ
@@ -110,6 +125,7 @@ const formBody = reactive<FormsSholarship>({
   studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
   totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
   planType: "",
+  budgetSourceOther: "",
   isNoUseBudget: false,
 });
 
@@ -156,8 +172,12 @@ const scholarshipTypeOp = ref<DataOptions[]>([
     name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
   {
-    id: "RESEARCH",
-    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+    id: "STUDY",
+    name: "ทุนการศึกษา ณ ต่างประเทศ",
+  },
+  {
+    id: "TRAINING",
+    name: "ทุนฝึกอบรม ณ ต่างประเทศ",
   },
 ]);
 
@@ -525,86 +545,9 @@ onMounted(async () => {
       <q-card flat bordered class="col-12 q-pa-md">
         <q-toolbar class="q-px-none q-pb-sm">
           <div class="row q-col-gutter-x-sm full-width">
-            <div class="col-2 q-pa-none">
-              <q-btn
-                flat
-                icon="mdi-dots-vertical"
-                color="grey-8"
-                for="#cancel"
-                dense
-                round
-                unelevated
-              >
-                <q-menu>
-                  <q-list>
-                    <q-item clickable v-close-popup @click="onOpenReturn">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon name="edit" color="edit" size="18px" />
-                          แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup @click="onDownload('docx')">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon
-                            name="mdi-file-word"
-                            color="blue"
-                            size="18px"
-                          />
-                          ดาวน์โหลดฟอร์มต้นแบบ .docx
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup @click="onDownload('pdf')">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon
-                            name="mdi-file-pdf-box"
-                            color="red"
-                            size="18px"
-                          />
-                          ดาวน์โหลดฟอร์มต้นแบบ .pdf
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-
             <q-space />
-            <div v-if="fileList == null" class="col-xs-8 col-sm-3">
-              <q-file
-                for="inputFiles"
-                class="col-12"
-                outlined
-                dense
-                v-model="documentFile"
-                label="ไฟล์เอกสารหลักฐาน"
-                accept=".pdf"
-                clearable
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    size="14px"
-                    v-if="documentFile"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="clickUpload(documentFile)"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-            <div v-else class="col-2 text-right">
+
+            <div v-if="fileList" class="col-2 text-right">
               <q-btn
                 size="12px"
                 flat
@@ -671,284 +614,358 @@ onMounted(async () => {
         </q-card>
 
         <div class="row q-col-gutter-md q-mt-sm">
-          <div class="col-md-9 col-xs-12">
+          <div class="col-12 col-md-9">
             <q-select
-              dense
+              class="inputgreen"
               readonly
+              dense
               outlined
+              hide-bottom-space
+              lazy-rules
               v-model="formBody.scholarshipType"
               :options="scholarshipTypeOp"
               option-label="name"
               option-value="id"
               emit-value
               map-options
-              class="inputgreen"
               label="เลือกประเภททุน"
+              :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกประเภททุน'}`,
+              ]"
             />
           </div>
           <div
-            class="col-md-3 col-xs-12"
+            class="col-12 col-md-3"
             v-if="
               formBody.scholarshipType !== '' &&
-              formBody.scholarshipType !== 'EXECUTIVE' &&
-              formBody.scholarshipType !== 'RESEARCH'
+              formBody.scholarshipType !== 'EXECUTIVE'
             "
           >
             <q-select
+              readonly
               dense
               outlined
+              hide-bottom-space
+              lazy-rules
               class="inputgreen"
               v-model="formBody.fundType"
               :options="fundTypeOp"
               option-label="name"
               option-value="id"
               emit-value
-              readonly
               map-options
               label="ประเภททุน"
+              :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกประเภททุน'}`,
+              ]"
             />
           </div>
 
-          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+          <div class="col-12">
             <q-radio
+              disable
               v-model="formBody.planType"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="INPLAN"
               label="ในแผน ฯ"
               dense
-              disable
             />
             <q-radio
+              disable
               v-model="formBody.planType"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="OUTPLAN"
               label="นอกแผน ฯ"
               dense
-              disable
               class="q-pl-sm"
             />
           </div>
 
-          <div class="row col-12 q-col-gutter-md">
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.scholarshipYear"
-                :locale="'th'"
-                autoApply
-                readonly
-                year-picker
-                :enableTimePicker="false"
+          <div class="col-12">
+            <div class="row q-col-gutter-md">
+              <div class="col-12 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.scholarshipYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  readonly
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.scholarshipYear
+                          ? Number(formBody.scholarshipYear) + 543
+                          : null
+                      "
+                      :label="`${
+                        formBody.scholarshipType === 'STUDY' ||
+                        formBody.scholarshipType === 'TRAINING'
+                          ? 'ปีงบประมาณที่ได้รับอนุมัติ '
+                          : 'ปีงบประมาณที่ได้รับทุน'
+                      }`"
+                      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 col-md-3">
+                <q-select
+                  readonly
+                  dense
+                  outlined
+                  class="inputgreen"
+                  label="แหล่งงบประมาณ"
+                  hide-bottom-space
+                  v-model="formBody.budgetSource"
+                  :options="budgetSourceOp"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :clearable="formBody.fundType == 'FUND4' ? true : false"
+                  :rules="[
+                    (val: any) => {
+                      if (!val && !formBody.isNoUseBudget && formBody.fundType != 'FUND4') {
+                        return 'กรุณาเลือกแหล่งงบประมาณ';
+                      }
+                      return true;
+                    },
+                  ]"
+                />
+              </div>
+              <div
+                class="col-12 col-md-3"
+                v-if="formBody.budgetSource == 'OTHER'"
               >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    readonly
-                    class="inputgreen"
-                    :model-value="
-                      formBody.scholarshipYear
-                        ? Number(formBody.scholarshipYear) + 543
-                        : null
-                    "
-                    :label="`${
-                      formBody.scholarshipType === 'RESEARCH'
-                        ? 'ปีงบประมาณที่ได้รับอนุมัติ '
-                        : 'ปีงบประมาณที่ได้รับทุน'
-                    }`"
-                  >
-                    <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-xs-12 col-md-3"
-            >
-              <q-select
-                dense
-                outlined
-                class="inputgreen"
-                label="แหล่งงบประมาณ"
-                v-model="formBody.budgetSource"
-                :options="budgetSourceOp"
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                readonly
-              />
-            </div>
-            <div class="col-xs-12 col-md-3">
-              <q-input
-                dense
-                outlined
-                readonly
-                class="inputgreen"
-                v-model="formBody.budgetApprove"
-                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
-                mask="###,###,###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-            <div class="col-xs-12 col-md-3">
-              <q-checkbox
-                keep-color
-                disable
-                color="primary"
-                v-model="formBody.isNoUseBudget"
-                label="ไม่ใช้งบประมาณ"
-              />
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="formBody.budgetSourceOther"
+                  label="เงินอื่นๆ โปรดระบุ"
+                  hide-botom-space
+                  :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกเงินอื่นๆ โปรดระบุ'}`,
+                ]"
+                />
+              </div>
+              <div class="col-12 col-md-3">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="formBody.budgetApprove"
+                  label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+                  mask="###,###,###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[
+                    (val: any) => {
+                      if (!val && !formBody.isNoUseBudget && formBody.fundType != 'FUND4') {
+                        return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
+                      }
+                      return true;
+                    },
+                  ]"
+                />
+              </div>
             </div>
           </div>
 
-          <div class="row col-12 q-col-gutter-md">
-            <div class="col-xs-12 col-md-3">
-              <q-input
-                dense
-                readonly
-                outlined
-                class="inputgreen"
-                v-model="formBody.bookNo"
-                label="เลขที่หนังสืออนุมัติ"
-              />
-            </div>
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.bookNoDate"
-                :locale="'th'"
-                readonly
-                autoApply
-                :enableTimePicker="false"
+          <div class="col-12">
+            <div class="row q-col-gutter-md">
+              <div class="col-12 col-md-3">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  class="inputgreen"
+                  v-model="formBody.bookNo"
+                  label="เลขที่หนังสืออนุมัติ"
+                  hide-bottom-space
+                  :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
+                ]"
+                />
+              </div>
+              <div class="col-12 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.bookNoDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  readonly
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      class="inputgreen"
+                      :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-12 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.bookApproveDate"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :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 !== 'STUDY' &&
+                  formBody.scholarshipType !== 'TRAINING'
+                "
+                class="col-12 col-md-2"
               >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    readonly
-                    class="inputgreen"
-                    :model-value="
-                      formBody.bookNoDate
-                        ? date2Thai(formBody.bookNoDate)
-                        : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                <q-select
+                  outlined
+                  dense
+                  label="เวลาราชการ"
+                  readonly
+                  v-model="formBody.useOfficialTime"
+                  :options="useOfficialTimeOp"
+                  option-value="id"
+                  option-label="name"
+                  class="inputgreen"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+              </div>
+              <div class="col-12 col-md-2">
+                <q-checkbox
+                  disable
+                  keep-color
+                  color="primary"
+                  v-model="formBody.isNoUseBudget"
+                  label="ไม่ใช้งบประมาณ"
+                />
+              </div>
             </div>
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.bookApproveDate"
-                :locale="'th'"
-                autoApply
-                readonly
-                :enableTimePicker="false"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    readonly
-                    outlined
-                    class="inputgreen"
-                    :model-value="
-                      formBody.bookApproveDate
-                        ? date2Thai(formBody.bookApproveDate)
-                        : null
-                    "
-                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                  >
-                    <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-xs-12 col-md-3"
-            >
-              <q-checkbox
-                keep-color
-                disable
-                color="primary"
-                v-model="formBody.useOfficialTime"
-                label="ใช้เวลาราชการ"
-              />
-            </div>
-          </div>
-
-          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
-            <q-input
-              outlined
-              dense
-              readonly
-              class="inputgreen"
-              v-model="formBody.changeDetail"
-              label="เปลี่ยนแปลงรายละเอียด"
-              rows="3"
-              type="textarea"
-            />
           </div>
 
           <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
             <div class="row col-12 q-col-gutter-md">
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <q-input
-                  dense
                   readonly
+                  dense
                   outlined
+                  lazy-rules
+                  hide-bottom-space
                   label="เลขที่สัญญา"
                   class="inputgreen"
                   v-model="formBody.contractNo"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
+                  ]"
                 />
               </div>
-              <div class="col-xs-12 col-md-2">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.contractDate"
                   :locale="'th'"
                   autoApply
+                  :enableTimePicker="false"
+                  readonly
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -966,101 +983,11 @@ onMounted(async () => {
                           : null
                       "
                       :label="`${'ลงวันที่'}`"
-                    >
-                      <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-xs-12 col-md-3"
-              >
-                <q-input
-                  dense
-                  readonly
-                  outlined
-                  class="inputgreen"
-                  v-model="formBody.reportBackNo"
-                  label="เลขที่หนังสือรายงานตัวกลับ"
-                />
-              </div>
-              <div
-                v-if="formBody.scholarshipType !== 'RESEARCH'"
-                class="col-xs-12 col-md-2"
-              >
-                <datepicker
-                  readonly
-                  menu-class-name="modalfix"
-                  v-model="formBody.reportBackNoDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      class="inputgreen"
-                      :model-value="
-                        formBody.reportBackNoDate
-                          ? date2Thai(formBody.reportBackNoDate)
-                          : null
-                      "
-                      :label="`${'ลงวันที่'}`"
-                    >
-                      <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-xs-12 col-md-2"
-              >
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="formBody.reportBackDate"
-                  :locale="'th'"
-                  autoApply
-                  readonly
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      readonly
-                      class="inputgreen"
-                      :model-value="
-                        formBody.reportBackDate
-                          ? date2Thai(formBody.reportBackDate)
-                          : null
-                      "
-                      :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณาเลือกวันที่'}`,
+                      ]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -1075,63 +1002,99 @@ onMounted(async () => {
                 </datepicker>
               </div>
 
-              <div class="col-12" v-if="dataGuarantor.citizenId">
-                <q-card bordered tyle="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    ข้อมูลผู้ค้ำประกัน
+              <div class="col-12">
+                <div class="row q-col-gutter-md">
+                  <div class="col-12 col-md-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      hide-bottom-space
+                      lazy-rules
+                      class="inputgreen"
+                      v-model="formBody.reportBackNo"
+                      label="เลขที่หนังสือรายงานตัวกลับ"
+                    />
                   </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="row col-12 q-col-gutter-md q-pa-md">
-                    <div class="col-xs-12 col-md-6">
-                      <div class="row q-col-gutter-md">
-                        <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                        <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.citizenId
-                              ? dataGuarantor.citizenId
-                              : "-"
-                          }}
-                        </div>
-                        <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                        <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.name ? dataGuarantor.name : "-" }}
-                        </div>
-                        <div class="col-4 text-grey">ตำแหน่ง</div>
-                        <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.position
-                              ? dataGuarantor.position
-                              : "-"
-                          }}
-                        </div>
-                        <div class="col-4 text-grey">ประเภท</div>
-                        <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-xs-12 col-md-6">
-                      <div class="row q-col-gutter-md">
-                        <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                        <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.level ? dataGuarantor.level : "-" }}
-                        </div>
-                        <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                        <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.positionSide
-                              ? dataGuarantor.positionSide
-                              : "-"
-                          }}
-                        </div>
-                        <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                        <div class="col-8 text-weight-medium text-html">
-                          {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
-                        </div>
-                      </div>
-                    </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.reportBackNoDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      readonly
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          readonly
+                          dense
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.reportBackNoDate
+                              ? date2Thai(formBody.reportBackNoDate)
+                              : null
+                          "
+                          :label="`${'ลงวันที่'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
                   </div>
-                </q-card>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.reportBackDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      readonly
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          readonly
+                          dense
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.reportBackDate
+                              ? date2Thai(formBody.reportBackDate)
+                              : null
+                          "
+                          :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
               </div>
 
               <!-- เลือกทุน 1 -->
@@ -1140,65 +1103,115 @@ onMounted(async () => {
                 v-if="formBody.scholarshipType === 'DOMESTICE'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      dense
+                  <div class="col-12 col-md-3">
+                    <!-- <q-input
                       readonly
+                      dense
                       outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="ระดับปริญญา"
                       class="inputgreen"
                       v-model="formBody.degreeLevel"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                      ]"
+                    /> -->
+                    <q-select
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      class="inputgreen"
+                      label="ระดับปริญญา"
+                      v-model="formBody.degreeLevel"
+                      :options="[
+                        'ปริญญาตรี',
+                        'สูงกว่าปริญญาตรี',
+                        'ปริญญาโท',
+                        'ปริญญาเอก',
+                      ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                  ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
-                      dense
                       readonly
+                      dense
                       outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="หลักสูตรการศึกษา"
                       class="inputgreen"
                       v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
+                      readonly
                       dense
                       outlined
-                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       label="สาขาวิชา"
                       class="inputgreen"
                       v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      outlined
                       readonly
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="คณะ"
                       class="inputgreen"
                       v-model="formBody.faculty"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกคณะ'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      outlined
                       readonly
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="สถาบันการศึกษา"
                       class="inputgreen"
                       v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
-                      readonly
                       :enableTimePicker="false"
                       week-start="0"
+                      readonly
                       @update:model-value="changeStartDate('startDate')"
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
@@ -1208,8 +1221,8 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          outlined
                           readonly
+                          outlined
                           class="inputgreen"
                           :model-value="
                             formBody.startDate
@@ -1217,6 +1230,11 @@ onMounted(async () => {
                               : null
                           "
                           :label="`${'วันเริ่มต้นการศึกษา'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษา'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1230,16 +1248,19 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
-                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.startDate"
+                      readonly
+                      @update:model-value="
+                        updateTotalPeriod(formBody.startDate, formBody.endDate)
+                      "
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
                       <template #year-overlay-value="{ value }">{{
@@ -1248,8 +1269,8 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          outlined
                           readonly
+                          outlined
                           class="inputgreen"
                           :model-value="
                             formBody.endDate
@@ -1257,6 +1278,11 @@ onMounted(async () => {
                               : null
                           "
                           :label="`${'วันสิ้นสุดการศึกษา'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษา'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1270,34 +1296,50 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="สถานที่ไปศึกษาดูงาน"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถานที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงาน"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       @update:model-value="changeStartDate('studyStartDate')"
                     >
@@ -1316,7 +1358,8 @@ onMounted(async () => {
                               ? date2Thai(formBody.studyStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                          :label="`${'วันเริ่มต้นการดูงาน'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1330,12 +1373,12 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
-                      readonly
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
+                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
@@ -1356,7 +1399,8 @@ onMounted(async () => {
                               ? date2Thai(formBody.studyEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                          :label="`${'วันสิ้นสุดการดูงาน'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1370,36 +1414,40 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
                       readonly
                       outlined
-                      label="ประเทศที่ไปศึกษาดูงาน"
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
                       readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงานต่างประเทศ"
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
+                      readonly
                       @update:model-value="
                         changeStartDate('studyAbroadStartDate')
                       "
@@ -1411,15 +1459,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
                           class="inputgreen"
+                          readonly
                           :model-value="
                             formBody.studyAbroadStartDate
                               ? date2Thai(formBody.studyAbroadStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1433,14 +1482,14 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       :min-date="formBody.studyAbroadStartDate"
                       @update:model-value="
@@ -1457,15 +1506,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadEndDate
                               ? date2Thai(formBody.studyAbroadEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1479,16 +1529,6 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="รวมระยะเวลาในการศึกษา"
-                      class="inputgreen"
-                      v-model="formBody.totalPeriod"
-                    />
-                  </div>
                 </div>
               </div>
 
@@ -1498,45 +1538,63 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'NOABROAD'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
                       outlined
                       readonly
+                      lazy-rules
+                      hide-bottom-space
                       label="หลักสูตรการฝึกอบรม"
                       class="inputgreen"
                       v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="สาขา"
                       class="inputgreen"
                       v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
-                      readonly
                       dense
                       outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                       class="inputgreen"
                       v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
+                      readonly
                       @update:model-value="changeStartDate('startDate')"
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
@@ -1546,8 +1604,8 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.startDate
@@ -1555,6 +1613,11 @@ onMounted(async () => {
                               : null
                           "
                           :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1568,121 +1631,18 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
+                      readonly
                       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
-                          class="inputgreen"
-                          :model-value="
-                            formBody.endDate
-                              ? date2Thai(formBody.endDate)
-                              : null
-                          "
-                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
-                        >
-                          <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-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="สถานที่ไปศึกษาดูงาน"
-                      class="inputgreen"
-                      v-model="formBody.studyPlace"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="หัวข้อการไปศึกษาดูงาน"
-                      class="inputgreen"
-                      v-model="formBody.studyTopic"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formBody.studyStartDate"
-                      :locale="'th'"
-                      autoApply
-                      readonly
-                      :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
-                          readonly
-                          class="inputgreen"
-                          :model-value="
-                            formBody.studyStartDate
-                              ? date2Thai(formBody.studyStartDate)
-                              : null
-                          "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
-                        >
-                          <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-xs-12 col-md-3">
-                    <datepicker
-                      readonly
-                      menu-class-name="modalfix"
-                      v-model="formBody.studyEndDate"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                      :min-date="formBody.studyStartDate"
                       @update:model-value="
-                        updateTotalPeriod(
-                          formBody.studyStartDate,
-                          formBody.studyEndDate
-                        )
+                        updateTotalPeriod(formBody.startDate, formBody.endDate)
                       "
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
@@ -1695,141 +1655,17 @@ onMounted(async () => {
                           outlined
                           readonly
                           class="inputgreen"
-                          :model-value="
-                            formBody.studyEndDate
-                              ? date2Thai(formBody.studyEndDate)
-                              : null
-                          "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
-                        >
-                          <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-xs-12 col-md-3">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="รวมระยะเวลาในการฝึกอบรม"
-                      class="inputgreen"
-                      v-model="formBody.totalPeriod"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <!-- เลือกทุน 3 -->
-              <div
-                class="col-12"
-                v-else-if="formBody.scholarshipType === 'ABROAD'"
-              >
-                <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="หลักสูตรการฝึกอบรม"
-                      class="inputgreen"
-                      v-model="formBody.course"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      outlined
-                      readonly
-                      label="สาขา"
-                      class="inputgreen"
-                      v-model="formBody.field"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
-                      class="inputgreen"
-                      v-model="formBody.educationalInstitution"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <datepicker
-                      readonly
-                      menu-class-name="modalfix"
-                      v-model="formBody.startDate"
-                      :locale="'th'"
-                      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
-                          readonly
-                          dense
-                          outlined
-                          class="inputgreen"
-                          :model-value="
-                            formBody.startDate
-                              ? date2Thai(formBody.startDate)
-                              : null
-                          "
-                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
-                        >
-                          <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-xs-12 col-md-3">
-                    <datepicker
-                      readonly
-                      menu-class-name="modalfix"
-                      v-model="formBody.endDate"
-                      :locale="'th'"
-                      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
-                          readonly
-                          outlined
-                          class="inputgreen"
                           :model-value="
                             formBody.endDate
                               ? date2Thai(formBody.endDate)
                               : null
                           "
                           :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1843,32 +1679,48 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="สถานที่ไปศึกษาดูงานในประเทศ"
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="สถานที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
+                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
@@ -1889,7 +1741,8 @@ onMounted(async () => {
                               ? date2Thai(formBody.studyStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                          :label="`${'วันเริ่มต้นการดูงาน'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1903,13 +1756,281 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       autoApply
+                      readonly
+                      :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
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการดูงาน'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 3 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'ABROAD'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หลักสูตรการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="สาขา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      readonly
+                      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
+                          class="inputgreen"
+                          :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-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                      @update:model-value="
+                        updateTotalPeriod(formBody.startDate, formBody.endDate)
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :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-12 col-md-3">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถานที่ไปดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      readonly
+                      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="inputgreen"
+                          readonly
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการดูงานในประเทศ'}`"
+                          hide-bottom-space
+                        >
+                          <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 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      readonly
+                      :locale="'th'"
+                      autoApply
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.studyStartDate"
@@ -1928,15 +2049,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyEndDate
                               ? date2Thai(formBody.studyEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                          :label="`${'วันสิ้นสุดการดูงานในประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1950,35 +2072,39 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="ประเทศที่เดินทางไปศึกษาดูงาน"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่เดินทางไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงานต่างประเทศ"
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       @update:model-value="
                         changeStartDate('studyAbroadStartDate')
@@ -1991,15 +2117,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadStartDate
                               ? date2Thai(formBody.studyAbroadStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2013,22 +2140,16 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       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 }">{{
@@ -2037,15 +2158,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
                           class="inputgreen"
+                          readonly
                           :model-value="
                             formBody.studyAbroadEndDate
                               ? date2Thai(formBody.studyAbroadEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2059,30 +2181,25 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      readonly
-                      dense
-                      outlined
-                      label="รวมระยะเวลาในการศึกษา"
-                      class="inputgreen"
-                      v-model="formBody.totalPeriod"
-                    />
-                  </div>
                 </div>
               </div>
 
-              <!-- เลือกทุน 5 -->
+              <!-- เลือกทุน 5 || 6 -->
               <div
                 class="col-12"
-                v-else-if="formBody.scholarshipType === 'RESEARCH'"
+                v-else-if="
+                  formBody.scholarshipType === 'STUDY' ||
+                  formBody.scholarshipType === 'TRAINING'
+                "
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-3">
+                  <!-- <div class="col-3">
                     <q-select
                       dense
-                      readonly
                       outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       class="inputgreen"
                       label="ประเภทการพัฒนา"
                       v-model="formBody.studyTopic"
@@ -2093,71 +2210,144 @@ onMounted(async () => {
                         'ดูงาน',
                         'ปฏิบัติการวิจัย',
                       ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
+                  ]"
                     />
-                  </div>
+                  </div> -->
 
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
+                  <div
+                    class="col-12 col-md-3"
+                    v-if="formBody.scholarshipType !== 'TRAINING'"
+                  >
+                    <!-- <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="ระดับปริญญา"
                       class="inputgreen"
                       v-model="formBody.degreeLevel"
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                      ]"
+                    /> -->
+                    <q-select
                       dense
-                      readonly
                       outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       class="inputgreen"
-                      :label="convertCourse()"
-                      v-model="formBody.course"
+                      label="ระดับปริญญา"
+                      v-model="formBody.degreeLevel"
+                      :options="[
+                        'ปริญญาตรี',
+                        'สูงกว่าปริญญาตรี',
+                        'ปริญญาโท',
+                        'ปริญญาเอก',
+                      ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                  ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      class="inputgreen"
+                      :label="
+                        formBody.scholarshipType === 'STUDY'
+                          ? 'หลักสูตรการศึกษา'
+                          : 'หลักสูตรการฝึกอบรม'
+                      "
+                      v-model="formBody.course"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY'
+                          ? 'หลักสูตรการศึกษา'
+                          : 'หลักสูตรการฝึกอบรม'}`,
+                  ]"
+                    />
+                  </div>
+
+                  <div
+                    class="col-12 col-md-3"
+                    v-if="formBody.scholarshipType !== 'TRAINING'"
+                  >
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="สาขาวิชา"
                       class="inputgreen"
                       v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div
+                    class="col-12 col-md-3"
+                    v-if="formBody.scholarshipType !== 'TRAINING'"
+                  >
                     <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="คณะ"
                       class="inputgreen"
                       v-model="formBody.faculty"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกคณะ'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
-                      readonly
                       dense
                       outlined
-                      label="สถาบันการศึกษา/หน่วยงานผู้จัด"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      :label="
+                        formBody.scholarshipType === 'STUDY'
+                          ? 'สถาบันการศึกษา'
+                          : 'หน่วยงานผู้จัด'
+                      "
                       class="inputgreen"
                       v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถาบันการศึกษา':'หน่วยงานผู้จัด'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
+                      readonly
                       :enableTimePicker="false"
                       week-start="0"
                       @update:model-value="changeStartDate('startDate')"
@@ -2177,7 +2367,16 @@ onMounted(async () => {
                               ? date2Thai(formBody.startDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          :label="`${
+                            formBody.scholarshipType === 'STUDY'
+                              ? 'วันเริ่มต้นการศึกษา'
+                              : 'วันเริ่มต้นการอบรม'
+                          }`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันเริ่มต้นการศึกษา':'วันเริ่มต้นการอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2191,14 +2390,13 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
+                      readonly
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.startDate"
@@ -2218,7 +2416,16 @@ onMounted(async () => {
                               ? date2Thai(formBody.endDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          :label="`${
+                            formBody.scholarshipType === 'STUDY'
+                              ? 'วันสิ้นสุดการศึกษา'
+                              : 'วันสิ้นสุดการอบรม'
+                          }`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันสิ้นสุดการศึกษา':'วันสิ้นสุดการอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2232,39 +2439,51 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      :label="'สถานที่ (เมือง/ประเทศ)'"
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      :label="
+                        formBody.scholarshipType === 'STUDY'
+                          ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)'
+                          : 'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'
+                      "
                       class="inputgreen"
                       v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)':'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'}`,
+                      ]"
                     />
                   </div>
 
-                  <div
-                    v-if="formBody.studyTopic == 'ดูงาน'"
-                    class="col-xs-12 col-md-3"
-                  >
+                  <div v-if="formBody.studyTopic == 'ดูงาน'" class="col-12 col-md-3">
                     <q-input
                       dense
                       readonly
                       outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="ประเทศที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
+                      readonly
                       :enableTimePicker="false"
                       week-start="0"
                       @update:model-value="
@@ -2278,15 +2497,20 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadStartDate
                               ? date2Thai(formBody.studyAbroadStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`"
+                          hide-bottom-space
+                          :rules="[
+                        (val: string) =>
+                          !!val || `${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`,
+                      ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2300,14 +2524,14 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       :min-date="formBody.studyAbroadStartDate"
                       @update:model-value="
@@ -2324,15 +2548,20 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadEndDate
                               ? date2Thai(formBody.studyAbroadEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันเดินทางกลับถึงประเทศไทย'}`"
+                          hide-bottom-space
+                          :rules="[
+                        (val: string) =>
+                          !!val || `${'วันเดินทางกลับถึงประเทศไทย'}`,
+                      ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2346,14 +2575,20 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="รวมระยะเวลาในการศึกษา"
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="รวมระยะเวลาทั้งสิ้น"
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกรวมระยะเวลาทั้งสิ้น'}`,
+                      ]"
                     />
                   </div>
                 </div>
@@ -2367,33 +2602,45 @@ onMounted(async () => {
             v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
           >
             <div class="row q-col-gutter-md">
-              <div class="col-xs-12 col-md-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
-                  readonly
                   dense
                   outlined
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
                   class="inputgreen"
                   label="หลักสูตรการฝึกอบรม"
                   v-model="formBody.course"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                  ]"
                 />
               </div>
-              <div class="col-xs-12 col-md-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
-                  readonly
                   outlined
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
                   class="inputgreen"
                   label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                   v-model="formBody.educationalInstitution"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                  ]"
                 />
               </div>
-              <div class="col-xs-12 col-md-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.startDate"
                   :locale="'th'"
                   autoApply
+                  readonly
                   :enableTimePicker="false"
                   week-start="0"
                   @update:model-value="changeStartDate('startDate')"
@@ -2406,15 +2653,20 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
                       class="inputgreen"
+                      readonly
                       :model-value="
                         formBody.startDate
                           ? date2Thai(formBody.startDate)
                           : null
                       "
                       :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม'}`,
+                      ]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2428,12 +2680,12 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-xs-12 col-md-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.endDate"
                   :locale="'th'"
+                  readonly
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
@@ -2453,6 +2705,11 @@ onMounted(async () => {
                         formBody.endDate ? date2Thai(formBody.endDate) : null
                       "
                       :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                      ]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2466,37 +2723,46 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
-                  readonly
                   outlined
-                  label="สถานที่ไปศึกษาดูงานในประเทศ"
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
+                  label="สถานที่ไปดูงานในประเทศ"
                   class="inputgreen"
                   v-model="formBody.studyPlace"
                 />
               </div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
-                  readonly
                   outlined
-                  label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                  readonly
+                  lazy-rules
+                  hide-bottom-space
+                  label="หัวข้อการไปดูงานในประเทศ"
                   class="inputgreen"
                   v-model="formBody.studyTopic"
                 />
               </div>
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyStartDate"
                   :locale="'th'"
+                  readonly
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
-                  @update:model-value="changeStartDate('studyAbroadStartDate')"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyStartDate,
+                      formBody.studyEndDate
+                    )
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -2505,15 +2771,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyStartDate
                           ? date2Thai(formBody.studyStartDate)
                           : null
                       "
-                      :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                      :label="`${'วันเริ่มต้นการดูงานในประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2527,14 +2794,14 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyEndDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
+                  readonly
                   week-start="0"
                   :min-date="formBody.studyStartDate"
                   @update:model-value="
@@ -2551,15 +2818,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyEndDate
                           ? date2Thai(formBody.studyEndDate)
                           : null
                       "
-                      :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                      :label="`${'วันสิ้นสุดการดูงานในประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2573,34 +2841,50 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-12 col-md-3">
                 <q-input
                   dense
-                  readonly
                   outlined
-                  label="ประเทศที่ไปศึกษาดูงาน"
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
+                  label="รวมระยะเวลาในการฝึกอบรม"
+                  class="inputgreen"
+                  v-model="formBody.totalPeriod"
+                />
+              </div>
+              <div class="col-md-3" v-if="$q.screen.gt.sm"></div>
+              <div class="col-12 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
+                  label="ประเทศที่ไปดูงาน"
                   class="inputgreen"
                   v-model="formBody.studyCountry"
                 />
               </div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
                   outlined
+                  lazy-rules
                   readonly
-                  label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                  hide-bottom-space
+                  label="หัวข้อการไปดูงานต่างประเทศ"
                   class="inputgreen"
                   v-model="formBody.studyAbroadTopic"
                 />
               </div>
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyAbroadStartDate"
                   :locale="'th'"
                   autoApply
+                  readonly
                   :enableTimePicker="false"
                   week-start="0"
                   @update:model-value="changeStartDate('studyAbroadStartDate')"
@@ -2612,15 +2896,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyAbroadStartDate
                           ? date2Thai(formBody.studyAbroadStartDate)
                           : null
                       "
-                      :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                      :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2634,22 +2919,16 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="ccol-xs-12 ol-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyAbroadEndDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
+                  readonly
                   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 }">{{
@@ -2658,15 +2937,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyAbroadEndDate
                           ? date2Thai(formBody.studyAbroadEndDate)
                           : null
                       "
-                      :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                      :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2680,18 +2960,74 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-xs-12 col-md-3">
-                <q-input
-                  readonly
-                  dense
-                  outlined
-                  label="รวมระยะเวลาในการฝึกอบรม "
-                  class="inputgreen"
-                  v-model="formBody.totalPeriod"
-                />
-              </div>
             </div>
           </div>
+
+          <div class="col-12">
+            <q-input
+              readonly
+              outlined
+              dense
+              class="inputgreen"
+              v-model="formBody.changeDetail"
+              label="เปลี่ยนแปลงรายละเอียด"
+              rows="3"
+              hide-bottom-space
+              type="textarea"
+            />
+          </div>
+
+          <!-- ผู้ค้ำประกัน -->
+          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+            <q-card bordered tyle="border: 1px solid #d6dee1">
+              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                ข้อมูลผู้ค้ำประกัน
+              </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>
+                <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 text-html">
+                      {{ dataGuarantor.org }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <!-- ผู้ค้ำประกัน -->
         </div>
       </q-card>
     </div>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index a22a888..e7813d7 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -41,8 +41,12 @@ const scholarshipTypeOp = ref<DataOptions[]>([
     name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
   {
-    id: "RESEARCH",
-    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+    id: "STUDY",
+    name: "ทุนการศึกษา ณ ต่างประเทศ",
+  },
+  {
+    id: "TRAINING",
+    name: "ทุนฝึกอบรม ณ ต่างประเทศ",
   },
 ]);
 
@@ -144,8 +148,10 @@ function convertType(val: string) {
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
     case "EXECUTIVE":
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
-    case "RESEARCH":
-      return "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ";
+    case "STUDY":
+      return "ทุนการศึกษา ณ ต่างประเทศ";
+    case "TRAINING":
+      return "ทุนฝึกอบรม ณ ต่างประเทศ";
   }
 }