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

<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.go(-1)"
    />
    รายละเอียดบันทึกเวียนแจ้งการถึงแก่กรรม {{ detail.firstName }}
    {{ detail.lastName }}
  </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">
        {{ detail.firstName + "    " + detail.lastName }}
      </div>
      <q-space />
      <q-btn
        outline
        color="blue"
        dense
        icon-right="mdi-open-in-new"
        class="q-px-sm"
        label="ดูข้อมูลทะเบียนประวัติ"
        @click="redirectToRegistry(detail.id)"
      />
    </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="@/assets/avatar_user.jpg" />
        </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.positionExecutive }}</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"
        />
        <q-btn
          flat
          outline
          color="blue"
          dense
          icon-right="mdi-file-word"
          class="q-px-sm"
        />
      </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>
    </div>
  </q-card>
</template>
<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";

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;

const profileId = ref<string>(route.params.id.toString());
const detail = ref<any>([]);

onMounted(() => {
  console.log(profileId.value);
  fectdata();
});
const fectdata = async () => {
  showLoader();
  await http
    .get(config.API.detailDeceased(profileId.value))
    .then((res) => {
      detail.value = res.data.result;
      console.log(detail.value);
    })
    .catch((e) => {
      console.log(e);
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const redirectToRegistry = (id: string) => {
  console.log(id);
  router.push(`/registry/${id}`);
};
const nextPage = (page: string) => {
  window.open(page, "_blank");
};
</script>
<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>