From acbec63df7d0343623d1e8ab0a1fdb39aca15d69 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Sun, 8 Oct 2023 13:55:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=95=E0=B8=B8=E0=B9=81=E0=B8=99=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99/=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/components/Career.vue       |  70 ++
 .../components/ExitInterview/EditQuestion.vue | 604 ++++++++++++++----
 .../components/ListRetirement/TableList.vue   |   8 +-
 .../components/3_result/Dialogbody.vue        | 402 ++++++++----
 .../10_order/components/step/step02.vue       |   4 +-
 5 files changed, 802 insertions(+), 286 deletions(-)

diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index 206b83811..97aeb80c3 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -48,6 +48,13 @@
           </q-td>
         </q-tr>
       </template>
+      <template #bottom="props">
+        <div :props="props" class="row col-11 justify-end">
+          <span class="text-weight-medium text-subtitle2"
+            >รวมระยะเวลา : <span class="q-pl-sm">{{ total }}</span></span
+          >
+        </div>
+      </template>
     </Table>
   </q-form>
   <!-- popup Edit window-->
@@ -317,6 +324,7 @@ const editRow = ref<boolean>(false); //เช็คมีการแก้ไ
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
+const total = ref<string>("-");
 const rows = ref<any>([]);
 const filter = ref<string>(""); //search data table
 const { messageError, showLoader, hideLoader } = mixin;
@@ -480,12 +488,56 @@ const calDate = async () => {
   }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
 };
 
+const calDateSplit = async (startDate: Date, endDate: Date) => {
+  let _startDate = new Date(startDate.toISOString().substr(0, 10));
+  let _endDate = new Date(endDate.toISOString().substr(0, 10));
+  _endDate.setDate(_endDate.getDate() + 1);
+  if (_startDate > _endDate) {
+    const swap = _startDate;
+    _startDate = _endDate;
+    _endDate = swap;
+  }
+  const startYear = _startDate.getFullYear();
+  const february =
+    (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
+      ? 29
+      : 28;
+  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+  let yearDiff = _endDate.getFullYear() - startYear;
+  let monthDiff = _endDate.getMonth() - _startDate.getMonth();
+  if (monthDiff < 0) {
+    yearDiff--;
+    monthDiff += 12;
+  }
+  let dayDiff = _endDate.getDate() - _startDate.getDate();
+  if (dayDiff < 0) {
+    if (monthDiff > 0) {
+      monthDiff--;
+    } else {
+      yearDiff--;
+      monthDiff = 11;
+    }
+    dayDiff += daysInMonth[_startDate.getMonth()];
+  }
+  var obj = {
+    yearDiff: yearDiff,
+    monthDiff: monthDiff,
+    dayDiff: dayDiff,
+  };
+  return obj;
+};
+
 const fetchData = async () => {
   showLoader();
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
       const data = res.data.result;
+      var yearDiff = 0;
+      var monthDiff = 0;
+      var dayDiff = 0;
+      total.value = "-";
       rows.value = [];
       data.map((r: any) => {
         rows.value.push({
@@ -493,6 +545,24 @@ const fetchData = async () => {
           startDate: new Date(r.durationStart),
           endDate: new Date(r.durationEnd),
         });
+        calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
+          (d) => {
+            yearDiff = yearDiff + d.yearDiff;
+            monthDiff = monthDiff + d.monthDiff;
+            dayDiff = dayDiff + d.dayDiff;
+            if (dayDiff > 30) {
+              dayDiff = dayDiff % 30;
+              monthDiff = monthDiff + parseInt((dayDiff / 30).toString());
+            }
+            if (monthDiff > 12) {
+              monthDiff = monthDiff % 12;
+              yearDiff = yearDiff + parseInt((monthDiff / 12).toString());
+            }
+            total.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
+              monthDiff > 0 ? monthDiff + " เดือน " : ""
+            }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
+          }
+        );
       });
     })
     .catch((e) => {
diff --git a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
index 21f3f64ee..756b425ab 100644
--- a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
+++ b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
@@ -19,8 +19,10 @@ const { messageError, showLoader, hideLoader } = mixin;
 const myForm = ref<QForm | null>(null);
 
 // set คำถามที่ 1
-const question1Desc = ref<string>("เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)")
-const question1Score = ref<number>(5)
+const question1Desc = ref<string>(
+  "เหตุใดท่านจึงตัดสินใจร่วมงานกับกรุงเทพมหานคร (เลือกได้มากกว่า 1 ข้อ)"
+);
+const question1Score = ref<number>(5);
 const question1Answer = ref<any>([
   "ความมั่นคงในการทำงาน",
   "สิทธิประโยชน์/สวัสดิการ",
@@ -35,21 +37,25 @@ const question1Answer = ref<any>([
   "โอกาสความก้าวหน้า",
   "การได้รับการยอมรับจากสังคม",
   // "อื่น ๆ (ระบุ)",
-])
+]);
 
 // set คำถามที่ 2
-const question2Desc = ref<string>("สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด")
-const question2Score = ref<number>(5)
+const question2Desc = ref<string>(
+  "สำหรับการลาออกในครั้งนี ท่านได้คิดทบทวนอย่างจริงจังเป็นระยะเวลานานเท่าใด"
+);
+const question2Score = ref<number>(5);
 const question2Answer = ref<any>([
   "น้อยกว่า 2 สัปดาห์",
   "1 เดือน - 3 เดือน",
   "3 เดือน - 6 เดือน",
   "6 เดือนขึ้นไป",
-])
+]);
 
 // set คำถามที่ 3
