From f09860b79bf9aa5ad1972acab1f862de74747cc2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 2 Sep 2024 10:27:59 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9E=E0=B9=89=E0=B8=99=E0=B8=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=20=3D=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form=20Exit?=
 =?UTF-8?q?=20interview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ExitInterview/EditQuestion.vue |  11 +-
 .../components/ExitInterview/exitMain.vue     |  64 +-
 .../components/ExitInterview/exitRegistry.vue | 911 +++++++++---------
 .../components/resign/DetailDeceased.vue      |  32 +-
 4 files changed, 503 insertions(+), 515 deletions(-)

diff --git a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
index fe5353037..409a0f07e 100644
--- a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
+++ b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
@@ -177,8 +177,8 @@ const getData = async () => {
   showLoader();
   await http
     .get(config.API.questionExitInterview())
-    .then((res: any) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       question1Score.value = data.question1Score ?? 0;
       question2Score.value = data.question2Score ?? 0;
       question3Score.value = data.question3Score ?? 0;
@@ -269,14 +269,15 @@ const putData = () => {
   showLoader();
   http
     .put(config.API.questionExitInterview(), body)
-    .then((res) => {
+    .then(() => {
+      router.push(`/retirement/exit-interview`);
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
-      router.push(`/retirement/exit-interview`);
+    .finally(() => {
+      hideLoader();
     });
 };
 </script>
diff --git a/src/modules/06_retirement/components/ExitInterview/exitMain.vue b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
index bacac0c05..d1432abee 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitMain.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@@ -170,8 +170,8 @@ const fecthlist = async () => {
   showLoader();
   await http
     .get(config.API.listExitInterview())
-    .then((res: any) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       let list: ResponseItems[] = [];
       data.map((r: ResponseItems) => {
         list.push({
@@ -215,7 +215,8 @@ const saveAppoint = async () => {
         showLoader();
         await http
           .put(config.API.AppointInterview(id.value), body)
-          .then((res: any) => {
+          .then(async () => {
+            await fecthlist();
             success($q, "วันนัดหมายเพื่อทําการสัมภาษณ์การลาออกสำเร็จ");
             closeModal();
           })
@@ -223,7 +224,6 @@ const saveAppoint = async () => {
             messageError($q, e);
           })
           .finally(async () => {
-            await fecthlist();
             hideLoader();
           });
       });
@@ -378,7 +378,10 @@ const openModalCalendar = (rows: any) => {
                     <q-tooltip>รายละเอียด</q-tooltip>
                   </q-btn>
                   <q-btn
-                  v-if="checkPermission($route)?.attrIsGet && checkPermission($route)?.attrIsUpdate"
+                    v-if="
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
                     flat
                     dense
                     round
@@ -393,7 +396,11 @@ const openModalCalendar = (rows: any) => {
                     <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                   </q-btn>
                   <q-btn
-                    v-if="!props.row.appointDate && checkPermission($route)?.attrIsGet && checkPermission($route)?.attrIsUpdate"
+                    v-if="
+                      !props.row.appointDate &&
+                      checkPermission($route)?.attrIsGet &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
                     icon="mdi-calendar"
                     color="blue-7"
                     flat
@@ -407,63 +414,36 @@ const openModalCalendar = (rows: any) => {
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                >
+                <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td
-                  key="realReason"
-                  :props="props"
-                >
+                <q-td key="realReason" :props="props">
                   {{ props.row.realReason }}
                 </q-td>
-                <q-td
-                  key="notExitFactor"
-                  :props="props"
-                >
+                <q-td key="notExitFactor" :props="props">
                   {{ props.row.notExitFactor }}
                 </q-td>
-                <q-td
-                  key="futureWork"
-                  :props="props"
-                >
+                <q-td key="futureWork" :props="props">
                   {{ props.row.futureWork ? "ใช่" : "ไม่" }}
                 </q-td>
-                <q-td
-                  key="futureWorkReason"
-                  :props="props"
-                >
+                <q-td key="futureWorkReason" :props="props">
                   {{ props.row.futureWorkReason }}
                 </q-td>
-                <q-td
-                  key="havejob"
-                  :props="props"
-                >
+                <q-td key="havejob" :props="props">
                   {{ props.row.havejob ? "ใช่" : "ไม่" }}
                 </q-td>
 
-                <q-td
-                  key="havejobReason"
-                  :props="props"
-                >
+                <q-td key="havejobReason" :props="props">
                   <div class="table_ellipsis">
                     {{ props.row.havejobReason }}
                   </div>
                 </q-td>
-                <q-td
-                  key="appointDate"
-                  :props="props"
-                >
+                <q-td key="appointDate" :props="props">
                   {{
                     props.row.appointDate == null ? "-" : props.row.appointDate
                   }}
                 </q-td>
-                <q-td
-                  key="datetext"
-                  :props="props"
-                >
+                <q-td key="datetext" :props="props">
                   {{ props.row.datetext }}
                 </q-td>
               </q-tr>
diff --git a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
index 8b8612f0d..37f26baec 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
@@ -95,8 +95,8 @@ const getData = async () => {
   showLoader();
   await http
     .get(config.API.ExitInterviewByid(dataId))
-    .then((res: any) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       dataProfile.value = data as DataProfile;
       avata.value = data.avatar ?? "";
       Position.value = data.position ?? "";
@@ -157,10 +157,11 @@ const question7Answer = ref<OptionQuestions2[]>([]);
 const question8Answer = ref<OptionQuestions2[]>([]);
 const question9Answer = ref<OptionQuestions2[]>([]);
 async function fecthquestion() {
+  showLoader();
   await http
     .get(config.API.questionnaireList())
-    .then((result) => {
-      const data = result.data.result;
+    .then(async (result) => {
+      const data = await result.data.result;
       // คำถามแบบสอบถามหลัก
       for (let i = 1; i <= 10; i++) {
         questionDesc[`question${i}Desc`] =
@@ -221,6 +222,9 @@ async function fecthquestion() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 //รวมคะเเนน
@@ -275,17 +279,19 @@ const putData = () => {
   showLoader();
   http
     .put(config.API.commentExitInterview(dataId), body)
-    .then((res) => {
+    .then(() => {
+      router.push(`/retirement/exit-interview`);
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
-      router.push(`/retirement/exit-interview`);
+    .finally(() => {
+      hideLoader();
     });
 };
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -298,419 +304,420 @@ const putData = () => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียด Exit interview ของ {{ prefix }} {{ fullname }}
+    รายละเอียด Exit interview ของ{{ fullname }}
   </div>
   <CardProfile :data="dataProfile as DataProfile" />
 
   <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">
         ข้อมูลการตอบแบบสอบถาม
       </div>
       <q-space />
     </div>
     <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>
-            <div
-              class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
-            >
-              แบบสอบถาม
-            </div>
-            <q-separator />
-            <!--                        1                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question1Desc }}
-                </div>
-                <div class="col-2">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRoutePermisson"
-                    v-model="score[0].score"
-                    label="คะแนนข้อ 1"
-                    type="number"
-                    lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
-                  />
-                </div>
+    <div class="col-12">
+      <q-form ref="myForm">
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="col-12">
+            <q-card bordered flat>
+              <div
+                class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
+              >
+                แบบสอบถาม
               </div>
-              <q-option-group
-                :options="question1Answer"
-                type="checkbox"
-                v-model="reasonWork"
-                disable
-              />
-              <q-item-label>
-                <q-input
-                  v-if="reasonWork.includes(question1Answer.length - 1)"
-                  v-model="reasonWorkOther"
+              <q-separator />
+              <!--                        1                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question1Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      v-model="score[0].score"
+                      label="คะแนนข้อ 1"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
+                </div>
+                <q-option-group
+                  :options="question1Answer"
+                  type="checkbox"
+                  v-model="reasonWork"
                   disable
-                  :readonly="checkRoutePermisson"
-                  label="กรอกข้อความ"
-                  dense
-                  lazy-rules
-                  type="text"
-                  autogrow
-                  hide-bottom-space
-                  outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
                 />
-              </q-item-label>
-            </q-card-section>
-            <!--                        2                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question2Desc }}
-                </div>
-                <div class="col-2">
+                <q-item-label>
                   <q-input
-                    dense
+                    v-if="reasonWork.includes(question1Answer.length - 1)"
+                    v-model="reasonWorkOther"
+                    disable
                     :readonly="checkRoutePermisson"
-                    outlined
-                    v-model="score[1].score"
-                    label="คะแนนข้อ 2"
-                    type="number"
+                    label="กรอกข้อความ"
+                    dense
                     lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
                   />
+                </q-item-label>
+              </q-card-section>
+              <!--                        2                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question2Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      :readonly="checkRoutePermisson"
+                      outlined
+                      v-model="score[1].score"
+                      label="คะแนนข้อ 2"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-              </div>
-              <q-option-group
-                :options="question2Answer"
-                type="radio"
-                v-model="timeThink"
-                disable
-              />
-            </q-card-section>
-            <!--                        3                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question3Desc }}
+                <q-option-group
+                  :options="question2Answer"
+                  type="radio"
+                  v-model="timeThink"
+                  disable
+                />
+              </q-card-section>
+              <!--                        3                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question3Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      v-model="score[2].score"
+                      label="คะแนนข้อ 3"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-                <div class="col-2">
+                <q-option-group
+                  :options="question3Answer"
+                  type="checkbox"
+                  v-model="exitFactor"
+                  disable
+                />
+                <q-item-label>
                   <q-input
+                    v-if="exitFactor.includes(question3Answer.length - 1)"
+                    v-model="exitFactorOther"
+                    label="กรอกข้อความ"
                     dense
-                    outlined
-                    :readonly="checkRoutePermisson"
-                    v-model="score[2].score"
-                    label="คะแนนข้อ 3"
-                    type="number"
+                    disable
                     lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    :readonly="checkRoutePermisson"
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
                   />
+                </q-item-label>
+              </q-card-section>
+              <!--                        4                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question4Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      :readonly="checkRoutePermisson"
+                      outlined
+                      v-model="score[3].score"
+                      label="คะแนนข้อ 4"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
+                </div>
+                <q-option-group
+                  :options="question4Answer"
+                  type="checkbox"
+                  v-model="adjust"
+                  disable
+                />
+                <q-item-label>
+                  <q-input
+                    v-if="adjust.includes(question4Answer.length - 1)"
+                    v-model="adjustOther"
+                    label="กรอกอื่นๆ"
+                    dense
+                    disable
+                    lazy-rules
+                    :readonly="checkRoutePermisson"
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
+                  />
+                </q-item-label>
+              </q-card-section>
+              <!--                        5                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question5Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      v-model="score[4].score"
+                      label="คะแนนข้อ 5"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-              </div>
-              <q-option-group
-                :options="question3Answer"
-                type="checkbox"
-                v-model="exitFactor"
-                disable
-              />
-              <q-item-label>
                 <q-input
-                  v-if="exitFactor.includes(question3Answer.length - 1)"
-                  v-model="exitFactorOther"
-                  label="กรอกข้อความ"
+                  class="col-12"
                   dense
                   disable
-                  lazy-rules
-                  :readonly="checkRoutePermisson"
-                  type="text"
-                  autogrow
-                  hide-bottom-space
                   outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
+                  v-model="realReason"
+                  label="  "
+                  type="textarea"
                 />
-              </q-item-label>
-            </q-card-section>
-            <!--                        4                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question4Desc }}
+              </q-card-section>
+              <!--                        6                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question6Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      v-model="score[5].score"
+                      label="คะแนนข้อ 6"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-                <div class="col-2">
-                  <q-input
-                    dense
-                    :readonly="checkRoutePermisson"
-                    outlined
-                    v-model="score[3].score"
-                    label="คะแนนข้อ 4"
-                    type="number"
-                    lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
-                  />
-                </div>
-              </div>
-              <q-option-group
-                :options="question4Answer"
-                type="checkbox"
-                v-model="adjust"
-                disable
-              />
-              <q-item-label>
                 <q-input
-                  v-if="adjust.includes(question4Answer.length - 1)"
-                  v-model="adjustOther"
-                  label="กรอกอื่นๆ"
+                  class="col-12"
                   dense
-                  disable
-                  lazy-rules
-                  :readonly="checkRoutePermisson"
-                  type="text"
-                  autogrow
-                  hide-bottom-space
                   outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
+                  disable
+                  v-model="notExitFactor"
+                  label="  "
+                  type="textarea"
                 />
-              </q-item-label>
-            </q-card-section>
-            <!--                        5                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question5Desc }}
+              </q-card-section>
+              <!--                        7                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question7Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      v-model="score[6].score"
+                      label="คะแนนข้อ 7"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-                <div class="col-2">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRoutePermisson"
-                    v-model="score[4].score"
-                    label="คะแนนข้อ 5"
-                    type="number"
-                    lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
-                  />
-                </div>
-              </div>
-              <q-input
-                class="col-12"
-                dense
-                disable
-                outlined
-                v-model="realReason"
-                label="  "
-                type="textarea"
-              />
-            </q-card-section>
-            <!--                        6                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question6Desc }}
-                </div>
-                <div class="col-2">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRoutePermisson"
-                    v-model="score[5].score"
-                    label="คะแนนข้อ 6"
-                    type="number"
-                    lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
-                  />
-                </div>
-              </div>
-              <q-input
-                class="col-12"
-                dense
-                outlined
-                disable
-                v-model="notExitFactor"
-                label="  "
-                type="textarea"
-              />
-            </q-card-section>
-            <!--                        7                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question7Desc }}
-                </div>
-                <div class="col-2">
-                  <q-input
-                    dense
-                    outlined
-                    :readonly="checkRoutePermisson"
-                    v-model="score[6].score"
-                    label="คะแนนข้อ 7"
-                    type="number"
-                    lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
-                  />
-                </div>
-              </div>
-              <q-option-group
-                :options="question7Answer"
-                type="radio"
-                v-model="haveJob"
-                disable
-              />
+                <q-option-group
+                  :options="question7Answer"
+                  type="radio"
+                  v-model="haveJob"
+                  disable
+                />
 
-              <q-item-label>
-                <q-input
-                  v-if="haveJob == 0"
-                  v-model="haveJobReason"
-                  label="กรอกอื่นๆ"
-                  dense
-                  disable
-                  :readonly="checkRoutePermisson"
-                  lazy-rules
-                  type="text"
-                  autogrow
-                  hide-bottom-space
-                  outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
-                />
-              </q-item-label>
-            </q-card-section>
-            <!--                        8                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question8Desc }}
-                </div>
-                <div class="col-2">
+                <q-item-label>
                   <q-input
+                    v-if="haveJob == 0"
+                    v-model="haveJobReason"
+                    label="กรอกอื่นๆ"
                     dense
-                    outlined
+                    disable
                     :readonly="checkRoutePermisson"
-                    v-model="score[7].score"
-                    label="คะแนนข้อ 8"
-                    type="number"
                     lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
                   />
+                </q-item-label>
+              </q-card-section>
+              <!--                        8                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question8Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      v-model="score[7].score"
+                      label="คะแนนข้อ 8"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-              </div>
-              <q-option-group
-                :options="question8Answer"
-                type="radio"
-                v-model="suggestFriends"
-                disable
-              />
+                <q-option-group
+                  :options="question8Answer"
+                  type="radio"
+                  v-model="suggestFriends"
+                  disable
+                />
 
-              <q-item-label>
-                <q-input
-                  v-if="suggestFriends === 1"
-                  v-model="suggestFriendsReason"
-                  label="กรอกข้อความ"
-                  dense
-                  lazy-rules
-                  disable
-                  :readonly="checkRoutePermisson"
-                  type="text"
-                  autogrow
-                  hide-bottom-space
-                  outlined
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
-                />
-              </q-item-label>
-            </q-card-section>
-            <!--                        9                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question9Desc }}
-                </div>
-                <div class="col-2">
+                <q-item-label>
                   <q-input
+                    v-if="suggestFriends === 1"
+                    v-model="suggestFriendsReason"
+                    label="กรอกข้อความ"
                     dense
-                    outlined
-                    v-model="score[8].score"
-                    :readonly="checkRoutePermisson"
-                    label="คะแนนข้อ 9"
-                    type="number"
                     lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    disable
+                    :readonly="checkRoutePermisson"
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
                   />
+                </q-item-label>
+              </q-card-section>
+              <!--                        9                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question9Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      v-model="score[8].score"
+                      :readonly="checkRoutePermisson"
+                      label="คะแนนข้อ 9"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-              </div>
-              <q-option-group
-                :options="question9Answer"
-                type="radio"
-                v-model="futureWork"
-                disable
-              />
-              <q-item-label>
-                <q-input
-                  v-if="futureWork === 1"
-                  v-model="futureWorkReason"
-                  label="กรอกข้อความ"
-                  dense
-                  lazy-rules
-                  :readonly="checkRoutePermisson"
-                  type="text"
-                  autogrow
-                  hide-bottom-space
-                  outlined
+                <q-option-group
+                  :options="question9Answer"
+                  type="radio"
+                  v-model="futureWork"
                   disable
-                  class="bg-white"
-                  :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]"
                 />
-              </q-item-label>
-            </q-card-section>
-            <!--                        10                      -->
-            <q-card-section>
-              <div class="row">
-                <div class="col-10 items-center row inline">
-                  {{ questionDesc.question10Desc }}
-                </div>
-                <div class="col-2">
+                <q-item-label>
                   <q-input
+                    v-if="futureWork === 1"
+                    v-model="futureWorkReason"
+                    label="กรอกข้อความ"
                     dense
-                    outlined
-                    v-model="score[9].score"
-                    :readonly="checkRoutePermisson"
-                    label="คะแนนข้อ 10"
-                    type="number"
                     lazy-rules
-                    :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    :readonly="checkRoutePermisson"
+                    type="text"
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    disable
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
                   />
+                </q-item-label>
+              </q-card-section>
+              <!--                        10                      -->
+              <q-card-section>
+                <div class="row">
+                  <div class="col-10 items-center row inline">
+                    {{ questionDesc.question10Desc }}
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      dense
+                      outlined
+                      v-model="score[9].score"
+                      :readonly="checkRoutePermisson"
+                      label="คะแนนข้อ 10"
+                      type="number"
+                      lazy-rules
+                      :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
+                    />
+                  </div>
                 </div>
-              </div>
-              <q-input
-                class="col-12"
-                dense
-                disable
-                outlined
-                v-model="suggestion"
-                label="  "
-                type="textarea"
-              />
-            </q-card-section>
+                <q-input
+                  class="col-12"
+                  dense
+                  disable
+                  outlined
+                  v-model="suggestion"
+                  label="  "
+                  type="textarea"
+                />
+              </q-card-section>
 
-            <!-- <div class="col-12 row q-pa-sm q-col-gutter-sm"> -->
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-12 row q-pa-sm q-col-gutter-sm"> -->
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question1Desc }}
               </div> -->
-            <!-- <div class="col-2">
+              <!-- <div class="col-2">
                 <q-input
                   dense
                   outlined
@@ -721,13 +728,13 @@ const putData = () => {
                   :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                 />
               </div> -->
-            <!-- <q-option-group
+              <!-- <q-option-group
                 :options="question1Answer"
                 type="checkbox"
                 v-model="reasonWork"
                 disable
               /> -->
-            <!-- <div class="col-12 text-top0 items-center">
+              <!-- <div class="col-12 text-top0 items-center">
                 <q-item-label>
                   <q-input
                     v-if="reasonWork.includes(question1Answer.length - 1)"
@@ -748,10 +755,10 @@ const putData = () => {
                 </q-item-label>
               </div> -->
 
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question2Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -763,7 +770,7 @@ const putData = () => {
                 />
               </div> -->
 
-            <!-- <div class="col-12">
+              <!-- <div class="col-12">
                 <q-option-group
                   :options="question2Answer"
                   type="radio"
@@ -772,11 +779,11 @@ const putData = () => {
                 />
               </div> -->
 
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question3Desc }}
               </div> -->
 
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -788,14 +795,14 @@ const putData = () => {
                 />
               </div> -->
 
-            <!-- <q-option-group
+              <!-- <q-option-group
                 :options="question3Answer"
                 type="checkbox"
                 v-model="exitFactor"
                 disable
               /> -->
 
-            <!-- <div class="col-12 text-top0 items-center">
+              <!-- <div class="col-12 text-top0 items-center">
                 <q-item-label>
                   <q-input
                     v-if="exitFactor.includes(question3Answer.length - 1)"
@@ -816,10 +823,10 @@ const putData = () => {
                 </q-item-label>
               </div> -->
 
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question4Desc }}
               </div> -->
-            <!-- 
+              <!-- 
               <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
@@ -832,7 +839,7 @@ const putData = () => {
                 />
               </div> -->
 
-            <!-- <q-list>
+              <!-- <q-list>
                 <q-option-group
                   :options="question4Answer"
                   type="checkbox"
@@ -840,7 +847,7 @@ const putData = () => {
                   disable
                 />
               </q-list> -->
-            <!-- <div class="col-12 text-top0 items-center">
+              <!-- <div class="col-12 text-top0 items-center">
                 <q-item-label>
                   <q-input
                     v-if="adjust.includes(question4Answer.length - 1)"
@@ -860,10 +867,10 @@ const putData = () => {
                   />
                 </q-item-label>
               </div> -->
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question5Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -875,7 +882,7 @@ const putData = () => {
                 />
               </div> -->
 
-            <!-- <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 disable
@@ -885,10 +892,10 @@ const putData = () => {
                 type="textarea"
               /> -->
 
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question6Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -900,7 +907,7 @@ const putData = () => {
                 />
               </div> -->
 
-            <!-- <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 outlined
@@ -910,10 +917,10 @@ const putData = () => {
                 type="textarea"
               /> -->
 
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question7Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -924,13 +931,13 @@ const putData = () => {
                   :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                 />
               </div> -->
-            <!-- <q-option-group
+              <!-- <q-option-group
                 :options="question7Answer"
                 type="radio"
                 v-model="haveJob"
                 disable
               /> -->
-            <!-- <div class="col-12 text-top0 items-center">
+              <!-- <div class="col-12 text-top0 items-center">
                 <q-item-label>
                   <q-input
                     v-if="haveJob == 0"
@@ -950,10 +957,10 @@ const putData = () => {
                   />
                 </q-item-label>
               </div> -->
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question8Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -964,13 +971,13 @@ const putData = () => {
                   :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                 />
               </div> -->
-            <!-- <q-option-group
+              <!-- <q-option-group
                 :options="question8Answer"
                 type="radio"
                 v-model="suggestFriends"
                 disable
               /> -->
-            <!-- <div class="col-12 text-top0 items-center">
+              <!-- <div class="col-12 text-top0 items-center">
                 <q-item-label>
                   <q-input
                     v-if="suggestFriends === 1"
@@ -990,10 +997,10 @@ const putData = () => {
                   />
                 </q-item-label>
               </div> -->
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question9Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -1004,13 +1011,13 @@ const putData = () => {
                   :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                 />
               </div> -->
-            <!-- <q-option-group
+              <!-- <q-option-group
                 :options="question9Answer"
                 type="radio"
                 v-model="futureWork"
                 disable
               /> -->
-            <!-- <div class="col-12 text-top0 items-center">
+              <!-- <div class="col-12 text-top0 items-center">
                 <q-item-label>
                   <q-input
                     v-if="futureWork === 1"
@@ -1030,10 +1037,10 @@ const putData = () => {
                   />
                 </q-item-label>
               </div> -->
-            <!-- <div class="col-10 text-top0 items-center row inline">
+              <!-- <div class="col-10 text-top0 items-center row inline">
                 {{ questionDesc.question10Desc }}
               </div> -->
-            <!-- <div class="col-2 text-top0 items-center">
+              <!-- <div class="col-2 text-top0 items-center">
                 <q-input
                   dense
                   outlined
@@ -1044,7 +1051,7 @@ const putData = () => {
                   :rules="[(val) => val !== '' || 'กรุณากรอกคะเเนน']"
                 />
               </div> -->
-            <!-- <q-input
+              <!-- <q-input
                 class="col-12"
                 dense
                 disable
@@ -1053,67 +1060,69 @@ const putData = () => {
                 label="  "
                 type="textarea"
               /> -->
-            <!-- </div> -->
-          </q-card>
+              <!-- </div> -->
+            </q-card>
 
-          <q-card bordered flat class="q-mt-md">
-            <div
-              class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
-            >
-              ความคิดเห็น
-            </div>
-            <q-separator />
-            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <div class="row col-12 q-pa-sm q-col-gutter-sm">
-                <div class="col-10">
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    :readonly="checkRoutePermisson"
-                    hide-bottom-space
-                    v-model="comment"
-                    label="กรอกความคิดเห็น"
-                    type="textarea"
-                    :rules="[(val) => !!val || 'กรุณากรอกความคิดเห็น']"
-                  />
-                </div>
-                <div class="col-2 text-top0">
-                  <q-input
-                    dense
-                    outlined
-                    readonly
-                    v-model="scoreTotal"
-                    label="คะแนนรวม"
-                    type="number"
-                  />
-                </div>
-              </div>
-
-              <div class="col-12" v-if="!checkRoutePermisson">
-                <q-separator />
-              </div>
-
-              <q-card-actions
-                class="col-12 text-primary q-pa-md"
-                v-if="!checkRoutePermisson"
+            <q-card bordered flat class="q-mt-md">
+              <div
+                class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
               >
-                <q-space />
-                <q-btn
-                  unelevated
-                  label="บันทึก"
-                  color="public"
-                  @click="saveClick"
+                ความคิดเห็น
+              </div>
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <div class="row col-12 q-pa-sm q-col-gutter-sm">
+                  <div class="col-10">
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :readonly="checkRoutePermisson"
+                      hide-bottom-space
+                      v-model="comment"
+                      label="กรอกความคิดเห็น"
+                      type="textarea"
+                      :rules="[(val) => !!val || 'กรุณากรอกความคิดเห็น']"
+                    />
+                  </div>
+                  <div class="col-2 text-top0">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      v-model="scoreTotal"
+                      label="คะแนนรวม"
+                      type="number"
+                    />
+                  </div>
+                </div>
+
+                <div class="col-12" v-if="!checkRoutePermisson">
+                  <q-separator />
+                </div>
+
+                <q-card-actions
+                  class="col-12 text-primary q-pa-md"
+                  v-if="!checkRoutePermisson"
                 >
-                </q-btn>
-              </q-card-actions>
-            </div>
-          </q-card>
+                  <q-space />
+                  <q-btn
+                    unelevated
+                    label="บันทึก"
+                    color="public"
+                    @click="saveClick"
+                  >
+                  </q-btn>
+                </q-card-actions>
+              </div>
+            </q-card>
+          </div>
         </div>
-      </div>
-    </q-form>
+      </q-form>
+    </div>
   </q-card>
 </template>
+
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
diff --git a/src/modules/06_retirement/components/resign/DetailDeceased.vue b/src/modules/06_retirement/components/resign/DetailDeceased.vue
index d84c505e8..4220a9374 100644
--- a/src/modules/06_retirement/components/resign/DetailDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailDeceased.vue
@@ -101,13 +101,13 @@ const fileDownload = async (type: string) => {
       class="q-mr-sm"
       @click="router.push(`/retirement/deceased`)"
     />
-    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ fullName }}
+    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม{{ fullName }}
   </div>
 
   <CardProfile :data="dataProfile as DataProfile" />
 
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+  <q-card bordered class="q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการถึงแก่กรรม</div>
       <q-space />
       <div class="q-gutter-x-sm">
@@ -132,8 +132,8 @@ const fileDownload = async (type: string) => {
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
+    <q-card-section>
+      <div class="col-12 row q-col-gutter-md">
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">เลขที่ใบมรณบัตร</div>
@@ -179,18 +179,16 @@ const fileDownload = async (type: string) => {
           </div>
         </div>
       </div>
-
-      <div class="col-12" v-if="checkPermission($route)?.attrIsUpdate">
-        <div class="row">
-          <q-space />
-          <q-btn
-            color="public"
-            label="ส่งหนังสือเวียน"
-            @click="openDeceased(profileId)"
-          />
-        </div>
-      </div>
-    </div>
+    </q-card-section>
+    <q-separator />
+    <q-card-actions align="right">
+      <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
+        color="public"
+        label="ส่งหนังสือเวียน"
+        @click="openDeceased(profileId)"
+      />
+    </q-card-actions>
   </q-card>
 </template>