From d9bb320b168d498329cbdbe6096a5aae28e99f36 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 Nov 2024 14:28:21 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=3D=3D=3D=20>=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B9=80=E0=B8=9E=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=87=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=81=E0=B8=99=E0=B8=9A=E0=B8=97=E0=B9=89=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=20=E0=B8=97=E0=B8=B8=E0=B8=81=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppointEmployee/AppointEmployeeDetail.vue |  76 ++++------
 .../AppointMent/AppointMentDetail.vue         |  67 ++++-----
 .../Help-Government/HelpGovernmentDetail.vue  |  49 ++++---
 .../components/Other/OtherDetail.vue          |  48 +++---
 .../components/Receive/receiveDetail.vue      | 109 ++++++++++----
 .../Repatriate/RepatriateDetail.vue           |  58 ++++----
 .../components/Transfer/TransferDetail.vue    |  59 +++-----
 .../05_placement/interface/index/Main.ts      |  77 ++++++++++
 .../interface/response/Transfer.ts            |   4 +-
 .../components/Deceased/DetailDeceased.vue    |   2 +-
 .../components/DismissOrder/DismissOrder.vue  |   2 +-
 .../components/DismissOrder/outRegistry.vue   |  42 +++---
 .../components/resign/ResignByid.vue          |  27 +++-
 .../components/resign/ResignReject.vue        |  41 ++++--
 .../components/resignEMP/ResignByid.vue       |  34 ++++-
 .../components/resignEMP/ResignReject.vue     |  30 +++-
 .../components/7_ListSuspend/DetailPage.vue   | 137 +++++++++++-------
 17 files changed, 514 insertions(+), 348 deletions(-)

diff --git a/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
index dbc03398e..452d173d3 100644
--- a/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
+++ b/src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue
@@ -8,19 +8,15 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
- * importType
- */
+/** importType */
 import type { QForm } from "quasar";
+import type { MainData } from "@/modules/05_placement/interface/index/Main";
 import type {
   appointmentData,
-  ResponseData,
   DataProfile,
 } from "@/modules/05_placement/interface/response/AppointMent";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import CardProfile from "@/components/CardProfile.vue"; // card ข้อมูลส่วนตัว
 
 const $q = useQuasar();
@@ -38,7 +34,6 @@ const {
 } = mixin;
 
 const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตัว
-
 const appointment = ref<appointmentData>({
   citizenId: "",
   prefixId: "",
@@ -58,17 +53,17 @@ const date = ref<Date | null>(null); //ดำรงตำแหน่งใน
 const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
 const fullName = ref<string>("");
+const mianData = ref<MainData>();
 
-/**
- * fetch รายละเอียดการปรับระดับชั้นงานลูกจ้าง
- */
+/** fetch รายละเอียดการปรับระดับชั้นงานลูกจ้าง*/
 async function fecthappointmentByid() {
   showLoader();
   await http
     .get(config.API.appointEmployeeByid(paramsId.toString()))
-    .then((res: ResponseData) => {
+    .then((res) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
+      mianData.value = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
       fullName.value = `${data.prefix === null ? "" : data.prefix}${
@@ -93,9 +88,7 @@ async function fecthappointmentByid() {
     });
 }
 
-/**
- * ยืนยันการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย
- */
+/** ยืนยันการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย*/
 function clickSave() {
   if (myForm.value !== null) {
     myForm.value.validate().then((result: any) => {
@@ -140,27 +133,33 @@ function clickSave() {
   }
 }
 
-/**
- * ยกเลิกการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย
- */
-function cancel() {
+/** ยกเลิกการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย*/
+async function cancel() {
   edit.value = false;
-  fecthappointmentByid();
+  const data = mianData.value;
+  if (data) {
+    educationOld.value = data.educationOld ?? "-";
+    organizationPositionOld.value = data.organizationPositionOld;
+    positionTypeOld.value = data.positionTypeOld;
+    positionLevelOld.value = data.positionLevelOld;
+    posNo.value = data.positionNumberOld;
+    salary.value = data.salary ?? 0;
+    reason.value = data.reason;
+    date.value = data.positionDate;
+  }
   myForm.value?.resetValidation();
 }
 
-/**
- * Class input
- */
-const getClass = (val: boolean) => {
+/** Class inpu*/
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
+}
 
-onMounted(() => {
-  fecthappointmentByid();
+onMounted(async () => {
+  await fecthappointmentByid();
 });
 </script>
 <template>
@@ -176,7 +175,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="router.push(`/placement/appoint-employee`)"
       />
-      รายละเอียดการปรับระดับชั้นงานลูกจ้าง{{ fullName }}
+      รายละเอียดการปรับระดับชั้นงานลูกจ้าง {{ fullName }}
     </div>
 
     <CardProfile :data="dataProfile as DataProfile" :type="'employee'" />
@@ -322,24 +321,7 @@ onMounted(() => {
                 />
               </div>
             </div>
-            <!-- <div class="col-xs-6 col-sm-3 row">
-              <div class="col-12">
-                <q-input
-                  v-model="salary"
-                  :outlined="edit"
-                  dense
-                  :readonly="!edit"
-                  hide-bottom-space
-                  :borderless="!edit"
-                  :label="`${'เงินเดือน'}`"
-                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                  lazy-rules
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :class="getClass(edit)"
-                />
-              </div>
-            </div> -->
+
             <div class="col-12"><q-separator /></div>
             <div class="col-xs-6 col-sm-6 row items-center">
               <div class="col-12">
@@ -364,7 +346,7 @@ onMounted(() => {
                       :borderless="!edit"
                       :readonly="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]: []"
                       hide-bottom-space
                       :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
                     >
diff --git a/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
index c1b83d016..31c93a36d 100644
--- a/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
+++ b/src/modules/05_placement/components/AppointMent/AppointMentDetail.vue
@@ -8,15 +8,11 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
- * importType
- */
+/** importType*/
 import type { QForm } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/response/AppointMent";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import CardProfile from "@/components/CardProfile.vue"; // card ข้อมูลส่วนตัว
 
 const $q = useQuasar();
@@ -34,6 +30,7 @@ const {
 const paramsId = route.params.id; //id รายการที่เลือก
 const dataProfile = ref<DataProfile>(); //ข้อมูลส่วนตัว
 const edit = ref<boolean>(false); //การแก้ไขข้อมูล
+const mainData = ref<any>();
 
 const myForm = ref<QForm | null>(null);
 const profileId = ref<string>("");
@@ -48,9 +45,7 @@ const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
 const fullName = ref<string>("");
 
-/**
- *  fetch รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย
- */
+/** fetch รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย*/
 async function fecthappointmentByid() {
   showLoader();
   await http
@@ -58,13 +53,14 @@ async function fecthappointmentByid() {
     .then((res) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
+      mainData.value = res.data.result;
       profileId.value = data.profileId;
       fullName.value = `${data.prefix}${data.firstName ?? "-"} ${
         data.lastName ?? "-"
       }`;
 
-      (status.value = data.status),
-        (educationOld.value = data.educationOld ?? "-");
+      status.value = data.status;
+      educationOld.value = data.educationOld ?? "-";
       organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
@@ -81,13 +77,11 @@ async function fecthappointmentByid() {
     });
 }
 
-/**
- * ยืนยันการบับทึกข้อมูลลงบัญชีแนบท้าย
- */
+/** ยืนยันการบับทึกข้อมูลลงบัญชีแนบท้าย*/
 function putAppointment() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       let data = {
         educationOld: educationOld.value,
         organizationPositionOld: organizationPositionOld.value,
@@ -99,7 +93,7 @@ function putAppointment() {
         positionDate: date.value,
       };
       showLoader();
-      http
+      await http
         .put(config.API.appointmentByid(paramsId.toString()), data)
         .then(async () => {
           await fecthappointmentByid();
@@ -118,13 +112,23 @@ function putAppointment() {
   );
 }
 
-/**
- * ยกเลิกการแก้ไขลงบัญชีแนบท้าย
- */
+/** ยกเลิกการแก้ไขลงบัญชีแนบท้าย */
 function cancel() {
   edit.value = false;
+  const data = mainData.value;
+  if (data) {
+    status.value = data.status;
+    educationOld.value = data.educationOld ?? "-";
+    organizationPositionOld.value = data.organizationPositionOld;
+    positionTypeOld.value = data.positionTypeOld;
+    positionLevelOld.value = data.positionLevelOld;
+    posNo.value = data.positionNumberOld;
+    salary.value = data.salary ?? 0;
+    reason.value = data.reason;
+    date.value = data.positionDate;
+  }
   myForm.value?.resetValidation();
-  fecthappointmentByid();
+  // fecthappointmentByid();
 }
 
 /**
@@ -155,7 +159,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="router.push(`/placement/appoint-promote`)"
       />
-      รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย{{ fullName }}
+      รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย {{ fullName }}
     </div>
     <CardProfile :data="dataProfile as DataProfile" />
 
@@ -306,24 +310,7 @@ onMounted(() => {
                 />
               </div>
             </div>
-            <!-- <div class="col-xs-6 col-sm-3 row">
-              <div class="col-12">
-                <q-input
-                  v-model="salary"
-                  :outlined="edit"
-                  dense
-                  :readonly="!edit"
-                  hide-bottom-space
-                  :borderless="!edit"
-                  :label="`${'เงินเดือน'}`"
-                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                  lazy-rules
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :class="getClass(edit)"
-                />
-              </div>
-            </div> -->
+
             <div class="col-12"><q-separator /></div>
             <div class="col-xs-6 col-sm-6 row items-center">
               <div class="col-12">
@@ -348,7 +335,7 @@ onMounted(() => {
                       :borderless="!edit"
                       :readonly="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`] : []"
                       hide-bottom-space
                       :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
                     >
diff --git a/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
index bdb90fb89..5ccf51fd4 100644
--- a/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
+++ b/src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue
@@ -36,6 +36,7 @@ const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false); //การแก้ไขข้อมูล
 const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตัว
 const fullname = ref<string>(""); //ชื่อ
+const mainData = ref<any>();
 
 /** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
 const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัดเดิม
@@ -45,16 +46,16 @@ const dateEnd = ref<Date | null>(null); // ถึงวันที่
 const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
 
-/**
- * fetch ข้อมูลรายละเอียด
- */
+/** fetch ข้อมูลรายละเอียด*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.officerDetail(dataId))
     .then((res: resHelpDetail) => {
       const data = res.data.result;
+      mainData.value = res.data.result;
       dataProfile.value = res.data.result as unknown as DataProfile;
+
       fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
       organizationPositionOld.value = data.organizationPositionOld
         ? data.organizationPositionOld
@@ -73,13 +74,11 @@ async function getData() {
     });
 }
 
-/**
- * ยืนยันการบันทึกข้อมูล
- */
+/** ยืนยันการบันทึกข้อมูลลงบัญชีแนบท้าย*/
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
       const body = {
         organizationPositionOld: organizationPositionOld.value,
@@ -88,7 +87,7 @@ function onSubmit() {
         dateEnd: dateEnd.value,
         reason: reason.value,
       };
-      http
+      await http
         .put(config.API.officerMainEdit(dataId), body)
         .then(async () => {
           await getData();
@@ -107,28 +106,32 @@ function onSubmit() {
   );
 }
 
-/**
- * ยกเลิกการแก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
- */
+/** ยกเลิกการแก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
 function cancelBtn() {
   edit.value = !edit;
+  const data = mainData.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld
+      ? data.organizationPositionOld
+      : findOrgName(data);
+    organization.value = data.organization;
+    dateStart.value = data.dateStart;
+    dateEnd.value = data.dateEnd;
+    reason.value = data.reason;
+    status.value = data.status;
+  }
   myForm.value?.resetValidation();
-  getData();
 }
 
-/**
- * class Input
- */
-const getClass = (val: boolean) => {
+/** class Input*/
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
+}
 
-/**
- * ทำงานเมื่อมีการเรียกใช้ Components
- */
+/** ทำงานเมื่อมีการเรียกใช้ Components*/
 onMounted(() => {
   getData();
 });
@@ -147,7 +150,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="router.push(`/placement/help-government`)"
       />
-      รายละเอียดการช่วยราชการ{{ fullname }}
+      รายละเอียดการช่วยราชการ {{ fullname }}
     </div>
 
     <CardProfile :data="dataProfile as DataProfile" />
@@ -265,7 +268,7 @@ onMounted(() => {
                       dense
                       :readonly="!edit"
                       :borderless="!edit"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      :rules="edit?[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                       :model-value="
                         dateStart !== null ? date2Thai(dateStart) : null
                       "
@@ -314,7 +317,7 @@ onMounted(() => {
                       :model-value="
                         dateEnd !== null ? date2Thai(dateEnd) : null
                       "
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                       hide-bottom-space
                       :label="`${'ถึงวันที่'}`"
                     >
diff --git a/src/modules/05_placement/components/Other/OtherDetail.vue b/src/modules/05_placement/components/Other/OtherDetail.vue
index 07203fee4..7abc5c3a5 100644
--- a/src/modules/05_placement/components/Other/OtherDetail.vue
+++ b/src/modules/05_placement/components/Other/OtherDetail.vue
@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 
 import { useRoute, useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
-import { tokenParsed } from "@/plugins/auth";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -38,6 +37,7 @@ const dataProfile = ref<DataProfile>(); //ข้อมุลส่วนตั
 const edit = ref<boolean>(false);
 const status = ref<string>("");
 const fullName = ref<string>("");
+const mainData = ref<any>();
 
 const educationOld = ref<string>(""); //วุฒิ/สาขา
 const organizationPositionOld = ref<string>(""); //ตำแหน่ง/สังกัด
@@ -49,15 +49,14 @@ const date = ref<Date | null>(null); //ตั้งแต่วัน
 const militaryDate = ref<Date | null>(null); //พ้นราชการทหารเมื่อ
 const reason = ref<string>(""); //หมายเหตุ
 
-/**
- * fetch รายละเอียดรายการอื่นๆ
- */
+/** fetch รายละเอียดรายการอื่นๆ*/
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.otherByid(paramsId.toString()))
     .then((res: resApiData) => {
       const data = res.data.result;
+      mainData.value = res.data.result;
       dataProfile.value = res.data.result as unknown as DataProfile;
 
       fullName.value = `${data.prefix ?? "-"}${data.firstName ?? "-"} ${
@@ -86,9 +85,7 @@ async function fetchData() {
     });
 }
 
-/**
- * ยืนยันการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย
- */
+/** ยืนยันการบันทึกข้อมูลเพื่อลงบัญชีแนบท้าย*/
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -128,7 +125,21 @@ function onSubmit() {
  */
 function cancel() {
   edit.value = false;
-  fetchData();
+  const data = mainData.value;
+  if (data) {
+    educationOld.value = data.educationOld ?? "";
+    organizationPositionOld.value = data.organizationPositionOld
+      ? data.organizationPositionOld
+      : findOrgName(data);
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.amountOld ?? "";
+    date.value = data.positionDate ?? null;
+    militaryDate.value = data.militaryDate ?? null;
+    reason.value = data.reason ?? "";
+  }
+  // fetchData();
   myForm.value?.resetValidation();
 }
 
@@ -309,24 +320,7 @@ onMounted(async () => {
                 />
               </div>
             </div>
-            <!-- <div class="col-xs-6 col-sm-3 row">
-              <div class="col-12">
-                <q-input
-                  v-model="salary"
-                  :outlined="edit"
-                  dense
-                  :readonly="!edit"
-                  :class="getClass(edit)"
-                  hide-bottom-space
-                  :borderless="!edit"
-                  :label="`${'เงินเดือน'}`"
-                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                  lazy-rules
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                />
-              </div>
-            </div> -->
+
             <div class="col-12"><q-separator /></div>
             <div class="col-xs-6 col-sm-4 row items-center">
               <div class="col-12">
@@ -351,7 +345,7 @@ onMounted(async () => {
                       :readonly="!edit"
                       :borderless="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]:[]"
                       hide-bottom-space
                       :label="`${'ตั้งแต่วันที่'}`"
                     >
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index 0f4254966..e8261e6d3 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -9,6 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps, QForm } from "quasar";
+import type { MainData } from "@/modules/05_placement/interface/index/Main";
 import type {
   ResponseTitle,
   DataProfile,
@@ -93,6 +94,7 @@ const posNo = ref<string>(""); //เลขที่
 const salary = ref<number>(0); //เงินเดือน
 const reason = ref<string>(""); //หมายเหตุ
 const defaultCitizenData = ref<string>(""); //เลขประจำตัวประชาชน
+const mianData = ref<MainData>();
 
 //รายการตัวเลือก
 const Ops = ref<InformationOps>({
@@ -128,9 +130,7 @@ const OpsFilter = ref<InformationOps>({
   ],
 });
 
-/**
- * ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)
- */
+/** ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)*/
 async function fetchPerson() {
   showLoader();
   await http
@@ -194,15 +194,14 @@ async function fetchPerson() {
     });
 }
 
-/**
- * ฟังก์ชันดึงข้อมูลรายละเอียดการรับโอน
- */
+/** ฟังก์ชันดึงข้อมูลรายละเอียดการรับโอน*/
 async function getData() {
   showLoader();
   await http
     .get(config.API.receiveDataId(paramsId.toString()))
-    .then(async (res: any) => {
+    .then(async (res) => {
       const data = res.data.result;
+      mianData.value = data;
       dataProfile.value = res.data.result as unknown as DataProfile;
       let list: DocList[] = [];
       if (data.docs.length > 0) {
@@ -275,19 +274,64 @@ async function getData() {
       hideLoader();
     });
 }
-
-/**
- * ฟังก์ชันยกเลิกการแก้ไขข้อมูล
- */
+/** ฟังก์ชันยกเลิกการแก้ไขข้อมูล*/
 async function oncanceledit() {
   edit.value = !edit.value;
   if (myForm.value !== null) {
-    await getData();
+    fetchData(mianData.value);
     myForm.value?.resetValidation();
-  } else {
   }
 }
 
+/**
+ * ฟังก์ชันรีเช็ตข้อมูลแนบท้ายเป็น ข้อมูล Default
+ * @param data  ข้อมูล Default
+ */
+async function fetchData(data: any) {
+  informaData.value = {
+    cardid: data.citizenId ?? "",
+    age: calculateAge(data.dateOfBirth),
+    prefix: "",
+    prefixId:
+      (data.prefix == "00000000-0000-0000-0000-000000000000"
+        ? null
+        : data.prefix) ?? "",
+    firstname: data.firstName ?? "",
+    lastname: data.lastName ?? "",
+    birthDate: data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
+    genderId:
+      (data.gender == "00000000-0000-0000-0000-000000000000"
+        ? null
+        : data.gender) ?? "",
+    bloodId:
+      (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
+        ? null
+        : data.bloodGroup) ?? "",
+    nationality: data.nationality ?? "",
+    ethnicity: data.race ?? "",
+    statusId:
+      (data.relationship == "00000000-0000-0000-0000-000000000000"
+        ? null
+        : data.relationship) ?? "",
+    religionId:
+      (data.religion == "00000000-0000-0000-0000-000000000000"
+        ? null
+        : data.religion) ?? "",
+    tel: data.telephoneNumber ?? "",
+    employeeType: "",
+    employeeClass: "",
+    profileType: "",
+  };
+  educationOld.value = data.educationOld ?? "";
+  organizationPositionOld.value = data.organizationPositionOld ?? "";
+  positionTypeOld.value = data.positionTypeOld ?? "";
+  positionLevelOld.value = data.positionLevelOld ?? "";
+  posNo.value = data.positionNumberOld ?? "";
+  salary.value = data.amountOld ?? 0;
+  reason.value = data.reason ?? "";
+  status.value = data.status ?? "";
+}
+
 /**
  * ฟังก์ชันตรวจสอบเลขบัตรประจำตัวประชาชน
  * @param value เลขบัตรประจำตัวประชาชน
@@ -341,53 +385,54 @@ async function checkCitizen(id: string) {
  * @param refData ประเภทของตัวเลือก
  */
 function filterSelector(val: string, update: Function, refData: string) {
+  let newVal = val.toLowerCase();
   switch (refData) {
     case "prefixOps":
       update(() => {
         Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "genderOps":
       update(() => {
         Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "bloodOps":
       update(() => {
         Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "statusOps":
       update(() => {
         Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "religionOps":
       update(() => {
         Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "employeeClassOps":
       update(() => {
         Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
     case "employeeTypeOps":
       update(() => {
         Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
         );
       });
       break;
@@ -397,9 +442,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/**
- * ฟังก์ชันบันทึกข้อมูลการแก้ไขบัญชีแนบท้าย
- */
+/** ฟังก์ชันบันทึกข้อมูลการแก้ไขบัญชีแนบท้าย*/
 function saveData() {
   dialogConfirm(
     $q,
@@ -460,9 +503,7 @@ function getClass(val: boolean) {
   };
 }
 
-/**
- * function เช็คอายุไม่เกิน 18 ปี
- */
+/** function เช็คอายุไม่เกิน 18 ปี */
 function calculateMaxDate() {
   const today = new Date();
   today.setFullYear(today.getFullYear() - 18);
@@ -502,9 +543,7 @@ function updateBirthDate(v: Date) {
   informaData.value.age = calculateAge(v);
 }
 
-/**
- * ทำงานเมื่อมีการเรียกใช้ Components
- */
+/** ทำงานเมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
   await fetchPerson();
   await getData();
@@ -524,7 +563,7 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push(`/placement/receive`)"
       />
-      รายละเอียดการรับโอนของ{{ title.fullname }}
+      รายละเอียดการรับโอน {{ title.fullname }}
     </div>
     <CardProfile :data="dataProfile as DataProfile" />
 
@@ -614,6 +653,8 @@ onMounted(async () => {
                   v-model="informaData.prefixId"
                   emit-value
                   map-options
+                  hide-selected
+                  fill-input
                   option-label="name"
                   :options="Ops.prefixOps"
                   option-value="name"
@@ -723,6 +764,8 @@ onMounted(async () => {
                   v-model="informaData.genderId"
                   emit-value
                   map-options
+                  hide-selected
+                  fill-input
                   option-label="name"
                   :options="Ops.genderOps"
                   option-value="name"
@@ -745,6 +788,8 @@ onMounted(async () => {
                   v-model="informaData.statusId"
                   emit-value
                   map-options
+                  hide-selected
+                  fill-input
                   option-label="name"
                   :options="Ops.statusOps"
                   option-value="name"
@@ -792,6 +837,8 @@ onMounted(async () => {
                   lazy-rules
                   v-model="informaData.religionId"
                   emit-value
+                  hide-selected
+                  fill-input
                   map-options
                   option-label="name"
                   :options="Ops.religionOps"
@@ -817,6 +864,8 @@ onMounted(async () => {
                   v-model="informaData.bloodId"
                   emit-value
                   map-options
+                  hide-selected
+                  fill-input
                   option-label="name"
                   :options="Ops.bloodOps"
                   option-value="name"
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
index 94e29fff4..3a6f43974 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateDetail.vue
@@ -34,6 +34,7 @@ const {
 const myForm = ref<QForm | null>(null);
 const dataProfile = ref<DataProfile>();
 const fullname = ref<string>("");
+const mainData = ref<any>();
 
 /** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
 const organizationPositionOld = ref<string>("");
@@ -47,15 +48,14 @@ const dateRepatriation = ref<Date | null>(null);
 const reason = ref<string>("");
 const status = ref<string>("");
 
-/**
- * fetch ข้อมูลรายละเอียด*
- */
-function getData() {
+/** fetch ข้อมูลรายละเอียด*/
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.repatriationDetail(dataId))
     .then((res: ResponseData) => {
       const data = res.data.result;
+      mainData.value = res.data.result;
       dataProfile.value = res.data.result as unknown as DataProfile;
       fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
 
@@ -86,7 +86,7 @@ function getData() {
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       const body = {
         organizationPositionOld: organizationPositionOld.value,
         positionTypeOld: positionTypeOld.value,
@@ -99,7 +99,7 @@ function onSubmit() {
         reason: reason.value,
       };
       showLoader();
-      http
+      await http
         .put(config.API.repatriationMainEdit(dataId), body)
         .then(async () => {
           await getData();
@@ -123,8 +123,23 @@ function onSubmit() {
  */
 function cancelBtn() {
   edit.value = !edit;
+  const data = mainData.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld
+      ? data.organizationPositionOld
+      : findOrgName(data);
+    positionTypeOld.value = data.positionTypeOld;
+    positionLevelOld.value = data.positionLevelOld;
+    positionNumberOld.value = data.positionNumberOld;
+    salary.value = data.salary;
+    organization.value = data.organization;
+    reason.value = data.reason;
+    date.value = data.date;
+    dateRepatriation.value = data.dateRepatriation;
+    status.value = data.status;
+  }
   myForm.value?.resetValidation();
-  getData();
+  // getData();
 }
 
 /**
@@ -155,7 +170,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="router.push(`/placement/repatriate`)"
       />
-      รายละเอียดการส่งตัวกลับ{{ fullname }}
+      รายละเอียดการส่งตัวกลับ {{ fullname }}
     </div>
 
     <CardProfile :data="dataProfile as DataProfile" />
@@ -282,24 +297,7 @@ onMounted(() => {
                 />
               </div>
             </div>
-            <!-- <div class="col-xs-6 col-sm-3 row">
-              <div class="col-12">
-                <q-input
-                  v-model="salary"
-                  :outlined="edit"
-                  dense
-                  :readonly="!edit"
-                  hide-bottom-space
-                  :borderless="!edit"
-                  :label="`${'เงินเดือน'}`"
-                  :class="getClass(edit)"
-                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                  lazy-rules
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                />
-              </div>
-            </div> -->
+
             <div class="col-12"><q-separator /></div>
             <div class="col-xs-6 col-sm-4 row">
               <div class="col-12">
@@ -342,7 +340,7 @@ onMounted(() => {
                       :readonly="!edit"
                       :borderless="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                       hide-bottom-space
                       :label="`${'ตั้งแต่วัน'}`"
                     >
@@ -390,9 +388,9 @@ onMounted(() => {
                           ? date2Thai(dateRepatriation)
                           : null
                       "
-                      :rules="[
+                      :rules="edit ? [
                       (val:string) => !!val || `${'กรุณาเลือกวันที่ส่งตัวกลับ'}`,
-                    ]"
+                    ] : []"
                       hide-bottom-space
                       :label="`${'วันที่ส่งตัวกลับ'}`"
                     >
diff --git a/src/modules/05_placement/components/Transfer/TransferDetail.vue b/src/modules/05_placement/components/Transfer/TransferDetail.vue
index eae5ad5aa..75a1b6f01 100644
--- a/src/modules/05_placement/components/Transfer/TransferDetail.vue
+++ b/src/modules/05_placement/components/Transfer/TransferDetail.vue
@@ -10,6 +10,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 
+import type { QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import type {
@@ -34,6 +35,7 @@ const {
   dialogConfirm,
 } = mixin;
 
+const myForm = ref<QForm | null>(null);
 const transferId = ref<string>(route.params.id as string); //Id รายการขอโอน
 const roleAdmin = ref<boolean>(false); //admin
 const edit = ref<boolean>(false); //การแก่ไข
@@ -169,8 +171,7 @@ async function getData() {
       rows.value = list;
       responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
-      responseData.value.date =
-        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.date = data.date !== null ? new Date(data.date) : null;
       responseData.value.id = data.id ?? "";
       responseData.value.organization = data.organization ?? "";
       responseData.value.organizationPositionOld =
@@ -182,7 +183,7 @@ async function getData() {
       responseData.value.salary = data.salary !== null ? data.salary : 0;
       responseData.value.status = data.status ?? "";
       responseData.value.avataPath = data.avataPath ?? "";
-      responseData.value.fullname = `${data.firstName ?? "-"} ${
+      responseData.value.fullname = `${data.prefix}${data.firstName ?? "-"} ${
         data.lastName ?? "-"
       }`;
 
@@ -227,15 +228,11 @@ async function fileDownload(no: number, type: string, fileName: string) {
 
 /** ฟังก์ชันยืนยันการส่งคำร้องไปยัง สกจ.*/
 async function onUpdateStatus() {
-  // dialogConfirm(
-  //   $q,
-  //   async () => {
   showLoader();
   await http
     .get(config.API.transferConfirmId(transferId.value))
     .then(async () => {
       await getData();
-      // success($q, "ส่งคำร้องข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
@@ -243,10 +240,6 @@ async function onUpdateStatus() {
     .finally(async () => {
       hideLoader();
     });
-  //   },
-  //   "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
-  //   "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที"
-  // );
 }
 
 /**  ฟังก์ชันยืนยันการบันทึกการแก้ไขข้อมูล*/
@@ -286,8 +279,19 @@ function onSubmit() {
 
 /** ฟังก์ชันปิดการแก้ไขข้อมูล*/
 async function cancel() {
-  await getData();
   edit.value = false;
+  const data = responseData.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld ?? "";
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ?? 0;
+    organization.value = data.organization ?? "";
+    date.value = data.date !== null ? new Date(data.date) : null;
+    reason.value = data.reason ?? "";
+  }
+  myForm.value?.resetValidation();
 }
 
 /**
@@ -328,7 +332,7 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push(`/placement/transfer`)"
       />
-      รายละเอียดการขอโอนของ{{ responseData.fullname }}
+      รายละเอียดการขอโอน {{ responseData.fullname }}
     </div>
 
     <!-- รายละเอียดการ -->
@@ -470,6 +474,7 @@ onMounted(async () => {
     <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
     <q-card bordered class="row col-12">
       <q-form
+        ref="myForm"
         class="col-12"
         greedy
         @submit.prevent
@@ -537,7 +542,7 @@ onMounted(async () => {
                     :readonly="!edit"
                     :borderless="!edit"
                     v-model="organizationPositionOld"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                    :rules="edit ? [(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]:[]"
                     hide-bottom-space
                     :label="`${'ตำแหน่ง/สังกัด'}`"
                     type="textarea"
@@ -555,7 +560,7 @@ onMounted(async () => {
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="positionTypeOld"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]:[]"
                       hide-bottom-space
                       :label="`${'ประเภทตำแหน่ง'}`"
                     />
@@ -569,7 +574,7 @@ onMounted(async () => {
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="positionLevelOld"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]:[]"
                       hide-bottom-space
                       :label="`${'ระดับตำแหน่ง'}`"
                     />
@@ -583,27 +588,11 @@ onMounted(async () => {
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="posNo"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                      :rules="edit? [(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]:[]"
                       hide-bottom-space
                       :label="`${'เลขที่'}`"
                     />
                   </div>
-                  <!-- <div class="col-xs-6 col-sm-3">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      v-model="salary"
-                      dense
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      hide-bottom-space
-                      :label="`${'เงินเดือน'}`"
-                      :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                      lazy-rules
-                      mask="###,###,###,###"
-                      reverse-fill-mask
-                    />
-                  </div> -->
                 </div>
               </div>
 
@@ -620,7 +609,7 @@ onMounted(async () => {
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="organization"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                      :rules="edit ? [(val:string) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]:[]"
                       hide-bottom-space
                       :label="`${'โอนไปสังกัด'}`"
                     />
@@ -647,7 +636,7 @@ onMounted(async () => {
                           :borderless="!edit"
                           :readonly="!edit"
                           :model-value="date !== null ? date2Thai(date) : null"
-                          :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                          :rules="edit ?[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                           hide-bottom-space
                           :label="`${'ตั้งแต่วัน'}`"
                         >
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 3751d3702..591a62635 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -377,6 +377,82 @@ interface DataPermissions {
   tab7: TabPermissions;
 }
 
+interface MainData {
+  amount?: number;
+  amountOld: number;
+  child1: string;
+  child1Id: string;
+  child1Old: string;
+  child1OldId: string;
+  child1ShortName: string;
+  child1ShortNameOld: string;
+  child2: string;
+  child2Id: string;
+  child2Old: string;
+  child2OldId: string;
+  child2ShortName: string;
+  child2ShortNameOld: string;
+  child3: string;
+  child3Id: string;
+  child3Old: string;
+  child3OldId: string;
+  child3ShortName: null;
+  child3ShortNameOld: string;
+  child4: string;
+  child4Id: string;
+  child4Old: string;
+  child4OldId: string;
+  child4ShortName: string;
+  child4ShortNameOld: string;
+  createdAt: string;
+  dateOfBirth: string;
+  educationOld: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  node: string;
+  nodeId: string;
+  nodeName: string;
+  nodeNameOld: string;
+  nodeOld: number;
+  nodeOldId: string;
+  nodeShortName: string;
+  nodeShortNameOld: string;
+  orgRevisionId: string;
+  organizationOld: string;
+  organizationPositionOld: string;
+  posLevelId: string;
+  posLevelName: string;
+  posLevelNameOld: string;
+  posLevelOldId: string;
+  posMasterNo: number;
+  posMasterNoOld: number;
+  posTypeId: string;
+  posTypeName: string;
+  posTypeNameOld: string;
+  posTypeOldId: string;
+  position: string;
+  positionDate: Date;
+  positionField: string;
+  positionId: string;
+  positionLevelOld: string;
+  positionNumberOld: string;
+  positionOld: string;
+  positionTypeOld: string;
+  prefix: string;
+  profileId: string;
+  reason: string;
+  reportingDate: string;
+  root: string;
+  rootOld: string;
+  rootOldId: string;
+  rootShortName: string;
+  rootShortNameOld: string;
+  salary: number;
+  status: string;
+  typeCommand: string;
+}
+
 export type {
   DataOption,
   DataOptionInsignia,
@@ -407,6 +483,7 @@ export type {
   AppointTopicMain,
   DataPermissions,
   TabPermissions,
+  MainData,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };
diff --git a/src/modules/05_placement/interface/response/Transfer.ts b/src/modules/05_placement/interface/response/Transfer.ts
index 9cbb7c4b1..971406535 100644
--- a/src/modules/05_placement/interface/response/Transfer.ts
+++ b/src/modules/05_placement/interface/response/Transfer.ts
@@ -33,8 +33,8 @@ interface TypeFile {
 interface ResponseDataDetail {
   profileId: string;
   avataPath: string;
-  createdAt: Date;
-  date: Date;
+  createdAt: Date | null;
+  date: Date | null;
   id: string;
   organization: string;
   organizationPositionOld: string;
diff --git a/src/modules/06_retirement/components/Deceased/DetailDeceased.vue b/src/modules/06_retirement/components/Deceased/DetailDeceased.vue
index 52fe82e93..33a000193 100644
--- a/src/modules/06_retirement/components/Deceased/DetailDeceased.vue
+++ b/src/modules/06_retirement/components/Deceased/DetailDeceased.vue
@@ -98,7 +98,7 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.push(`/retirement/deceased`)"
     />
-    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม{{ fullName }}
+    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ fullName }}
   </div>
 
   <CardProfile :data="dataProfile as DataProfile" />
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index 63602ea03..197d9df2d 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -204,6 +204,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการให้ออก</div>
   <q-card flat bordered class="col-12 q-mt-sm">
@@ -256,7 +257,6 @@ onMounted(async () => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
             class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
           />
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index 055b653e6..4fd0a07bc 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -47,6 +47,7 @@ const organization = ref<string>("");
 const date = ref<Date | null>(null);
 const reason = ref<string>("");
 const dataProfile = ref<DataProfile>();
+const mainData = ref<any>();
 
 const fullName = ref<string>("");
 const status = ref<string>("");
@@ -58,6 +59,7 @@ async function getData() {
     .get(config.API.outByid(dataId))
     .then((res) => {
       const data = res.data.result;
+      mainData.value = res.data.result;
       dataProfile.value = data as DataProfile;
       fullName.value = `${data.prefix}${data.firstName ?? "-"} ${
         data.lastName ?? "-"
@@ -88,9 +90,23 @@ async function getData() {
  * ฟังก์ชั่น Cancle
  */
 async function clickCancel() {
-  await getData();
   edit.value = false;
+  const data = mainData.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld
+      ? data.organizationPositionOld
+      : findOrgName(data);
+
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ?? "";
+    organization.value = data.organization ?? "";
+    date.value = data.date !== null ? new Date(data.date) : null;
+    reason.value = data.reason ?? "";
+  }
   myForm.value?.resetValidation();
+  // await getData();
 }
 
 /**
@@ -154,6 +170,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -166,7 +183,7 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการให้ออกของ {{ fullName }}
+    รายละเอียดการให้ออก {{ fullName }}
   </div>
 
   <CardProfile :data="dataProfile as DataProfile" />
@@ -295,24 +312,7 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <!-- <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                hide-bottom-space
-                :borderless="!edit"
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                mask="###,###,###,###"
-                reverse-fill-mask
-                :class="getClass(edit)"
-              />
-            </div>
-          </div> -->
+
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row">
             <div class="col-12">
@@ -353,7 +353,7 @@ onMounted(async () => {
                     :readonly="!edit"
                     :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                     hide-bottom-space
                     :label="`${'ตั้งแต่วัน'}`"
                   >
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 7fc06fd0f..26f1fa9d0 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -295,8 +295,24 @@ async function rejectpopUp() {
  * กดยกเลิก
  */
 async function clickCancel() {
-  await fetchData(id.value);
   edit.value = false;
+  const data = dataDetail.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld ?? "";
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ? data.salary : 0;
+    date.value = data.sendDate ? new Date(data.sendDate) : null;
+    dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+    reason.value = data.reason ?? "";
+    location.value = data.location ?? "";
+    status.value = data.status ?? "";
+    remarkHorizontal.value = data.remarkHorizontal ?? "-";
+    isNoDebt.value = data.isNoDebt;
+    isNoBurden.value = data.isNoBurden;
+    isDiscipline.value = data.isDiscipline;
+  }
   myForm.value?.resetValidation();
 }
 /**
@@ -540,8 +556,9 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push('/retirement/resign')"
       />
-      รายละเอียดการลาออกของ
-      {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+      รายละเอียดการลาออก {{
+        dataDetail.prefix+dataDetail.firstName + "  " + dataDetail.lastName
+      }}
     </div>
 
     <CardProfile :data="dataProfile as DataProfile" />
@@ -1298,10 +1315,10 @@ onMounted(async () => {
                       dense
                       :borderless="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[
+                      :rules="edit ? [
                       (val:string) =>
                         !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
-                    ]"
+                    ] : []"
                       hide-bottom-space
                       :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
                     >
diff --git a/src/modules/06_retirement/components/resign/ResignReject.vue b/src/modules/06_retirement/components/resign/ResignReject.vue
index 89ad75460..9ef57d5f6 100644
--- a/src/modules/06_retirement/components/resign/ResignReject.vue
+++ b/src/modules/06_retirement/components/resign/ResignReject.vue
@@ -1,24 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import axios from "axios";
+
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar, QForm } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import genReport from "@/plugins/genreport";
+
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import type {
-  TypeFile,
-  rowFile,
-  FileList,
-} from "@/modules/06_retirement/interface/response/Main";
-import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import WorkFlow from "@/components/Workflow/Main.vue";
 
@@ -34,9 +27,7 @@ const {
   showLoader,
   hideLoader,
   success,
-
   dialogConfirm,
-  dialogRemove,
 } = mixin;
 
 /** ตัวแปร */
@@ -196,8 +187,24 @@ function onSubmit() {
  * กดยกเลิก
  */
 async function clickCancel() {
-  await fetchData(id.value);
   edit.value = false;
+  const data = dataDetail.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld ?? "";
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ? data.salary : 0;
+    date.value = data.sendDate ? new Date(data.sendDate) : null;
+    dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+    reason.value = data.reason ?? "";
+    location.value = data.location ?? "";
+    status.value = data.status ?? "";
+    remarkHorizontal.value = data.remarkHorizontal ?? "-";
+    isNoDebt.value = data.isNoDebt;
+    isNoBurden.value = data.isNoBurden;
+    isDiscipline.value = data.isDiscipline;
+  }
   myForm.value?.resetValidation();
 }
 
@@ -275,8 +282,8 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push('/retirement/resign')"
       />
-      รายละเอียดการยกเลิกลาออกของ{{
-        dataDetail.firstName + "  " + dataDetail.lastName
+      รายละเอียดการยกเลิกลาออก {{
+        dataDetail.prefix+dataDetail.firstName + "  " + dataDetail.lastName
       }}
     </div>
 
@@ -519,6 +526,7 @@ onMounted(async () => {
     <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <q-form
+        class="col-12"
         ref="myForm"
         greedy
         @submit.prevent
@@ -529,6 +537,7 @@ onMounted(async () => {
             แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
           </div>
           <q-space />
+
           <div v-if="!checkRoutePermisson && workflowRef?.permission.isUpdate">
             <div class="q-gutter-sm" v-if="!edit">
               <q-btn
@@ -693,10 +702,10 @@ onMounted(async () => {
                       dense
                       :borderless="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[
+                      :rules="edit ? [
                       (val:string) =>
                         !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
-                    ]"
+                    ] : []"
                       hide-bottom-space
                       :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
                     >
diff --git a/src/modules/06_retirement/components/resignEMP/ResignByid.vue b/src/modules/06_retirement/components/resignEMP/ResignByid.vue
index 35cbeba96..b7bfdab3e 100644
--- a/src/modules/06_retirement/components/resignEMP/ResignByid.vue
+++ b/src/modules/06_retirement/components/resignEMP/ResignByid.vue
@@ -34,7 +34,6 @@ const {
   showLoader,
   hideLoader,
   success,
-
   dialogConfirm,
   dialogRemove,
 } = mixin;
@@ -295,9 +294,26 @@ async function rejectpopUp() {
  * กดยกเลิก
  */
 async function clickCancel() {
-  await fetchData(id.value);
   edit.value = false;
+  const data = dataDetail.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld ?? "";
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ? data.salary : 0;
+    date.value = data.sendDate ? new Date(data.sendDate) : null;
+    dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+    reason.value = data.reason ?? "";
+    location.value = data.location ?? "";
+    status.value = data.status ?? "";
+    remarkHorizontal.value = data.remarkHorizontal ?? "-";
+    isNoDebt.value = data.isNoDebt;
+    isNoBurden.value = data.isNoBurden;
+    isDiscipline.value = data.isDiscipline;
+  }
   myForm.value?.resetValidation();
+  // await fetchData(id.value);
 }
 /**
  * กดยกเลิก
@@ -309,9 +325,9 @@ async function clickCancelConditions() {
 
 /** Function บันทึก รายการตรวจสอบเงื่อนไขต่างๆ*/
 function onSubmitConditions() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .put(config.API.resignConditionsEMP(id.value), {
         isNoDebt: isNoDebt.value,
         isNoBurden: isNoBurden.value,
@@ -559,8 +575,9 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push('/retirement/resign-employee')"
       />
-      รายละเอียดการลาออกของ
-      {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+      รายละเอียดการลาออก {{
+        dataDetail.prefix + dataDetail.firstName + "  " + dataDetail.lastName
+      }}
     </div>
 
     <CardProfile :type="'employee'" :data="dataProfile as DataProfile" />
@@ -1147,6 +1164,7 @@ onMounted(async () => {
             แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
           </div>
           <q-space />
+
           <div
             v-if="
               !checkRoutePermisson &&
@@ -1317,10 +1335,10 @@ onMounted(async () => {
                       dense
                       :borderless="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[
+                      :rules="edit ? [
                       (val:string) =>
                         !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
-                    ]"
+                    ] : []"
                       hide-bottom-space
                       :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
                     >
diff --git a/src/modules/06_retirement/components/resignEMP/ResignReject.vue b/src/modules/06_retirement/components/resignEMP/ResignReject.vue
index d427f4e86..e4df16e86 100644
--- a/src/modules/06_retirement/components/resignEMP/ResignReject.vue
+++ b/src/modules/06_retirement/components/resignEMP/ResignReject.vue
@@ -195,12 +195,26 @@ function onSubmit() {
   });
 }
 
-/**
- * กดยกเลิก
- */
+/** กดยกเลิก*/
 async function clickCancel() {
-  await fetchData(id.value);
   edit.value = false;
+  const data = dataDetail.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld ?? "";
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ? data.salary : 0;
+    date.value = data.sendDate ? new Date(data.sendDate) : null;
+    dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+    reason.value = data.reason ?? "";
+    location.value = data.location ?? "";
+    status.value = data.status ?? "";
+    remarkHorizontal.value = data.remarkHorizontal ?? "-";
+    isNoDebt.value = data.isNoDebt;
+    isNoBurden.value = data.isNoBurden;
+    isDiscipline.value = data.isDiscipline;
+  }
   myForm.value?.resetValidation();
 }
 
@@ -293,8 +307,8 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push('/retirement/resign-employee')"
       />
-      รายละเอียดการยกเลิกลาออกของ{{
-        dataDetail.firstName + "  " + dataDetail.lastName
+      รายละเอียดการยกเลิกลาออก {{
+        dataDetail.prefix.dataDetail.firstName + "  " + dataDetail.lastName
       }}
     </div>
 
@@ -719,10 +733,10 @@ onMounted(async () => {
                       dense
                       :borderless="!edit"
                       :model-value="date !== null ? date2Thai(date) : null"
-                      :rules="[
+                      :rules="edit ? [
                       (val:string) =>
                         !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
-                    ]"
+                    ] : []"
                       hide-bottom-space
                       :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
                     >
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
index 0885ec57b..ceb2cd728 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
@@ -31,7 +31,7 @@ const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
   date2Thai,
-  dialogMessage,
+  dialogConfirm,
   messageError,
   showLoader,
   hideLoader,
@@ -45,6 +45,7 @@ const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(false);
 const dataProfile = ref<DataProfile>();
+const mainData = ref<any>();
 
 const data = reactive<DataDetail>({
   id: "",
@@ -94,6 +95,7 @@ async function getData() {
     .get(config.API.suspendById(dataId))
     .then((res) => {
       const dataGet = res.data.result;
+      mainData.value = res.data.result;
       dataProfile.value = dataGet as DataProfile;
 
       data.id = dataGet.id;
@@ -134,7 +136,6 @@ async function getData() {
       data.root = dataGet.root;
       data.rootId = dataGet.rootId;
       data.rootShortName = dataGet.rootShortName;
-      // getAvatar(dataGet.personId);
     })
     .catch((e) => {
       messageError($q, e);
@@ -144,60 +145,87 @@ async function getData() {
     });
 }
 
-/**
- * ฟังชั่น ดึงรูปภาพโปรไฟล์
- * @param id id ของบุคคล
- */
-function getAvatar(id: string) {
-  if (id) {
-    http
-      .get(config.API.profileAvaId(id))
-      .then((res) => {
-        console.log(res);
-        const dataList = res.data.result;
-        data.avatar = dataList.avatar;
-      })
-      .catch((e) => {})
-      .finally(() => {});
-  }
-}
 /**
  * ฟังก์ชั่น Cancle
  */
 async function clickCancel() {
-  await getData();
   edit.value = false;
+  const dataGet = mainData.value;
+  if (dataGet) {
+    data.id = dataGet.id;
+    data.personId = dataGet.personId;
+    data.citizenId = dataGet.citizenId;
+    data.name = `${dataGet.prefix}${dataGet.firstName} ${dataGet.lastName}`;
+    data.prefix = dataGet.prefix;
+    data.firstName = dataGet.firstName;
+    data.lastName = dataGet.lastName;
+    data.organization = dataGet.organization;
+    data.position = dataGet.position;
+    data.posNo = dataGet.posNo;
+    data.positionLevel = dataGet.positionLevel;
+    data.positionType = dataGet.positionType;
+    data.salary = dataGet.salary;
+    data.status = dataGet.status;
+    data.descriptionSuspend = dataGet.descriptionSuspend
+      ? dataGet.descriptionSuspend
+      : "ออกจากราชการ";
+    data.startDateSuspend = dataGet.startDateSuspend;
+    data.endDateSuspend = dataGet.endDateSuspend;
+    data.title = dataGet.title;
+    data.offenseDetails = dataGet.offenseDetails;
+    data.disciplinaryFaultLevel = dataGet.disciplinaryFaultLevel;
+    data.disciplinaryCaseFault = dataGet.disciplinaryCaseFault;
+    data.child1 = dataGet.child1;
+    data.child1Id = dataGet.child1Id;
+    data.child1ShortName = dataGet.child1ShortName;
+    data.child2 = dataGet.child2;
+    data.child2Id = dataGet.child2Id;
+    data.child2ShortName = dataGet.child2ShortName;
+    data.child3 = dataGet.child3;
+    data.child3Id = dataGet.child3Id;
+    data.child3ShortName = dataGet.child3ShortName;
+    data.child4 = dataGet.child4;
+    data.child4Id = dataGet.child4Id;
+    data.child4ShortName = dataGet.child4ShortName;
+    data.root = dataGet.root;
+    data.rootId = dataGet.rootId;
+    data.rootShortName = dataGet.rootShortName;
+  }
+  myForm.value?.resetValidation();
+  // await getData();
 }
 
 /**
  * ฟังก์ชั่น Saveจาก API
  */
 async function saveData() {
-  const body = {
-    organization: data.organization,
-    positionType: data.positionType,
-    posNo: data.posNo,
-    position: data.position,
-    positionLevel: data.positionLevel,
-    salary: data.salary,
-    descriptionSuspend: data.descriptionSuspend,
-    startDateSuspend: data.startDateSuspend,
-    endDateSuspend: data.endDateSuspend,
-  };
-  showLoader();
-  await http
-    .put(config.API.suspendById(dataId), body)
-    .then((res: any) => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
+  dialogConfirm($q, async () => {
+    const body = {
+      organization: data.organization,
+      positionType: data.positionType,
+      posNo: data.posNo,
+      position: data.position,
+      positionLevel: data.positionLevel,
+      salary: data.salary,
+      descriptionSuspend: data.descriptionSuspend,
+      startDateSuspend: data.startDateSuspend,
+      endDateSuspend: data.endDateSuspend,
+    };
+    showLoader();
+    await http
+      .put(config.API.suspendById(dataId), body)
+      .then(async () => {
+        await getData();
+        success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+        edit.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
 }
 
 /**
@@ -211,11 +239,6 @@ function getClass(val: boolean) {
   };
 }
 
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
@@ -224,7 +247,6 @@ function updatemodalPersonal(modal: boolean) {
 function changeFormDataDate() {
   const startDate = new Date(data.startDateSuspend as Date);
   const endDate = new Date(data.endDateSuspend as Date);
-
   if (startDate > endDate) {
     data.endDateSuspend = null;
   }
@@ -251,13 +273,19 @@ onMounted(async () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดผู้ถูกพักราชการของ {{ data.name }}
+    รายละเอียดผู้ถูกพักราชการ {{ data.name }}
   </div>
 
   <CardProfile :data="dataProfile as DataProfile" />
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <q-form greedy @submit.prevent @validation-success="saveData" @reset="clickCancel">
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="saveData"
+      @reset="clickCancel"
+    >
       <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">
           {{
@@ -267,6 +295,7 @@ onMounted(async () => {
           }}
         </div>
         <q-space />
+
         <div
           v-if="
             data.status !== 'DONE' &&
@@ -423,7 +452,7 @@ onMounted(async () => {
                         ? date2Thai(data.startDateSuspend)
                         : null
                     "
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                     hide-bottom-space
                     :label="`${'ตั้งแต่วัน'}`"
                   >