-const question3Desc = ref<string>("ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)")
-const question3Score = ref<number>(5)
+const question3Desc = ref<string>(
+  "ปัจจัยใดที่ทำให้ท่านตัดสินใจลาออกจากราชการ (เลือกได้มากกว่า 1 ข้อ)"
+);
+const question3Score = ref<number>(5);
 const question3Answer = ref<any>([
   "อัตราเงินเดือน",
   "สวัสดิการ",
@@ -66,11 +72,13 @@ const question3Answer = ref<any>([
   "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
   "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
   "โอกาสความก้าวหน้า",
-])
+]);
 
 // set คำถามที่ 4
-const question4Desc = ref<string>("อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)")
-const question4Score = ref<number>(5)
+const question4Desc = ref<string>(
+  "อะไรคือสิ่งที่ท่านเห็นว่าควรปรับปรุง (เลือกได้มากกว่า 1 ข้อ)"
+);
+const question4Score = ref<number>(5);
 const question4Answer = ref<any>([
   "อัตราเงินเดือน ",
   "สวัสดิการ",
@@ -87,40 +95,41 @@ const question4Answer = ref<any>([
   "การดูแลและให้ความช่วยเหลือในช่วงเริ่มต้นปฏิบัติงาน",
   "การพัฒนาอย่างเป็นระบบและต่อเนื่อง",
   "โอกาสความก้าวหน้า",
-])
+]);
 
 // set คำถามที่ 5
-const question5Desc = ref<string>("โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?")
-const question5Score = ref<number>(5)
+const question5Desc = ref<string>(
+  "โปรดระบุสาเหตุที่แท้จริง ที่ทำให้ท่านตัดสินใจลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร ?"
+);
+const question5Score = ref<number>(5);
 // set คำถามที่ 6
-const question6Desc = ref<string>("ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร")
-const question6Score = ref<number>(5)
+const question6Desc = ref<string>(
+  "ปัจจัยใดที่จะช่วยทำให้ท่านเปลี่ยนใจ ไม่อยากลาออกจากการปฏิบัติราชการกับกรุงเทพมหานคร"
+);
+const question6Score = ref<number>(5);
 // set คำถามที่ 7
