From 0c8e21d1226802e02d0267a6d7029a57090b5c63 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 28 Mar 2024 17:04:24 +0700
Subject: [PATCH 01/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=94=E0=B9=80=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_retire/views/addRetire.vue | 869 +++++++++++++---------
 1 file changed, 514 insertions(+), 355 deletions(-)

diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 8090194..e38ae32 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,425 +1,584 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
-import { useCounterMixin } from "@/stores/mixin"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import type { QForm } from "quasar"
-import Dialog from '@/modules/03_retire/views/DialogRetire.vue'
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 
-const mixin = useCounterMixin()
-const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
-const router = useRouter()
-const route = useRoute()
-const $q = useQuasar()
-const routeName = router.currentRoute.value.name
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  fails,
+} = mixin;
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const routeName = router.currentRoute.value.name;
 
 /**
  * ตัวแปรที่ใช้งาน
  */
-const id = ref<string>("")
-const myform = ref<QForm | null>(null)
-const tranferOrg = ref("")
-const dateCommand = ref<Date>(new Date())
-const dateLeave = ref<Date>(new Date())
-const noteReason = ref("")
-const modal = ref<boolean>(false)
+const id = ref<string>("");
+const myform = ref<QForm | null>(null);
+const tranferOrg = ref("");
+const dateCommand = ref<Date>(new Date());
+const dateLeave = ref<Date>(new Date());
+const noteReason = ref("");
+const modal = ref<boolean>(false);
 /** ข้อมูล v-model ของฟอร์ม */
 const dataDetail = ref<any>({
-	datetext: "",
-	activeDate: new Date(),
-	createdAt: new Date(),
-	firstName: "",
-	id: "",
-	isActive: true,
-	lastName: "",
-	location: "",
-	organizationPositionOld: "",
-	positionLevelOld: "",
-	positionNumberOld: "",
-	positionTypeOld: "",
-	prefix: "",
-	profileId: "",
-	reason: "",
-	salary: 0,
-	sendDate: new Date(),
-	status: "",
-	statustext: "",
-	fullname: "",
-})
+  datetext: "",
+  activeDate: new Date(),
+  createdAt: new Date(),
+  firstName: "",
+  id: "",
+  isActive: true,
+  lastName: "",
+  location: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  prefix: "",
+  profileId: "",
+  reason: "",
+  salary: 0,
+  sendDate: new Date(),
+  status: "",
+  statustext: "",
+  fullname: "",
+});
 
 /**
  * ฟังก์ชั่นย้อนกลับไปยังหน้ารายการลาออก
  */
 const clickBack = () => {
-	router.push(`/retire`)
-}
+  router.push(`/retire`);
+};
 
 /**
  * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
  * @param val value ของ status true/false
  */
 const statusOrder = (val: boolean) => {
-	switch (val) {
-		case true:
-			return "ยับยั้งการลาออก"
-		case false:
-			return "อนุมัติการลาออก"
-	}
-}
+  switch (val) {
+    case true:
+      return "ยับยั้งการลาออก";
+    case false:
+      return "อนุมัติการลาออก";
+  }
+};
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(() => {
-	if (route.params.id !== undefined) {
-		id.value = route.params.id.toString()
-		fectDataresign(id.value)
-	}
-})
+  if (route.params.id !== undefined) {
+    id.value = route.params.id.toString();
+    fectDataresign(id.value);
+  }
+});
 
 /**
  * บันทึกข้อมูลการลาออก
  */
 const saveData = async () => {
-	if (myform.value != null) {
-		await myform.value.validate().then(async (saveDataTest: Boolean) => {
-			if (saveDataTest) {
-				saveResing()
-			}
-		})
-	}
-}
+  if (myform.value != null) {
+    await myform.value.validate().then(async (saveDataTest: Boolean) => {
+      if (saveDataTest) {
+        saveResing();
+      }
+    });
+  }
+};
 
 /**
  * ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
  */
 const filesNull = () => {
-	files.value = null
-}
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const files = ref<any>()
+  files.value = null;
+};
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const files = ref<any>();
 //อัพโหลดไฟล์
 const fileUploadDoc = async (file: any) => {
-	fileDocDataUpload.value.push(file)
-	nameFile.value = file[0].name
-	files.value = file
-}
+  fileDocDataUpload.value.push(file);
+  nameFile.value = file[0].name;
+  files.value = file;
+};
 
 /**
  * ฟังก์ชั่นเซฟข้อมูลลาออกเเล้วเรียกใช้งานApi
  */
 const saveResing = () => {
-	$q.dialog({
-		title: "ยืนยันการยื่นข้อมูลลาออก",
-		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
-		cancel: {
-			flat: true,
-			color: "negative",
-		},
-		persistent: true,
-	})
-		.onOk(() => {
-			createFormresign()
-		})
-		.onCancel(() => {})
-		.onDismiss(() => {})
-}
+  $q.dialog({
+    title: "ยืนยันการยื่นข้อมูลลาออก",
+    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(() => {
+      createFormresign();
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 
 //ยกเลิกการลาออก
 const cancelResing = () => {
-	modal.value = true
-}
+  modal.value = true;
+};
 
 /**
  * ฟังก์ชั่นลบ
  * @param id ไอดีของข้อมูลการลาออก
  */
 const deleteResting = async (id: string) => {
-	showLoader()
-	await http
-		.delete(config.API.resingByid(id))
-		.then(() => {
-			success($q, "ยกเลิกการลาออกขอสำเร็จ")
-		})
-		.catch(e => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-			clickBack()
-		})
-}
+  showLoader();
+  await http
+    .delete(config.API.resingByid(id))
+    .then(() => {
+      success($q, "ยกเลิกการลาออกขอสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      clickBack();
+    });
+};
 
 //บันทึกข้อมูล
 const createFormresign = async () => {
-	const formData = new FormData()
-	if (files.value > 0) {
-		const blob = files.value.slice(0, files.value[0].size)
-		const newFile = new File(blob, nameFile.value, {
-			type: files.value[0].type,
-		})
-		formData.append("file", newFile)
-	}
+  const formData = new FormData();
+  if (files.value.length > 0) {
+    const blob = files.value.slice(0, files.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: files.value[0].type,
+    });
+    formData.append("file", newFile);
+  }
 
-	formData.append("Location", tranferOrg.value)
-	formData.append("SendDate", dateToISO(dateCommand.value))
-	formData.append("ActiveDate", dateToISO(dateLeave.value))
-	formData.append("Reason", noteReason.value)
+  formData.append("Location", tranferOrg.value);
+  formData.append("SendDate", dateToISO(dateCommand.value));
+  formData.append("ActiveDate", dateToISO(dateLeave.value));
+  formData.append("Reason", noteReason.value);
 
-	await http
-		.post(config.API.listResign(), formData)
-		.then((res: any) => {
-			let data = res.data.result.id
-			success($q, "บันทึกข้อมูลสำเร็จ")
-			router.push(`/retire/result/${data}`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
+  await http
+    .post(config.API.listResign(), formData)
+    .then((res: any) => {
+      let data = res.data.result.id;
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      router.push(`/retire/result/${data}`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
 const fectDataresign = async (id: string) => {
-	showLoader()
-	await http
-		.get(config.API.resingByid(id))
-		.then((res: any) => {
-			let data = res.data.result
-			;(tranferOrg.value = data.location),
-				(dateCommand.value = data.sendDate),
-				(dateLeave.value = data.activeDate),
-				(noteReason.value = data.reason),
-				(files.value = data.docs),
-				(dataDetail.value = data)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  await http
+    .get(config.API.resingByid(id))
+    .then((res: any) => {
+      let data = res.data.result;
+      (tranferOrg.value = data.location),
+        (dateCommand.value = data.sendDate),
+        (dateLeave.value = data.activeDate),
+        (noteReason.value = data.reason),
+        (files.value = data.docs),
+        (dataDetail.value = data);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+function downloadFile(data: string) {
+  window.open(data, "_blank");
 }
 </script>
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
-				<div v-else>รายละเอียดเรื่องลาออก</div>
-			</div>
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div class="col-12 row q-pa-sm q-col-gutter-sm">
-								<q-input
-									class="col-8"
-									dense
-									outlined
-									v-model="tranferOrg"
-									label="สถานที่ยื่นขอลาออกจากราชการ"
-									:readonly="routeName != 'AddRetire'"
-									:rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
-								/>
-								<datepicker class="col-2" menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply readonly borderless :enableTimePicker="false" week-start="0">
-									<template #year="{ year }">
-										{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-										{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-										<q-input
-											outlined
-											readonly
-											dense
-											hide-bottom-space
-											class="full-width datepicker"
-											:model-value="dateCommand != null ? date2Thai(dateCommand) : null"
-											:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
-											:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`]"
-										>
-											<template v-slot:prepend>
-												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-								<datepicker
-									class="col-2"
-									menu-class-name="modalfix"
-									v-model="dateLeave"
-									:locale="'th'"
-									autoApply
-									borderless
-									:enableTimePicker="false"
-									week-start="0"
-									:readonly="routeName != 'AddRetire'"
-								>
-									<template #year="{ year }">
-										{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-										{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-										<q-input
-											outlined
-											dense
-											hide-bottom-space
-											:readonly="routeName != 'AddRetire'"
-											class="full-width datepicker"
-											:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
-											:label="`${'วันที่ขอลาออกจากราชการ'}`"
-											:rules="[val => !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`]"
-										>
-											<template v-slot:prepend>
-												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-								<q-input
-									class="col-12"
-									dense
-									outlined
-									v-model="noteReason"
-									label="เหตุผลที่ลาออกจากราชการ"
-									type="textarea"
-									:readonly="routeName != 'AddRetire'"
-									:rules="[val => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`]"
-								/>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div v-if="routeName == 'AddRetire'">เพิ่มเรื่องลาออก</div>
+        <div v-else>รายละเอียดเรื่องลาออก</div>
+      </div>
+      <q-form ref="myform" class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-sm q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-8"
+                  dense
+                  outlined
+                  v-model="tranferOrg"
+                  hide-bottom-space
+                  label="สถานที่ยื่นขอลาออกจากราชการ"
+                  :readonly="routeName != 'AddRetire'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
+                />
+                <datepicker
+                  class="col-2"
+                  menu-class-name="modalfix"
+                  v-model="dateCommand"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      readonly
+                      dense
+                      hide-bottom-space
+                      class="full-width datepicker"
+                      :model-value="
+                        dateCommand != null ? date2Thai(dateCommand) : null
+                      "
+                      :label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  class="col-2"
+                  menu-class-name="modalfix"
+                  v-model="dateLeave"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :readonly="routeName != 'AddRetire'"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :readonly="routeName != 'AddRetire'"
+                      class="full-width datepicker"
+                      :model-value="
+                        dateLeave != null ? date2Thai(dateLeave) : null
+                      "
+                      :label="`${'วันที่ขอลาออกจากราชการ'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="noteReason"
+                  label="เหตุผลที่ลาออกจากราชการ"
+                  type="textarea"
+                  hide-bottom-space
+                  :readonly="routeName != 'AddRetire'"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
+                  ]"
+                />
 
-								<div class="col-12 row" v-if="routeName == 'AddRetire'">
-									<q-uploader
-										flat
-										bordered
-										class="col-xs-12 col-sm-12"
-										accept=".jpg,.png,.pdf,.csv,.doc"
-										url="http://localhost:4444/upload"
-										label="เอกสารเพิ่มเติม"
-										type="file"
-										@added="fileUploadDoc"
-										@removed="filesNull"
-										style="max-width: px"
-									/>
-								</div>
-								<div class="col-12 row" v-if="routeName != 'AddRetire'">
-									<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-										<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-									</div>
-									<q-card bordered flat class="full-width">
-										<q-list separator>
-											<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-												<q-item-section>
-													<q-item-label class="full-width ellipsis">
-														{{ file.fileName }}
-													</q-item-label>
+                <div class="col-12 row" v-if="routeName == 'AddRetire'">
+                  <q-uploader
+                    flat
+                    bordered
+                    class="col-xs-12 col-sm-12"
+                    accept=".jpg,.png,.pdf,.csv,.doc"
+                    url="http://localhost:4444/upload"
+                    label="เอกสารเพิ่มเติม"
+                    type="file"
+                    @added="fileUploadDoc"
+                    @removed="filesNull"
+                    style="max-width: px"
+                  />
+                </div>
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    flat
+                    class="row col-12 text-dark q-mt-sm"
+                    v-if="routeName != 'AddRetire'"
+                  >
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        เอกสารเพิ่มเติม
+                      </div>
+                    </div>
+                    <q-list class="col-12">
+                      <q-item
+                        v-for="file in files"
+                        :key="file.key"
+                        class="q-my-xs"
+                      >
+                        <q-item-section>
+                          <q-item-label class="full-width ellipsis">
+                            {{ file.fileName }}
+                          </q-item-label>
 
-													<q-item-label caption> </q-item-label>
-												</q-item-section>
-											</q-item>
-										</q-list>
-									</q-card>
-								</div>
-							</div>
-							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddRetire'">
-								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-									<div class="q-pl-sm text-weight-bold text-dark">ผลการพิจารณาของผู้บังคับบัญชา</div>
-								</div>
-								<q-separator />
-								<div class="row col-12 q-pa-md">
-									<div class="col-12 row bg-white q-col-gutter-md">
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">สถานะ</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.commanderReject !== null ? statusOrder(dataDetail.commanderReject) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.commanderRejectDate !== null ? date2Thai(dataDetail.commanderRejectDate) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-12 row items-start">
-											<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-											<div class="col-12 text-detail" v-if="dataDetail.commanderReject === false">
-												{{ dataDetail.commanderApproveReason !== null ? dataDetail.commanderApproveReason : "-" }}
-											</div>
-											<div class="col-12 text-detail" v-if="dataDetail.commanderReject === true">
-												{{ dataDetail.commanderRejectReason !== null ? dataDetail.commanderRejectReason : "-" }}
-											</div>
-										</div>
-									</div>
-								</div>
-							</q-card>
+                          <q-item-label caption> </q-item-label>
+                        </q-item-section>
+                        <q-space />
 
-							<q-card bordered class="row col-12 text-dark q-mt-sm" v-if="routeName != 'AddRetire'">
-								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-									<div class="q-pl-sm text-weight-bold text-dark">ผลการพิจารณาของผู้มีอำนาจ</div>
-								</div>
-								<q-separator />
-								<div class="row col-12 q-pa-md">
-									<div class="col-12 row bg-white q-col-gutter-md">
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">สถานะ</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.oligarchReject !== null ? statusOrder(dataDetail.oligarchReject) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-6 row items-start">
-											<div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-											<div class="col-12 text-detail">
-												{{ dataDetail.oligarchRejectDate !== null ? date2Thai(dataDetail.oligarchRejectDate) : "-" }}
-											</div>
-										</div>
-										<div class="col-xs-12 row items-start">
-											<div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-											<div class="col-12 text-detail" v-if="dataDetail.oligarchReject == false">
-												{{ dataDetail.oligarchApproveReason !== null ? dataDetail.oligarchApproveReason : "-" }}
-											</div>
-											<div class="col-12 text-detail" v-else-if="dataDetail.oligarchReject == true">
-												{{ dataDetail.oligarchRejectReason !== null ? dataDetail.oligarchRejectReason : "-" }}
-											</div>
-										</div>
-									</div>
-								</div>
-							</q-card>
-						</div>
+                        <q-btn
+                          size="12px"
+                          flat
+                          round
+                          dense
+                          color="blue"
+                          icon="mdi-download"
+                          @click="downloadFile(file.pathName)"
+                          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                        >
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    class="row col-12 text-dark q-mt-sm"
+                    v-if="routeName != 'AddRetire'"
+                  >
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้บังคับบัญชา
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <div class="col-12 row bg-white q-col-gutter-md">
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.commanderReject !== null
+                                ? statusOrder(dataDetail.commanderReject)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.commanderRejectDate !== null
+                                ? date2Thai(dataDetail.commanderRejectDate)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-if="dataDetail.commanderReject === false"
+                          >
+                            {{
+                              dataDetail.commanderApproveReason !== null
+                                ? dataDetail.commanderApproveReason
+                                : "-"
+                            }}
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-if="dataDetail.commanderReject === true"
+                          >
+                            {{
+                              dataDetail.commanderRejectReason !== null
+                                ? dataDetail.commanderRejectReason
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    class="row col-12 text-dark q-mt-sm"
+                    v-if="routeName != 'AddRetire'"
+                  >
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้มีอำนาจ
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <div class="col-12 row bg-white q-col-gutter-md">
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.oligarchReject !== null
+                                ? statusOrder(dataDetail.oligarchReject)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              dataDetail.oligarchRejectDate !== null
+                                ? date2Thai(dataDetail.oligarchRejectDate)
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-if="dataDetail.oligarchReject == false"
+                          >
+                            {{
+                              dataDetail.oligarchApproveReason !== null
+                                ? dataDetail.oligarchApproveReason
+                                : "-"
+                            }}
+                          </div>
+                          <div
+                            class="col-12 text-detail"
+                            v-else-if="dataDetail.oligarchReject == true"
+                          >
+                            {{
+                              dataDetail.oligarchRejectReason !== null
+                                ? dataDetail.oligarchRejectReason
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
 
-						<div class="row col-12 q-pa-md" v-if="routeName != 'AddRetire'">
-							<q-space />
-							<q-btn
-								v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
-								unelevated
-								dense
-								class="q-px-md items-center"
-								color="orange"
-								label="ยกเลิกการลาออก"
-								@click="cancelResing"
-								:disable="tranferOrg == '' && noteReason == ''"
-							/>
-						</div>
-					</div>
-					<q-separator v-if="routeName == 'AddRetire'" />
-					<div class="row col-12 q-pa-md" v-if="routeName == 'AddRetire'">
-						<q-space />
-						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอลาออก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+            <div class="row col-12 q-pa-md" v-if="routeName != 'AddRetire'">
+              <q-space />
+              <q-btn
+                v-if="
+                  dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'
+                "
+                unelevated
+                dense
+                class="q-px-md items-center"
+                color="orange"
+                label="ยกเลิกการลาออก"
+                @click="cancelResing"
+                :disable="tranferOrg == '' && noteReason == ''"
+              />
+            </div>
+          </div>
+          <q-separator v-if="routeName == 'AddRetire'" />
+          <div class="row col-12 q-pa-md" v-if="routeName == 'AddRetire'">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="primary"
+              label="ยื่นเรื่องขอลาออก"
+              @click="saveData"
+              :disable="tranferOrg == '' && noteReason == ''"
+            />
+          </div>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 
-	<Dialog
-	v-model:modal="modal"
-	/>
+  <Dialog v-model:modal="modal" />
 </template>

From f1243f02ccaf7595a3bc53965da16403bfede5d8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 28 Mar 2024 17:16:01 +0700
Subject: [PATCH 02/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=9C=E0=B8=B4=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/MainLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 5de1a24..5035a60 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -90,7 +90,7 @@ const fetchlistNotification = async (index: number, type: string) => {
 const doLogout = () => {
   $q.dialog({
     title: "ยืนยันการออกจากระบบ",
-    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    message: `ต้องการออกจากระบบใช่หรือไม่?`,
     cancel: "ยกเลิก",
     ok: "ยืนยัน",
     persistent: true,

From cf66659b9a0ae32acbfa2e12cf4667c99861da91 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 4 Apr 2024 14:14:25 +0700
Subject: [PATCH 03/16] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue |  8 +++++
 src/modules/08_KPI/router.ts                 | 36 ++++++++++++++++++++
 src/modules/08_KPI/store.ts                  |  5 +++
 src/modules/08_KPI/views/form.vue            | 28 +++++++++++++++
 src/modules/08_KPI/views/main.vue            | 28 +++++++++++++++
 src/router/index.ts                          |  2 ++
 6 files changed, 107 insertions(+)
 create mode 100644 src/modules/08_KPI/router.ts
 create mode 100644 src/modules/08_KPI/store.ts
 create mode 100644 src/modules/08_KPI/views/form.vue
 create mode 100644 src/modules/08_KPI/views/main.vue

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 39e0fd0..9a15af9 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -81,6 +81,14 @@ const items = ref<any>([
     path: "/appeal-complain",
     active: false,
   },
+  {
+    icon: "mdi-account-box-outline",
+    title: "KPI",
+    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+    color: "red-2",
+    path: "/KPI",
+    active: false,
+  },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
diff --git a/src/modules/08_KPI/router.ts b/src/modules/08_KPI/router.ts
new file mode 100644
index 0000000..d180e69
--- /dev/null
+++ b/src/modules/08_KPI/router.ts
@@ -0,0 +1,36 @@
+/**
+ * Router ขอโอน
+ */
+
+const KPIPage = () => import("@/modules/08_KPI/views/main.vue");
+const FormPage = () => import("@/modules/08_KPI/views/form.vue");
+
+export default [
+  {
+    path: "/KPI",
+    name: "KPIMain",
+    component: KPIPage,
+    meta: {
+      Auth: true,
+      Key: [8],
+    },
+  },
+  {
+    path: "/KPI/add",
+    name: "KPIAdd",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+    },
+  },
+  {
+    path: "/KPI/:id",
+    name: "KPIEdit",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.2],
+    },
+  },
+];
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
new file mode 100644
index 0000000..6a39078
--- /dev/null
+++ b/src/modules/08_KPI/store.ts
@@ -0,0 +1,5 @@
+import { defineStore } from "pinia";
+
+export const useKpiDataStore = defineStore("KPIDate", () => {
+  return {};
+});
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
new file mode 100644
index 0000000..6346a0b
--- /dev/null
+++ b/src/modules/08_KPI/views/form.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/KPI`)"
+        />
+        เพิ่ม/แก้ไข
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md"> เพิ่ม/แก้ไข </q-card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
new file mode 100644
index 0000000..2f36072
--- /dev/null
+++ b/src/modules/08_KPI/views/main.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        KPI
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md"> หน้าหลัก </q-card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index d0f7fcb..15b040a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,6 +11,7 @@ import ModuleLeave from "@/modules/05_leave/router";
 import ModuEvaluate from "@/modules/06_evaluate/router";
 import ModuAppealComplain from "@/modules/07_appealComplain/router";
 import ModuleSupport from "@/modules/00_support/router";
+import ModuleKPI from "@/modules/08_KPI/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -47,6 +48,7 @@ const router = createRouter({
         ...ModuEvaluate,
         ...ModuAppealComplain,
         ...ModuleSupport,
+        ...ModuleKPI,
       ],
     },
   ],

From 59aa022bab8a1b7e5ad4e71f5c4acbc8e084c748 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 9 Apr 2024 15:22:23 +0700
Subject: [PATCH 04/16] UI KPI

---
 .../08_KPI/components/Tab/01_Assessment.vue   |  85 ++++++
 .../components/Tab/02_CommanderAbove.vue      |   3 +
 .../Tab/03_CommanderAboveOneStep.vue          |   3 +
 src/modules/08_KPI/components/Tab/04_File.vue |   3 +
 .../components/Tab/Dialog/01_Dialog.vue       | 281 +++++++++++++++++
 .../components/Tab/Dialog/03_Dialog.vue       | 122 ++++++++
 .../components/Tab/Dialog/04_Dialog.vue       | 282 ++++++++++++++++++
 .../components/Tab/Topic/01_Template.vue      | 204 +++++++++++++
 .../components/Tab/Topic/02_Template.vue      | 187 ++++++++++++
 src/modules/08_KPI/interface/index/Main.ts    |   8 +
 src/modules/08_KPI/interface/request/index.ts |  22 ++
 src/modules/08_KPI/store.ts                   |   4 +-
 src/modules/08_KPI/views/TabMain.vue          |  78 +++++
 src/modules/08_KPI/views/form.vue             | 132 +++++++-
 src/modules/08_KPI/views/main.vue             | 221 +++++++++++++-
 15 files changed, 1629 insertions(+), 6 deletions(-)
 create mode 100644 src/modules/08_KPI/components/Tab/01_Assessment.vue
 create mode 100644 src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
 create mode 100644 src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
 create mode 100644 src/modules/08_KPI/components/Tab/04_File.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Topic/01_Template.vue
 create mode 100644 src/modules/08_KPI/components/Tab/Topic/02_Template.vue
 create mode 100644 src/modules/08_KPI/interface/index/Main.ts
 create mode 100644 src/modules/08_KPI/interface/request/index.ts
 create mode 100644 src/modules/08_KPI/views/TabMain.vue

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
new file mode 100644
index 0000000..1f45562
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+
+import Work from "@/modules/08_KPI/components/Tab/Topic/01_Template.vue";
+import Capacity from "@/modules/08_KPI/components/Tab/Topic/02_Template.vue";
+
+const rows_01 = ref<any[]>();
+const rows_02 = ref<any[]>();
+const rows_03 = ref<any[]>();
+
+const rows_04 = ref<any[]>();
+const rows_05 = ref<any[]>();
+
+const total = ref<number>(0);
+const resultWork = ref<number>(0);
+const resultEvaluation = ref<number>(0);
+
+function getList() {
+  const data = [
+    {
+      indicators: "ตัวชี้วัด 1",
+      target: null,
+      scoreLevel: "4",
+      weight: "50",
+      workResult: "ระดับ 5",
+      evaluationResults: "50",
+    },
+  ];
+
+  rows_01.value = data;
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+<template>
+  <q-scroll-area style="height: 400px" class="bg-white row col-12">
+    <div class="text-weight-bold text-body1">
+      <span class="txt-under text-blue-5">องค์ประกอบที่ 1</span>
+      <span> ผลสัมฤทธิ์ของงาน</span>
+    </div>
+
+    <div class="q-gutter-md q-mt-sm">
+      <!-- องค์ประกอบที่ 1 -->
+      <Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
+      <Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
+      <Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
+      <div class="row text-body1 text-weight-bold">
+        <div class="col-5 text-center">
+          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+        </div>
+        <div class="col-1 text-primary">{{ total }}</div>
+        <div class="col-5 text-center">
+          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+        </div>
+        <div class="col-1 text-primary">{{ resultWork }}</div>
+      </div>
+
+      <q-separator class="q-py-xs" />
+
+      <!-- องค์ประกอบที่ 2 -->
+      <div class="text-weight-bold text-body1 q-mb-sm">
+        <span class="txt-under text-blue-5">องค์ประกอบที่ 2</span>
+        <span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
+      </div>
+
+      <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
+      <Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
+
+      <div class="row justify-evenly text-body1 text-weight-bold">
+        <div class="col-5 text-right">
+          <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        </div>
+        <div class="col-5 text-primary">{{ resultEvaluation }}</div>
+      </div>
+    </div>
+  </q-scroll-area>
+</template>
+<style scoped>
+.txt-under {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
new file mode 100644
index 0000000..e894c43
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>2</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
new file mode 100644
index 0000000..cb489dc
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>3</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/04_File.vue b/src/modules/08_KPI/components/Tab/04_File.vue
new file mode 100644
index 0000000..c8199f4
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/04_File.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>4</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
new file mode 100644
index 0000000..628e956
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const splitterModel = ref<number>(30);
+const search = ref<string>("");
+
+const define = ref<string>("");
+const formula = ref<string>("");
+
+const listCheck = ref<number | null>();
+const listTarget = ref<any>([
+  {
+    id: "ID1",
+    metricCode: "1กก",
+    indicatorName: "ตัวชี้วัด 1",
+  },
+  {
+    id: "ID2",
+    metricCode: "2กก",
+    indicatorName: "ตัวชี้วัด 2",
+  },
+]);
+
+const formDetail = reactive<any>({
+  oc: `สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร`,
+  indicators: "1",
+  code: "1กก",
+  name: "ตัวชี้วัด 1",
+  target: "",
+  unit: "",
+  weight: "100",
+});
+const formScore = reactive<any>({
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+});
+
+const fieldDetailLabels = {
+  oc: "หน่วยงาน/ส่วนราชการ",
+  indicators: "ลำดับตัวชี้วัด",
+  code: "รหัสตัวชี้วัด",
+  name: "ชื่อตัวชี้วัด",
+  target: "ค่าเป้าหมาย",
+  unit: "หน่วยนับ",
+  weight: "น้ำหนัก (ร้อยละ)",
+};
+
+const fieldLabels = {
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+};
+
+function clickList(index: number, data: any) {
+  listCheck.value = index;
+  // dataList.value = data.map((i: any) => ({
+  //   commandNo: i.commandNo,
+  //   duty: i.duty,
+  //   prefix: i.prefix,
+  //   firstName: i.firstName,
+  //   lastName: i.lastName,
+  //   fullName:`${i.prefix}${i.firstName} ${i.lastName}`
+  // }));
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  search.value = ''
+  define.value = ''
+  formula.value = ''
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <DialogHeader
+        :tittle="
+          numpage == 1
+            ? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
+            : 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
+        "
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+        <q-splitter v-model="splitterModel" disable>
+          <template v-slot:before>
+            <div class="bg-grey-1 q-pa-md">
+              <q-input
+                v-model="search"
+                outlined
+                dense
+                label="ค้นหา"
+                bg-color="white"
+                :class="getclass()"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="search == ''" name="search" />
+                  <q-icon
+                    v-if="search !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="search = ''"
+                  />
+                </template>
+              </q-input>
+              <q-card flat bordered class="q-mt-sm">
+                <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                  <div class="col-4">
+                    <span>รหัสตัวชี้วัด</span>
+                  </div>
+                  <div class="col-4">
+                    <span>ชื่อตัวชี้วัด</span>
+                  </div>
+                </div>
+
+                <q-separator />
+                <q-card-section class="q-pa-none">
+                  <q-scroll-area
+                    style="height: 71vh"
+                    class="bg-white row col-12"
+                  >
+                    <q-list
+                      v-for="(item, index) in listTarget"
+                      :key="index"
+                      bordered
+                      separator
+                    >
+                      <q-item
+                        clickable
+                        v-ripple
+                        :active="listCheck === index"
+                        active-class="my-menu-link"
+                        @click="clickList(index, item.id)"
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center" style="height: 20px">
+                            <div class="col-4">
+                              <span>{{ item.metricCode }}</span>
+                            </div>
+                            <div class="col-4">
+                              <span>{{ item.indicatorName }}</span>
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-scroll-area>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>
+
+          <template v-slot:after>
+            <div class="row q-pa-md q-col-gutter-md">
+              <div class="col-12">
+                <span class="text-body1 text-weight-bold"
+                  >รายละเอียดตัวชี้วัด</span
+                >
+              </div>
+              <div class="col-8">
+                <q-card bordered class="full-height">
+                  <div
+                    v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                    :key="index + 1"
+                  >
+                    <div class="row q-pa-md">
+                      <div class="col-3 text-grey-6 text-weight-medium">
+                        {{
+                          fieldDetailLabels[
+                            field as keyof typeof fieldDetailLabels
+                          ]
+                        }}
+                      </div>
+                      <div class="col-7">
+                        <span>{{
+                          formDetail[field] ? formDetail[field] : "-"
+                        }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+              <div class="col-4">
+                <q-card bordered>
+                  <div class="bg-grey-2 row q-py-sm text-weight-bold">
+                    <div class="col-6 text-center">ระดับคะแนน</div>
+                    <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                  </div>
+                  <div
+                    v-for="(field, index) in Object.keys(fieldLabels)"
+                    :key="index + 1"
+                  >
+                    <div class="row q-py-lg">
+                      <div
+                        class="col-6 text-center text-body1 text-weight-bold"
+                      >
+                        {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                      </div>
+                      <div class="col-6 text-center">
+                        <span>{{
+                          formScore[field] ? formScore[field] : "-"
+                        }}</span>
+                      </div>
+                    </div>
+                    <div
+                      class="col-12"
+                      v-if="index !== Object.keys(fieldLabels).length - 1"
+                    >
+                      <q-separator />
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+              <div class="col-12">
+                <q-input
+                  v-model="define"
+                  label="นิยามหรือความหมายของตัวชี้วัด"
+                  type="textarea"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                  hide-bottom-space
+                  :class="getclass()"
+                />
+              </div>
+              <div class="col-12">
+                <q-input
+                  v-model="formula"
+                  label="สูตรคำนวณ"
+                  type="textarea"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                  hide-bottom-space
+                  :class="getclass()"
+                />
+              </div>
+            </div>
+          </template>
+        </q-splitter>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
new file mode 100644
index 0000000..3efe102
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { FormDataAssigned } from '@/modules/08_KPI/interface/request/index'
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const formData = reactive<FormDataAssigned>({
+  indicator:'',//ชื่อตัวชี้วัด
+  target:'',//ค่าเป้าหมาย
+  unit:'',//หน่วยนับ
+  weigth:'',//น้ำหนัก (ร้อยละ)
+  definition:'',//นิยามหรือความหมายของตัวชี้วัด
+})
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.indicator = ''
+  formData.target = ''
+  formData.unit = ''
+  formData.weigth = ''
+  formData.definition = ''
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 50%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <DialogHeader
+        :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section >
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+            v-model="formData.indicator"
+            label="ชื่อตัวชี้วัด"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+            v-model="formData.target"
+            label="ค่าเป้าหมาย"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+            v-model="formData.unit"
+            label="หน่วยนับ"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+            v-model="formData.weigth"
+            label="น้ำหนัก (ร้อยละ)"
+            outlined
+            dense
+            :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+            v-model="formData.definition"
+            label="นิยามหรือความหมายของตัวชี้วัด"
+            outlined
+            dense
+            type="textarea"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
+            hide-bottom-space
+            :class="getclass()"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
new file mode 100644
index 0000000..6a31ada
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const splitterModel = ref<number>(30);
+const search = ref<string>("");
+
+const define = ref<string>("");
+const formula = ref<string>("");
+const type = ref<string>("");
+
+const listCheck = ref<number | null>();
+const listTarget = ref<any>([
+  {
+    id: "ID1",
+    metricCode: "1กก",
+    indicatorName: "ตัวชี้วัด 1",
+  },
+  {
+    id: "ID2",
+    metricCode: "2กก",
+    indicatorName: "ตัวชี้วัด 2",
+  },
+]);
+
+const formDetail = reactive<any>({
+  type: "สมรรถนะหลัก",
+  name: "สมรรถนะ 1",
+  definition: "",
+  criteria: "",
+});
+const formScore = reactive<any>({
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "",
+  score5: "5",
+});
+
+const fieldDetailLabels = {
+  type: "ประเภทสมรรถนะ",
+  name: "ชื่อสมรรถนะ",
+  definition: "คำจำกัดความ",
+  criteria: "กำหนดเกณฑ์การประเมิน",
+};
+
+const fieldLabels = {
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "4",
+  score5: "5",
+};
+
+const competencyTypeOp = ref<DataOptions[]>([
+  {
+    id: "ID1",
+    name: "สมรรถนะหลัก",
+  },
+  {
+    id: "ID2",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID3",
+    name: "สมรรถนะประจำกลุ่มงาน",
+  },
+  {
+    id: "ID4",
+    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+  },
+  {
+    id: "ID5",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+  },
+  {
+    id: "ID6",
+    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+  },
+]);
+
+function clickList(index: number, data: any) {
+  listCheck.value = index;
+  // dataList.value = data.map((i: any) => ({
+  //   commandNo: i.commandNo,
+  //   duty: i.duty,
+  //   prefix: i.prefix,
+  //   firstName: i.firstName,
+  //   lastName: i.lastName,
+  //   fullName:`${i.prefix}${i.firstName} ${i.lastName}`
+  // }));
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  type.value = ''
+  search.value = ''
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+          <q-splitter v-model="splitterModel" disable>
+            <template v-slot:before>
+              <div class="bg-grey-1 q-pa-md q-gutter-sm">
+                <q-select
+                  v-model="type"
+                  outlined
+                  label="ประเภทสมรรถนะ"
+                  dense
+                  bg-color="white"
+                  option-label="name"
+                  option-value="id"
+                  :options="competencyTypeOp"
+                  emit-value
+                  :class="getclass()"
+                  map-options
+                />
+                <q-input
+                  v-model="search"
+                  outlined
+                  dense
+                  label="ค้นหา"
+                  bg-color="white"
+                  :class="getclass()"
+                >
+                  <template v-slot:append>
+                    <q-icon v-if="search == ''" name="search" />
+                    <q-icon
+                      v-if="search !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="search = ''"
+                    />
+                  </template>
+                </q-input>
+                <q-card flat bordered>
+                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                    <div class="col-4">
+                      <span>รหัสตัวชี้วัด</span>
+                    </div>
+                    <div class="col-4">
+                      <span>ชื่อตัวชี้วัด</span>
+                    </div>
+                  </div>
+
+                  <q-separator />
+                  <q-card-section class="q-pa-none">
+                    <q-scroll-area
+                      style="height: 33vh"
+                      class="bg-white row col-12"
+                    >
+                      <q-list
+                        v-for="(item, index) in listTarget"
+                        :key="index"
+                        bordered
+                        separator
+                      >
+                        <q-item
+                          clickable
+                          v-ripple
+                          :active="listCheck === index"
+                          active-class="my-menu-link"
+                          @click="clickList(index, item.id)"
+                        >
+                          <q-item-section class="q-pa-none">
+                            <div class="row items-center" style="height: 20px">
+                              <div class="col-4">
+                                <span>{{ item.metricCode }}</span>
+                              </div>
+                              <div class="col-4">
+                                <span>{{ item.indicatorName }}</span>
+                              </div>
+                            </div>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-scroll-area>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </template>
+
+            <template v-slot:after>
+              <div class="row q-pa-md q-col-gutter-md">
+                <div class="col-12">
+                  <span class="text-body1 text-weight-bold"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-8">
+                  <q-card bordered class="full-height">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-md">
+                        <div class="col-3 text-grey-6 text-weight-medium">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-7">
+                          <span>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-4">
+                  <q-card bordered>
+                    <div class="bg-grey-2 row q-py-sm text-weight-bold">
+                      <div class="col-6 text-center">ระดับคะแนน</div>
+                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                    </div>
+                    <div
+                      v-for="(field, index) in Object.keys(fieldLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-py-lg">
+                        <div
+                          class="col-6 text-center text-body1 text-weight-bold"
+                        >
+                          {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                        </div>
+                        <div class="col-6 text-center">
+                          <span>{{
+                            formScore[field] ? formScore[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                      <div
+                        class="col-12"
+                        v-if="index !== Object.keys(fieldLabels).length - 1"
+                      >
+                        <q-separator />
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Template.vue b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
new file mode 100644
index 0000000..ef5c41d
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue";
+import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const title = defineModel<string>('title',{required:true})
+const rows = defineModel<any>('data',{required:true})
+const numpage = defineModel<number>('page',{required:true})
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const filterKeyword = ref<string>("");
+const modal = ref<boolean>(false);
+const modalAssigned = ref<boolean>(false);
+
+const visibleColumns = ref<string[]>([
+  "indicators",
+  "target",
+  "scoreLevel",
+  "weight",
+  "workResult",
+  "evaluationResults",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "indicators",
+    align: "left",
+    label: "ตัวชี้วัด",
+    sortable: true,
+    field: "indicators",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "ค่าเป้าหมาย",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "scoreLevel",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "scoreLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "workResult",
+    align: "left",
+    label: "ผลสำเร็จของงาน",
+    sortable: true,
+    field: "workResult",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onAdd() {
+  if(numpage.value !== 3){
+    modal.value = true;
+  }else if(numpage.value == 3){
+    modalAssigned.value = true
+  }
+}
+</script>
+<template>
+  <q-card bordered style="border-radius: 5px">
+    <q-card-section class="bg-grey-3 q-py-sm">
+      <span class="text-weight-bold">{{ title }}</span>
+      <q-btn
+        class="q-ml-xs"
+        flat
+        round
+        icon="mdi-plus"
+        color="primary"
+        size="md"
+        @click="onAdd"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-section>
+    <q-card-section>
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        hide-pagination
+        class="custom-table2"
+        :visible-columns="visibleColumns"
+        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name == 'createDate'">
+                {{ col.value ? date2Thai(col.value) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+
+  <Dialog v-model:modal="modal" :numpage="numpage"/>
+  <Dialog03 v-model:modal="modalAssigned" :numpage="numpage"/>
+</template>
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Template.vue b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
new file mode 100644
index 0000000..cda94dc
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue";
+
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const title = defineModel<string>('title',{required:true})
+const rows = defineModel<any>('data',{required:true})
+const numpage = defineModel<number>('page',{required:true})
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const filterKeyword = ref<string>("");
+const modal = ref<boolean>(false);
+const modalAssigned = ref<boolean>(false);
+
+const visibleColumns = ref<string[]>([
+  "capacity",
+  "level",
+  "scoreLevel",
+  "weight",
+  "evaluationResults",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "capacity",
+    align: "left",
+    label: "รายการสมรรถนะ",
+    sortable: true,
+    field: "capacity",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับที่คาดหวัง",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "scoreLevel",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "scoreLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onAdd() {
+    modal.value = true;
+}
+</script>
+<template>
+  <q-card bordered style="border-radius: 5px">
+    <q-card-section class="bg-grey-3 q-py-sm">
+      <span class="text-weight-bold">{{ title }}</span>
+      <q-btn
+        class="q-ml-xs"
+        flat
+        round
+        icon="mdi-plus"
+        color="primary"
+        size="md"
+        @click="onAdd"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-section>
+    <q-card-section>
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        hide-pagination
+        class="custom-table2"
+        :visible-columns="visibleColumns"
+        no-data-label="ยังไม่มีข้อมูลแสดงในตารางนี้"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name == 'createDate'">
+                {{ col.value ? date2Thai(col.value) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+
+  <Dialog v-model:modal="modal" :numpage="numpage"/>
+</template>
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/08_KPI/interface/index/Main.ts b/src/modules/08_KPI/interface/index/Main.ts
new file mode 100644
index 0000000..80143f3
--- /dev/null
+++ b/src/modules/08_KPI/interface/index/Main.ts
@@ -0,0 +1,8 @@
+interface DataOptions {
+    id:string
+    name:string
+}
+
+export type {
+    DataOptions
+}
\ No newline at end of file
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
new file mode 100644
index 0000000..b869e94
--- /dev/null
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -0,0 +1,22 @@
+interface FormProfile {
+  fullName: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  type: string;
+  level: string;
+  status: string;
+  score: string;
+
+  avartar:string
+}
+
+interface FormDataAssigned{
+  indicator:string
+  target:string
+  unit:string
+  weigth:string
+  definition:string
+}
+export type { FormProfile ,FormDataAssigned};
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index 6a39078..7e9a157 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -1,5 +1,7 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
-  return {};
+  const tabMain = ref<string>("1");
+  return {tabMain};
 });
diff --git a/src/modules/08_KPI/views/TabMain.vue b/src/modules/08_KPI/views/TabMain.vue
new file mode 100644
index 0000000..fec1e92
--- /dev/null
+++ b/src/modules/08_KPI/views/TabMain.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useKpiDataStore } from '@/modules/08_KPI/store'
+
+import Assessment from '@/modules/08_KPI/components/Tab/01_Assessment.vue'
+import CommanderAbove from '@/modules/08_KPI/components/Tab/02_CommanderAbove.vue'
+import CommanderAboveOneStep from '@/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue'
+import File from '@/modules/08_KPI/components/Tab/04_File.vue'
+
+const store = useKpiDataStore()
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    label: "ผู้ขอรับการประเมิน",
+  },
+  {
+    name: "2",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไป",
+  },
+  {
+    name: "3",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
+  },
+  {
+    name: "4",
+    label: "ไฟล์เอกสาร",
+  },
+]);
+
+const splitterModel = ref<number>(15);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs v-model="store.tabMain" vertical class="text-blue">
+        <q-tab
+          class="hover-tab"
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          :icon="tab.icon"
+          :label="tab.label"
+        />
+      </q-tabs>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+        class="q-px-md"
+      >
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+        >
+          <Assessment v-if="store.tabMain === '1'" />
+          <CommanderAbove v-if="store.tabMain === '2'" />
+          <CommanderAboveOneStep v-if="store.tabMain === '3'" />
+          <File v-if="store.tabMain === '4'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+  opacity: 1 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 6346a0b..1a56d0e 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1,7 +1,56 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { ref, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import TabMain from '@/modules/08_KPI/views/TabMain.vue'
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
+
+const route = useRoute()
+const id = route.params.id as string;
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+
+const formProfile = reactive<FormProfile>({
+  fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
+  prefix: "นางสาว",
+  firstName: "กัณฐิมา",
+  lastName: "กาฬสินธุ์",
+  position: "หัวหน้าสำนักงาน",
+  type: "บริหาร",
+  level: "ชำนาญการพิเศษ",
+  status: "จัดเตรียมข้อมูล",
+  score: "100",
+  avartar:
+    "https://edm-s3.frappet.synology.me/edm/%E0%B8%97%E0%B8%B0%E0%B9%80%E0%B8%9A%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A7%E0%B8%B1%E0%B8%95%E0%B8%B4/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C/1526d9d3-d8b1-43ab-81b5-a84dfbe99202/profile-1526d9d3-d8b1-43ab-81b5-a84dfbe99202?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b63sTDiLkQPT06cpirTh%2F20240405%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240405T100811Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a6b8cb6b4f1ffd4edff045ad9fd91bc9a7eb5e00c45c5283bd8bf8f8e1ff5bf0",
+});
 
 const router = useRouter();
+
+function getProfile() {
+  showLoader();
+  http
+    .get(config.API.profileBykeycloak())
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(() => {
+  getProfile();
+});
 </script>
 
 <template>
@@ -18,10 +67,87 @@ const router = useRouter();
           class="q-mr-sm"
           @click="router.push(`/KPI`)"
         />
-        เพิ่ม/แก้ไข
+        {{ id ? `แก้ไขแบบประเมิน`:`เพิ่มแบบประเมิน` }}
       </div>
       <div class="col-12">
-        <q-card bordered class="q-pa-md"> เพิ่ม/แก้ไข </q-card>
+        <q-card bordered flatclass="relative-position">
+          <div class="column">
+            <div class="row items-center">
+              <div class="offset-2 col-10">
+                <q-toolbar class="q-pl-none">
+                  <span class="text-h6 text-bold text-primary">{{
+                    formProfile.fullName ? formProfile.fullName : "-"
+                  }}</span>
+                  <q-space />
+                  <div class="q-gutter-x-sm">
+                    <q-btn
+                      unelevated
+                      round
+                      icon="mdi-file-eye-outline"
+                      color="grey-2"
+                      text-color="primary"
+                    >
+                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                    </q-btn>
+                    <q-btn unelevated round color="grey-2" text-color="blue-5">
+                      <q-icon name="mdi-briefcase-eye-outline" />
+                      <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                    </q-btn>
+                  </div>
+                </q-toolbar>
+              </div>
+            </div>
+            <div
+              class="absolute"
+              style="left: 3%; top: 50%; transform: translateY(-50%)"
+            >
+              <q-avatar size="150px">
+                <img :src="formProfile.avartar" />
+              </q-avatar>
+            </div>
+
+            <div class="row items-center bg-teal-1">
+              <div class="offset-2 col-10">
+                <div class="row q-gutter-x-lg no-wrap text-weight-medium">
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                      <span class="text-weight-bold">{{ formProfile.position }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ประเภท</span>
+                      <span class="text-weight-bold">{{ formProfile.type }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ระดับชั้นงาน</span>
+                      <span class="text-weight-bold">{{ formProfile.level }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">สถานะการประเมิน</span>
+                      <span class="text-weight-bold">{{ formProfile.status }}</span>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">คะแนนประเมิน</span>
+                      <span class="text-weight-bold text-primary">{{ formProfile.score }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+
+        <q-card class="q-mt-md rounded">
+          <TabMain />
+        </q-card>
       </div>
     </div>
   </div>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 2f36072..1d35fa2 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -1,7 +1,102 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
 const router = useRouter();
+
+const filterKeyword = ref<string>("");
+
+const rows = ref<any>();
+
+const round = ref<string>("ID1");
+const roundOp = ref<DataOptions[]>([
+  {
+    id: "ID1",
+    name: "รอบเมษา",
+  },
+]);
+
+const visibleColumns = ref<string[]>(["createDate", "status", "result"]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "createDate",
+    align: "left",
+    label: "วันที่สร้างแบบประเมิน",
+    sortable: true,
+    field: "createDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการประเมิน",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "result",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** ดึงข้อมูล */
+function getData() {
+  const data = [
+    {
+      id: "ID1",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+    {
+      id: "ID1",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onEdit(id:string){
+  router.push(`/KPI/${id}`)
+}
+onMounted(async () => {
+  getData();
+});
 </script>
 
 <template>
@@ -18,11 +113,133 @@ const router = useRouter();
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        KPI
+        รายการประเมินผลการปฏิบัติราชการระดับบุคคล
       </div>
       <div class="col-12">
-        <q-card bordered class="q-pa-md"> หน้าหลัก </q-card>
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <q-select
+              v-model="round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              style="min-width: 200px"
+              emit-value
+              map-options
+            />
+            <q-btn flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
+              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+            </q-btn>
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></q-input>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </q-toolbar>
+
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props" >
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id" @click="onEdit(props.row.id)">
+                  <div v-if="col.name == 'createDate'">
+                  {{ col.value ? date2Thai(col.value):'-' }}
+                </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </q-card>
       </div>
     </div>
   </div>
 </template>
+<style scoped lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

From 5356cb37e34dfe077cd43846555d7139f0e80c13 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 9 Apr 2024 16:30:20 +0700
Subject: [PATCH 05/16] btn save

---
 src/modules/08_KPI/views/form.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 1a56d0e..efd0fc6 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -48,6 +48,12 @@ function getProfile() {
       hideLoader();
     });
 }
+
+/** save */
+function onSave(){
+
+}
+
 onMounted(() => {
   getProfile();
 });
@@ -68,6 +74,8 @@ onMounted(() => {
           @click="router.push(`/KPI`)"
         />
         {{ id ? `แก้ไขแบบประเมิน`:`เพิ่มแบบประเมิน` }}
+        <q-space/>
+        <q-btn label="บันทึก" color="secondary" unelevated @click="onSave"><q-tooltip>บันทึก</q-tooltip></q-btn>
       </div>
       <div class="col-12">
         <q-card bordered flatclass="relative-position">

From 3e25bb4da81ec3341a68f29fff03a8203ddafc44 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 10 Apr 2024 10:07:41 +0700
Subject: [PATCH 06/16] icon

---
 src/modules/08_KPI/views/form.vue | 46 ++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index efd0fc6..d42f446 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import TabMain from '@/modules/08_KPI/views/TabMain.vue'
+import TabMain from "@/modules/08_KPI/views/TabMain.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,14 +10,13 @@ import { useQuasar } from "quasar";
 
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
 
-const route = useRoute()
+const route = useRoute();
 const id = route.params.id as string;
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 
-
 const formProfile = reactive<FormProfile>({
   fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
   prefix: "นางสาว",
@@ -50,9 +49,7 @@ function getProfile() {
 }
 
 /** save */
-function onSave(){
-
-}
+function onSave() {}
 
 onMounted(() => {
   getProfile();
@@ -73,9 +70,11 @@ onMounted(() => {
           class="q-mr-sm"
           @click="router.push(`/KPI`)"
         />
-        {{ id ? `แก้ไขแบบประเมิน`:`เพิ่มแบบประเมิน` }}
-        <q-space/>
-        <q-btn label="บันทึก" color="secondary" unelevated @click="onSave"><q-tooltip>บันทึก</q-tooltip></q-btn>
+        {{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
+        <q-space />
+        <q-btn label="บันทึก" color="secondary" unelevated @click="onSave"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
+        >
       </div>
       <div class="col-12">
         <q-card bordered flatclass="relative-position">
@@ -97,8 +96,13 @@ onMounted(() => {
                     >
                       <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                     </q-btn>
-                    <q-btn unelevated round color="grey-2" text-color="blue-5">
-                      <q-icon name="mdi-briefcase-eye-outline" />
+                    <q-btn
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="blue-5"
+                      icon="mdi-file-eye-outline"
+                    >
                       <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
                     </q-btn>
                   </div>
@@ -120,31 +124,41 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ตำแหน่งในสายงาน</span>
-                      <span class="text-weight-bold">{{ formProfile.position }}</span>
+                      <span class="text-weight-bold">{{
+                        formProfile.position
+                      }}</span>
                     </div>
                   </div>
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ประเภท</span>
-                      <span class="text-weight-bold">{{ formProfile.type }}</span>
+                      <span class="text-weight-bold">{{
+                        formProfile.type
+                      }}</span>
                     </div>
                   </div>
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ระดับชั้นงาน</span>
-                      <span class="text-weight-bold">{{ formProfile.level }}</span>
+                      <span class="text-weight-bold">{{
+                        formProfile.level
+                      }}</span>
                     </div>
                   </div>
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">สถานะการประเมิน</span>
-                      <span class="text-weight-bold">{{ formProfile.status }}</span>
+                      <span class="text-weight-bold">{{
+                        formProfile.status
+                      }}</span>
                     </div>
                   </div>
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">คะแนนประเมิน</span>
-                      <span class="text-weight-bold text-primary">{{ formProfile.score }}</span>
+                      <span class="text-weight-bold text-primary">{{
+                        formProfile.score
+                      }}</span>
                     </div>
                   </div>
                 </div>

From 49b53430d21401fb566d9d1c9a27decc5da6d7ad Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 11 Apr 2024 13:07:40 +0700
Subject: [PATCH 07/16] =?UTF-8?q?UI=20=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B8=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=A9=E0=B8=B2(=E0=B8=9E=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81=E0=B9=84=E0=B8=9B=E0=B8=97=E0=B8=B3=20admin)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue  |   8 +
 .../09_scholarship/interface/index/Main.ts    |   8 +
 .../09_scholarship/interface/request/index.ts |   0
 src/modules/09_scholarship/router.ts          |  17 +
 src/modules/09_scholarship/views/main.vue     | 408 ++++++++++++++++++
 src/router/index.ts                           |   2 +
 6 files changed, 443 insertions(+)
 create mode 100644 src/modules/09_scholarship/interface/index/Main.ts
 create mode 100644 src/modules/09_scholarship/interface/request/index.ts
 create mode 100644 src/modules/09_scholarship/router.ts
 create mode 100644 src/modules/09_scholarship/views/main.vue

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 9a15af9..55082e4 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -89,6 +89,14 @@ const items = ref<any>([
     path: "/KPI",
     active: false,
   },
+  {
+    icon: "mdi-school",
+    title: "ทุนการศึกษา/ฝึกอบรม",
+    sub: "รายการทุนการศึกษา/ฝึกอบรม",
+    color: "teal-2",
+    path: "/scholarship",
+    active: false,
+  },
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
diff --git a/src/modules/09_scholarship/interface/index/Main.ts b/src/modules/09_scholarship/interface/index/Main.ts
new file mode 100644
index 0000000..80143f3
--- /dev/null
+++ b/src/modules/09_scholarship/interface/index/Main.ts
@@ -0,0 +1,8 @@
+interface DataOptions {
+    id:string
+    name:string
+}
+
+export type {
+    DataOptions
+}
\ No newline at end of file
diff --git a/src/modules/09_scholarship/interface/request/index.ts b/src/modules/09_scholarship/interface/request/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/09_scholarship/router.ts b/src/modules/09_scholarship/router.ts
new file mode 100644
index 0000000..2beac10
--- /dev/null
+++ b/src/modules/09_scholarship/router.ts
@@ -0,0 +1,17 @@
+/**
+ * Router ขอโอน
+ */
+
+const scholarshipPage = () => import("@/modules/09_scholarship/views/main.vue");
+
+export default [
+  {
+    path: "/scholarship",
+    name: "scholarshipMain",
+    component: scholarshipPage,
+    meta: {
+      Auth: true,
+      Key: [9],
+    },
+  },
+];
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
new file mode 100644
index 0000000..bc9a495
--- /dev/null
+++ b/src/modules/09_scholarship/views/main.vue
@@ -0,0 +1,408 @@
+<script setup lang="ts">
+import { ref, onMounted,watch } from "vue";
+import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const router = useRouter();
+
+const filterKeyword = ref<string>("");
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+const rows = ref<any>();
+const year = ref<number>(0);
+const type = ref<string>("DOMESTICE");
+const scholarshipTypeOp = ref<DataOptions[]>([
+  {
+    id: "DOMESTICE",
+    name: "การศึกษาในประเทศ",
+  },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+]);
+
+/**
+ * ตั้งค่า pagination
+ */
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+  descending: true,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน ",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "citizenId",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "posExecutive",
+]);
+
+/** ดึงข้อมูล */
+function getData() {
+  const data = [
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d1",
+      citizenId: "5555512312321",
+      fullName: "นายณัฐพงศ์ ดิษยบุตร",
+      position: null,
+      posType: null,
+      posLevel: null,
+      posExecutive: null,
+    },
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d2",
+      citizenId: "0000000000021",
+      fullName: "นางสาวชญาน์นันท์ วรดรเกรียรติวรา",
+      position: "นักจัดการงานทั่วไป",
+      posType: "ทั่วไป",
+      posLevel: "ชำนาญงาน",
+      posExecutive: "ผู้ช่วยหัวหน้าสำนักงาน",
+    },
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d3",
+      citizenId: "0000000000010",
+      fullName: "นางจิตรา ทันนิเทศ",
+      position: "เจ้าพนักงานธุรการ",
+      posType: "ทั่วไป",
+      posLevel: "ปฏิบัติงาน",
+      posExecutive: "นักการช่าง",
+    },
+    {
+      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d9",
+      citizenId: "0000000000016",
+      fullName: "นางสาวปุณณภาภัค เจรจาปรีดี",
+      position: "นักจัดการทั่วไป",
+      posType: "ทั่วไป",
+      posLevel: "ชำนาญงาน",
+      posExecutive: null,
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onEdit(id: string) {
+  router.push(`/KPI/${id}`);
+}
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getData();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getData();
+  }
+);
+
+onMounted(async () => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการทุนการศึกษา/ฝึกอบรม
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <div class="row q-gutter-sm">
+              <datepicker
+                style="width: 150px"
+                menu-class-name="modalfix"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="getData()"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-if="year" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="(year = 0), getData()"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <q-select
+                dense
+                outlined
+                v-model="type"
+                :options="scholarshipTypeOp"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                label="เลือกประเภททุน"
+                @update:model-value="getData()"
+                style="width: 350px"
+              />
+              <!-- <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click="router.push(`/KPI/add`)"
+              >
+                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+              </q-btn> -->
+            </div>
+
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></q-input>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </q-toolbar>
+
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click="onEdit(props.row.id)"
+                >
+                  <div v-if="col.name == 'createDate'">
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 15b040a..c3b8dbb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,7 @@ import ModuEvaluate from "@/modules/06_evaluate/router";
 import ModuAppealComplain from "@/modules/07_appealComplain/router";
 import ModuleSupport from "@/modules/00_support/router";
 import ModuleKPI from "@/modules/08_KPI/router";
+import ModuleScholarship from "@/modules/09_scholarship/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
 
@@ -49,6 +50,7 @@ const router = createRouter({
         ...ModuAppealComplain,
         ...ModuleSupport,
         ...ModuleKPI,
+        ...ModuleScholarship,
       ],
     },
   ],

From 76665543882ca32f2af9fef5ea64811872840b6f Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 11 Apr 2024 18:01:59 +0700
Subject: [PATCH 08/16] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=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/scholarship/api.scholarship.ts      |   9 +
 src/app.config.ts                           |   2 +
 src/modules/09_scholarship/router.ts        |  11 +-
 src/modules/09_scholarship/views/detail.vue | 393 ++++++++++++++++++++
 src/modules/09_scholarship/views/main.vue   | 173 ++++-----
 5 files changed, 477 insertions(+), 111 deletions(-)
 create mode 100644 src/api/scholarship/api.scholarship.ts
 create mode 100644 src/modules/09_scholarship/views/detail.vue

diff --git a/src/api/scholarship/api.scholarship.ts b/src/api/scholarship/api.scholarship.ts
new file mode 100644
index 0000000..c921010
--- /dev/null
+++ b/src/api/scholarship/api.scholarship.ts
@@ -0,0 +1,9 @@
+import env from "../index";
+
+const development = `${env.API_URI}/development`;
+
+
+export default {
+  developmentScholarship: `${development}/scholarship`,
+
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 20be1e7..4d711c9 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -9,6 +9,7 @@ import message from "./api/api.message";
 import evaluate from "./api/evaluate/api.evaluate";
 import support from "./api/support/api.support";
 import org from "./api/org/api.org";
+import scholarship from "./api/scholarship/api.scholarship";
 
 const API = {
   ...testtest,
@@ -19,6 +20,7 @@ const API = {
   ...appeal,
   ...support,
   ...org,
+  ...scholarship,
 };
 
 export default {
diff --git a/src/modules/09_scholarship/router.ts b/src/modules/09_scholarship/router.ts
index 2beac10..ca4af1c 100644
--- a/src/modules/09_scholarship/router.ts
+++ b/src/modules/09_scholarship/router.ts
@@ -3,7 +3,7 @@
  */
 
 const scholarshipPage = () => import("@/modules/09_scholarship/views/main.vue");
-
+const scholarshipDetail = () => import('@/modules/09_scholarship/views/detail.vue')
 export default [
   {
     path: "/scholarship",
@@ -14,4 +14,13 @@ export default [
       Key: [9],
     },
   },
+  {
+    path: "/scholarship/:id",
+    name: "scholarshipDetail",
+    component: scholarshipDetail,
+    meta: {
+      Auth: true,
+      Key: [9],
+    },
+  },
 ];
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
new file mode 100644
index 0000000..50206c1
--- /dev/null
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOptions } from '@/modules/09_scholarship/interface/index/Main'
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError ,date2Thai} = mixin;
+const router = useRouter();
+
+const id = ref<string>(route.params.id.toLocaleString());
+const budgetSourceOp = ref<DataOptions[]>([
+  { id: "BKK", name: "งบประมาณ กทม." },
+  { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
+  { id: "FUND", name: "เงินกองทุน" },
+  { id: "SUBSIDY", name: "เงินอุดหนุน" },
+  { id: "OTHER", name: "เงินอื่น ๆ" },
+]);
+const dataPerson = reactive({
+  id: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
+
+  planType: "",
+
+  scholarshipYear: null,
+  budgetSource: "",
+  budgetApprove: null,
+  isNoUseBudget: false,
+  bookNo: "",
+  bookNoDate: null,
+  bookApproveDate: null,
+  useOfficialTime: false,
+  changeDetail: "",
+});
+
+function getDetail() {
+  showLoader();
+  http
+    .get(config.API.developmentScholarship + `/${id.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataPerson.citizenId = data.citizenId;
+      dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
+      dataPerson.position = data.position;
+      dataPerson.type = data.posTypeName;
+      dataPerson.level = data.posLevelName;
+      dataPerson.positionSide = data.posExecutive;
+      dataPerson.org = data.org; // รอ API
+      dataPerson.planType = data.planType;
+
+      dataPerson.scholarshipYear = data.scholarshipYear 
+      dataPerson.budgetSource = data.budgetSource 
+      dataPerson.budgetApprove = data.budgetApprove 
+      dataPerson.isNoUseBudget = data.isNoUseBudget 
+      dataPerson.bookNo = data.bookNo 
+      dataPerson.bookNoDate = data.bookNoDate 
+      dataPerson.bookApproveDate = data.bookApproveDate 
+      dataPerson.useOfficialTime = data.useOfficialTime 
+      dataPerson.changeDetail = data.changeDetail 
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getDetail();
+});
+</script>
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/scholarship`)"
+        />
+        รายละเอียดทุนการศึกษา/ฝึกอบรม
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
+            <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
+              ข้อมูลราชการ
+            </div>
+            <q-separator />
+            <q-card-section>
+              <div class="row">
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.name ? dataPerson.name : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.position ? dataPerson.position : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ประเภท</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.type ? dataPerson.type : "-" }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.level ? dataPerson.citizenId : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.positionSide ? dataPerson.name : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.org ? dataPerson.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+          <div class="row q-col-gutter-sm q-mt-md">
+            <div class="col-12">
+              <q-radio
+                v-model="dataPerson.planType"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="INPLAN"
+                label="ในแผนฯ"
+                dense
+                disable
+              />
+              <q-radio
+                v-model="dataPerson.planType"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="OUTPLAN"
+                label="นอกแผนฯ"
+                dense
+                disable
+                class="q-pl-sm"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.scholarshipYear"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                readonly
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.scholarshipYear
+                        ? Number(dataPerson.scholarshipYear) + 543
+                        : 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-select
+                dense
+                readonly
+                outlined
+                class="inputgreen"
+                label="แหล่งงบประมาณ"
+                hide-bottom-space
+                v-model="dataPerson.budgetSource"
+                :options="budgetSourceOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+              readonly
+                dense
+                outlined
+                hide-bottom-space
+                class="inputgreen"
+                v-model="dataPerson.budgetApprove"
+                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+                mask="###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-checkbox
+                keep-color
+                color="primary"
+                disable
+                v-model="dataPerson.isNoUseBudget"
+                label="ไม่ใช้งบประมาณ"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                readonly
+                class="inputgreen"
+                v-model="dataPerson.bookNo"
+                label="เลขที่หนังสิออนุมัติ"
+                hide-bottom-space
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.bookNoDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    readonly
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.bookNoDate
+                        ? date2Thai(dataPerson.bookNoDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณาเลือกวันที่'}`,
+                ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.bookApproveDate"
+                :locale="'th'"
+                readonly
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    readonly
+                    :model-value="
+                      dataPerson.bookApproveDate
+                        ? date2Thai(dataPerson.bookApproveDate)
+                        : null
+                    "
+                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
+                ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-checkbox
+                keep-color
+                disable
+                color="primary"
+                v-model="dataPerson.useOfficialTime"
+                label="ใช้เวลาราชการ"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                dense
+                class="inputgreen"
+                readonly
+                v-model="dataPerson.changeDetail"
+                label="เปลี่ยนแปลงรายละเอียด"
+                rows="3"
+                hide-bottom-space
+                type="textarea"
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
+            ]"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index bc9a495..9ddc4cc 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted,watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
-import type { QTableProps } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 const router = useRouter();
 
+const $q = useQuasar();
 const filterKeyword = ref<string>("");
 
+const profilId = ref<string>('')
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
@@ -51,126 +56,43 @@ const pagination = ref({
 
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "citizenId",
+    name: "scholarshipYear",
     align: "left",
-    label: "เลขประจำตัวประชาชน ",
+    label: "ปีงบประมาณที่ได้รับทุน ",
     sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
+    field: "scholarshipYear",
+    headerStyle: "font-size: 14px ;width:20%",
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "scholarshipType",
     align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ประเภททุน",
     sortable: true,
-    field: "fullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "posExecutive",
+    field: "scholarshipType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>([
-  "citizenId",
-  "fullName",
-  "position",
-  "posType",
-  "posLevel",
-  "posExecutive",
-]);
+const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 function getData() {
-  const data = [
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d1",
-      citizenId: "5555512312321",
-      fullName: "นายณัฐพงศ์ ดิษยบุตร",
-      position: null,
-      posType: null,
-      posLevel: null,
-      posExecutive: null,
-    },
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d2",
-      citizenId: "0000000000021",
-      fullName: "นางสาวชญาน์นันท์ วรดรเกรียรติวรา",
-      position: "นักจัดการงานทั่วไป",
-      posType: "ทั่วไป",
-      posLevel: "ชำนาญงาน",
-      posExecutive: "ผู้ช่วยหัวหน้าสำนักงาน",
-    },
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d3",
-      citizenId: "0000000000010",
-      fullName: "นางจิตรา ทันนิเทศ",
-      position: "เจ้าพนักงานธุรการ",
-      posType: "ทั่วไป",
-      posLevel: "ปฏิบัติงาน",
-      posExecutive: "นักการช่าง",
-    },
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d9",
-      citizenId: "0000000000016",
-      fullName: "นางสาวปุณณภาภัค เจรจาปรีดี",
-      position: "นักจัดการทั่วไป",
-      posType: "ทั่วไป",
-      posLevel: "ชำนาญงาน",
-      posExecutive: null,
-    },
-  ];
-  rows.value = data;
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPrefix)
-  //   .then(async (res) => {
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  http
+  .get(config.API.developmentScholarship+`/user/${profilId.value}`)
+  .then((res)=>{
+    rows.value = res.data.result
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+
+  })
+
+
 }
 
 function onEdit(id: string) {
-  router.push(`/KPI/${id}`);
+  router.push(`/scholarship/${id}`);
 }
 
 watch(
@@ -190,8 +112,37 @@ watch(
   }
 );
 
+function getProfileId() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then((res) => {
+      profilId.value = res.data.result.profileId
+      getData()
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function convertType(val: string) {
+    switch (val) {
+      case "DOMESTICE":
+        return "การศึกษาในประเทศ";
+      case "NOABROAD":
+        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)";
+      case "ABROAD":
+        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
+      case "EXECUTIVE":
+        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
+    }
+  }
+
 onMounted(async () => {
-  getData();
+  getProfileId();
 });
 </script>
 
@@ -335,7 +286,6 @@ onMounted(async () => {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
@@ -345,8 +295,11 @@ onMounted(async () => {
                   :key="col.id"
                   @click="onEdit(props.row.id)"
                 >
-                  <div v-if="col.name == 'createDate'">
-                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  <div v-if="col.name == 'scholarshipYear'">
+                    {{ col.value ? col.value + 543 : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'scholarshipType'">
+                    {{ col.value ? convertType(col.value): "-" }}
                   </div>
                   <div v-else>
                     {{ col.value ? col.value : "-" }}

From 12c255e82f7a6b3b410b4304e4a2ffde2454dd19 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 17 Apr 2024 15:44:08 +0700
Subject: [PATCH 09/16] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=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/scholarship/api.scholarship.ts        |    6 +-
 .../components/Dialog/DialogReturn.vue        |  327 ++++++
 src/modules/09_scholarship/views/detail.vue   | 1002 ++++++++++++++++-
 src/stores/mixin.ts                           |    2 +-
 4 files changed, 1309 insertions(+), 28 deletions(-)
 create mode 100644 src/modules/09_scholarship/components/Dialog/DialogReturn.vue

diff --git a/src/api/scholarship/api.scholarship.ts b/src/api/scholarship/api.scholarship.ts
index c921010..1bc081c 100644
--- a/src/api/scholarship/api.scholarship.ts
+++ b/src/api/scholarship/api.scholarship.ts
@@ -1,9 +1,11 @@
 import env from "../index";
 
 const development = `${env.API_URI}/development`;
-
+const developmentScholarshipReport = `${env.API_URI}/development/report/scholarship`;
+const developmentSalaryFile = `${env.API_URI}/salary/file`;
 
 export default {
+  developmentScholarshipReport,
   developmentScholarship: `${development}/scholarship`,
-
+  developmentSalaryFile: (name: string, group: string, id: string) => `${developmentSalaryFile}/${name}/${group}/${id}`,
 };
diff --git a/src/modules/09_scholarship/components/Dialog/DialogReturn.vue b/src/modules/09_scholarship/components/Dialog/DialogReturn.vue
new file mode 100644
index 0000000..68bc4f5
--- /dev/null
+++ b/src/modules/09_scholarship/components/Dialog/DialogReturn.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const id = ref<string>(route.params.id.toLocaleString());
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  success,
+} = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+
+const governmentDate = ref<any>(null);
+const graduatedDate = ref<any>(null);
+const isGraduated = ref<any>(null);
+const graduatedReason = ref<string>("");
+
+const bookNumber = ref<string>("");
+const bookDate = ref<any>(null);
+const governmentEndDate = ref<any>(null);
+
+function close() {
+  modal.value = false;
+
+  bookNumber.value = "";
+  bookDate.value = null;
+  governmentDate.value = null;
+  governmentEndDate.value = null;
+
+  isGraduated.value = null;
+  graduatedDate.value = null;
+  graduatedReason.value = "";
+}
+
+function onSubmit() {
+  if (isGraduated.value == null) {
+    dialogMessageNotify($q, "กรุณาเลือกสำเร็จการศึกษาตามที่หลักสูตรกำหนด");
+  } else {
+    dialogConfirm($q, () => {
+      showLoader();
+      http
+        .put(config.API.developmentScholarship + `/user/detail/${id.value}`, {
+          bookNumber: bookNumber.value,
+          bookDate: bookDate.value,
+          governmentDate: governmentDate.value,
+          governmentEndDate: governmentEndDate.value,
+          isGraduated: isGraduated.value,
+          graduatedDate: isGraduated.value == 'true' ? graduatedDate.value : null,
+          graduatedReason: isGraduated.value == 'false' ? graduatedReason.value : null,
+        })
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+          close();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      showLoader();
+      http
+        .get(config.API.developmentScholarship + `/user/detail/${id.value}`)
+        .then((res) => {
+          const data = res.data.result;
+          bookNumber.value = data.bookNumber;
+          bookDate.value = data.bookDate;
+          governmentDate.value = data.governmentDate;
+          governmentEndDate.value = data.governmentEndDate;
+          isGraduated.value = data.isGraduated.toLocaleString();
+          graduatedDate.value = data.graduatedDate;
+          graduatedReason.value = data.graduatedReason;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card flat style="min-width: 30vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="รายงานตัวกลับเข้ารับราชการ" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                label="เลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ"
+                v-model="bookNumber"
+                outlined
+                lazy-rules
+                dense
+                hide-bottom-space
+                :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับเข้าปฏิบัติราชการ'}`,
+                            ]"
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="bookDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="bookDate ? date2Thai(bookDate) : null"
+                    :label="`${'หนังสือรายงานตัวกลับเข้าปฏิบัติราชการลงวันที่'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="governmentDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      governmentDate ? date2Thai(governmentDate) : null
+                    "
+                    :label="`${'วันที่กลับเข้าปฏิบัติราชการ'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="governmentEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      governmentEndDate ? date2Thai(governmentEndDate) : null
+                    "
+                    :label="`${' วันสิ้นสุดภาระผูกพัน'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :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>
+            <q-radio
+              v-model="isGraduated"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="true"
+              label="สำเร็จการศึกษาตามที่หลักสูตรกำหนด"
+            />
+
+            <q-radio
+              v-model="isGraduated"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="false"
+              label="เสร็จสิ้นการศึกษาตามที่หลักสูตรกำหนดแล้วแต่ยังไม่สำเร็จการศึกษา"
+            />
+            <div v-if="isGraduated == 'true'" class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="graduatedDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      graduatedDate ? date2Thai(graduatedDate) : null
+                    "
+                    :label="`${'ตั้งแต่ (วันที่)'}`"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอกตั้งแต่ (วันที่)'}`,
+                            ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div v-if="isGraduated == 'false'" class="col-12">
+              <q-input
+                v-model="graduatedReason"
+                type="textarea"
+                dense
+                outlined
+                hide-bottom-space
+                    class="inputgreen"
+                    :rules="[
+                            (val:string) =>
+                                !!val || `${'กรุณากรอก เนื่องจาก'}`,
+                            ]"
+                label="เนื่องจาก"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 50206c1..6e228f4 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -1,20 +1,36 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-
+import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataOptions } from '@/modules/09_scholarship/interface/index/Main'
+import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+
+import DialogReturn from "@/modules/09_scholarship/components/Dialog/DialogReturn.vue";
+import genReport from "@/plugins/genreport";
+
+const fileList = ref<any[]>();
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError ,date2Thai} = mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  calculateDurationYmd,
+  dialogConfirm,
+  success,
+} = mixin;
 const router = useRouter();
 
+const dialogReturn = ref<boolean>(false);
+
+const documentFile = ref<any>(null);
 const id = ref<string>(route.params.id.toLocaleString());
 const budgetSourceOp = ref<DataOptions[]>([
   { id: "BKK", name: "งบประมาณ กทม." },
@@ -23,6 +39,7 @@ const budgetSourceOp = ref<DataOptions[]>([
   { id: "SUBSIDY", name: "เงินอุดหนุน" },
   { id: "OTHER", name: "เงินอื่น ๆ" },
 ]);
+
 const dataPerson = reactive({
   id: "",
   citizenId: "",
@@ -32,9 +49,7 @@ const dataPerson = reactive({
   level: "",
   positionSide: "",
   org: "-",
-
   planType: "",
-
   scholarshipYear: null,
   budgetSource: "",
   budgetApprove: null,
@@ -44,8 +59,70 @@ const dataPerson = reactive({
   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: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
 });
 
+const dataGuarantor = reactive({
+  id: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
+});
+
+const scholarshipTypeOp = ref<DataOptions[]>([
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
+  {
+    id: "NOABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "ABROAD",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+  },
+  {
+    id: "EXECUTIVE",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+]);
+
+const fundTypeOp = ref<DataOptions[]>([
+  { id: "FUND1", name: "ทุน 1 (ก)" },
+  { id: "FUND2", name: "ทุน 1 (ข)" },
+  { id: "FUND3", name: "ทุน 1 (ค)" },
+  { id: "FUND4", name: "ทุน 2" },
+  { id: "FUND5", name: "ทุนส่วนตัว" },
+]);
+
 function getDetail() {
   showLoader();
   http
@@ -61,15 +138,51 @@ function getDetail() {
       dataPerson.org = data.org; // รอ API
       dataPerson.planType = data.planType;
 
-      dataPerson.scholarshipYear = data.scholarshipYear 
-      dataPerson.budgetSource = data.budgetSource 
-      dataPerson.budgetApprove = data.budgetApprove 
-      dataPerson.isNoUseBudget = data.isNoUseBudget 
-      dataPerson.bookNo = data.bookNo 
-      dataPerson.bookNoDate = data.bookNoDate 
-      dataPerson.bookApproveDate = data.bookApproveDate 
-      dataPerson.useOfficialTime = data.useOfficialTime 
-      dataPerson.changeDetail = data.changeDetail 
+      dataPerson.scholarshipYear = data.scholarshipYear;
+      dataPerson.budgetSource = data.budgetSource;
+      dataPerson.budgetApprove = data.budgetApprove;
+      dataPerson.isNoUseBudget = data.isNoUseBudget;
+      dataPerson.bookNo = data.bookNo;
+      dataPerson.bookNoDate = data.bookNoDate;
+      dataPerson.bookApproveDate = data.bookApproveDate;
+      dataPerson.useOfficialTime = data.useOfficialTime;
+      dataPerson.changeDetail = data.changeDetail;
+
+      dataPerson.scholarshipType = data.scholarshipType;
+      dataPerson.fundType = data.fundType;
+
+      dataPerson.contractNo = data.contractNo;
+      dataPerson.contractDate = data.contractDate;
+      dataPerson.reportBackNo = data.reportBackNo;
+      dataPerson.reportBackNoDate = data.reportBackNoDate;
+      dataPerson.reportBackDate = data.reportBackDate;
+
+      dataGuarantor.citizenId = data.guarantorCitizenId;
+      dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
+      dataGuarantor.prefix = data.guarantorPrefix;
+      dataGuarantor.firstName = data.guarantorFirstName;
+      dataGuarantor.lastName = data.guarantorLastName;
+      dataGuarantor.position = data.position;
+      dataGuarantor.type = data.posTypeguarantorName;
+      dataGuarantor.level = data.posLevelguarantorName;
+      dataGuarantor.positionSide = data.guarantorPosExecutive;
+
+      dataPerson.degreeLevel = data.degreeLevel;
+      dataPerson.course = data.course;
+      dataPerson.field = data.field;
+      dataPerson.faculty = data.faculty;
+      dataPerson.educationalInstitution = data.educationalInstitution;
+      dataPerson.startDate = data.startDate;
+      dataPerson.endDate = data.endDate;
+      dataPerson.studyPlace = data.studyPlace;
+      dataPerson.studyTopic = data.studyTopic;
+      dataPerson.studyStartDate = data.studyStartDate;
+      dataPerson.studyEndDate = data.studyEndDate;
+      dataPerson.studyCountry = data.studyCountry;
+      dataPerson.studyAbroadTopic = data.studyAbroadTopic;
+      dataPerson.studyAbroadStartDate = data.studyAbroadStartDate;
+      dataPerson.studyAbroadEndDate = data.studyAbroadEndDate;
+      dataPerson.totalPeriod = data.totalPeriod;
     })
     .catch((e) => {
       messageError($q, e);
@@ -79,8 +192,199 @@ function getDetail() {
     });
 }
 
-onMounted(() => {
-  getDetail();
+function updateTotalPeriod(
+  startDate: any,
+  endDate: any,
+  toDo: boolean = false
+) {
+  if (!toDo && startDate && endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    dataPerson.totalPeriod = calculateDurationYmd(start, end);
+  }
+}
+
+function changeStartDate(type: string) {
+  switch (type) {
+    case "startDate":
+      if (dataPerson?.startDate !== null && dataPerson?.endDate !== null) {
+        const startDate = new Date(dataPerson.startDate);
+        const endDate = new Date(dataPerson?.endDate);
+        if (startDate > endDate) {
+          dataPerson.endDate = null;
+        }
+      }
+      break;
+
+    case "studyStartDate":
+      if (
+        dataPerson?.studyStartDate !== null &&
+        dataPerson?.studyEndDate !== null
+      ) {
+        const startDate = new Date(dataPerson.studyStartDate);
+        const endDate = new Date(dataPerson?.studyEndDate);
+        if (startDate > endDate) {
+          dataPerson.studyEndDate = null;
+          if (dataPerson.scholarshipType === "NOABROAD") {
+            dataPerson.totalPeriod = "";
+          }
+        } else {
+          if (dataPerson.scholarshipType === "NOABROAD") {
+            dataPerson.totalPeriod = calculateDurationYmd(startDate, endDate);
+          }
+        }
+      }
+      break;
+
+    case "studyAbroadStartDate":
+      if (
+        dataPerson?.studyAbroadStartDate !== null &&
+        dataPerson?.studyAbroadEndDate !== null
+      ) {
+        const startDate = new Date(dataPerson.studyAbroadStartDate);
+        const endDate = new Date(dataPerson?.studyAbroadEndDate);
+        if (startDate > endDate) {
+          dataPerson.studyAbroadEndDate = null;
+        } else {
+          dataPerson.totalPeriod = calculateDurationYmd(startDate, endDate);
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+}
+
+function onOpenReturn() {
+  dialogReturn.value = true;
+}
+
+function onDownload() {
+  showLoader();
+  http
+    .get(config.API.developmentScholarshipReport + `/${id.value}`)
+    .then((res) => {
+      const dataList = res.data.result;
+      genReport(dataList, "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(
+          config.API.developmentSalaryFile(
+            "ระบบพัฒนาบุคคล",
+            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+            id.value
+          ),
+          {
+            replace: false,
+            fileList: fileName,
+          }
+        )
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getDetail();
+      getFile();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+function getFile() {
+  http
+    .get(
+      config.API.developmentSalaryFile(
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        id.value
+      )
+    )
+    .then((res) => {
+      const dataFile = res.data;
+      fileList.value = dataFile[0];
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function downloadFile(file: any) {
+  showLoader();
+  http
+    .get(
+      config.API.developmentSalaryFile(
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        id.value
+      ) + `/${file.fileName}`
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  await getDetail();
+  await getFile();
 });
 </script>
 <template>
@@ -101,11 +405,80 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
+          <q-toolbar class="q-px-none q-pb-sm">
+            <div class="row q-col-gutter-x-sm full-width">
+              <div class="col-2 q-pa-none">
+                <q-btn
+                  class="full-width"
+                  unelevated
+                  color="edit"
+                  label="แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ"
+                  @click="onOpenReturn"
+                >
+                  <q-tooltip>แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ</q-tooltip>
+                </q-btn>
+              </div>
+              <div class="col-2">
+                <q-btn
+                  class="full-width"
+                  unelevated
+                  color="primary"
+                  label="ดาวน์โหลดฟอร์มต้นแบบ"
+                  @click="onDownload"
+                >
+                  <q-tooltip>ดาวน์โหลดฟอร์มต้นแบบ</q-tooltip>
+                </q-btn>
+              </div>
+              <q-space />
+              <div v-if="fileList == null" class="col-3">
+                <q-file
+                  for="inputFiles"
+                  class="col-12"
+                  outlined
+                  dense
+                  v-model="documentFile"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                  accept=".pdf,.xlsx,.docx,.png,.jpg"
+                  clearable
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      size="14px"
+                      v-if="documentFile"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      icon="mdi-upload"
+                      @click="clickUpload(documentFile)"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
+              </div>
+              <div v-else class="col-2">
+                <q-btn
+                  color="primary"
+                  class="full-width"
+                  label="ดาวน์โหลดไฟล์เอกสาร"
+                  unelevated
+                  @click="downloadFile(fileList)"
+                >
+                  <q-tooltip>ดาวน์โหลดไฟล์เอกสาร</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </q-toolbar>
           <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
             <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
               ข้อมูลราชการ
             </div>
             <q-separator />
+
             <q-card-section>
               <div class="row">
                 <div class="col">
@@ -147,7 +520,7 @@ onMounted(() => {
               </div>
             </q-card-section>
           </q-card>
-          <div class="row q-col-gutter-sm q-mt-md">
+          <div class="row q-col-gutter-sm q-my-md">
             <div class="col-12">
               <q-radio
                 v-model="dataPerson.planType"
@@ -195,7 +568,6 @@ onMounted(() => {
                         : null
                     "
                     :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
-                    hide-bottom-space
                     :rules="[
                   (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                 ]"
@@ -219,7 +591,6 @@ onMounted(() => {
                 outlined
                 class="inputgreen"
                 label="แหล่งงบประมาณ"
-                hide-bottom-space
                 v-model="dataPerson.budgetSource"
                 :options="budgetSourceOp"
                 option-label="name"
@@ -234,10 +605,9 @@ onMounted(() => {
             </div>
             <div class="col-3">
               <q-input
-              readonly
+                readonly
                 dense
                 outlined
-                hide-bottom-space
                 class="inputgreen"
                 v-model="dataPerson.budgetApprove"
                 label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
@@ -266,7 +636,6 @@ onMounted(() => {
                 class="inputgreen"
                 v-model="dataPerson.bookNo"
                 label="เลขที่หนังสิออนุมัติ"
-                hide-bottom-space
                 :rules="[
               (val: string) =>
                 !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
@@ -298,7 +667,6 @@ onMounted(() => {
                         : null
                     "
                     :label="`${'ลงวันที่'}`"
-                    hide-bottom-space
                     :rules="[
                   (val: string) =>
                     !!val || `${'กรุณาเลือกวันที่'}`,
@@ -341,7 +709,6 @@ onMounted(() => {
                         : null
                     "
                     :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                    hide-bottom-space
                     :rules="[
                   (val: string) =>
                     !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
@@ -377,7 +744,6 @@ onMounted(() => {
                 v-model="dataPerson.changeDetail"
                 label="เปลี่ยนแปลงรายละเอียด"
                 rows="3"
-                hide-bottom-space
                 type="textarea"
                 :rules="[
               (val: string) =>
@@ -385,9 +751,595 @@ onMounted(() => {
             ]"
               />
             </div>
+            <div class="col-9">
+              <q-select
+                dense
+                outlined
+                lazy-rules
+                v-model="dataPerson.scholarshipType"
+                :options="scholarshipTypeOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                readonly
+                class="inputgreen"
+                label="เลือกประเภททุน"
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-select
+                dense
+                outlined
+                readonly
+                lazy-rules
+                class="inputgreen"
+                v-model="dataPerson.fundType"
+                :options="fundTypeOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                label="ประเภททุน"
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกประเภททุน'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                readonly
+                label="เลขที่สัญญา"
+                class="inputgreen"
+                v-model="dataPerson.contractNo"
+              />
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.contractDate"
+                :locale="'th'"
+                autoApply
+                readonly
+              >
+                <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="
+                      dataPerson.contractDate
+                        ? date2Thai(dataPerson.contractDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    readonly
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                readonly
+                lazy-rules
+                class="inputgreen"
+                v-model="dataPerson.reportBackNo"
+                label="เลขที่หนังสือรายงานตัวกลับ"
+              />
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.reportBackNoDate"
+                :locale="'th'"
+                readonly
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.reportBackNoDate
+                        ? date2Thai(dataPerson.reportBackNoDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.reportBackDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.reportBackDate
+                        ? date2Thai(dataPerson.reportBackDate)
+                        : null
+                    "
+                    :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
+            <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
+              ข้อมูลผู้ค้ำประกัน
+            </div>
+            <q-separator />
+            <q-card-section>
+              <div class="row">
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                    <div class="col-8 text-weight-medium">
+                      {{
+                        dataGuarantor.citizenId ? dataGuarantor.citizenId : "-"
+                      }}
+                    </div>
+                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.firstName ? dataGuarantor.name : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{
+                        dataGuarantor.position ? dataGuarantor.position : "-"
+                      }}
+                    </div>
+                    <div class="col-4 text-grey">ประเภท</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.level ? dataGuarantor.citizenId : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                    <div class="col-8 text-weight-medium">
+                      {{
+                        dataGuarantor.positionSide ? dataGuarantor.name : "-"
+                      }}
+                    </div>
+                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+          <div class="row q-col-gutter-sm q-my-md">
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="ระดับปริญญา"
+                class="inputgreen"
+                v-model="dataPerson.degreeLevel"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="หลักสูตรการศึกษา"
+                class="inputgreen"
+                v-model="dataPerson.course"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="สาขาวิชา"
+                class="inputgreen"
+                v-model="dataPerson.field"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="คณะ"
+                class="inputgreen"
+                v-model="dataPerson.faculty"
+                readonly
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="สถาบันการศึกษา"
+                class="inputgreen"
+                v-model="dataPerson.educationalInstitution"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.startDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :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="
+                      dataPerson.startDate
+                        ? date2Thai(dataPerson.startDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษา'}`"
+                    readonly
+                  >
+                    <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="dataPerson.endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                readonly
+                :min-date="dataPerson.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="
+                      dataPerson.endDate ? date2Thai(dataPerson.endDate) : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษา'}`"
+                    readonly
+                  >
+                    <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
+                label="สถานที่ไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="dataPerson.studyPlace"
+                readonly
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="หัวข้อการไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="dataPerson.studyTopic"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.studyStartDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                readonly
+                @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="
+                      dataPerson.studyStartDate
+                        ? date2Thai(dataPerson.studyStartDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                    readonly
+                  >
+                    <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="dataPerson.studyEndDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="dataPerson.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="
+                      dataPerson.studyEndDate
+                        ? date2Thai(dataPerson.studyEndDate)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                    readonly
+                  >
+                    <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
+                label="ประเทศที่ไปศึกษาดูงาน"
+                class="inputgreen"
+                v-model="dataPerson.studyCountry"
+                readonly
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                class="inputgreen"
+                v-model="dataPerson.studyAbroadTopic"
+                readonly
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.studyAbroadStartDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="changeStartDate('studyAbroadStartDate')"
+                readonly
+              >
+                <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="
+                      dataPerson.studyAbroadStartDate
+                        ? date2Thai(dataPerson.studyAbroadStartDate)
+                        : null
+                    "
+                    :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                    readonly
+                  >
+                    <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="dataPerson.studyAbroadEndDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="dataPerson.studyAbroadStartDate"
+                @update:model-value="
+                  updateTotalPeriod(
+                    dataPerson.studyAbroadStartDate,
+                    dataPerson.studyAbroadEndDate
+                  )
+                "
+                readonly
+              >
+                <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="
+                      dataPerson.studyAbroadEndDate
+                        ? date2Thai(dataPerson.studyAbroadEndDate)
+                        : null
+                    "
+                    :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                    readonly
+                  >
+                    <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
+                label="รวมระยะเวลาในการศึกษา"
+                class="inputgreen"
+                v-model="dataPerson.totalPeriod"
+                readonly
+              />
+            </div>
           </div>
         </q-card>
       </div>
     </div>
   </div>
+
+  <DialogReturn v-model:modal="dialogReturn" />
 </template>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a091e50..5b92180 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -988,7 +988,7 @@ export const useCounterMixin = defineStore("mixin", () => {
    * @param endDate วันสิ้นสุด format MM-DD-YYYY"
    * @returns ผลการคำนวน ปี เดือน วัน ในรูปแบบ 1 ปี 10 เดือน 5 วัน
    */
-  function calculateDurationYmd(startDate: string, endDate: string) {
+  function calculateDurationYmd(startDate: any, endDate: any) {
     if (startDate && endDate) {
       const start = new Date(startDate);
       const end = new Date(endDate);

From 43f4cecf7f0a8fa12bbaf101c9111422f58d2dc9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 18 Apr 2024 11:42:01 +0700
Subject: [PATCH 10/16] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A0=E0=B8=97?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B8=E0=B8=99=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/09_scholarship/views/detail.vue | 90 +++++++++++++--------
 src/modules/09_scholarship/views/main.vue   | 61 +++++++-------
 2 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 6e228f4..dc5c812 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -103,15 +103,19 @@ const scholarshipTypeOp = ref<DataOptions[]>([
   { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
   {
     id: "NOABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
   },
   {
     id: "ABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
   },
   {
     id: "EXECUTIVE",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+    name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+  {
+    id: "RESEARCH",
+    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
   },
 ]);
 
@@ -288,8 +292,8 @@ async function clickUpload(file: any) {
       await http
         .post(
           config.API.developmentSalaryFile(
-            "ระบบพัฒนาบุคคล",
-            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+            "พัฒนาบุคคล",
+            "ฟอร์มรายงานตัวกลับ",
             id.value
           ),
           {
@@ -346,17 +350,16 @@ function getFile() {
   http
     .get(
       config.API.developmentSalaryFile(
-        "ระบบพัฒนาบุคคล",
-        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
+        "พัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับ",
         id.value
       )
     )
     .then((res) => {
-      const dataFile = res.data;
-      fileList.value = dataFile[0];
-    })
-    .catch((e) => {
-      messageError($q, e);
+      if (res) {
+        const dataFile = res.data;
+        fileList.value = dataFile[0];
+      }
     })
     .finally(() => {});
 }
@@ -409,26 +412,41 @@ onMounted(async () => {
             <div class="row q-col-gutter-x-sm full-width">
               <div class="col-2 q-pa-none">
                 <q-btn
-                  class="full-width"
+                  flat
+                  icon="mdi-dots-vertical"
+                  color="grey-8"
+                  for="#cancel"
+                  dense
+                  round
                   unelevated
-                  color="edit"
-                  label="แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ"
-                  @click="onOpenReturn"
                 >
-                  <q-tooltip>แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ</q-tooltip>
-                </q-btn>
-              </div>
-              <div class="col-2">
-                <q-btn
-                  class="full-width"
-                  unelevated
-                  color="primary"
-                  label="ดาวน์โหลดฟอร์มต้นแบบ"
-                  @click="onDownload"
-                >
-                  <q-tooltip>ดาวน์โหลดฟอร์มต้นแบบ</q-tooltip>
+                  <q-menu>
+                    <q-list>
+                      <q-item clickable v-close-popup @click="onOpenReturn">
+                        <q-item-section>
+                          <q-item-label>
+                            <q-icon name="edit" color="edit" size="18px" />
+                            แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
+                          </q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item clickable v-close-popup @click="onDownload">
+                        <q-item-section>
+                          <q-item-label>
+                            <q-icon
+                              name="download"
+                              color="primary"
+                              size="18px"
+                            />
+                            ดาวน์โหลดฟอร์มต้นแบบ
+                          </q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
                 </q-btn>
               </div>
+
               <q-space />
               <div v-if="fileList == null" class="col-3">
                 <q-file
@@ -460,16 +478,18 @@ onMounted(async () => {
                   </template>
                 </q-file>
               </div>
-              <div v-else class="col-2">
+              <div v-else class="col-2 text-right">
                 <q-btn
-                  color="primary"
-                  class="full-width"
-                  label="ดาวน์โหลดไฟล์เอกสาร"
-                  unelevated
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
                   @click="downloadFile(fileList)"
                 >
-                  <q-tooltip>ดาวน์โหลดไฟล์เอกสาร</q-tooltip>
-                </q-btn>
+                  <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
               </div>
             </div>
           </q-toolbar>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 9ddc4cc..659b4f9 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -16,7 +16,7 @@ const router = useRouter();
 const $q = useQuasar();
 const filterKeyword = ref<string>("");
 
-const profilId = ref<string>('')
+const profilId = ref<string>("");
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
@@ -26,21 +26,22 @@ const rows = ref<any>();
 const year = ref<number>(0);
 const type = ref<string>("DOMESTICE");
 const scholarshipTypeOp = ref<DataOptions[]>([
-  {
-    id: "DOMESTICE",
-    name: "การศึกษาในประเทศ",
-  },
+  { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
   {
     id: "NOABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
   },
   {
     id: "ABROAD",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
+    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
   },
   {
     id: "EXECUTIVE",
-    name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+    name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
+  },
+  {
+    id: "RESEARCH",
+    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
   },
 ]);
 
@@ -79,16 +80,14 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 /** ดึงข้อมูล */
 function getData() {
   http
-  .get(config.API.developmentScholarship+`/user/${profilId.value}`)
-  .then((res)=>{
-    rows.value = res.data.result
-  }).catch((e)=>{
-    messageError($q,e)
-  }).finally(()=>{
-
-  })
-
-
+    .get(config.API.developmentScholarship + `/user/${profilId.value}`)
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
 }
 
 function onEdit(id: string) {
@@ -117,8 +116,8 @@ function getProfileId() {
   http
     .get(config.API.profilePosition())
     .then((res) => {
-      profilId.value = res.data.result.profileId
-      getData()
+      profilId.value = res.data.result.profileId;
+      getData();
     })
     .catch((e) => {
       messageError($q, e);
@@ -129,17 +128,17 @@ function getProfileId() {
 }
 
 function convertType(val: string) {
-    switch (val) {
-      case "DOMESTICE":
-        return "การศึกษาในประเทศ";
-      case "NOABROAD":
-        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)";
-      case "ABROAD":
-        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
-      case "EXECUTIVE":
-        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
-    }
+  switch (val) {
+    case "DOMESTICE":
+      return "การศึกษาในประเทศ";
+    case "NOABROAD":
+      return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)";
+    case "ABROAD":
+      return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
+    case "EXECUTIVE":
+      return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
   }
+}
 
 onMounted(async () => {
   getProfileId();
@@ -299,7 +298,7 @@ onMounted(async () => {
                     {{ col.value ? col.value + 543 : "-" }}
                   </div>
                   <div v-else-if="col.name == 'scholarshipType'">
-                    {{ col.value ? convertType(col.value): "-" }}
+                    {{ col.value ? convertType(col.value) : "-" }}
                   </div>
                   <div v-else>
                     {{ col.value ? col.value : "-" }}

From fce62f46ac0b0257e38df233fd2c93612fb6164f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 18 Apr 2024 11:44:06 +0700
Subject: [PATCH 11/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B9=84=E0=B8=9F=E0=B8=A5=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B8=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/09_scholarship/views/detail.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index dc5c812..c6c08c8 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -292,8 +292,8 @@ async function clickUpload(file: any) {
       await http
         .post(
           config.API.developmentSalaryFile(
-            "พัฒนาบุคคล",
-            "ฟอร์มรายงานตัวกลับ",
+            "ระบบพัฒนาบุคคล",
+            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
             id.value
           ),
           {
@@ -350,8 +350,8 @@ function getFile() {
   http
     .get(
       config.API.developmentSalaryFile(
-        "พัฒนาบุคคล",
-        "ฟอร์มรายงานตัวกลับ",
+        "ระบบพัฒนาบุคคล",
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
         id.value
       )
     )

From 1993d72e049682ed855dc991de91d7ef2c52b7dc Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 18 Apr 2024 17:27:03 +0700
Subject: [PATCH 12/16] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A8=E0=B8=B6=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A9=E0=B8=B2/=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../09_scholarship/interface/request/index.ts |  132 +
 src/modules/09_scholarship/views/detail.vue   | 2939 ++++++++++++-----
 2 files changed, 2170 insertions(+), 901 deletions(-)

diff --git a/src/modules/09_scholarship/interface/request/index.ts b/src/modules/09_scholarship/interface/request/index.ts
index e69de29..8b76853 100644
--- a/src/modules/09_scholarship/interface/request/index.ts
+++ b/src/modules/09_scholarship/interface/request/index.ts
@@ -0,0 +1,132 @@
+interface FormsSholarship {
+    profileId: string;
+    rank: string; //ยศ
+    prefix: string; //คำนำหน้าชื่อ
+    firstName: string; //ชื่อ
+    lastName: string; //นามสกุล
+    citizenId: string; //เลขประจำตัวประชาชน
+    position: string; //ตำแหน่ง
+    posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+    posLevelId: string | null; //ไอดีระดับตำแหน่ง
+    posTypeId: string | null; //ไอดีประเภทตำแหน่ง
+    org: string;
+    rootId: string | null;
+    root: string;
+    orgRootShortName: string;
+    orgRevisionId: string | null;
+    guarantorRank: string; //ยศ(ผู้ค้ำ)
+    guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+    guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+    guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+    guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+    guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+    guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+    guarantorOrg: string;
+    guarantorRootId: string | null;
+    guarantorRoot: string;
+    guarantorOrgRootShortName: string;
+    guarantorOrgRevisionId: string | null;
+    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; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+    planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
+    isNoUseBudget: boolean; //
+  }
+  
+  interface DataSholarship {
+    rank: string; //ยศ
+    prefix: string; //คำนำหน้าชื่อ
+    firstName: string; //ชื่อ
+    lastName: string; //นามสกุล
+    citizenId: string; //เลขประจำตัวประชาชน
+    position: string; //ตำแหน่ง
+    posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
+    posLevelId: string; //ไอดีระดับตำแหน่ง
+    posTypeId: string; //ไอดีประเภทตำแหน่ง
+    posTypeName: string; //ไอดีระดับตำแหน่ง
+    posLevelName: string; //ไอดีประเภทตำแหน่ง
+    org: string;
+    guarantorRank: string; //ยศ(ผู้ค้ำ)
+    guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
+    guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
+    guarantorLastName: string; //นามสกุล(ผู้ค้ำ)
+    guarantorCitizenId: string; //เลขประจำตัวประชาชน(ผู้ค้ำ)
+    guarantorPosition: string; //ตำแหน่ง(ผู้ค้ำ)
+    guarantorPosExecutive: string; //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+    guarantorOrg: string;
+    guarantorRootId: string | null;
+    guarantorRoot: string;
+    guarantorOrgRootShortName: string;
+    guarantorOrgRevisionId: string | null;
+    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; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+    status: string;
+    planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
+    isNoUseBudget: boolean; // ไม่ใช้งบประมาณ
+  }
+
+  export type { FormsSholarship,DataSholarship };
+  
\ No newline at end of file
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index c6c08c8..aec400d 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -9,10 +9,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+import type {
+  FormsSholarship,
+  DataSholarship,
+} from "@/modules/09_scholarship/interface/request/index";
 
 import DialogReturn from "@/modules/09_scholarship/components/Dialog/DialogReturn.vue";
 import genReport from "@/plugins/genreport";
 
+const isGuarantor = ref<boolean>(false);
+const isGov = ref<boolean>(false);
+const isStatus = ref<string>("");
 const fileList = ref<any[]>();
 const route = useRoute();
 const $q = useQuasar();
@@ -40,25 +47,44 @@ const budgetSourceOp = ref<DataOptions[]>([
   { id: "OTHER", name: "เงินอื่น ๆ" },
 ]);
 
-const dataPerson = reactive({
-  id: "",
-  citizenId: "",
-  name: "",
-  position: "",
-  type: "",
-  level: "",
-  positionSide: "",
-  org: "-",
-  planType: "",
-  scholarshipYear: null,
-  budgetSource: "",
-  budgetApprove: null,
-  isNoUseBudget: false,
-  bookNo: "",
-  bookNoDate: null,
-  bookApproveDate: null,
-  useOfficialTime: false,
-  changeDetail: "",
+const formBody = reactive<FormsSholarship>({
+  profileId: "",
+  rank: "", //ยศ
+  prefix: "", //คำนำหน้าชื่อ
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  citizenId: "", //เลขประจำตัวประชาชน
+  position: "", //ตำแหน่ง
+  posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
+  posLevelId: null, //ไอดีระดับตำแหน่ง
+  posTypeId: null, //ไอดีประเภทตำแหน่ง
+  org: "",
+  rootId: null,
+  root: "",
+  orgRootShortName: "",
+  orgRevisionId: null,
+  guarantorRank: "", //ยศ(ผู้ค้ำ)
+  guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
+  guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
+  guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
+  guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
+  guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
+  guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
+  guarantorOrg: "",
+  guarantorRootId: null,
+  guarantorRoot: "",
+  guarantorOrgRootShortName: "",
+  guarantorOrgRevisionId: null,
+  posLevelguarantorId: null, //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
+  posTypeguarantorId: null, //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
+  scholarshipYear: null, //ปีงบประมาณที่ได้รับทุน
+  budgetSource: "", //แหล่งงบประมาณ
+  budgetApprove: null, //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
+  bookNo: "", //เลขที่หนังสืออนุมัติ
+  bookNoDate: null, //ลงวันที่(หนังสือ)
+  bookApproveDate: null, //หนังสืออนุมัติเมื่อวันที่
+  useOfficialTime: false, //ใช้เวลาราชการ
+  changeDetail: "", //เปลี่ยนแปลงรายละเอียด
   scholarshipType: "", //เลือกประเภททุน
   fundType: "", //ประเภททุน
   contractNo: "", //เลขที่สัญญา
@@ -66,7 +92,6 @@ const dataPerson = reactive({
   reportBackNo: "", //เลขที่หนังสือรายงานตัวกลับ
   reportBackNoDate: null, //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
   reportBackDate: null, //รายงานตัวกลับวันที่
-
   degreeLevel: "", //ระดับปริญญา
   course: "", //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
   field: "", //สาขาวิชา/สาขา
@@ -83,6 +108,19 @@ const dataPerson = reactive({
   studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
   studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
   totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+  planType: "",
+  isNoUseBudget: false,
+});
+
+const dataPerson = reactive({
+  id: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
 });
 
 const dataGuarantor = reactive({
@@ -127,75 +165,6 @@ const fundTypeOp = ref<DataOptions[]>([
   { id: "FUND5", name: "ทุนส่วนตัว" },
 ]);
 
-function getDetail() {
-  showLoader();
-  http
-    .get(config.API.developmentScholarship + `/${id.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      dataPerson.citizenId = data.citizenId;
-      dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
-      dataPerson.position = data.position;
-      dataPerson.type = data.posTypeName;
-      dataPerson.level = data.posLevelName;
-      dataPerson.positionSide = data.posExecutive;
-      dataPerson.org = data.org; // รอ API
-      dataPerson.planType = data.planType;
-
-      dataPerson.scholarshipYear = data.scholarshipYear;
-      dataPerson.budgetSource = data.budgetSource;
-      dataPerson.budgetApprove = data.budgetApprove;
-      dataPerson.isNoUseBudget = data.isNoUseBudget;
-      dataPerson.bookNo = data.bookNo;
-      dataPerson.bookNoDate = data.bookNoDate;
-      dataPerson.bookApproveDate = data.bookApproveDate;
-      dataPerson.useOfficialTime = data.useOfficialTime;
-      dataPerson.changeDetail = data.changeDetail;
-
-      dataPerson.scholarshipType = data.scholarshipType;
-      dataPerson.fundType = data.fundType;
-
-      dataPerson.contractNo = data.contractNo;
-      dataPerson.contractDate = data.contractDate;
-      dataPerson.reportBackNo = data.reportBackNo;
-      dataPerson.reportBackNoDate = data.reportBackNoDate;
-      dataPerson.reportBackDate = data.reportBackDate;
-
-      dataGuarantor.citizenId = data.guarantorCitizenId;
-      dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
-      dataGuarantor.prefix = data.guarantorPrefix;
-      dataGuarantor.firstName = data.guarantorFirstName;
-      dataGuarantor.lastName = data.guarantorLastName;
-      dataGuarantor.position = data.position;
-      dataGuarantor.type = data.posTypeguarantorName;
-      dataGuarantor.level = data.posLevelguarantorName;
-      dataGuarantor.positionSide = data.guarantorPosExecutive;
-
-      dataPerson.degreeLevel = data.degreeLevel;
-      dataPerson.course = data.course;
-      dataPerson.field = data.field;
-      dataPerson.faculty = data.faculty;
-      dataPerson.educationalInstitution = data.educationalInstitution;
-      dataPerson.startDate = data.startDate;
-      dataPerson.endDate = data.endDate;
-      dataPerson.studyPlace = data.studyPlace;
-      dataPerson.studyTopic = data.studyTopic;
-      dataPerson.studyStartDate = data.studyStartDate;
-      dataPerson.studyEndDate = data.studyEndDate;
-      dataPerson.studyCountry = data.studyCountry;
-      dataPerson.studyAbroadTopic = data.studyAbroadTopic;
-      dataPerson.studyAbroadStartDate = data.studyAbroadStartDate;
-      dataPerson.studyAbroadEndDate = data.studyAbroadEndDate;
-      dataPerson.totalPeriod = data.totalPeriod;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 function updateTotalPeriod(
   startDate: any,
   endDate: any,
@@ -204,37 +173,37 @@ function updateTotalPeriod(
   if (!toDo && startDate && endDate) {
     const start = new Date(startDate);
     const end = new Date(endDate);
-    dataPerson.totalPeriod = calculateDurationYmd(start, end);
+    formBody.totalPeriod = calculateDurationYmd(start, end);
   }
 }
 
 function changeStartDate(type: string) {
   switch (type) {
     case "startDate":
-      if (dataPerson?.startDate !== null && dataPerson?.endDate !== null) {
-        const startDate = new Date(dataPerson.startDate);
-        const endDate = new Date(dataPerson?.endDate);
+      if (formBody?.startDate !== null && formBody?.endDate !== null) {
+        const startDate = new Date(formBody.startDate);
+        const endDate = new Date(formBody?.endDate);
         if (startDate > endDate) {
-          dataPerson.endDate = null;
+          formBody.endDate = null;
         }
       }
       break;
 
     case "studyStartDate":
       if (
-        dataPerson?.studyStartDate !== null &&
-        dataPerson?.studyEndDate !== null
+        formBody?.studyStartDate !== null &&
+        formBody?.studyEndDate !== null
       ) {
-        const startDate = new Date(dataPerson.studyStartDate);
-        const endDate = new Date(dataPerson?.studyEndDate);
+        const startDate = new Date(formBody.studyStartDate);
+        const endDate = new Date(formBody?.studyEndDate);
         if (startDate > endDate) {
-          dataPerson.studyEndDate = null;
-          if (dataPerson.scholarshipType === "NOABROAD") {
-            dataPerson.totalPeriod = "";
+          formBody.studyEndDate = null;
+          if (formBody.scholarshipType === "NOABROAD") {
+            formBody.totalPeriod = "";
           }
         } else {
-          if (dataPerson.scholarshipType === "NOABROAD") {
-            dataPerson.totalPeriod = calculateDurationYmd(startDate, endDate);
+          if (formBody.scholarshipType === "NOABROAD") {
+            formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
           }
         }
       }
@@ -242,15 +211,15 @@ function changeStartDate(type: string) {
 
     case "studyAbroadStartDate":
       if (
-        dataPerson?.studyAbroadStartDate !== null &&
-        dataPerson?.studyAbroadEndDate !== null
+        formBody?.studyAbroadStartDate !== null &&
+        formBody?.studyAbroadEndDate !== null
       ) {
-        const startDate = new Date(dataPerson.studyAbroadStartDate);
-        const endDate = new Date(dataPerson?.studyAbroadEndDate);
+        const startDate = new Date(formBody.studyAbroadStartDate);
+        const endDate = new Date(formBody?.studyAbroadEndDate);
         if (startDate > endDate) {
-          dataPerson.studyAbroadEndDate = null;
+          formBody.studyAbroadEndDate = null;
         } else {
-          dataPerson.totalPeriod = calculateDurationYmd(startDate, endDate);
+          formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
         }
       }
       break;
@@ -334,7 +303,7 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
     })
     .then((res) => {
       success($q, "อัปโหลดไฟล์สำเร็จ");
-      getDetail();
+      fetchDataDetail(id.value);
       getFile();
     })
     .catch((e) => {
@@ -385,8 +354,111 @@ function downloadFile(file: any) {
       hideLoader();
     });
 }
+
+function fetchDataDetail(id: string) {
+  showLoader();
+  http
+    .get(config.API.developmentScholarship + `/${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.guarantorOrg = data.guarantorOrg;
+      formBody.guarantorRootId = data.guarantorRootId;
+      formBody.guarantorRoot = data.guarantorRoot;
+      formBody.guarantorOrgRootShortName = data.guarantorOrgRootShortName;
+      formBody.guarantorOrgRevisionId = data.guarantorOrgRevisionId;
+      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
+        ? data.useOfficialTime
+        : false;
+      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;
+      formBody.planType = data.planType ? data.planType : "";
+      formBody.isNoUseBudget = data.isNoUseBudget ? data.isNoUseBudget : false;
+
+      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 : "-";
+      dataPerson.org = data.org ? data.org : "-";
+
+      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
+        : "-";
+      dataGuarantor.org = data.guarantorOrg ? data.guarantorOrg : "-";
+      isStatus.value = data.status;
+      isGov.value = data.citizenId ? true : false;
+      isGuarantor.value = data.guarantorCitizenId ? true : false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
-  await getDetail();
+  await fetchDataDetail(id.value);
   await getFile();
 });
 </script>
@@ -406,171 +478,210 @@ onMounted(async () => {
         />
         รายละเอียดทุนการศึกษา/ฝึกอบรม
       </div>
-      <div class="col-12">
-        <q-card bordered class="q-pa-md">
-          <q-toolbar class="q-px-none q-pb-sm">
-            <div class="row q-col-gutter-x-sm full-width">
-              <div class="col-2 q-pa-none">
-                <q-btn
-                  flat
-                  icon="mdi-dots-vertical"
-                  color="grey-8"
-                  for="#cancel"
-                  dense
-                  round
-                  unelevated
-                >
-                  <q-menu>
-                    <q-list>
-                      <q-item clickable v-close-popup @click="onOpenReturn">
-                        <q-item-section>
-                          <q-item-label>
-                            <q-icon name="edit" color="edit" size="18px" />
-                            แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
-                          </q-item-label>
-                        </q-item-section>
-                      </q-item>
-                      <q-item clickable v-close-popup @click="onDownload">
-                        <q-item-section>
-                          <q-item-label>
-                            <q-icon
-                              name="download"
-                              color="primary"
-                              size="18px"
-                            />
-                            ดาวน์โหลดฟอร์มต้นแบบ
-                          </q-item-label>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </div>
 
-              <q-space />
-              <div v-if="fileList == null" class="col-3">
-                <q-file
-                  for="inputFiles"
-                  class="col-12"
-                  outlined
-                  dense
-                  v-model="documentFile"
-                  label="ไฟล์เอกสารหลักฐาน"
-                  hide-bottom-space
-                  accept=".pdf,.xlsx,.docx,.png,.jpg"
-                  clearable
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      size="14px"
-                      v-if="documentFile"
-                      flat
-                      round
-                      dense
-                      color="add"
-                      icon="mdi-upload"
-                      @click="clickUpload(documentFile)"
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-              <div v-else class="col-2 text-right">
-                <q-btn
-                  size="12px"
-                  flat
-                  round
-                  dense
-                  color="blue"
-                  icon="mdi-download"
-                  @click="downloadFile(fileList)"
-                >
-                  <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
+      <q-card flat bordered class="col-12 q-pa-md">
+        <q-toolbar class="q-px-none q-pb-sm">
+          <div class="row q-col-gutter-x-sm full-width">
+            <div class="col-2 q-pa-none">
+              <q-btn
+                flat
+                icon="mdi-dots-vertical"
+                color="grey-8"
+                for="#cancel"
+                dense
+                round
+                unelevated
+              >
+                <q-menu>
+                  <q-list>
+                    <q-item clickable v-close-popup @click="onOpenReturn">
+                      <q-item-section>
+                        <q-item-label>
+                          <q-icon name="edit" color="edit" size="18px" />
+                          แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup @click="onDownload">
+                      <q-item-section>
+                        <q-item-label>
+                          <q-icon name="download" color="primary" size="18px" />
+                          ดาวน์โหลดฟอร์มต้นแบบ
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
             </div>
-          </q-toolbar>
-          <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
-            <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
-              ข้อมูลราชการ
-            </div>
-            <q-separator />
 
-            <q-card-section>
-              <div class="row">
-                <div class="col">
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.name ? dataPerson.name : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">ตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.position ? dataPerson.position : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">ประเภท</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.type ? dataPerson.type : "-" }}
-                    </div>
-                  </div>
+            <q-space />
+            <div v-if="fileList == null" class="col-3">
+              <q-file
+                for="inputFiles"
+                class="col-12"
+                outlined
+                dense
+                v-model="documentFile"
+                label="ไฟล์เอกสารหลักฐาน"
+                accept=".pdf,.xlsx,.docx,.png,.jpg"
+                clearable
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    size="14px"
+                    v-if="documentFile"
+                    flat
+                    round
+                    dense
+                    color="add"
+                    icon="mdi-upload"
+                    @click="clickUpload(documentFile)"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </template>
+              </q-file>
+            </div>
+            <div v-else class="col-2 text-right">
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="blue"
+                icon="mdi-download"
+                @click="downloadFile(fileList)"
+              >
+                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+        </q-toolbar>
+
+        <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลราชการ
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
+            <div class="col">
+              <div class="row q-col-gutter-md">
+                <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.citizenId }}
                 </div>
-                <div class="col">
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.level ? dataPerson.citizenId : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.positionSide ? dataPerson.name : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataPerson.org ? dataPerson.org : "-" }}
-                    </div>
-                  </div>
+                <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.name }}
+                </div>
+                <div class="col-4 text-grey">ตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.position }}
+                </div>
+                <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.type }}
                 </div>
               </div>
-            </q-card-section>
-          </q-card>
-          <div class="row q-col-gutter-sm q-my-md">
-            <div class="col-12">
-              <q-radio
-                v-model="dataPerson.planType"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="INPLAN"
-                label="ในแผนฯ"
-                dense
-                disable
-              />
-              <q-radio
-                v-model="dataPerson.planType"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="OUTPLAN"
-                label="นอกแผนฯ"
-                dense
-                disable
-                class="q-pl-sm"
-              />
             </div>
+            <div class="col">
+              <div class="row q-col-gutter-md">
+                <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.level }}
+                </div>
+                <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.positionSide }}
+                </div>
+                <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                <div class="col-8 text-weight-medium">
+                  {{ dataPerson.org }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row col-12 q-pa-md" v-else>
+            <q-banner class="bg-grey-3 text-black col-12 text-center">
+              เลือกข้าราชการ
+            </q-banner>
+          </div>
+        </q-card>
+
+        <div class="row q-col-gutter-md q-mt-sm" v-if="isGov">
+          <div class="col-9">
+            <q-select
+              dense
+              readonly
+              outlined
+              v-model="formBody.scholarshipType"
+              :options="scholarshipTypeOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              class="inputgreen"
+              label="เลือกประเภททุน"
+            />
+          </div>
+          <div
+            class="col-3"
+            v-if="
+              formBody.scholarshipType !== '' &&
+              formBody.scholarshipType !== 'EXECUTIVE' &&
+              formBody.scholarshipType !== 'RESEARCH'
+            "
+          >
+            <q-select
+              dense
+              outlined
+              class="inputgreen"
+              v-model="formBody.fundType"
+              :options="fundTypeOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              readonly
+              map-options
+              label="ประเภททุน"
+            />
+          </div>
+
+          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+            <q-radio
+              v-model="formBody.planType"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="INPLAN"
+              label="ในแผนฯ"
+              dense
+              disable
+            />
+            <q-radio
+              v-model="formBody.planType"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="OUTPLAN"
+              label="นอกแผนฯ"
+              dense
+              disable
+              class="q-pl-sm"
+            />
+          </div>
+
+          <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="dataPerson.scholarshipYear"
+                v-model="formBody.scholarshipYear"
                 :locale="'th'"
                 autoApply
+                readonly
                 year-picker
                 :enableTimePicker="false"
-                readonly
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -579,18 +690,19 @@ onMounted(async () => {
                 <template #trigger>
                   <q-input
                     dense
-                    readonly
                     outlined
+                    readonly
                     class="inputgreen"
                     :model-value="
-                      dataPerson.scholarshipYear
-                        ? Number(dataPerson.scholarshipYear) + 543
+                      formBody.scholarshipYear
+                        ? Number(formBody.scholarshipYear) + 543
                         : null
                     "
-                    :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
-                    :rules="[
-                  (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
-                ]"
+                    :label="`${
+                      formBody.scholarshipType === 'RESEARCH'
+                        ? 'ปีงบประมาณที่ได้รับอนุมัติ '
+                        : 'ปีงบประมาณที่ได้รับทุน'
+                    }`"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -604,71 +716,62 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-3">
+            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
               <q-select
                 dense
-                readonly
                 outlined
                 class="inputgreen"
                 label="แหล่งงบประมาณ"
-                v-model="dataPerson.budgetSource"
+                v-model="formBody.budgetSource"
                 :options="budgetSourceOp"
                 option-label="name"
                 option-value="id"
                 emit-value
                 map-options
-                :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
-            ]"
+                readonly
               />
             </div>
             <div class="col-3">
               <q-input
-                readonly
                 dense
                 outlined
+                readonly
                 class="inputgreen"
-                v-model="dataPerson.budgetApprove"
+                v-model="formBody.budgetApprove"
                 label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
                 mask="###,###,###,###,###,###"
                 reverse-fill-mask
-                :rules="[
-              (val: string) =>
-                !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
-            ]"
               />
             </div>
             <div class="col-3">
               <q-checkbox
                 keep-color
-                color="primary"
                 disable
-                v-model="dataPerson.isNoUseBudget"
+                color="primary"
+                v-model="formBody.isNoUseBudget"
                 label="ไม่ใช้งบประมาณ"
               />
             </div>
+          </div>
+
+          <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
               <q-input
                 dense
-                outlined
                 readonly
+                outlined
                 class="inputgreen"
-                v-model="dataPerson.bookNo"
-                label="เลขที่หนังสิออนุมัติ"
-                :rules="[
-              (val: string) =>
-                !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
-            ]"
+                v-model="formBody.bookNo"
+                label="เลขที่หนังสืออนุมัติ"
               />
             </div>
             <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="dataPerson.bookNoDate"
+                v-model="formBody.bookNoDate"
                 :locale="'th'"
-                autoApply
                 readonly
+                autoApply
                 :enableTimePicker="false"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
@@ -682,15 +785,11 @@ onMounted(async () => {
                     readonly
                     class="inputgreen"
                     :model-value="
-                      dataPerson.bookNoDate
-                        ? date2Thai(dataPerson.bookNoDate)
+                      formBody.bookNoDate
+                        ? date2Thai(formBody.bookNoDate)
                         : null
                     "
                     :label="`${'ลงวันที่'}`"
-                    :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณาเลือกวันที่'}`,
-                ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -707,10 +806,10 @@ onMounted(async () => {
             <div class="col-3">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="dataPerson.bookApproveDate"
+                v-model="formBody.bookApproveDate"
                 :locale="'th'"
-                readonly
                 autoApply
+                readonly
                 :enableTimePicker="false"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
@@ -720,19 +819,15 @@ onMounted(async () => {
                 <template #trigger>
                   <q-input
                     dense
+                    readonly
                     outlined
                     class="inputgreen"
-                    readonly
                     :model-value="
-                      dataPerson.bookApproveDate
-                        ? date2Thai(dataPerson.bookApproveDate)
+                      formBody.bookApproveDate
+                        ? date2Thai(formBody.bookApproveDate)
                         : null
                     "
                     :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                    :rules="[
-                  (val: string) =>
-                    !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
-                ]"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -746,618 +841,1660 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-3">
+            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
               <q-checkbox
                 keep-color
                 disable
                 color="primary"
-                v-model="dataPerson.useOfficialTime"
+                v-model="formBody.useOfficialTime"
                 label="ใช้เวลาราชการ"
               />
             </div>
-            <div class="col-12">
-              <q-input
-                outlined
-                dense
-                class="inputgreen"
-                readonly
-                v-model="dataPerson.changeDetail"
-                label="เปลี่ยนแปลงรายละเอียด"
-                rows="3"
-                type="textarea"
-                :rules="[
-              (val: string) =>
-                !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
-            ]"
-              />
-            </div>
-            <div class="col-9">
-              <q-select
-                dense
-                outlined
-                lazy-rules
-                v-model="dataPerson.scholarshipType"
-                :options="scholarshipTypeOp"
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                readonly
-                class="inputgreen"
-                label="เลือกประเภททุน"
-                :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกประเภททุน'}`,
-            ]"
-              />
-            </div>
-            <div class="col-3">
-              <q-select
-                dense
-                outlined
-                readonly
-                lazy-rules
-                class="inputgreen"
-                v-model="dataPerson.fundType"
-                :options="fundTypeOp"
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                label="ประเภททุน"
-                :rules="[
-              (val: string) =>
-                !!val || `${'กรุณาเลือกประเภททุน'}`,
-            ]"
-              />
-            </div>
-            <div class="col-3">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                readonly
-                label="เลขที่สัญญา"
-                class="inputgreen"
-                v-model="dataPerson.contractNo"
-              />
-            </div>
-            <div class="col-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dataPerson.contractDate"
-                :locale="'th'"
-                autoApply
-                readonly
-              >
-                <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="
-                      dataPerson.contractDate
-                        ? date2Thai(dataPerson.contractDate)
-                        : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                    readonly
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-3">
-              <q-input
-                dense
-                outlined
-                readonly
-                lazy-rules
-                class="inputgreen"
-                v-model="dataPerson.reportBackNo"
-                label="เลขที่หนังสือรายงานตัวกลับ"
-              />
-            </div>
-            <div class="col-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dataPerson.reportBackNoDate"
-                :locale="'th'"
-                readonly
-                autoApply
-                :enableTimePicker="false"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    readonly
-                    outlined
-                    class="inputgreen"
-                    :model-value="
-                      dataPerson.reportBackNoDate
-                        ? date2Thai(dataPerson.reportBackNoDate)
-                        : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dataPerson.reportBackDate"
-                :locale="'th'"
-                autoApply
-                readonly
-                :enableTimePicker="false"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    readonly
-                    outlined
-                    class="inputgreen"
-                    :model-value="
-                      dataPerson.reportBackDate
-                        ? date2Thai(dataPerson.reportBackDate)
-                        : null
-                    "
-                    :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
           </div>
-          <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
-            <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
-              ข้อมูลผู้ค้ำประกัน
-            </div>
-            <q-separator />
-            <q-card-section>
-              <div class="row">
-                <div class="col">
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                    <div class="col-8 text-weight-medium">
-                      {{
-                        dataGuarantor.citizenId ? dataGuarantor.citizenId : "-"
-                      }}
+
+          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+            <q-input
+              outlined
+              dense
+              readonly
+              class="inputgreen"
+              v-model="formBody.changeDetail"
+              label="เปลี่ยนแปลงรายละเอียด"
+              rows="3"
+              type="textarea"
+            />
+          </div>
+
+          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+            <div class="row col-12 q-col-gutter-md">
+              <div class="col-3">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="เลขที่สัญญา"
+                  class="inputgreen"
+                  v-model="formBody.contractNo"
+                />
+              </div>
+              <div class="col-2">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.contractDate"
+                  :locale="'th'"
+                  autoApply
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.contractDate
+                          ? date2Thai(formBody.contractDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  class="inputgreen"
+                  v-model="formBody.reportBackNo"
+                  label="เลขที่หนังสือรายงานตัวกลับ"
+                />
+              </div>
+              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.reportBackNoDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.reportBackNoDate
+                          ? date2Thai(formBody.reportBackNoDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.reportBackDate"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      class="inputgreen"
+                      :model-value="
+                        formBody.reportBackDate
+                          ? date2Thai(formBody.reportBackDate)
+                          : null
+                      "
+                      :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-12">
+                <q-card bordered tyle="border: 1px solid #d6dee1">
+                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                    ข้อมูลผู้ค้ำประกัน
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div
+                    class="row col-12 q-col-gutter-md q-pa-md"
+                    v-if="isGuarantor"
+                  >
+                    <div class="col">
+                      <div class="row q-col-gutter-md">
+                        <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.citizenId }}
+                        </div>
+                        <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.name }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่ง</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.position }}
+                        </div>
+                        <div class="col-4 text-grey">ประเภท</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.type }}
+                        </div>
+                      </div>
                     </div>
-                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataGuarantor.firstName ? dataGuarantor.name : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">ตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
-                      {{
-                        dataGuarantor.position ? dataGuarantor.position : "-"
-                      }}
-                    </div>
-                    <div class="col-4 text-grey">ประเภท</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
+                    <div class="col">
+                      <div class="row q-col-gutter-md">
+                        <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.level }}
+                        </div>
+                        <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.positionSide }}
+                        </div>
+                        <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                        <div class="col-8 text-weight-medium">
+                          {{ dataGuarantor.org }}
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="col">
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataGuarantor.level ? dataGuarantor.citizenId : "-" }}
-                    </div>
-                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                    <div class="col-8 text-weight-medium">
-                      {{
-                        dataGuarantor.positionSide ? dataGuarantor.name : "-"
-                      }}
-                    </div>
-                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                    <div class="col-8 text-weight-medium">
-                      {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
-                    </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
+                      readonly
+                      outlined
+                      label="ระดับปริญญา"
+                      class="inputgreen"
+                      v-model="formBody.degreeLevel"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หลักสูตรการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="สาขาวิชา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="คณะ"
+                      class="inputgreen"
+                      v-model="formBody.faculty"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="สถาบันการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      readonly
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถานที่ไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      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
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      readonly
+                      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
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-6"></div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่ไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyCountry"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyAbroadTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      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
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      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
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
                   </div>
                 </div>
               </div>
-            </q-card-section>
-          </q-card>
-          <div class="row q-col-gutter-sm q-my-md">
-            <div class="col-3">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="ระดับปริญญา"
-                class="inputgreen"
-                v-model="dataPerson.degreeLevel"
-                readonly
-              />
-            </div>
-            <div class="col-3">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="หลักสูตรการศึกษา"
-                class="inputgreen"
-                v-model="dataPerson.course"
-                readonly
-              />
-            </div>
-            <div class="col-3">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="สาขาวิชา"
-                class="inputgreen"
-                v-model="dataPerson.field"
-                readonly
-              />
-            </div>
-            <div class="col-3">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="คณะ"
-                class="inputgreen"
-                v-model="dataPerson.faculty"
-                readonly
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="สถาบันการศึกษา"
-                class="inputgreen"
-                v-model="dataPerson.educationalInstitution"
-                readonly
-              />
-            </div>
-            <div class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dataPerson.startDate"
-                :locale="'th'"
-                autoApply
-                readonly
-                :enableTimePicker="false"
-                week-start="0"
-                @update:model-value="changeStartDate('startDate')"
+
+              <!-- เลือกทุน 2 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'NOABROAD'"
               >
-                <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="
-                      dataPerson.startDate
-                        ? date2Thai(dataPerson.startDate)
-                        : null
-                    "
-                    :label="`${'วันเริ่มต้นการศึกษา'}`"
-                    readonly
-                  >
-                    <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="dataPerson.endDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                readonly
-                :min-date="dataPerson.startDate"
+                <div class="row q-col-gutter-md">
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="หลักสูตรการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สาขา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถานที่ไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyStartDate,
+                          formBody.studyEndDate
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 3 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'ABROAD'"
               >
-                <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="
-                      dataPerson.endDate ? date2Thai(dataPerson.endDate) : null
-                    "
-                    :label="`${'วันสิ้นสุดการศึกษา'}`"
-                    readonly
-                  >
-                    <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
-                label="สถานที่ไปศึกษาดูงาน"
-                class="inputgreen"
-                v-model="dataPerson.studyPlace"
-                readonly
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="หัวข้อการไปศึกษาดูงาน"
-                class="inputgreen"
-                v-model="dataPerson.studyTopic"
-                readonly
-              />
-            </div>
-            <div class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dataPerson.studyStartDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                readonly
-                @update:model-value="changeStartDate('studyStartDate')"
+                <div class="row q-col-gutter-md">
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หลักสูตรการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      label="สาขา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          readonly
+                          dense
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        >
+                          <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
+                      readonly
+                      outlined
+                      label="สถานที่ไปศึกษาดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      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
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                      @update:model-value="
+                        updateTotalPeriod(
+                          formBody.studyStartDate,
+                          formBody.studyEndDate,
+                          true
+                        )
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-6"></div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่เดินทางไปศึกษาดูงาน"
+                      class="inputgreen"
+                      v-model="formBody.studyCountry"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyAbroadTopic"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      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
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadStartDate
+                              ? date2Thai(formBody.studyAbroadStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      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
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyAbroadEndDate
+                              ? date2Thai(formBody.studyAbroadEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 5 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'RESEARCH'"
               >
-                <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="
-                      dataPerson.studyStartDate
-                        ? date2Thai(dataPerson.studyStartDate)
-                        : null
-                    "
-                    :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
-                    readonly
-                  >
-                    <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="dataPerson.studyEndDate"
-                :locale="'th'"
-                autoApply
-                readonly
-                :enableTimePicker="false"
-                week-start="0"
-                :min-date="dataPerson.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="
-                      dataPerson.studyEndDate
-                        ? date2Thai(dataPerson.studyEndDate)
-                        : null
-                    "
-                    :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
-                    readonly
-                  >
-                    <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
-                label="ประเทศที่ไปศึกษาดูงาน"
-                class="inputgreen"
-                v-model="dataPerson.studyCountry"
-                readonly
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
-                class="inputgreen"
-                v-model="dataPerson.studyAbroadTopic"
-                readonly
-              />
-            </div>
-            <div class="col-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dataPerson.studyAbroadStartDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                @update:model-value="changeStartDate('studyAbroadStartDate')"
-                readonly
-              >
-                <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="
-                      dataPerson.studyAbroadStartDate
-                        ? date2Thai(dataPerson.studyAbroadStartDate)
-                        : null
-                    "
-                    :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
-                    readonly
-                  >
-                    <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="dataPerson.studyAbroadEndDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-                :min-date="dataPerson.studyAbroadStartDate"
-                @update:model-value="
-                  updateTotalPeriod(
-                    dataPerson.studyAbroadStartDate,
-                    dataPerson.studyAbroadEndDate
-                  )
-                "
-                readonly
-              >
-                <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="
-                      dataPerson.studyAbroadEndDate
-                        ? date2Thai(dataPerson.studyAbroadEndDate)
-                        : null
-                    "
-                    :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
-                    readonly
-                  >
-                    <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
-                label="รวมระยะเวลาในการศึกษา"
-                class="inputgreen"
-                v-model="dataPerson.totalPeriod"
-                readonly
-              />
+                <div class="row q-col-gutter-md">
+                  <div class="col-3">
+                    <q-select
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      label="ประเภทการพัฒนา"
+                      v-model="formBody.studyTopic"
+                      :options="[
+                        'ศึกษา',
+                        'ฝึกอบรม',
+                        'ประชุม',
+                        'ดูงาน',
+                        'ปฏิบัติการวิจัย',
+                      ]"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ระดับปริญญา"
+                      class="inputgreen"
+                      v-model="formBody.degreeLevel"
+                    />
+                  </div>
+
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      label="หลักสูตรการฝึกอบรม"
+                      v-model="formBody.course"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="สาขาวิชา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="คณะ"
+                      class="inputgreen"
+                      v-model="formBody.faculty"
+                    />
+                  </div>
+
+                  <div class="col-6">
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัด"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-3">
+                    <datepicker
+                      readonly
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
+                      class="inputgreen"
+                      v-model="formBody.studyCountry"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
-        </q-card>
-      </div>
+
+          <!-- เลือกทุน 4 -->
+          <div
+            class="col-12"
+            v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
+          >
+            <div class="row q-col-gutter-md">
+              <div class="col-6">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  class="inputgreen"
+                  label="หลักสูตรการฝึกอบรม"
+                  v-model="formBody.course"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  class="inputgreen"
+                  label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                  v-model="formBody.educationalInstitution"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.startDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeStartDate('startDate')"
+                >
+                  >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.startDate
+                          ? date2Thai(formBody.startDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.endDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formBody.startDate"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      class="inputgreen"
+                      :model-value="
+                        formBody.endDate ? date2Thai(formBody.endDate) : null
+                      "
+                      :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-6"></div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="สถานที่ไปศึกษาดูงานในประเทศ"
+                  class="inputgreen"
+                  v-model="formBody.studyPlace"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                  class="inputgreen"
+                  v-model="formBody.studyTopic"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  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
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyStartDate
+                          ? date2Thai(formBody.studyStartDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  menu-class-name="modalfix"
+                  v-model="formBody.studyEndDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :min-date="formBody.studyStartDate"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyStartDate,
+                      formBody.studyEndDate
+                    )
+                  "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyEndDate
+                          ? date2Thai(formBody.studyEndDate)
+                          : null
+                      "
+                      :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-6"></div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  readonly
+                  outlined
+                  label="ประเทศที่ไปศึกษาดูงาน"
+                  class="inputgreen"
+                  v-model="formBody.studyCountry"
+                />
+              </div>
+              <div class="col-6">
+                <q-input
+                  dense
+                  outlined
+                  readonly
+                  label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                  class="inputgreen"
+                  v-model="formBody.studyAbroadTopic"
+                />
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  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
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyAbroadStartDate
+                          ? date2Thai(formBody.studyAbroadStartDate)
+                          : null
+                      "
+                      :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-3">
+                <datepicker
+                  readonly
+                  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
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.studyAbroadEndDate
+                          ? date2Thai(formBody.studyAbroadEndDate)
+                          : null
+                      "
+                      :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-3">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  label="รวมระยะเวลาในการฝึกอบรม "
+                  class="inputgreen"
+                  v-model="formBody.totalPeriod"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
     </div>
   </div>
 

From 52cf340b332f59ae503be6f08ecf499695dc6fb7 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 19 Apr 2024 11:10:06 +0700
Subject: [PATCH 13/16] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=B8=E0=B8=99=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A8=E0=B8=B6=E0=B8=81=E0=B8=A9=E0=B8=B2/?=
 =?UTF-8?q?=E0=B8=9D=E0=B8=B6=E0=B8=81=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/modules/09_scholarship/views/main.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 659b4f9..5bddd3a 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -80,7 +80,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 /** ดึงข้อมูล */
 function getData() {
   http
-    .get(config.API.developmentScholarship + `/user/${profilId.value}`)
+    .get(config.API.developmentScholarship + `/user/${profilId.value}?year=${year.value}&type=${type.value}`)
     .then((res) => {
       rows.value = res.data.result;
     })
@@ -264,6 +264,7 @@ onMounted(async () => {
             bordered
             :paging="true"
             dense
+            hide-pagination
             class="custom-table2"
             :visible-columns="visibleColumns"
             v-model:pagination="pagination"

From ef92391110a2f200b80d1f11996d78b3760eb53a Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 19 Apr 2024 12:29:04 +0700
Subject: [PATCH 14/16] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=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/modules/09_scholarship/views/detail.vue | 40 ++++++++++++---------
 src/modules/09_scholarship/views/main.vue   |  2 ++
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index aec400d..8fea0e5 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -116,6 +116,9 @@ const dataPerson = reactive({
   id: "",
   citizenId: "",
   name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
   position: "",
   type: "",
   level: "",
@@ -424,6 +427,9 @@ function fetchDataDetail(id: string) {
 
       dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
       dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
+      dataPerson.prefix = data.prefix,
+      dataPerson.firstName = data.firstName,
+      dataPerson.lastName = data.lastName,
       dataPerson.position = data.position ? data.position : "-";
       dataPerson.type = data.posTypeName ? data.posTypeName : "-";
       dataPerson.level = data.posLevelName ? data.posLevelName : "-";
@@ -571,19 +577,19 @@ onMounted(async () => {
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.citizenId }}
+                  {{ dataPerson.citizenId ? dataPerson.citizenId:'-' }}
                 </div>
                 <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.name }}
+                  {{ dataPerson.firstName ? dataPerson.name:'-' }}
                 </div>
                 <div class="col-4 text-grey">ตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.position }}
+                  {{ dataPerson.position ? dataPerson.position:'-' }}
                 </div>
                 <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.type }}
+                  {{ dataPerson.type ? dataPerson.type:'-' }}
                 </div>
               </div>
             </div>
@@ -591,15 +597,15 @@ onMounted(async () => {
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.level }}
+                  {{ dataPerson.level ? dataPerson.level:'-' }}
                 </div>
                 <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.positionSide }}
+                  {{ dataPerson.positionSide ? dataPerson.positionSide:'-' }}
                 </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.org }}
+                  {{ dataPerson.org ? dataPerson.org:'-' }}
                 </div>
               </div>
             </div>
@@ -611,7 +617,7 @@ onMounted(async () => {
           </div>
         </q-card>
 
-        <div class="row q-col-gutter-md q-mt-sm" v-if="isGov">
+        <div class="row q-col-gutter-md q-mt-sm">
           <div class="col-9">
             <q-select
               dense
@@ -1000,7 +1006,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-12">
+              <div class="col-12" >
                 <q-card bordered tyle="border: 1px solid #d6dee1">
                   <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                     ข้อมูลผู้ค้ำประกัน
@@ -1008,25 +1014,25 @@ onMounted(async () => {
                   <div class="col-12"><q-separator /></div>
                   <div
                     class="row col-12 q-col-gutter-md q-pa-md"
-                    v-if="isGuarantor"
+                   
                   >
                     <div class="col">
                       <div class="row q-col-gutter-md">
                         <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.citizenId }}
+                          {{ dataGuarantor.citizenId ? dataGuarantor.citizenId :'-' }}
                         </div>
                         <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.name }}
+                          {{ dataGuarantor.firstName ? dataGuarantor.name:'-' }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.position }}
+                          {{ dataGuarantor.position ? dataGuarantor.position:'-' }}
                         </div>
                         <div class="col-4 text-grey">ประเภท</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.type }}
+                          {{ dataGuarantor.type ? dataGuarantor.type :'-' }}
                         </div>
                       </div>
                     </div>
@@ -1034,15 +1040,15 @@ onMounted(async () => {
                       <div class="row q-col-gutter-md">
                         <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.level }}
+                          {{ dataGuarantor.level ? dataGuarantor.level:'-' }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.positionSide }}
+                          {{ dataGuarantor.positionSide ? dataGuarantor.positionSide:'-' }}
                         </div>
                         <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.org }}
+                          {{ dataGuarantor.org ? dataGuarantor.org:'-' }}
                         </div>
                       </div>
                     </div>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 5bddd3a..5ab249b 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -137,6 +137,8 @@ function convertType(val: string) {
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
     case "EXECUTIVE":
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
+    case "RESEARCH":
+      return "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ";
   }
 }
 

From 991e44f157686b7f8e5473b700ae0f7733b71fd5 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 19 Apr 2024 15:30:39 +0700
Subject: [PATCH 15/16] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
 =?UTF-8?q?=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_KPI/components/Tab/01_Assessment.vue   |  35 +-
 .../components/Tab/02_CommanderAbove.vue      |   2 +-
 .../Tab/03_CommanderAboveOneStep.vue          |   2 +-
 src/modules/08_KPI/components/Tab/04_File.vue |   2 +-
 .../components/Tab/Dialog/01_Dialog.vue       | 313 +++++++++---------
 .../components/Tab/Dialog/04_Dialog.vue       | 197 ++++++-----
 .../components/Tab/Topic/01_Template.vue      |  12 +-
 .../components/Tab/Topic/02_Template.vue      |   9 +-
 src/modules/08_KPI/views/TabMain.vue          |  18 +-
 src/modules/08_KPI/views/form.vue             |  57 ++--
 src/modules/08_KPI/views/main.vue             |   2 +-
 11 files changed, 345 insertions(+), 304 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 1f45562..1d4c17e 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -36,10 +36,10 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-scroll-area style="height: 400px" class="bg-white row col-12">
-    <div class="text-weight-bold text-body1">
-      <span class="txt-under text-blue-5">องค์ประกอบที่ 1</span>
-      <span> ผลสัมฤทธิ์ของงาน</span>
+  <q-scroll-area style="height: 56vh" class="bg-white row col-12 text-dark q-pa-md">
+    <div class="text-weight-bold text-body2">
+      <span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
+      <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
     </div>
 
     <div class="q-gutter-md q-mt-sm">
@@ -47,33 +47,32 @@ onMounted(() => {
       <Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
       <Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
       <Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
-      <div class="row text-body1 text-weight-bold">
-        <div class="col-5 text-center">
+      <div class="row text-body2 text-weight-bold">
+        <div class="col-6 text-center row justify-center">
           <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+          <div class="text-primary q-pl-md">{{ total }}</div>
         </div>
-        <div class="col-1 text-primary">{{ total }}</div>
-        <div class="col-5 text-center">
+        
+        <div class="col-6 text-center row justify-center">
           <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+           <div class="text-primary q-pl-md">{{ resultWork }}</div>
         </div>
-        <div class="col-1 text-primary">{{ resultWork }}</div>
       </div>
 
-      <q-separator class="q-py-xs" />
+      <q-separator size="3px" class="q-my-lg" />
 
       <!-- องค์ประกอบที่ 2 -->
-      <div class="text-weight-bold text-body1 q-mb-sm">
-        <span class="txt-under text-blue-5">องค์ประกอบที่ 2</span>
-        <span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
+      <div class="text-weight-bold text-body2 q-mb-sm">
+        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
+        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
       </div>
 
       <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
       <Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
 
-      <div class="row justify-evenly text-body1 text-weight-bold">
-        <div class="col-5 text-right">
-          <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
-        </div>
-        <div class="col-5 text-primary">{{ resultEvaluation }}</div>
+      <div class="row text-body2 text-weight-bold justify-center">
+        <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
       </div>
     </div>
   </q-scroll-area>
diff --git a/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
index e894c43..d33dbfe 100644
--- a/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
+++ b/src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>2</div>
+    <div class="q-pa-md">2</div>
 </template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
index cb489dc..c60e299 100644
--- a/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
+++ b/src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>3</div>
+    <div class="q-pa-md">3</div>
 </template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/04_File.vue b/src/modules/08_KPI/components/Tab/04_File.vue
index c8199f4..dd2618a 100644
--- a/src/modules/08_KPI/components/Tab/04_File.vue
+++ b/src/modules/08_KPI/components/Tab/04_File.vue
@@ -1,3 +1,3 @@
 <template>
-    <div>4</div>
+    <div class="q-pa-md">4</div>
 </template>
\ No newline at end of file
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
index 628e956..1314c8e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
@@ -4,7 +4,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const modal = defineModel<boolean>("modal", { required: true });
 const numpage = defineModel<number>("numpage", { required: true });
-const splitterModel = ref<number>(30);
+const splitterModel = ref<number>(25);
 const search = ref<string>("");
 
 const define = ref<string>("");
@@ -88,7 +88,7 @@ function onSubmit() {}
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 85%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
       <DialogHeader
         :tittle="
@@ -101,162 +101,156 @@ function onSubmit() {}
       <q-separator />
 
       <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
-        <q-splitter v-model="splitterModel" disable>
-          <template v-slot:before>
-            <div class="bg-grey-1 q-pa-md">
-              <q-input
-                v-model="search"
-                outlined
-                dense
-                label="ค้นหา"
-                bg-color="white"
-                :class="getclass()"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="search == ''" name="search" />
-                  <q-icon
-                    v-if="search !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="search = ''"
-                  />
-                </template>
-              </q-input>
-              <q-card flat bordered class="q-mt-sm">
-                <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                  <div class="col-4">
-                    <span>รหัสตัวชี้วัด</span>
+        <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+              <div class="col-12 fit">
+                <div class="col-12 ">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    :class="getclass()"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="search = ''"
+                      />
+                    </template>
+                  </q-input>
                   </div>
-                  <div class="col-4">
-                    <span>ชื่อตัวชี้วัด</span>
+                  <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
+                    <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                      <div class="col-4">
+                        <span>รหัสตัวชี้วัด</span>
+                      </div>
+                      <div class="col-4">
+                        <span>ชื่อตัวชี้วัด</span>
+                      </div>
+                    </div>
+                    <q-separator/>
+
+                    <q-card-section class="q-pa-none">
+                        <q-list
+                          separator
+                          dense
+                        >
+                          <q-item
+                            v-for="(item, index) in listTarget"
+                          :key="index"
+                            clickable
+                            v-ripple
+                            :active="listCheck === index"
+                            active-class="my-menu-link"
+                            @click="clickList(index, item.id)"
+                          >
+                            <q-item-section class="q-pa-none">
+                              <div class="row items-center" style="height: 20px">
+                                <div class="col-4">
+                                  <span>{{ item.metricCode }}</span>
+                                </div>
+                                <div class="col-4">
+                                  <span>{{ item.indicatorName }}</span>
+                                </div>
+                              </div>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                    </q-card-section>
+                  </q-card>
+                </div>
+            </div>
+
+            <div class="col-xs-12 col-sm-8 col-md-9 row">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="col-12">
+                  <span class="text-body2 text-weight-medium"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-8">
+                  <q-card bordered class="full-height q-pa-sm">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-8">
+                          <span>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-4 row ">
+                  <div class="row col-12 card-box">
+                    <div class="col-12 bg-grey-2 row items-center text-weight-medium">
+                      <div class="col-6 text-center">ระดับคะแนน</div>
+                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                    </div>
+                    
+                    <div
+                      v-for="(field, index) in Object.keys(fieldLabels)"
+                      :key="index + 1"
+                      class="row col-12 items-center lineTop"
+                    >
+                        <div
+                          class="col-6 text-center text-body2"
+                        >
+                          {{ fieldLabels[field as keyof typeof fieldLabels] }}
+                        </div>
+                        <div class="col-6 text-center text-primary">
+                          <span>{{
+                            formScore[field] ? formScore[field] : "-"
+                          }}</span>
+                        </div>
+                        
+                      
+                    </div>
                   </div>
                 </div>
-
-                <q-separator />
-                <q-card-section class="q-pa-none">
-                  <q-scroll-area
-                    style="height: 71vh"
-                    class="bg-white row col-12"
-                  >
-                    <q-list
-                      v-for="(item, index) in listTarget"
-                      :key="index"
-                      bordered
-                      separator
-                    >
-                      <q-item
-                        clickable
-                        v-ripple
-                        :active="listCheck === index"
-                        active-class="my-menu-link"
-                        @click="clickList(index, item.id)"
-                      >
-                        <q-item-section class="q-pa-none">
-                          <div class="row items-center" style="height: 20px">
-                            <div class="col-4">
-                              <span>{{ item.metricCode }}</span>
-                            </div>
-                            <div class="col-4">
-                              <span>{{ item.indicatorName }}</span>
-                            </div>
-                          </div>
-                        </q-item-section>
-                      </q-item>
-                    </q-list>
-                  </q-scroll-area>
-                </q-card-section>
-              </q-card>
-            </div>
-          </template>
-
-          <template v-slot:after>
-            <div class="row q-pa-md q-col-gutter-md">
-              <div class="col-12">
-                <span class="text-body1 text-weight-bold"
-                  >รายละเอียดตัวชี้วัด</span
-                >
-              </div>
-              <div class="col-8">
-                <q-card bordered class="full-height">
-                  <div
-                    v-for="(field, index) in Object.keys(fieldDetailLabels)"
-                    :key="index + 1"
-                  >
-                    <div class="row q-pa-md">
-                      <div class="col-3 text-grey-6 text-weight-medium">
-                        {{
-                          fieldDetailLabels[
-                            field as keyof typeof fieldDetailLabels
-                          ]
-                        }}
-                      </div>
-                      <div class="col-7">
-                        <span>{{
-                          formDetail[field] ? formDetail[field] : "-"
-                        }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-              <div class="col-4">
-                <q-card bordered>
-                  <div class="bg-grey-2 row q-py-sm text-weight-bold">
-                    <div class="col-6 text-center">ระดับคะแนน</div>
-                    <div class="col-6 text-center">ผลสำเร็จของงาน</div>
-                  </div>
-                  <div
-                    v-for="(field, index) in Object.keys(fieldLabels)"
-                    :key="index + 1"
-                  >
-                    <div class="row q-py-lg">
-                      <div
-                        class="col-6 text-center text-body1 text-weight-bold"
-                      >
-                        {{ fieldLabels[field as keyof typeof fieldLabels] }}
-                      </div>
-                      <div class="col-6 text-center">
-                        <span>{{
-                          formScore[field] ? formScore[field] : "-"
-                        }}</span>
-                      </div>
-                    </div>
-                    <div
-                      class="col-12"
-                      v-if="index !== Object.keys(fieldLabels).length - 1"
-                    >
-                      <q-separator />
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-              <div class="col-12">
-                <q-input
-                  v-model="define"
-                  label="นิยามหรือความหมายของตัวชี้วัด"
-                  type="textarea"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
-                  hide-bottom-space
-                  :class="getclass()"
-                />
-              </div>
-              <div class="col-12">
-                <q-input
-                  v-model="formula"
-                  label="สูตรคำนวณ"
-                  type="textarea"
-                  outlined
-                  dense
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
-                  hide-bottom-space
-                  :class="getclass()"
-                />
+                <div class="col-12">
+                  <q-input
+                    v-model="define"
+                    label="นิยามหรือความหมายของตัวชี้วัด"
+                    type="textarea"
+                    outlined
+                    autogrow
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    :class="getclass()"
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formula"
+                    label="สูตรคำนวณ"
+                    type="textarea"
+                    outlined
+                    autogrow
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    :class="getclass()"
+                  />
+                </div>
               </div>
             </div>
-          </template>
-        </q-splitter>
+          </div>
       </q-card-section>
       <q-separator />
 
@@ -278,4 +272,17 @@ function onSubmit() {}
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
+.no-shadow{
+  box-shadow:none !important;
+}
+.lineRight{
+  border-right: 1px solid #EDEDED !important;
+}
+.lineTop{
+  border-top: 1px solid #EDEDED !important;
+}
+.card-box{
+  border: 1px solid #EDEDED !important;
+  border-radius: 8px;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
index 6a31ada..12aa2e5 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
@@ -110,115 +110,116 @@ function onSubmit() {}
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 85%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
         <q-separator />
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
-          <q-splitter v-model="splitterModel" disable>
-            <template v-slot:before>
-              <div class="bg-grey-1 q-pa-md q-gutter-sm">
-                <q-select
-                  v-model="type"
-                  outlined
-                  label="ประเภทสมรรถนะ"
-                  dense
-                  bg-color="white"
-                  option-label="name"
-                  option-value="id"
-                  :options="competencyTypeOp"
-                  emit-value
-                  :class="getclass()"
-                  map-options
-                />
-                <q-input
-                  v-model="search"
-                  outlined
-                  dense
-                  label="ค้นหา"
-                  bg-color="white"
-                  :class="getclass()"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="search == ''" name="search" />
-                    <q-icon
-                      v-if="search !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="search = ''"
-                    />
-                  </template>
-                </q-input>
-                <q-card flat bordered>
-                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                    <div class="col-4">
-                      <span>รหัสตัวชี้วัด</span>
+          <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
+              <div class="col-12 q-col-gutter-sm fit">
+                <div class="col-12 ">
+                  <q-select
+                    v-model="type"
+                    outlined
+                    label="ประเภทสมรรถนะ"
+                    dense
+                    bg-color="white"
+                    option-label="name"
+                    option-value="id"
+                    :options="competencyTypeOp"
+                    emit-value
+                    :class="getclass()"
+                    map-options
+                  />
+                </div>
+                <div class="col-12 ">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    bg-color="white"
+                    :class="getclass()"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="search = ''"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12 ">
+                  <q-card bordered flat class="no-shadow bg-white col-12">
+                    <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                      <div class="col-4">
+                        <span>รหัสตัวชี้วัด</span>
+                      </div>
+                      <div class="col-4">
+                        <span>ชื่อตัวชี้วัด</span>
+                      </div>
                     </div>
-                    <div class="col-4">
-                      <span>ชื่อตัวชี้วัด</span>
-                    </div>
-                  </div>
 
-                  <q-separator />
-                  <q-card-section class="q-pa-none">
-                    <q-scroll-area
-                      style="height: 33vh"
-                      class="bg-white row col-12"
-                    >
-                      <q-list
-                        v-for="(item, index) in listTarget"
-                        :key="index"
-                        bordered
-                        separator
-                      >
-                        <q-item
-                          clickable
-                          v-ripple
-                          :active="listCheck === index"
-                          active-class="my-menu-link"
-                          @click="clickList(index, item.id)"
+                    <q-separator />
+                    <q-card-section class="q-pa-none">
+                        <q-list
+                          separator
+                          dense
                         >
-                          <q-item-section class="q-pa-none">
-                            <div class="row items-center" style="height: 20px">
-                              <div class="col-4">
-                                <span>{{ item.metricCode }}</span>
+                          <q-item
+                            v-for="(item, index) in listTarget"
+                            :key="index"
+                            clickable
+                            v-ripple
+                            :active="listCheck === index"
+                            active-class="my-menu-link"
+                            @click="clickList(index, item.id)"
+                          >
+                            <q-item-section class="q-pa-none">
+                              <div class="row items-center" style="height: 20px">
+                                <div class="col-4">
+                                  <span>{{ item.metricCode }}</span>
+                                </div>
+                                <div class="col-4">
+                                  <span>{{ item.indicatorName }}</span>
+                                </div>
                               </div>
-                              <div class="col-4">
-                                <span>{{ item.indicatorName }}</span>
-                              </div>
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-scroll-area>
-                  </q-card-section>
-                </q-card>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
+                    </q-card-section>
+                  </q-card>
+                </div>
               </div>
-            </template>
+            </div>
 
-            <template v-slot:after>
-              <div class="row q-pa-md q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8 col-md-9 row">
+              <div class="row col-12 q-pa-md q-col-gutter-sm">
                 <div class="col-12">
-                  <span class="text-body1 text-weight-bold"
+                  <span class="text-body2 text-weight-medium"
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-8">
-                  <q-card bordered class="full-height">
+                <div class="col-8 row">
+                  <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
                       v-for="(field, index) in Object.keys(fieldDetailLabels)"
                       :key="index + 1"
                     >
-                      <div class="row q-pa-md">
-                        <div class="col-3 text-grey-6 text-weight-medium">
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
                           {{
                             fieldDetailLabels[
                               field as keyof typeof fieldDetailLabels
                             ]
                           }}
                         </div>
-                        <div class="col-7">
+                        <div class="col-8">
                           <span>{{
                             formDetail[field] ? formDetail[field] : "-"
                           }}</span>
@@ -227,19 +228,20 @@ function onSubmit() {}
                     </div>
                   </q-card>
                 </div>
-                <div class="col-4">
-                  <q-card bordered>
-                    <div class="bg-grey-2 row q-py-sm text-weight-bold">
+                <div class="col-4 row ">
+                  <q-card bordered class="col-12 row no-shadow">
+                    <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                       <div class="col-6 text-center">ระดับคะแนน</div>
                       <div class="col-6 text-center">ผลสำเร็จของงาน</div>
                     </div>
                     <div
                       v-for="(field, index) in Object.keys(fieldLabels)"
                       :key="index + 1"
+                      class="col-12"
                     >
-                      <div class="row q-py-lg">
+                      <div class="row col-12 q-py-sm">
                         <div
-                          class="col-6 text-center text-body1 text-weight-bold"
+                          class="col-6 text-center text-body2"
                         >
                           {{ fieldLabels[field as keyof typeof fieldLabels] }}
                         </div>
@@ -259,8 +261,8 @@ function onSubmit() {}
                   </q-card>
                 </div>
               </div>
-            </template>
-          </q-splitter>
+            </div>
+          </div>
         </q-card-section>
         <q-separator />
 
@@ -279,4 +281,17 @@ function onSubmit() {}
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
+.no-shadow{
+  box-shadow:none !important;
+}
+.lineRight{
+  border-right: 1px solid #EDEDED !important;
+}
+.lineTop{
+  border-top: 1px solid #EDEDED !important;
+}
+.card-box{
+  border: 1px solid #EDEDED !important;
+  border-radius: 8px;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Template.vue b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
index ef5c41d..dfbb22f 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Template.vue
@@ -102,22 +102,24 @@ function onAdd() {
 }
 </script>
 <template>
-  <q-card bordered style="border-radius: 5px">
-    <q-card-section class="bg-grey-3 q-py-sm">
-      <span class="text-weight-bold">{{ title }}</span>
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card-section class="bg-grey-2 q-py-sm">
+      <span class="text-weight-medium">{{ title }}</span>
       <q-btn
         class="q-ml-xs"
         flat
         round
         icon="mdi-plus"
         color="primary"
-        size="md"
+        size="12px"
+        dense
         @click="onAdd"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
     </q-card-section>
-    <q-card-section>
+    <q-separator/>
+    <q-card-section class="q-pa-sm">
       <q-table
         ref="table"
         :columns="columns"
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Template.vue b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
index cda94dc..8335cc1 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Template.vue
@@ -86,22 +86,23 @@ function onAdd() {
 }
 </script>
 <template>
-  <q-card bordered style="border-radius: 5px">
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
     <q-card-section class="bg-grey-3 q-py-sm">
-      <span class="text-weight-bold">{{ title }}</span>
+      <span class="text-weight-medium">{{ title }}</span>
       <q-btn
         class="q-ml-xs"
         flat
         round
         icon="mdi-plus"
         color="primary"
-        size="md"
+        size="12px"
+        dense
         @click="onAdd"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
     </q-card-section>
-    <q-card-section>
+    <q-card-section class="q-pa-sm">
       <q-table
         ref="table"
         :columns="columns"
diff --git a/src/modules/08_KPI/views/TabMain.vue b/src/modules/08_KPI/views/TabMain.vue
index fec1e92..dd1eeba 100644
--- a/src/modules/08_KPI/views/TabMain.vue
+++ b/src/modules/08_KPI/views/TabMain.vue
@@ -28,20 +28,28 @@ const itemsTab = ref<any>([
   },
 ]);
 
-const splitterModel = ref<number>(15);
+const splitterModel = ref<number>(12);
 </script>
 <template>
   <q-splitter v-model="splitterModel" disable>
     <template v-slot:before>
-      <q-tabs v-model="store.tabMain" vertical class="text-blue">
-        <q-tab
+      <q-tabs v-model="store.tabMain" vertical class="text-grey-7 text-weight-light" active-class="bg-blue-1 text-blue-8 text-weight-bold">
+        <!-- <q-tab
           class="hover-tab"
           v-for="(tab, index) in itemsTab"
           :key="index"
           :name="tab.name"
           :icon="tab.icon"
           :label="tab.label"
-        />
+        /> -->
+        <q-tab name="1" label="ผู้ขอรับการประเมิน" />
+        <q-tab name="2" label="ผู้บังคับบัญชา">
+         <div class="text-caption">เหนือขึ้นไป</div>
+        </q-tab>
+        <q-tab name="3" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
+        </q-tab>
+        <q-tab name="4" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>
 
@@ -53,12 +61,12 @@ const splitterModel = ref<number>(15);
         vertical
         transition-prev="jump-up"
         transition-next="jump-up"
-        class="q-px-md"
       >
         <q-tab-panel
           v-for="(tab, index) in itemsTab"
           :key="index"
           :name="tab.name"
+          class="q-pa-none"
         >
           <Assessment v-if="store.tabMain === '1'" />
           <CommanderAbove v-if="store.tabMain === '2'" />
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index d42f446..9750935 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -28,7 +28,7 @@ const formProfile = reactive<FormProfile>({
   status: "จัดเตรียมข้อมูล",
   score: "100",
   avartar:
-    "https://edm-s3.frappet.synology.me/edm/%E0%B8%97%E0%B8%B0%E0%B9%80%E0%B8%9A%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A7%E0%B8%B1%E0%B8%95%E0%B8%B4/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C/1526d9d3-d8b1-43ab-81b5-a84dfbe99202/profile-1526d9d3-d8b1-43ab-81b5-a84dfbe99202?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b63sTDiLkQPT06cpirTh%2F20240405%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240405T100811Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a6b8cb6b4f1ffd4edff045ad9fd91bc9a7eb5e00c45c5283bd8bf8f8e1ff5bf0",
+    "https://cdn.quasar.dev/img/boy-avatar.png",
 });
 
 const router = useRouter();
@@ -77,12 +77,20 @@ onMounted(() => {
         >
       </div>
       <div class="col-12">
-        <q-card bordered flatclass="relative-position">
-          <div class="column">
-            <div class="row items-center">
-              <div class="offset-2 col-10">
-                <q-toolbar class="q-pl-none">
-                  <span class="text-h6 text-bold text-primary">{{
+        <q-card bordered flat class="relative-position"> 
+          <div
+              class="absolute"
+              style="left: 2%; top: 50%; transform: translateY(-50%)"
+            >
+              <q-avatar size="95px">
+                <q-img :src="formProfile.avartar" />
+              </q-avatar>
+            </div>
+          <div class="row col-12">
+            <div class="row items-center col-12 q-pa-sm">
+              <div class="col-12" style="padding-left: 12%;">
+                <div class="row col-12 items-center">
+                  <span class="text-h6 text-weight-medium text-primary">{{
                     formProfile.fullName ? formProfile.fullName : "-"
                   }}</span>
                   <q-space />
@@ -93,6 +101,7 @@ onMounted(() => {
                       icon="mdi-file-eye-outline"
                       color="grey-2"
                       text-color="primary"
+                      size="md"
                     >
                       <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                     </q-btn>
@@ -102,29 +111,23 @@ onMounted(() => {
                       color="grey-2"
                       text-color="blue-5"
                       icon="mdi-file-eye-outline"
+                      size="md"
                     >
                       <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
                     </q-btn>
                   </div>
-                </q-toolbar>
+                </div>
               </div>
             </div>
-            <div
-              class="absolute"
-              style="left: 3%; top: 50%; transform: translateY(-50%)"
-            >
-              <q-avatar size="150px">
-                <img :src="formProfile.avartar" />
-              </q-avatar>
-            </div>
+           
 
-            <div class="row items-center bg-teal-1">
-              <div class="offset-2 col-10">
-                <div class="row q-gutter-x-lg no-wrap text-weight-medium">
+            <div class="row items-center bg-toolbar col-12 q-pa-sm">
+              <div class="col-12 q-py-xs" style="padding-left: 12%;">
+                <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ตำแหน่งในสายงาน</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.position
                       }}</span>
                     </div>
@@ -132,7 +135,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ประเภท</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.type
                       }}</span>
                     </div>
@@ -140,7 +143,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">ระดับชั้นงาน</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.level
                       }}</span>
                     </div>
@@ -148,7 +151,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">สถานะการประเมิน</span>
-                      <span class="text-weight-bold">{{
+                      <span class="text-weight-medium text-dark">{{
                         formProfile.status
                       }}</span>
                     </div>
@@ -156,7 +159,7 @@ onMounted(() => {
                   <div class="col-2">
                     <div class="column">
                       <span class="text-grey-6">คะแนนประเมิน</span>
-                      <span class="text-weight-bold text-primary">{{
+                      <span class="text-weight-medium text-primary">{{
                         formProfile.score
                       }}</span>
                     </div>
@@ -174,3 +177,9 @@ onMounted(() => {
     </div>
   </div>
 </template>
+<style>
+.bg-toolbar{
+  background-color: #F2FBFA;
+}
+
+</style>
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 1d35fa2..953c436 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -130,7 +130,7 @@ onMounted(async () => {
               emit-value
               map-options
             />
-            <q-btn flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
+            <q-btn class="q-ml-sm" flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
               <q-tooltip> เพิ่มข้อมูล </q-tooltip>
             </q-btn>
             <q-space />

From 11ced9f05ab70676cb6c5e23408e9e2b8d2c0733 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 22 Apr 2024 09:39:04 +0700
Subject: [PATCH 16/16] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue |  10 +-
 src/modules/08_KPI/router.ts                 |  19 ++
 src/modules/08_KPI/views/main.vue            |   2 +-
 src/modules/08_KPI/views/mainEvaluator.vue   | 255 +++++++++++++++++++
 4 files changed, 284 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/08_KPI/views/mainEvaluator.vue

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 55082e4..600b514 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -83,12 +83,20 @@ const items = ref<any>([
   },
   {
     icon: "mdi-account-box-outline",
-    title: "KPI",
+    title: "ขอรับการประเมิน (KPI)",
     sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
     color: "red-2",
     path: "/KPI",
     active: false,
   },
+  {
+    icon: "mdi-elevator",
+    title: "ทำการประเมิน (KPI)",
+    sub: "ประเมินผลการปฏิบัติหน้าที่ราชการ",
+    color: "red-2",
+    path: "/KPI-evaluator",
+    active: false,
+  },
   {
     icon: "mdi-school",
     title: "ทุนการศึกษา/ฝึกอบรม",
diff --git a/src/modules/08_KPI/router.ts b/src/modules/08_KPI/router.ts
index d180e69..e0cc5c1 100644
--- a/src/modules/08_KPI/router.ts
+++ b/src/modules/08_KPI/router.ts
@@ -4,6 +4,7 @@
 
 const KPIPage = () => import("@/modules/08_KPI/views/main.vue");
 const FormPage = () => import("@/modules/08_KPI/views/form.vue");
+const KPIMainEvaluator = () => import("@/modules/08_KPI/views/mainEvaluator.vue");
 
 export default [
   {
@@ -33,4 +34,22 @@ export default [
       Key: [8.2],
     },
   },
+  {
+    path: "/KPI-evaluator",
+    name: "KPIMainEvaluator",
+    component: KPIMainEvaluator,
+    meta: {
+      Auth: true,
+      Key: [8.3],
+    },
+  },
+  {
+    path: "/KPI-evaluator/:id",
+    name: "KPIEditEvaluator",
+    component: FormPage,
+    meta: {
+      Auth: true,
+      Key: [8.4],
+    },
+  },
 ];
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 953c436..e92b50b 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -113,7 +113,7 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        รายการประเมินผลการปฏิบัติราชการระดับบุคคล
+        รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
new file mode 100644
index 0000000..8c5911d
--- /dev/null
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const router = useRouter();
+
+const filterKeyword = ref<string>("");
+
+const rows = ref<any>();
+
+const round = ref<string>("ID1");
+const roundOp = ref<DataOptions[]>([
+  {
+    id: "ID1",
+    name: "รอบเมษา",
+  },
+]);
+
+const visibleColumns = ref<string[]>(["name", "createDate", "status", "result"]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ผู้ขอรับการประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createDate",
+    align: "left",
+    label: "วันที่สร้างแบบประเมิน",
+    sortable: true,
+    field: "createDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการประเมิน",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "result",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** ดึงข้อมูล */
+function getData() {
+  const data = [
+    {
+      id: "ID1",
+      name: "สมศรี ใจดี",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+    {
+      id: "ID1",
+      name: "สมจิตร ใจดี",
+      createDate: '2024-02-16T06:01:00.000Z',
+      status: "รอดำเนินการ",
+      result: "ผ่านเกณฑ์การประเมิน",
+    },
+  ];
+  rows.value = data;
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPrefix)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function onEdit(id:string){
+  router.push(`/KPI-evaluator/${id}`)
+}
+onMounted(async () => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-toolbar style="padding: 0">
+            <q-select
+              v-model="round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              style="min-width: 200px"
+              emit-value
+              map-options
+            />
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></q-input>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </q-toolbar>
+
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props" >
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id" @click="onEdit(props.row.id)">
+                  <div v-if="col.name == 'createDate'">
+                  {{ col.value ? date2Thai(col.value):'-' }}
+                </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>