From d42e421f148363b005ea5fc252eb5a6cd0d6b97e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 5 Apr 2024 16:31:36 +0700
Subject: [PATCH] =?UTF-8?q?API=20=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A9=E0=B8=B2/=E0=B8=9D=E0=B8=B6=E0=B8=81?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/15_development/api.development.ts     |   15 +-
 .../components/scholarship/DetailView.vue     | 1758 ++++++++++++++++-
 .../15_development/interface/index/Main.ts    |    8 +
 .../15_development/interface/request/Main.ts  |    4 +-
 .../interface/request/Scholarship.ts          |   53 +
 .../interface/response/Scholarship.ts         |   67 +
 src/modules/15_development/views/MainPage.vue |   19 +-
 .../15_development/views/Scholarship.vue      |  166 +-
 8 files changed, 1912 insertions(+), 178 deletions(-)
 create mode 100644 src/modules/15_development/interface/request/Scholarship.ts
 create mode 100644 src/modules/15_development/interface/response/Scholarship.ts

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 69a0867a6..02c60b99f 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -1,17 +1,22 @@
 import env from "../index";
 const development = `${env.API_URI}/development`;
-const developmentOrg = `${env.API_URI}/org`
+const developmentOrg = `${env.API_URI}/org`;
+const devScholarship = `${env.API_URI}/development/scholarship`;
 export default {
   development,
   /** history */
-  developmentHistoryList: (type:string) => `${development}/history/${type}/`,
-  developmentHistoryAdd: (type:string) => `${development}/history/${type}`,
+  developmentHistoryList: (type: string) => `${development}/history/${type}/`,
+  developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
 
   /** history employee */
-  developmentProjectSearchEmployee:()=>`${developmentOrg}/profile-employee/`,
-  
+  developmentProjectSearchEmployee: () => `${developmentOrg}/profile-employee/`,
+
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
   developmentMainById: (id: string) => `${development}/main/${id}`,
+
+  /** ทุนการศึกษา/ฝึกอบรม*/
+  devScholarship,
+  devScholarshipByid: (id: string) => `${devScholarship}/${id}`,
 };
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 6faa2e29f..84ad0ad54 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -1,12 +1,17 @@
+divdiv
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type {
   DataOption,
   DataPerson,
 } from "@/modules/15_development/interface/index/Main";
+import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship";
+import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship";
 
 import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
 