-const question7Desc = ref<string>("ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร")
-const question7Score = ref<number>(5)
-const question7Answer = ref<any>([
-  "มี (ระบุ)",
-  "ไม่มี",
-])
+const question7Desc = ref<string>(
+  "ท่านมีงานใหม่หรือไม่ ถ้ามี (โปรดระบุ ชื่อบริษัทเอกชน/หน่วยงานภาครัฐ) และอะไรคือสิ่งที่ที่ทำงานใหม่ให้กับท่าน ซึ่งท่านรู้สึกว่าเป็นที่น่าพอใจมากกว่าการปฏิบัติราชการกับกรุงเทพมหานคร"
+);
+const question7Score = ref<number>(5);
+const question7Answer = ref<any>(["มี (ระบุ)", "ไม่มี"]);
 
 // set คำถามที่ 8
-const question8Desc = ref<string>("ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)")
-const question8Score = ref<number>(5)
-const question8Answer = ref<any>([
-  "แนะนำ",
-  "ไม่แนะนำ (ระบุ)",
-])
+const question8Desc = ref<string>(
+  "ท่านจะแนะนำเพื่อนให้มาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
+);
+const question8Score = ref<number>(5);
+const question8Answer = ref<any>(["แนะนำ", "ไม่แนะนำ (ระบุ)"]);
 
 // set คำถามที่ 9
-const question9Desc = ref<string>("หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)")
-const question9Score = ref<number>(5)
-const question9Answer = ref<any>([
-  "อยาก",
-  "ไม่อยาก (ระบุ)",
-])
+const question9Desc = ref<string>(
+  "หากท่านมีโอกาสในอนาคต ท่านอยากกลับมาร่วมงานกับกรุงเทพมหานครหรือไม่ (ถ้าไม่ โปรดระบุเหตุผล)"
+);
+const question9Score = ref<number>(5);
+const question9Answer = ref<any>(["อยาก", "ไม่อยาก (ระบุ)"]);
 // set คำถามที่ 10
-const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ")
-const question10Score = ref<number>(5)
+const question10Desc = ref<string>("ความคิดเห็นและข้อเสนอแนะอื่น ๆ");
+const question10Score = ref<number>(5);
 
 const exitFactor = ref<any>([]);
 const reasonWork = ref<any>([]);
@@ -212,14 +221,22 @@ const getData = async () => {
 </script>
 <template>
   <div class="toptitle text-dark 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)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
     แก้ไขคำถาม
   </div>
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="col-12"><q-separator /></div>
     <q-form ref="myForm">
-
       <div class="col-12 row q-col-gutter-md q-pa-md">
         <div class="col-xs-12 col-sm-12">
           <q-card bordered flat>
@@ -229,24 +246,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question1Desc" label="คำถามข้อที่ 1" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
-                  ]" />
+                <q-input
+                  v-model="question1Desc"
+                  label="คำถามข้อที่ 1"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 1',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question1Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question1Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question1Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question1Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question1Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question1Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -263,24 +315,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question2Desc" label="คำถามข้อที่ 2" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
-                  ]" />
+                <q-input
+                  v-model="question2Desc"
+                  label="คำถามข้อที่ 2"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 2',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question2Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question2Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question2Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question2Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question2Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question2Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -297,24 +384,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question3Desc" label="คำถามข้อที่ 3" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
-                  ]" />
+                <q-input
+                  v-model="question3Desc"
+                  label="คำถามข้อที่ 3"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 3',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question3Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question3Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question3Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question3Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question3Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question3Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -331,24 +453,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question4Desc" label="คำถามข้อที่ 4" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
-                  ]" />
+                <q-input
+                  v-model="question4Desc"
+                  label="คำถามข้อที่ 4"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 4',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question4Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question4Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question4Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question4Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question4Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question4Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -365,17 +522,38 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question5Desc" label="คำถามข้อที่ 5" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
-                  ]" />
+                <q-input
+                  v-model="question5Desc"
+                  label="คำถามข้อที่ 5"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 5',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question5Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question5Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
             </div>
           </q-card>
