hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix file

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-25 11:17:13 +07:00
parent 75b0e08d2c
commit 44c5f56ab0
5 changed files with 3 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

235
src/modules/06_retirement/components/Deceased/DetailDeceased.vue Normal file
View file

@ -0,0 +1,235 @@
<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>