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 { 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>("");
/**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<any>([]);

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

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


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

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

//downloadFile
const downloadFile = (response: any, filename: string) => {
  const link = document.createElement("a");
  var fileName = filename;
  link.href = window.URL.createObjectURL(new Blob([response.data]));
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

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

function onclickViewinfo(id: string) {
  modalPersonal.value = true;
  personId.value = id;
}

function updatemodalPersonal(modal: boolean) {
  modalPersonal.value = modal;
}
</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(`/deceased`)"
    />
    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ 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>

  <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">{{ 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="nextPage(detail.pathName)"
              >
                <q-tooltip>ใบมรณบัตร</q-tooltip></q-btn
              >
            </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>
      </div>
    </div>
  </q-card>

  <PopupPersonal
    :modal="modalPersonal"
    :id="personId"
    @update:modal="updatemodalPersonal"
  />
</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>