@@ -391,17 +569,38 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question6Desc" label="คำถามข้อที่ 6" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
-                  ]" />
+                <q-input
+                  v-model="question6Desc"
+                  label="คำถามข้อที่ 6"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 6',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question6Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question6Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
             </div>
           </q-card>
@@ -417,24 +616,59 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question7Desc" label="คำถามข้อที่ 7" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
-                  ]" />
+                <q-input
+                  v-model="question7Desc"
+                  label="คำถามข้อที่ 7"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 7',
+                  ]"
+                />
               </div>
               <div class="col-2 text-top0">
-                <q-input v-model="question7Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question7Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question7Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question7Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question7Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question7Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -451,28 +685,62 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question8Desc" label="คำถามข้อที่ 8" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
-                  ]" />
+                <q-input
+                  v-model="question8Desc"
+                  label="คำถามข้อที่ 8"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 8',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question8Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question8Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question8Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question8Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question8Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question8Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
-
             </div>
           </q-card>
         </div>
@@ -487,28 +755,62 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question9Desc" label="คำถามข้อที่ 9" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
-                  ]" />
+                <q-input
+                  v-model="question9Desc"
+                  label="คำถามข้อที่ 9"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 9',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question9Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question9Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
 
-              <div v-for="(data, index) in question9Answer" :key="index" class="row col-12">
+              <div
+                v-for="(data, index) in question9Answer"
+                :key="index"
+                class="row col-12"
+              >
                 <div class="col-6">
-                  <q-input v-model="question9Answer[index]" :label="`คำตอบที่ ${index + 1}`" dense lazy-rules type="text"
-                    autogrow hide-bottom-space outlined class="bg-white" :rules="[
+                  <q-input
+                    v-model="question9Answer[index]"
+                    :label="`คำตอบที่ ${index + 1}`"
+                    dense
+                    lazy-rules
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
                       (val) => (val && val.length > 0) || 'กรุณากรอกคำตอบ',
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
-
             </div>
           </q-card>
         </div>
@@ -523,17 +825,38 @@ const getData = async () => {
             <q-separator />
             <div class="col-12 row q-pa-sm q-col-gutter-sm">
               <div class="col-10 text-top0">
-                <q-input v-model="question10Desc" label="คำถามข้อที่ 10" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
-                  ]" />
+                <q-input
+                  v-model="question10Desc"
+                  label="คำถามข้อที่ 10"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || 'กรุณากรอกคำถามข้อที่ 10',
+                  ]"
+                />
               </div>
 
               <div class="col-2 text-top0">
-                <q-input v-model="question10Score" label="กรอกคะแนน" dense lazy-rules type="text" autogrow
-                  hide-bottom-space outlined class="bg-white" :rules="[
+                <q-input
+                  v-model="question10Score"
+                  label="กรอกคะแนน"
+                  dense
+                  lazy-rules
+                  type="text"
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกคะแนน',
-                  ]" />
+                  ]"
+                />
               </div>
             </div>
           </q-card>