@@ -15,33 +20,44 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const { dialogConfirm, showLoader, hideLoader, date2Thai } = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  calculateDurationYmd,
+} = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const scholarshipId = ref<string | null>(
+  route.params.id ? route.params.id.toLocaleString() : null
+);
 const modalDialogGov = ref<boolean>(false);
 
 const budgetSourceOp = ref<DataOption[]>([
-  { id: "1", name: "แหล่งงบประมาณกทม" },
-  { id: "2", name: "แหล่งงบประมาณอื่นๆ" },
+  { id: "BKK", name: "แหล่งงบประมาณกทม" },
+  { id: "OTHER", name: "แหล่งงบประมาณอื่นๆ" },
 ]);
 const scholarshipTypeOp = ref<DataOption[]>([
-  { id: "1", name: "การศึกษาในประเทศ" },
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
   {
-    id: "2",
+    id: "NOABROAD",
     name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
   },
   {
-    id: "3",
+    id: "ABROAD",
     name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
   },
   {
-    id: "4",
+    id: "EXECUTIVE",
     name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
 ]);
-const scholarshipTypeShortOp = ref<DataOption[]>([
-  { id: "1", name: "ทุน 1 (ก)(ข)(ค)" },
-  { id: "2", name: "ทุน 2 (ก)(ข)" },
+const fundTypeOp = ref<DataOption[]>([
+  { id: "FUND1", name: "ทุน 1 (ก)(ข)(ค)" },
+  { id: "FUND2", name: "ทุน 2 (ก)(ข)" },
 ]);
 
 const isGov = ref<boolean>(false);
@@ -67,48 +83,240 @@ const dataGuarantor = reactive({
   positionSide: "",
   org: "-",
 });
-const formData = reactive({
-  personId: "",
-  year: null,
-  budgetSource: "",
-  approveBudget: "",
-  approveNumber: "",
-  date: null,
-  approveDate: null,
-  isTime: false,
-  detail: "",
-  scholarshipType: "",
-  scholarshipTypeShort: "",
-  contractNumber: "",
-  contractDate: null,
-  reportNumber: "",
-  reportDate: null,
-  reportLetterDate: null,
-  guarantorId: "",
-  trainingCourse: "",
-  institution: "",
-  trainingDateStart: null,
-  trainingDateEnd: null,
-  studyTopic: "",
-  studyPlace: "",
+
+const formBody = reactive<FormsSholarship>({
+  rank: "", //ยศ
+  prefix: "", //คำนำหน้าชื่อ
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  citizenId: "", //เลขประจำตัวประชาชน
+  position: "", //ตำแหน่ง
+  posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: null, //ไอดีระดับตำแหน่ง
+  posTypeId: null, //ไอดีประเภทตำแหน่ง
+  guarantorRank: "", //ยศ(ผู้ค้ำ)
+  guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  posLevelguarantorId: null, //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: null, //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: null, //ปีงบประมาณที่ได้รับทุน
+  budgetSource: "", //แหล่งงบประมาณ
+  budgetApprove: null, //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: "", //เลขที่หนังสืออนุมัติ
+  bookNoDate: null, //ลงวันที่(หนังสือ)
+  bookApproveDate: null, //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: false, //ใช้เวลาราชการ
+  changeDetail: "", //เปลี่ยนแปลงรายละเอียด
+  scholarshipType: "", //เลือกประเภททุน
+  fundType: "", //ประเภททุน
+  contractNo: "", //เลขที่สัญญา
+  contractDate: null, //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: "", //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: null, //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: null, //รายงานตัวกลับวันที่
+  degreeLevel: "", //ระดับปริญญา
+  course: "", //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: "", //สาขาวิชา/สาขา
+  faculty: "", //คณะ
+  educationalInstitution: "", //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: null, //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: null, //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: "", //สถานที่ไปศึกษาดูงาน
+  studyTopic: "", //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: null, //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: null, //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: "", //ประเทศที่ไปศึกษาดูงาน
+  studyAbroadTopic: "", //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
 });
 
+function fetchDataDetail(id: string) {
+  showLoader();
+  http
+    .get(config.API.devScholarshipByid(id))
+    .then((res) => {
+      const data: DataSholarship = res.data.result;
+      console.log(data);
+      formBody.rank = data.rank;
+      formBody.prefix = data.prefix;
+      formBody.firstName = data.firstName;
+      formBody.lastName = data.lastName;
+      formBody.citizenId = data.citizenId;
+      formBody.position = data.position;
+      formBody.posExecutive = data.posExecutive;
+      formBody.posLevelId = data.posLevelId;
+      formBody.posTypeId = data.posTypeId;
+      formBody.guarantorRank = data.guarantorRank;
+      formBody.guarantorPrefix = data.guarantorPrefix;
+      formBody.guarantorFirstName = data.guarantorFirstName;
+      formBody.guarantorLastName = data.guarantorLastName;
+      formBody.guarantorCitizenId = data.guarantorCitizenId;
+      formBody.guarantorPosition = data.guarantorPosition;
+      formBody.guarantorPosExecutive = data.guarantorPosExecutive;
+      formBody.posLevelguarantorId = data.posLevelguarantorId;
+      formBody.posTypeguarantorId = data.posTypeguarantorId;
+      formBody.scholarshipYear = data.scholarshipYear;
+      formBody.budgetSource = data.budgetSource;
+      formBody.budgetApprove = data.budgetApprove;
+      formBody.bookNo = data.bookNo;
+      formBody.bookNoDate = data.bookNoDate;
+      formBody.bookApproveDate = data.bookApproveDate;
+      formBody.useOfficialTime = data.useOfficialTime;
+      formBody.changeDetail = data.changeDetail;
+      formBody.scholarshipType = data.scholarshipType;
+      formBody.fundType = data.fundType;
+      formBody.contractNo = data.contractNo;
+      formBody.contractDate = data.contractDate;
+      formBody.reportBackNo = data.reportBackNo;
+      formBody.reportBackNoDate = data.reportBackNoDate;
+      formBody.reportBackDate = data.reportBackDate;
+      formBody.degreeLevel = data.degreeLevel;
+      formBody.course = data.course;
+      formBody.field = data.field;
+      formBody.faculty = data.faculty;
+      formBody.educationalInstitution = data.educationalInstitution;
+      formBody.startDate = data.startDate;
+      formBody.endDate = data.endDate;
+      formBody.studyPlace = data.studyPlace;
+      formBody.studyTopic = data.studyTopic;
+      formBody.studyStartDate = data.studyStartDate;
+      formBody.studyEndDate = data.studyEndDate;
+      formBody.studyCountry = data.studyCountry;
+      formBody.studyAbroadTopic = data.studyAbroadTopic;
+      formBody.studyAbroadStartDate = data.studyAbroadStartDate;
+      formBody.studyAbroadEndDate = data.studyAbroadEndDate;
+      formBody.totalPeriod = data.totalPeriod;
+
+      dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
+      dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
+      dataPerson.position = data.position ? data.position : "-";
+      dataPerson.type = data.posTypeName ? data.posTypeName : "-";
+      dataPerson.level = data.posLevelName ? data.posLevelName : "-";
+      dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
+
+      dataGuarantor.citizenId = data.guarantorCitizenId
+        ? data.guarantorCitizenId
+        : "-";
+      dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
+      dataGuarantor.position = data.position ? data.position : "-";
+      dataGuarantor.type = data.posTypeguarantorName
+        ? data.posTypeguarantorName
+        : "-";
+      dataGuarantor.level = data.posLevelguarantorName
+        ? data.posLevelguarantorName
+        : "-";
+      dataGuarantor.positionSide = data.guarantorPosExecutive
+        ? data.guarantorPosExecutive
+        : "-";
+
+      isGov.value = data.citizenId ? true : false;
+      isGuarantor.value = data.guarantorCitizenId ? true : false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
-  dialogConfirm($q, () => {
-    console.log(formData);
+  console.log(formBody);
+  dialogConfirm($q, async () => {
+    showLoader();
+    formBody.budgetApprove =
+      typeof formBody.budgetApprove === "string"
+        ? Number(formBody.budgetApprove.replace(/,/g, ""))
+        : formBody.budgetApprove;
+    try {
+      const url = scholarshipId.value
+        ? config.API.devScholarshipByid(scholarshipId.value)
+        : config.API.devScholarship;
+      const method = scholarshipId.value ? "put" : "post";
+      await http[method](url, formBody);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+
+      scholarshipId.value
+        ? fetchDataDetail(scholarshipId.value)
+        : router.push("/development/scholarship");
+    } catch (e) {
+      messageError($q, e);
+    } finally {
+      hideLoader();
+    }
   });
 }
 
-function changeTrainingDateStart() {
-  if (
-    formData?.trainingDateStart !== null &&
-    formData?.trainingDateEnd !== null
-  ) {
-    const startDate = new Date(formData.trainingDateStart);
-    const endDate = new Date(formData?.trainingDateEnd);
-    if (startDate > endDate) {
-      formData.trainingDateEnd = null;
-    }
+function changeStartDate(type: string) {
+  switch (type) {
+    case "startDate":
+      if (formBody?.startDate !== null && formBody?.endDate !== null) {
+        const startDate = new Date(formBody.startDate);
+        const endDate = new Date(formBody?.endDate);
+        if (startDate > endDate) {
+          formBody.endDate = null;
+        }
+      }
+      break;
+
+    case "studyStartDate":
+      if (
+        formBody?.studyStartDate !== null &&
+        formBody?.studyEndDate !== null
+      ) {
+        const startDate = new Date(formBody.studyStartDate);
+        const endDate = new Date(formBody?.studyEndDate);
+        if (startDate > endDate) {
+          formBody.studyEndDate = null;
+          if (formBody.scholarshipType === "NOABROAD") {
+            formBody.totalPeriod = "";
+          }
+        } else {
+          if (formBody.scholarshipType === "NOABROAD") {
+            formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
+          }
+        }
+      }
+      break;
+
+    case "studyAbroadStartDate":
+      if (
+        formBody?.studyAbroadStartDate !== null &&
+        formBody?.studyAbroadEndDate !== null
+      ) {
+        const startDate = new Date(formBody.studyAbroadStartDate);
+        const endDate = new Date(formBody?.studyAbroadEndDate);
+        if (startDate > endDate) {
+          formBody.studyAbroadEndDate = null;
+        } else {
+          formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+}
+
+function updateTotalPeriod(
+  startDate: any,
+  endDate: any,
+  toDo: boolean = false
+) {
+  console.log(startDate);
+  console.log(endDate);
+
+  if (!toDo && startDate && endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    formBody.totalPeriod = calculateDurationYmd(start, end);
   }
 }
 
@@ -119,6 +327,15 @@ function onSelectGov(isGov: boolean) {
 
 function upDate(data: DataPerson) {
   if (isSelectGov.value) {
+    formBody.prefix = data.prefix;
+    formBody.firstName = data.firstName;
+    formBody.lastName = data.lastName;
+    formBody.citizenId = data.citizenId;
+    formBody.position = data.position;
+    formBody.posTypeId = data.posTypeId;
+    formBody.posLevelId = data.posLevelId;
+    formBody.posExecutive = data.positionSide;
+
     dataPerson.id = data.id ? data.id : "-";
     dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
     dataPerson.name = data.name ? data.name : "-";
@@ -126,9 +343,17 @@ function upDate(data: DataPerson) {
     dataPerson.type = data.type ? data.type : "-";
     dataPerson.level = data.level ? data.level : "-";
     dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
-    // dataPerson.org = data.
     isGov.value = true;
   } else {
+    formBody.guarantorPrefix = data.prefix;
+    formBody.guarantorFirstName = data.firstName;
+    formBody.guarantorLastName = data.lastName;
+    formBody.guarantorCitizenId = data.citizenId;
+    formBody.guarantorPosition = data.position;
+    formBody.posTypeguarantorId = data.posTypeId;
+    formBody.posLevelguarantorId = data.posLevelId;
+    formBody.guarantorPosExecutive = data.positionSide;
+
     dataGuarantor.id = data.id ? data.id : "-";
     dataGuarantor.citizenId = data.citizenId ? data.citizenId : "-";
     dataGuarantor.name = data.name ? data.name : "-";
@@ -136,13 +361,13 @@ function upDate(data: DataPerson) {
     dataGuarantor.type = data.type ? data.type : "-";
     dataGuarantor.level = data.level ? data.level : "-";
     dataGuarantor.positionSide = data.positionSide ? data.positionSide : "-";
-    // dataGuarantor.org = data.
+
     isGuarantor.value = true;
   }
 }
 
 onMounted(() => {
-  isGov.value = route.params.id ? true : false;
+  scholarshipId.value && fetchDataDetail(scholarshipId.value);
 });
 </script>
 <template>
@@ -223,7 +448,7 @@ onMounted(() => {
         <div class="col-3">
           <datepicker
             menu-class-name="modalfix"
-            v-model="formData.year"
+            v-model="formBody.scholarshipYear"
             :locale="'th'"
             autoApply
             year-picker
@@ -239,7 +464,9 @@ onMounted(() => {
                 outlined
                 class="inputgreen"
                 :model-value="
-                  formData.year ? Number(formData.year) + 543 : null
+                  formBody.scholarshipYear
+                    ? Number(formBody.scholarshipYear) + 543
+                    : null
                 "
                 :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
                 hide-bottom-space
@@ -266,7 +493,7 @@ onMounted(() => {
             class="inputgreen"
             label="แหล่งงบประมาณ"
             hide-bottom-space
-            v-model="formData.budgetSource"
+            v-model="formBody.budgetSource"
             :options="budgetSourceOp"
             option-label="name"
             option-value="id"
@@ -284,7 +511,7 @@ onMounted(() => {
             outlined
             hide-bottom-space
             class="inputgreen"
-            v-model="formData.approveBudget"
+            v-model="formBody.budgetApprove"
             label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
             mask="###,###,###,###,###,###"
             reverse-fill-mask
@@ -299,11 +526,9 @@ onMounted(() => {
             dense
             outlined
             class="inputgreen"
-            v-model="formData.approveNumber"
+            v-model="formBody.bookNo"
             label="เลขที่หนังสิออนุมัติ"
-            mask="#"
             hide-bottom-space
-            reverse-fill-mask
             :rules="[
                 (val:string) =>
                   !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
@@ -313,7 +538,7 @@ onMounted(() => {
         <div class="col-3">
           <datepicker
             menu-class-name="modalfix"
-            v-model="formData.date"
+            v-model="formBody.bookNoDate"
             :locale="'th'"
             autoApply
             :enableTimePicker="false"
@@ -327,7 +552,9 @@ onMounted(() => {
                 dense
                 outlined
                 class="inputgreen"
-                :model-value="formData.date ? date2Thai(formData.date) : null"
+                :model-value="
+                  formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
+                "
                 :label="`${'ลงวันที่'}`"
                 hide-bottom-space
                 :rules="[
@@ -350,7 +577,7 @@ onMounted(() => {
         <div class="col-3">
           <datepicker
             menu-class-name="modalfix"
-            v-model="formData.approveDate"
+            v-model="formBody.bookApproveDate"
             :locale="'th'"
             autoApply
             :enableTimePicker="false"
@@ -365,7 +592,9 @@ onMounted(() => {
                 outlined
                 class="inputgreen"
                 :model-value="
-                  formData.approveDate ? date2Thai(formData.approveDate) : null
+                  formBody.bookApproveDate
+                    ? date2Thai(formBody.bookApproveDate)
+                    : null
                 "
                 :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
                 hide-bottom-space
@@ -390,7 +619,7 @@ onMounted(() => {
           <q-checkbox
             keep-color
             color="primary"
-            v-model="formData.isTime"
+            v-model="formBody.useOfficialTime"
             label="ใช้เวลาราชการ"
           />
         </div>
@@ -399,7 +628,7 @@ onMounted(() => {
             outlined
             dense
             class="inputgreen"
-            v-model="formData.detail"
+            v-model="formBody.changeDetail"
             label="เปลี่ยนแปลงรายละเอียด"
             rows="3"
             hide-bottom-space
@@ -416,7 +645,7 @@ onMounted(() => {
             outlined
             hide-bottom-space
             lazy-rules
-            v-model="formData.scholarshipType"
+            v-model="formBody.scholarshipType"
             :options="scholarshipTypeOp"
             option-label="name"
             option-value="id"
@@ -433,7 +662,8 @@ onMounted(() => {
         <div
           class="col-3"
           v-if="
-            formData.scholarshipType !== '' && formData.scholarshipType !== '4'
+            formBody.scholarshipType !== '' &&
+            formBody.scholarshipType !== 'EXECUTIVE'
           "
         >
           <q-select
@@ -442,8 +672,8 @@ onMounted(() => {
             hide-bottom-space
             lazy-rules
             class="inputgreen"
-            v-model="formData.scholarshipTypeShort"
-            :options="scholarshipTypeShortOp"
+            v-model="formBody.fundType"
+            :options="fundTypeOp"
             option-label="name"
             option-value="id"
             emit-value
@@ -458,21 +688,20 @@ onMounted(() => {
         <div
           class="col-12"
           v-if="
-            formData.scholarshipType !== '' && formData.scholarshipType !== '4'
+            formBody.scholarshipType !== '' &&
+            formBody.scholarshipType !== 'EXECUTIVE'
           "
         >
-          <div class="row q-col-gutter-md">
+          <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
               <q-input
                 dense
                 outlined
                 lazy-rules
                 hide-bottom-space
-                reverse-fill-mask
                 label="เลขที่สัญญา"
-                mask="#"
                 class="inputgreen"
-                v-model="formData.contractNumber"
+                v-model="formBody.contractNo"
                 :rules="[
         (val:string) =>
           !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
@@ -482,7 +711,7 @@ onMounted(() => {
             <div class="col-2">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.contractDate"
+                v-model="formBody.contractDate"
                 :locale="'th'"
                 autoApply
               >
@@ -496,8 +725,8 @@ onMounted(() => {
                     outlined
                     class="inputgreen"
                     :model-value="
-                      formData.contractDate
-                        ? date2Thai(formData.contractDate)
+                      formBody.contractDate
+                        ? date2Thai(formBody.contractDate)
                         : null
                     "
                     :label="`${'ลงวันที่'}`"
@@ -524,11 +753,9 @@ onMounted(() => {
                 dense
                 outlined
                 hide-bottom-space
-                reverse-fill-mask
                 lazy-rules
                 class="inputgreen"
-                v-model="formData.reportNumber"
-                mask="#"
+                v-model="formBody.reportBackNo"
                 label="เลขที่หนังสือรายงานตัวกลับ"
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
@@ -538,7 +765,7 @@ onMounted(() => {
             <div class="col-2">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.reportDate"
+                v-model="formBody.reportBackNoDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -553,8 +780,8 @@ onMounted(() => {
                     outlined
                     class="inputgreen"
                     :model-value="
-                      formData.reportDate
-                        ? date2Thai(formData.reportDate)
+                      formBody.reportBackNoDate
+                        ? date2Thai(formBody.reportBackNoDate)
                         : null
                     "
                     :label="`${'ลงวันที่'}`"
@@ -579,7 +806,7 @@ onMounted(() => {
             <div class="col-2">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.reportLetterDate"
+                v-model="formBody.reportBackDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -594,8 +821,8 @@ onMounted(() => {
                     outlined
                     class="inputgreen"
                     :model-value="
-                      formData.reportLetterDate
-                        ? date2Thai(formData.reportLetterDate)
+                      formBody.reportBackDate
+                        ? date2Thai(formBody.reportBackDate)
                         : null
                     "
                     :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
@@ -676,10 +903,1111 @@ onMounted(() => {
                 </div>
               </q-card>
             </div>
+
+            <!-- เลือกทุน 1 -->
+            <div class="col-12" v-if="formBody.scholarshipType === 'DOMESTICE'">
+              <div class="row q-col-gutter-md">
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="ระดับปริญญา"
+                    class="inputgreen"
+                    v-model="formBody.degreeLevel"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หลักสูตรการศึกษา"
+                    class="inputgreen"
+                    v-model="formBody.course"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สาขาวิชา"
+                    class="inputgreen"
+                    v-model="formBody.field"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="คณะ"
+                    class="inputgreen"
+                    v-model="formBody.faculty"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกคณะ'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถาบันการศึกษา"
+                    class="inputgreen"
+                    v-model="formBody.educationalInstitution"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.startDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="changeStartDate('startDate')"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="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-3">
+                  <datepicker
+                    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
+                        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-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถานที่ไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyPlace"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หัวข้อการไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyTopic"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyStartDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    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"
+                        :model-value="
+                          formBody.studyStartDate
+                            ? date2Thai(formBody.studyStartDate)
+                            : null
+                        "
+                        :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyEndDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formBody.studyStartDate"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyEndDate
+                            ? date2Thai(formBody.studyEndDate)
+                            : null
+                        "
+                        :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-6"></div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="ประเทศที่ไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyCountry"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                    class="inputgreen"
+                    v-model="formBody.studyAbroadTopic"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyAbroadStartDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="
+                      changeStartDate('studyAbroadStartDate')
+                    "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyAbroadStartDate
+                            ? date2Thai(formBody.studyAbroadStartDate)
+                            : null
+                        "
+                        :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyAbroadEndDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formBody.studyAbroadStartDate"
+                    @update:model-value="
+                      updateTotalPeriod(
+                        formBody.studyAbroadStartDate,
+                        formBody.studyAbroadEndDate
+                      )
+                    "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyAbroadEndDate
+                            ? date2Thai(formBody.studyAbroadEndDate)
+                            : null
+                        "
+                        :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="รวมระยะเวลาในการศึกษา"
+                    class="inputgreen"
+                    v-model="formBody.totalPeriod"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+      ]"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <!-- เลือกทุน 2 -->
+            <div
+              class="col-12"
+              v-else-if="formBody.scholarshipType === 'NOABROAD'"
+            >
+              <div class="row q-col-gutter-md">
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หลักสูตรการฝึกอบรม"
+                    class="inputgreen"
+                    v-model="formBody.course"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สาขา"
+                    class="inputgreen"
+                    v-model="formBody.field"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสาขา'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                    class="inputgreen"
+                    v-model="formBody.educationalInstitution"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.startDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="changeStartDate('startDate')"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="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-3">
+                  <datepicker
+                    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
+                        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-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถานที่ไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyPlace"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หัวข้อการไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyTopic"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyStartDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    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"
+                        :model-value="
+                          formBody.studyStartDate
+                            ? date2Thai(formBody.studyStartDate)
+                            : null
+                        "
+                        :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyEndDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formBody.studyStartDate"
+                    @update:model-value="
+                      updateTotalPeriod(
+                        formBody.studyStartDate,
+                        formBody.studyEndDate
+                      )
+                    "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyEndDate
+                            ? date2Thai(formBody.studyEndDate)
+                            : null
+                        "
+                        :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="รวมระยะเวลาในการฝึกอบรม"
+                    class="inputgreen"
+                    v-model="formBody.totalPeriod"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกระยะเวลาในการฝึกอบรม'}`,
+      ]"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <!-- เลือกทุน 3 -->
+            <div
+              class="col-12"
+              v-else-if="formBody.scholarshipType === 'ABROAD'"
+            >
+              <div class="row q-col-gutter-md">
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หลักสูตรการฝึกอบรม"
+                    class="inputgreen"
+                    v-model="formBody.course"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สาขา"
+                    class="inputgreen"
+                    v-model="formBody.field"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสาขา'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                    class="inputgreen"
+                    v-model="formBody.educationalInstitution"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.startDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="changeStartDate('startDate')"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="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-3">
+                  <datepicker
+                    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
+                        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-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถานที่ไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyPlace"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หัวข้อการไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyTopic"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyStartDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    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"
+                        :model-value="
+                          formBody.studyStartDate
+                            ? date2Thai(formBody.studyStartDate)
+                            : null
+                        "
+                        :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyEndDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formBody.studyStartDate"
+                    @update:model-value="
+                      updateTotalPeriod(
+                        formBody.studyStartDate,
+                        formBody.studyEndDate,
+                        true
+                      )
+                    "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyEndDate
+                            ? date2Thai(formBody.studyEndDate)
+                            : null
+                        "
+                        :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-6"></div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="ประเทศที่ไปศึกษาดูงาน"
+                    class="inputgreen"
+                    v-model="formBody.studyCountry"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                    class="inputgreen"
+                    v-model="formBody.studyAbroadTopic"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+      ]"
+                  />
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyAbroadStartDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="
+                      changeStartDate('studyAbroadStartDate')
+                    "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyAbroadStartDate
+                            ? date2Thai(formBody.studyAbroadStartDate)
+                            : null
+                        "
+                        :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.studyAbroadEndDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formBody.studyAbroadStartDate"
+                    @update:model-value="
+                      updateTotalPeriod(
+                        formBody.studyAbroadStartDate,
+                        formBody.studyAbroadEndDate
+                      )
+                    "
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.studyAbroadEndDate
+                            ? date2Thai(formBody.studyAbroadEndDate)
+                            : null
+                        "
+                        :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        hide-bottom-space
+                        :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
+        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="รวมระยะเวลาในการศึกษา"
+                    class="inputgreen"
+                    v-model="formBody.totalPeriod"
+                    :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+      ]"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
-        <div class="col-12" v-else-if="formData.scholarshipType === '4'">
+        <!-- เลือกทุน 4 -->
+        <div
+          class="col-12"
+          v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
+        >
           <div class="row q-col-gutter-md">
             <div class="col-6">
               <q-input
@@ -689,7 +2017,7 @@ onMounted(() => {
                 hide-bottom-space
                 class="inputgreen"
                 label="หลักสูตรการฝึกอบรม"
-                v-model="formData.trainingCourse"
+                v-model="formBody.course"
                 :rules="[
         (val:string) =>
           !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
@@ -704,24 +2032,24 @@ onMounted(() => {
                 hide-bottom-space
                 class="inputgreen"
                 label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
-                v-model="formData.institution"
+                v-model="formBody.educationalInstitution"
                 :rules="[
         (val:string) =>
           !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                 ]"
               />
             </div>
-
             <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.trainingDateStart"
+                v-model="formBody.startDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
                 week-start="0"
-                @update:model-value="changeTrainingDateStart()"
+                @update:model-value="changeStartDate('startDate')"
               >
+                >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
@@ -732,9 +2060,7 @@ onMounted(() => {
                     outlined
                     class="inputgreen"
                     :model-value="
-                      formData.trainingDateStart
-                        ? date2Thai(formData.trainingDateStart)
-                        : null
+                      formBody.startDate ? date2Thai(formBody.startDate) : null
                     "
                     :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
                     hide-bottom-space
@@ -758,12 +2084,12 @@ onMounted(() => {
             <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="formData.trainingDateEnd"
+                v-model="formBody.endDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
                 week-start="0"
-                :min-date="formData.trainingDateStart"
+                :min-date="formBody.startDate"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -775,9 +2101,7 @@ onMounted(() => {
                     outlined
                     class="inputgreen"
                     :model-value="
-                      formData.trainingDateEnd
-                        ? date2Thai(formData.trainingDateEnd)
-                        : null
+                      formBody.endDate ? date2Thai(formBody.endDate) : null
                     "
                     :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
                     hide-bottom-space
@@ -805,9 +2129,9 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                class="inputgreen"
                 label="สถานที่ไปศึกษาดูงาน"
-                v-model="formData.studyPlace"
+                class="inputgreen"
+                v-model="formBody.studyPlace"
                 :rules="[
         (val:string) =>
           !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
@@ -820,12 +2144,242 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                label="หัวข้อไปศึกษาดูงาน"
+                label="หัวข้อการไปศึกษาดูงาน"
                 class="inputgreen"
-                v-model="formData.studyTopic"
+                v-model="formBody.studyTopic"
                 :rules="[
         (val:string) =>
-          !!val || `${'กรุณากรอกหัวข้อไปศึกษาดูงาน'}`,
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+      ]"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.studyStartDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeStartDate('studyAbroadStartDate')"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formBody.studyStartDate
+                        ? date2Thai(formBody.studyStartDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                    hide-bottom-space
+                    :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+        ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.studyEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formBody.studyStartDate"
+                @update:model-value="
+                  updateTotalPeriod(
+                    formBody.studyStartDate,
+                    formBody.studyEndDate
+                  )
+                "
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formBody.studyEndDate
+                        ? date2Thai(formBody.studyEndDate)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                    hide-bottom-space
+                    :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+        ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6"></div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="ประเทศที่ไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="formBody.studyCountry"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+      ]"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                class="inputgreen"
+                v-model="formBody.studyAbroadTopic"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
+      ]"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.studyAbroadStartDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeStartDate('studyAbroadStartDate')"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formBody.studyAbroadStartDate
+                        ? date2Thai(formBody.studyAbroadStartDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                    hide-bottom-space
+                    :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`,
+        ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formBody.studyAbroadEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formBody.studyAbroadStartDate"
+                @update:model-value="
+                  updateTotalPeriod(
+                    formBody.studyAbroadStartDate,
+                    formBody.studyAbroadEndDate
+                  )
+                "
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      formBody.studyAbroadEndDate
+                        ? date2Thai(formBody.studyAbroadEndDate)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                    hide-bottom-space
+                    :rules="[
+          (val:string) =>
+            !!val || `${'กรุณาเลือกวันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`,
+        ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                label="รวมระยะเวลาในการศึกษา"
+                class="inputgreen"
+                v-model="formBody.totalPeriod"
+                :rules="[
+        (val:string) =>
+          !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
       ]"
               />
             </div>
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 3cb5a2a85..836c9a170 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -55,6 +55,13 @@ interface DataPerson {
   [key: string]: any;
 }
 
+interface ItemsDownload {
+  label: string;
+  value: string;
+  icon: string;
+  color: string;
+}
+
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -62,4 +69,5 @@ export type {
   NewPagination,
   FormFilter,
   DataPerson,
+  ItemsDownload
 };
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index 0af7c18a5..ba505dbd0 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -63,7 +63,7 @@ interface FormFollowOther {
 
 interface FormAddHistory {
   id: string;
-  name: string|null;
+  name: string | null;
   prefix: string;
   rank: string;
   firstName: string;
@@ -82,7 +82,7 @@ interface FormAddHistory {
 
 interface FormAddHistoryEmployee {
   id: string;
-  name: string|null;
+  name: string | null;
   prefix: string;
   rank: string;
   firstName: string;
diff --git a/src/modules/15_development/interface/request/Scholarship.ts b/src/modules/15_development/interface/request/Scholarship.ts
new file mode 100644
index 000000000..4c02f519d
--- /dev/null
+++ b/src/modules/15_development/interface/request/Scholarship.ts
@@ -0,0 +1,53 @@
+interface FormsSholarship {
+  rank: string; //ยศ
+  prefix: string; //คำนำหน้าชื่อ
+  firstName: string; //ชื่อ
+  lastName: string; //นามสกุล
+  citizenId: string; //เลขประจำตัวประชาชน
+  position: string; //ตำแหน่ง
+  posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: string | null; //ไอดีระดับตำแหน่ง
+  posTypeId: string | null; //ไอดีประเภทตำแหน่ง
+  guarantorRank: string; //ยศ(ผู้ค้ำ)
+  guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  posLevelguarantorId: string | null; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: string | null; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: number | null; //ปีงบประมาณที่ได้รับทุน
+  budgetSource: string; //แหล่งงบประมาณ
+  budgetApprove: number | string | null; //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: string; //เลขที่หนังสืออนุมัติ
+  bookNoDate: Date | null; //ลงวันที่(หนังสือ)
+  bookApproveDate: Date | null; //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: boolean; //ใช้เวลาราชการ
+  changeDetail: string; //เปลี่ยนแปลงรายละเอียด
+  scholarshipType: string; //เลือกประเภททุน
+  fundType: string; //ประเภททุน
+  contractNo: string; //เลขที่สัญญา
+  contractDate: Date | null; //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: string; //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: Date | null; //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: Date | null; //รายงานตัวกลับวันที่
+  degreeLevel: string; //ระดับปริญญา
+  course: string; //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: string; //สาขาวิชา/สาขา
+  faculty: string; //คณะ
+  educationalInstitution: string; //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: Date | null; //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: Date | null; //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: string; //สถานที่ไปศึกษาดูงาน
+  studyTopic: string; //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: string; //ประเทศที่เดินทางไปศึกษาดูงาน
+  studyAbroadTopic: string; //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+}
+
+export type { FormsSholarship };
diff --git a/src/modules/15_development/interface/response/Scholarship.ts b/src/modules/15_development/interface/response/Scholarship.ts
new file mode 100644
index 000000000..95d7edd2c
--- /dev/null
+++ b/src/modules/15_development/interface/response/Scholarship.ts
@@ -0,0 +1,67 @@
+interface ListSholarship {
+  citizenId: string;
+  fullName: string;
+  id: string;
+  posExecutive: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+}
+
+interface DataSholarship {
+  rank: string; //ยศ
+  prefix: string; //คำนำหน้าชื่อ
+  firstName: string; //ชื่อ
+  lastName: string; //นามสกุล
+  citizenId: string; //เลขประจำตัวประชาชน
+  position: string; //ตำแหน่ง
+  posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: string; //ไอดีระดับตำแหน่ง
+  posTypeId: string; //ไอดีประเภทตำแหน่ง
+  posTypeName: string; //ไอดีระดับตำแหน่ง
+  posLevelName: string; //ไอดีประเภทตำแหน่ง
+  guarantorRank: string; //ยศ(ผู้ค้ำ)
+  guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  posLevelguarantorId: string; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: string; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorName: string; //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posLevelguarantorName: string; //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: number | null; //ปีงบประมาณที่ได้รับทุน
+  budgetSource: string; //แหล่งงบประมาณ
+  budgetApprove: number | null; //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: string; //เลขที่หนังสืออนุมัติ
+  bookNoDate: Date | null; //ลงวันที่(หนังสือ)
+  bookApproveDate: Date | null; //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: boolean; //ใช้เวลาราชการ
+  changeDetail: string; //เปลี่ยนแปลงรายละเอียด
+  scholarshipType: string; //เลือกประเภททุน
+  fundType: string; //ประเภททุน
+  contractNo: string; //เลขที่สัญญา
+  contractDate: Date | null; //ลงวันที่(เลขที่สัญญา)
+  reportBackNo: string; //เลขที่หนังสือรายงานตัวกลับ
+  reportBackNoDate: Date | null; //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
+  reportBackDate: Date | null; //รายงานตัวกลับวันที่
+  degreeLevel: string; //ระดับปริญญา
+  course: string; //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
+  field: string; //สาขาวิชา/สาขา
+  faculty: string; //คณะ
+  educationalInstitution: string; //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
+  startDate: Date | null; //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
+  endDate: Date | null; //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
+  studyPlace: string; //สถานที่ไปศึกษาดูงาน
+  studyTopic: string; //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
+  studyStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงาน
+  studyEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงาน
+  studyCountry: string; //ประเทศที่เดินทางไปศึกษาดูงาน
+  studyAbroadTopic: string; //หัวข้อการไปศึกษาดูงานต่างประเทศ
+  studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
+  studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
+  totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+}
+
+export type { DataSholarship, ListSholarship };
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 8b3fafceb..3d454207d 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -230,7 +230,11 @@ onMounted(() => {
                 v-if="formQuery.keyword !== ''"
                 name="clear"
                 class="cursor-pointer"
-                @click="(formQuery.keyword = ''), fetchListProject()"
+                @click="
+                  (formQuery.keyword = ''),
+                    fetchListProject(),
+                    (formQuery.page = 1)
+                "
               />
             </template>
           </q-input>
@@ -253,19 +257,6 @@ onMounted(() => {
         </div>
       </div>
     </q-toolbar>
-    <!-- <q-toolbar class="q-gutter-x-sm" style="padding: 0px">
-      <div>
-      
-      </div>
-
-      <q-space />
-
-      <div class="row q-gutter-md">
-       
-       
-       
-      </div>
-    </q-toolbar> -->
 
     <div class="col-12">
       <d-table
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 00c680c87..dadc1afcf 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -1,18 +1,26 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import type {
+  DataOption,
+  ItemsDownload,
+  NewPagination,
+} from "@/modules/15_development/interface/index/Main";
+import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 /** หัวตาราง */
-const rows = ref<any>([]);
+const rows = ref<ListSholarship[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "citizenId",
@@ -24,11 +32,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -43,49 +51,61 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "ประเภทตำแหน่ง",
     sortable: true,
-    field: "type",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "level",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionPath",
+    name: "posExecutive",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
-    field: "positionPath",
+    field: "posExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 const visibleColumns = ref<string[]>([
   "citizenId",
-  "name",
+  "fullName",
   "position",
-  "type",
-  "level",
-  "positionPath",
+  "posType",
+  "posLevel",
+  "posExecutive",
 ]);
 
-const options = ref<any>([
-  "การศึกษาในประเทศ",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
-  "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+const scholarshipTypeOp = ref<DataOption[]>([
+  {
+    id: "DOMESTICE",
+    name: "การศึกษาในประเทศ",
+  },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
 ]);
-const itemDownload = ref<any>([
+const itemDownload = ref<ItemsDownload[]>([
   {
     label: "ดาวน์โหลด 1",
     value: "",
@@ -106,40 +126,38 @@ const itemDownload = ref<any>([
   },
 ]);
 
-const formFilter = reactive({
+const formQuery = reactive({
   page: 1,
   pageSize: 10,
   year: new Date().getFullYear(),
-  type: "การศึกษาในประเทศ",
+  type: "DOMESTICE",
   keyword: "",
 });
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      citizenId: "123XXXXXXXXXXX",
-      name: "นางสาวสาวิตรี ศรีสมัย",
-      position: "นักทรัพยากรบุคคล",
-      type: "ทั่วไป",
-      level: "ปฏิบัติงาน",
-      positionPath: "นักทรัพยากรบุคคล",
-    },
-    {
-      id: "2",
-      citizenId: "1234XXXXXXXXXX",
-      name: "นายณัฐพงศ์ ดิษยบุตร",
-      position: "นักทรัพยากรบุคคล",
-      type: "ทั่วไป",
-      level: "ปฏิบัติงาน",
-      positionPath: "",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.devScholarship +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&scholarshipType=${formQuery.type}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchNewList() {
+  formQuery.page = 1;
+  fetchList();
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -148,6 +166,22 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
     : router.push("/development/scholarship/add");
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchNewList();
+  }
+);
+
 onMounted(() => {
   fetchList();
 });
@@ -163,11 +197,12 @@ onMounted(() => {
         <div>
           <datepicker
             menu-class-name="modalfix"
-            v-model="formFilter.year"
+            v-model="formQuery.year"
             :locale="'th'"
             autoApply
             year-picker
             :enableTimePicker="false"
+            @update:model-value="fetchNewList"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -178,7 +213,7 @@ onMounted(() => {
                 dense
                 lazy-rules
                 outlined
-                :model-value="Number(formFilter.year) + 543"
+                :model-value="Number(formQuery.year) + 543"
                 :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-slot:prepend>
@@ -197,9 +232,14 @@ onMounted(() => {
           <q-select
             dense
             outlined
-            v-model="formFilter.type"
-            :options="options"
+            v-model="formQuery.type"
+            :options="scholarshipTypeOp"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
             label="เลือกประเภททุน"
+            @update:model-value="fetchNewList"
           />
         </div>
       </div>
@@ -244,18 +284,19 @@ onMounted(() => {
           <q-input
             standout
             dense
-            v-model="formFilter.keyword"
+            v-model="formQuery.keyword"
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
+            @keyup.enter="fetchNewList()"
           >
             <template v-slot:append>
-              <q-icon v-if="formFilter.keyword == ''" name="search" />
+              <q-icon v-if="formQuery.keyword == ''" name="search" />
               <q-icon
-                v-if="formFilter.keyword !== ''"
+                v-if="formQuery.keyword !== ''"
                 name="clear"
                 class="cursor-pointer"
-                @click="formFilter.keyword = ''"
+                @click="(formQuery.keyword = ''), fetchNewList()"
               />
             </template>
           </q-input>
@@ -291,6 +332,8 @@ onMounted(() => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        :rows-per-page-options="[2, 10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -313,6 +356,19 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formQuery.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(totalList)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="fetchList"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>