hrms-mgt/src/modules/06_retirement/components/05_deceased/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";
import genReport from "@/plugins/genreport";

import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";

import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
import type { ResDetailDeceased } from "@/modules/06_retirement/interface/response/Deceased";

import CardProfile from "@/components/CardProfile.vue";

/**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>();

/** นำข้อมูลจาก API มาแสดง */
async function fetchData() {
  showLoader();
  await http
    .get(config.API.detailDeceased(profileId.value))
    .then((res) => {
      const data = res.data.result;
      dataProfile.value = data as DataProfile;
      detail.value = data;
      fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

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

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

/**
 * ฟังก์ชั่น ดาว์โหลด
 * @param type typeของรายละเอียด
 */
async function fileDownload(type: string) {
  showLoader();
  await http
    .get(config.API.DeceasedReport(type, profileId.value))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(
        data,
        `รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม-${fullName.value}`,
        type
      );
      hideLoader();
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
      hideLoader();
    })
    .finally(() => {});
}

/** Hook */
onMounted(() => {
  fetchData();
});
</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="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">
        <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>
    <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>
            <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>
    </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>

<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>