พ้นจากราชการ => ถึงแก่กรรม

src/modules/06_retirement/components/resign/DetailDeceased.vue

@@ -2,13 +2,19 @@
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
-  
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+
+/** importType*/
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+import type { ResDetailDeceased } from "@/modules/06_retirement/interface/response/Deceased";
+
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
 /**use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -17,21 +23,26 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const fullName = ref<string>("");
 const profileId = ref<string>(route.params.id.toString());
-const detail = ref<any>([]);
+const detail = ref<ResDetailDeceased>();
+
+const dataProfile = ref<DataProfile>();
 
 /** Hook */
 onMounted(() => {
-  fectdata();
+  fetchData();
 });
 
 //นำข้อมูลจาก API มาแสดง
-const fectdata = async () => {
+const fetchData = async () => {
   showLoader();
   await http
     .get(config.API.detailDeceased(profileId.value))
     .then((res) => {
       const data = res.data.result;
+      dataProfile.value = data as DataProfile;
       detail.value = data;
+      console.log(detail.value?.firstName);
+
       fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
     })
     .catch((e) => {
@@ -42,7 +53,6 @@ const fectdata = async () => {
     });
 };
 
-
 //เปิดdetail ของ deceased
 const openDeceased = (id: string) => {
   router.push(`/deceased/detail/${id}`);
@@ -87,15 +97,6 @@ const fileDownload = async (type: string) => {
       hideLoader();
     });
 };
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
 </script>
 
 <template>
@@ -112,50 +113,8 @@ function updatemodalPersonal(modal: boolean) {
     />
     รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ fullName }}
   </div>
-  <q-card bordered class="row col-12 text-dark">
-    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">
-        {{ fullName }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(detail.profileId)"
-      />
-    </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">
-        <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img :src="detail.avatar" v-if="detail.avatar !== null" />
-          <q-img src="@/assets/avatar_user.jpg" v-else />
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">{{ detail.positionLine }}</div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-2 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">{{ detail.positionLevel }}</div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">{{ detail.organization }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+
+  <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">
@@ -189,27 +148,28 @@ function updatemodalPersonal(modal: boolean) {
           <div class="col-12">
             <div class="col-12 text-top">เลขที่ใบมรณบัตร</div>
             <div class="col-12 text-detail">
-              {{ detail.number }}
+              {{ detail?.number }}
             </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">สถานที่ออกใบมรณบัตร</div>
-            <div class="col-12 text-detail">{{ detail.location }}</div>
+            <div class="col-12 text-detail">{{ detail?.location }}</div>
           </div>
         </div>
-
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">เหตุผลการเสียชีวิต</div>
-            <div class="col-12 text-detail">{{ detail.reason }}</div>
+            <div class="col-12 text-detail">{{ detail?.reason }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12">
             <div class="col-12 text-top">วันที่เสียชีวิต</div>
-            <div class="col-12 text-detail">{{ date2Thai(detail.date) }}</div>
+            <div class="col-12 text-detail">
+              {{ detail?.date ? date2Thai(detail?.date) : "-" }}
+            </div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
@@ -221,35 +181,27 @@ function updatemodalPersonal(modal: boolean) {
                 round
                 color="red"
                 icon="mdi-file-pdf"
-                @click="nextPage(detail.pathName)"
+                @click="detail?.pathName ? nextPage(detail?.pathName) : null"
               >
                 <q-tooltip>ใบมรณบัตร</q-tooltip></q-btn
               >
             </div>
           </div>
         </div>
+      </div>
 
-        <div class="col-12">
-          <div class="row">
-            <q-space />
-            <q-btn
-              color="public"
-              dense
-              class="q-px-sm"
-              label="ส่งหนังสือเวียน"
-              @click="openDeceased(profileId)"
-            />
-          </div>
+      <div class="col-12">
+        <div class="row">
+          <q-space />
+          <q-btn
+            color="public"
+            label="ส่งหนังสือเวียน"
+            @click="openDeceased(profileId)"
+          />
         </div>
       </div>
     </div>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 
 <style lang="scss" scope>