hrms-mgt/src/modules/06_retirement/components/resign/DetailDeceased.vue

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";

/** 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";
import { checkPermission } from "@/utils/permissions";

import genReport from "@/plugins/genreport";

/**use*/
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const fullName = ref<string>("");
const profileId = ref<string>(route.params.id.toString());
const detail = ref<ResDetailDeceased>();

const dataProfile = ref<DataProfile>();

/** Hook */
onMounted(() => {
  fetchData();
});

//นำข้อมูลจาก API มาแสดง
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) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

//เปิดdetail ของ deceased
const openDeceased = (id: string) => {
  router.push(`/retirement/deceased/detail/${id}`);
};

//ไปหน้าถัดไป
const nextPage = (page: string) => {
  window.open(page, "_blank");
};

/**
 * ฟังก์ชั่น ดาว์โหลด
 * @param type typeของรายละเอียด
 */
const fileDownload = async (type: string) => {
  showLoader();
  await http
    .get(config.API.DeceasedReport(type, profileId.value))
    .then((res) => {
      const data = res.data.result;
      genReport(
        data,
        `รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม-${fullName.value}`,
        type
      );
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
};
</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.push(`/retirement/deceased`)"
    />
    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ 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="q-pl-sm text-weight-bold text-dark">ข้อมูลการถึงแก่กรรม</div>
      <q-space />
      <div class="q-gutter-x-sm">
        <q-btn
          flat
          outline
          color="red"
          dense
          icon-right="mdi-file-pdf"
          class="q-px-sm"
          @click="fileDownload('pdf')"
        />
        <q-btn
          flat
          outline
          color="blue"
          dense
          icon-right="mdi-file-word"
          class="q-px-sm"
          @click="fileDownload('docx')"
        />
      </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">
        <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?.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>
        </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>
        </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?.date ? date2Thai(detail?.date) : "-" }}
            </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">
              <q-btn
                flat
                round
                color="red"
                icon="mdi-file-pdf"
                @click="detail?.pathName ? nextPage(detail?.pathName) : null"
              >
                <q-tooltip>ใบมรณบัตร</q-tooltip></q-btn
              >
            </div>
          </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>
</template>

<style lang="scss" scope>
.q-img {
  border-radius: 5px;
  height: 70px;
}
.text-top {
  color: gray;
  font-weight: 400;
  padding-bottom: 3px;
}
.text-detail {
  font-weight: 500;
}
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>