@@ -544,11 +867,8 @@ const getData = async () => {
 
       <q-card-actions class="text-primary q-pa-md">
         <q-space />
-        <q-btn unelevated label="บันทึก" color="public" @click="">
-        </q-btn>
-
+        <q-btn unelevated label="บันทึก" color="public" @click=""> </q-btn>
       </q-card-actions>
-
     </q-form>
   </q-card>
 </template>
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 6964c4136..f745f127d 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -22,6 +22,7 @@ const {
   dialogConfirm,
   dialogRemove,
   date2Thai,
+  dateToISO,
 } = mixin;
 const myForm = ref<QForm | null>(null);
 
@@ -322,7 +323,8 @@ const uploadFile = async (event: any, signDate: any) => {
             const selectedFile = event;
             const formdata = new FormData();
             formdata.append("file", selectedFile);
-            formdata.append("signDate", signDate);
+            if (signDate != null)
+              formdata.append("signDate", dateToISO(signDate));
             await http
               .put(
                 config.API.fileRetirement(retireld.value.toString()),
@@ -459,7 +461,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   clickable
                   v-close-popup
                   type="a"
-                  @click="modalUpload = true,signDate = null,fileUpload = null"
+                  @click="
+                    (modalUpload = true), (signDate = null), (fileUpload = null)
+                  "
                   target="_blank"
                   v-if="statusUpload !== true"
                 >
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
index d209ccedc..11d94823a 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref,watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -11,7 +11,15 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
 const $q = useQuasar();
 const myForm = ref<any>();
 const mixin = useCounterMixin();
-const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm ,dateToISO} = mixin;
+const {
+  date2Thai,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dateToISO,
+} = mixin;
 const files = ref<any>();
 const filesReturn = ref<any>();
 const OrganazationId = ref<string>("");
@@ -20,17 +28,17 @@ const OrgList = ref<DataOption[]>([]);
 const OrgList2 = ref<DataOption[]>([]);
 const Datereceive = ref<Date | null>();
 const Datereturn = ref<Date | null>();
-const remark = ref<string>("")
-const nullii = ref<any>(null)
+const remark = ref<string>("");
+const nullii = ref<any>(null);
 const props = defineProps({
   modal: Boolean,
   personId: String,
   close: Function,
   fecthlistInsignia: Function,
-  dateCheckReceive:String,
-  dateCheckReturn:String,
-  dataModal:Object
-})
+  dateCheckReceive: String,
+  dateCheckReturn: String,
+  dataModal: Object,
+});
 // reset วันที่ประกาศราชกิจจานุเบกษา
 const clearReceiveDate = () => {
   Datereceive.value = null;
@@ -40,36 +48,36 @@ const clearReturnDate = () => {
 };
 const close = () => {
   props.close?.();
-      Datereceive.value = null
-      files.value = null
-      OrganazationId.value = ''
-      Datereturn.value = null
-      filesReturn.value = null
-      OrganazationId2.value = ''
+  Datereceive.value = null;
+  files.value = null;
+  OrganazationId.value = "";
+  Datereturn.value = null;
+  filesReturn.value = null;
+  OrganazationId2.value = "";
 };
 
-const SaveData = async (type:string,id:string) => {
- await myForm.value.validate().then((result: boolean) => {
+const SaveData = async (type: string, id: string) => {
+  await myForm.value.validate().then((result: boolean) => {
     if (result) {
-      dialogConfirm($q,() => dataSave(type,id))
-}else{
-}
-
-})};
-const dataSave = (type:string,id:string) => {
-  const formData = new FormData();
-    if(props.dateCheckReceive === null){
-        formData.append("Date", dateToISO(Datereceive.value ?? nullii));
-        formData.append("File", files.value);
-        formData.append("OrgId", OrganazationId.value);
+      dialogConfirm($q, () => dataSave(type, id));
     } else {
-        formData.append("Date", dateToISO(Datereturn.value ?? nullii));
-        formData.append("File", filesReturn.value);
-        formData.append("OrgId", OrganazationId2.value);
     }
+  });
+};
+const dataSave = (type: string, id: string) => {
+  const formData = new FormData();
+  if (props.dateCheckReceive === null) {
+    formData.append("Date", dateToISO(Datereceive.value ?? nullii));
+    formData.append("File", files.value);
+    formData.append("OrgId", OrganazationId.value);
+  } else {
+    formData.append("Date", dateToISO(Datereturn.value ?? nullii));
+    formData.append("File", filesReturn.value);
+    formData.append("OrgId", OrganazationId2.value);
+  }
   showLoader();
-   http
-    .put(config.API.requestinsignia(type,id), formData)
+  http
+    .put(config.API.requestinsignia(type, id), formData)
     .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
@@ -77,17 +85,17 @@ const dataSave = (type:string,id:string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      Datereceive.value = null
-      files.value = null
-      OrganazationId.value = ''
-      Datereturn.value = null
-      filesReturn.value = null
-      OrganazationId2.value = ''
+      Datereceive.value = null;
+      files.value = null;
+      OrganazationId.value = "";
+      Datereturn.value = null;
+      filesReturn.value = null;
+      OrganazationId2.value = "";
       props.close?.();
       hideLoader();
-      props.fecthlistInsignia?.()
+      props.fecthlistInsignia?.();
     });
-}
+};
 const fetchOrgList = async () => {
   showLoader();
   await http
@@ -99,12 +107,12 @@ const fetchOrgList = async () => {
       }));
       OrgList.value = orgArr;
       OrgList2.value = [
-          {
-            id: "00000000-0000-0000-0000-000000000000",
-            name: "สำนักนายกรัฐมนตรี",
-          },
-          ...orgArr,
-        ];
+        {
+          id: "00000000-0000-0000-0000-000000000000",
+          name: "สำนักนายกรัฐมนตรี",
+        },
+        ...orgArr,
+      ];
     })
     .catch((err) => {
       messageError($q, err);
@@ -113,123 +121,237 @@ const fetchOrgList = async () => {
       hideLoader();
     });
 };
-watch(props,()=>{
-  if(props.dataModal){
-    Datereceive.value = props.dataModal.dateReceiveInsignia
-    Datereturn.value = props.dataModal.dateReturnInsignia
-    OrganazationId.value = props.dataModal.orgReceiveInsignia
-    OrganazationId2.value = props.dataModal.orgReturnInsignia
+watch(props, () => {
+  if (props.dataModal) {
+    Datereceive.value = props.dataModal.dateReceiveInsignia;
+    Datereturn.value = props.dataModal.dateReturnInsignia;
+    OrganazationId.value = props.dataModal.orgReceiveInsignia;
+    OrganazationId2.value =
+      Datereturn.value != null
+        ? props.dataModal.orgReturnInsignia == null ||
+          props.dataModal.orgReturnInsignia == "-"
+          ? "00000000-0000-0000-0000-000000000000"
+          : props.dataModal.orgReturnInsignia
+        : "-";
   }
-})
+});
 
-onMounted(()=>{
-  fetchOrgList()
-})
+onMounted(() => {
+  fetchOrgList();
+});
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
       <q-toolbar>
-        <q-toolbar-title  class="text-subtitle2 text-bold">รับ-คืนเครื่องราชฯ</q-toolbar-title>
-        <q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
+        <q-toolbar-title class="text-subtitle2 text-bold"
+          >รับ-คืนเครื่องราชฯ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="close"
+          style="color: #ff8080; background-color: #ffdede"
+        />
       </q-toolbar>
       <q-separator />
 
       <q-form ref="myForm">
         <div class="q-pa-md bg-grey-1">
-          <div  class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-12 text-weight-bold text-grey-7">
-                รับเครื่องราชฯ
-              </div>
-              <div class="col-xs-12 col-sm-4">
-
-                <datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0" :readonly="dateCheckReceive !== null">
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
-                      hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : null
-                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="dateCheckReceive !== null">
-                      <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer" color="primary">
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-
-              <div class="col-xs-12 col-sm-4">
-
-                <q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="dateCheckReceive !== null">
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <q-select  hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
-                  emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="dateCheckReceive !== null"/>
-              </div>
+              รับเครื่องราชฯ
             </div>
-            
-            <div v-if="dateCheckReceive !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-12 q-mt-sm"><q-separator/></div>
-              <div class="col-12 text-weight-bold text-grey-7">
-                คืนเครื่องราชฯ
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                
-                <datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0" :readonly="dateCheckReturn !== null">
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
-                      hide-bottom-space :model-value="Datereturn != null ? date2Thai(Datereturn) : undefined
-                        " :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="dateCheckReturn !== null">
-                      <template v-slot:prepend>
-                        <q-icon name="event" class="cursor-pointer" color="primary">
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <q-file outlined dense v-model="filesReturn" label="ไฟล์หลักฐานการคืน" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="dateCheckReturn !== null">
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <q-select hide-bottom-space :options="OrgList2" dense borderless option-label="name" option-value="id"
-                  emit-value map-options outlined v-model="OrganazationId2" lazy-rules :label="`หน่วยงานที่คืน` "
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="dateCheckReturn !== null"/>
-              </div>
+            <div class="col-xs-12 col-sm-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="Datereceive"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="dateCheckReceive !== null"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    borderless
+                    outlined
+                    lazy-rules
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
+                    hide-bottom-space
+                    :model-value="
+                      Datereceive != null ? date2Thai(Datereceive) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                    clearable
+                    @clear="clearReceiveDate"
+                    :disable="dateCheckReceive !== null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-file
+                outlined
+                dense
+                v-model="files"
+                label="ไฟล์หลักฐานการรับ"
+                lazy-rules
+                :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                hide-bottom-space
+                :disable="dateCheckReceive !== null"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-select
+                hide-bottom-space
+                :options="OrgList"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                v-model="OrganazationId"
+                lazy-rules
+                :label="`หน่วยงานที่รับ`"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
+                :disable="dateCheckReceive !== null"
+              />
             </div>
           </div>
 
+          <div
+            v-if="dateCheckReceive !== null"
+            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-12 q-mt-sm"><q-separator /></div>
+            <div class="col-12 text-weight-bold text-grey-7">
+              คืนเครื่องราชฯ
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="Datereturn"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="dateCheckReturn !== null"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    borderless
+                    outlined
+                    lazy-rules
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
+                    hide-bottom-space
+                    :model-value="
+                      Datereturn != null ? date2Thai(Datereturn) : undefined
+                    "
+                    :label="`${'วันที่คืน'}`"
+                    clearable
+                    @clear="clearReturnDate"
+                    :disable="dateCheckReturn !== null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-file
+                outlined
+                dense
+                v-model="filesReturn"
+                label="ไฟล์หลักฐานการคืน"
+                lazy-rules
+                :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']"
+                hide-bottom-space
+                :disable="dateCheckReturn !== null"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-select
+                hide-bottom-space
+                :options="OrgList2"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                v-model="OrganazationId2"
+                lazy-rules
+                :label="`หน่วยงานที่คืน`"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                :disable="dateCheckReturn !== null"
+              />
+            </div>
+          </div>
+        </div>
       </q-form>
 
       <q-separator />
       <div class="q-px-md q-py-sm">
         <div class="row justify-end">
-          <q-btn v-if="dateCheckReturn === null" label="บันทึก" color="public" @click="SaveData(props.dateCheckReceive === null ? 'receive':'return',props.personId as string)">
+          <q-btn
+            v-if="dateCheckReturn === null"
+            label="บันทึก"
+            color="public"
+            @click="
+              SaveData(
+                props.dateCheckReceive === null ? 'receive' : 'return',
+                props.personId as string
+              )
+            "
+          >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </div>
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 3a9c67efd..bf008489b 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -292,8 +292,8 @@ const fetchSalary = async (personalId: string) => {
           data.monthSalaryAmount === 0
             ? null
             : data.monthSalaryAmount,
-        // remarkVertical: data.remarkVertical,
-        // remarkHorizontal: data.remarkHorizontal,
+        remarkVertical: data.remarkVertical,
+        remarkHorizontal: data.remarkHorizontal,
       };
     })
     .catch((e) => {