[UI] popup ดูข้อมูลคำสั่งที่คลิกจากตำแหน่ง/เงินเดือนในทะเบียนประวัติ
This commit is contained in:
setthawutttty
parent
c512fcdd95
commit
4139f9a052
4 changed files with 535 additions and 4 deletions
462
src/modules/18_command/components/DialogPreviewCommand.vue
Normal file
462
src/modules/18_command/components/DialogPreviewCommand.vue
Normal file
|
|
@ -0,0 +1,462 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import axios from "axios";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import type {
|
||||
DataFileOrder,
|
||||
FormDataDetail,
|
||||
} from "@/modules/18_command/interface/index/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const command = defineModel<string>("command", { required: true });
|
||||
const commandId = defineModel<string>("commandId", { required: true });
|
||||
|
||||
let formCommandList = reactive<FormDataDetail>({
|
||||
id: "",
|
||||
status: "",
|
||||
commandTypeName: "",
|
||||
commandNo: "",
|
||||
commandYear: null,
|
||||
detailHeader: "",
|
||||
detailBody: "",
|
||||
detailFooter: "",
|
||||
issue: null,
|
||||
commandAffectDate: null, //วันที่ลงนาม
|
||||
commandExcecuteDate: null, //วันที่คำสั่งมีผล
|
||||
commandSysId: "", // ประเภท คำสั่ง
|
||||
isAttachment: true,
|
||||
});
|
||||
|
||||
const tab = ref<string>("main"); //tab
|
||||
const page = ref<number>(1);
|
||||
const numOfPages = ref<number>(0); //จำนวนหน้า pdf
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
|
||||
|
||||
const dialog = ref<boolean>(false); // เปิด dialog
|
||||
const isLoadView = ref<boolean>(false);
|
||||
const isAttachment = ref<boolean>(false);
|
||||
const dataCover = ref<DataFileOrder>(); //ข้อมูลไฟล์คำสั่ง
|
||||
const dataAttachment = ref<DataFileOrder>(); //ข้อมูลไฟล์แบนท้าย
|
||||
|
||||
/** ปิด popup */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
command.value = "";
|
||||
commandId.value = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab
|
||||
* @param val ชื่อ tab
|
||||
*/
|
||||
function setTab(val: string) {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* ดึง class ตามที่ set ไว้
|
||||
*/
|
||||
function getClass(val: boolean) {
|
||||
return {
|
||||
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
||||
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
||||
};
|
||||
}
|
||||
|
||||
async function checkAttachment() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandAction(commandId.value, "tab0"))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
isAttachment.value = data.isAttachment;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นดาวห์โหลดไฟล์
|
||||
* @param type pdf/docx
|
||||
*/
|
||||
async function downloadCover(type: string) {
|
||||
if (tab.value === "main") {
|
||||
genReport(
|
||||
dataCover.value,
|
||||
`คำสั่ง ${formCommandList.issue}`,
|
||||
type,
|
||||
"?folder=command"
|
||||
);
|
||||
} else {
|
||||
genReportXLSX(
|
||||
dataAttachment.value,
|
||||
`เอกสารแนบท้าย ${formCommandList.issue}`,
|
||||
type,
|
||||
"?folder=command"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
|
||||
* @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
|
||||
*/
|
||||
async function fetchDataCommand(type: string) {
|
||||
await http
|
||||
.get(config.API.commandAction(commandId.value, `tab4/${type}`))
|
||||
.then(async (res) => {
|
||||
const dataMain = await res.data.result;
|
||||
if (type === "cover") {
|
||||
dataCover.value = dataMain;
|
||||
await fetchPDF(dataCover.value);
|
||||
} else {
|
||||
dataAttachment.value = dataMain;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังชั่นกำหนดค่าของ PDF*/
|
||||
async function fetchPDF(data: any, type: string = "docx?folder=command") {
|
||||
isLoadView.value = false;
|
||||
await axios
|
||||
.post(config.API.reportTemplate + `/${type}`, data, {
|
||||
headers: {
|
||||
accept: "application/pdf",
|
||||
"content-Type": "application/json",
|
||||
},
|
||||
responseType: "blob",
|
||||
})
|
||||
.then(async (res) => {
|
||||
const blob = new Blob([res.data]);
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
const pdfData = usePDF(`${objectUrl}`);
|
||||
setTimeout(() => {
|
||||
pdfSrc.value = pdfData.pdf.value;
|
||||
numOfPages.value = pdfData.pages.value;
|
||||
isLoadView.value = true;
|
||||
}, 1500);
|
||||
})
|
||||
.catch(async (e) => {
|
||||
messageError($q, e);
|
||||
isLoadView.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
|
||||
*
|
||||
* กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
|
||||
*/
|
||||
async function fetchDataCommandList() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.commandAction(commandId.value, "tab1"))
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
formCommandList = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
async () => {
|
||||
if (modal.value) {
|
||||
await checkAttachment();
|
||||
await fetchDataCommandList();
|
||||
showLoader();
|
||||
const promises = [fetchDataCommand("cover")];
|
||||
if (isAttachment.value) {
|
||||
promises.push(fetchDataCommand("attachment"));
|
||||
}
|
||||
await Promise.all(promises).finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* check tab เมื่อมีการเปลี่ยน tab
|
||||
*/
|
||||
watch(
|
||||
() => tab.value,
|
||||
() => {
|
||||
if (tab.value === "main") {
|
||||
fetchPDF(dataCover.value);
|
||||
}
|
||||
if (tab.value === "second") {
|
||||
fetchPDF(dataAttachment.value, "xlsx?folder=command");
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 80%">
|
||||
<DialogHeader :tittle="command" :close="closeDialog" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="space">
|
||||
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
||||
<div class="q-pr-sm">คำสั่ง</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isAttachment"
|
||||
@click="setTab('second')"
|
||||
:class="getClass(tab == 'second')"
|
||||
>
|
||||
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
class="text-dark"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-fullscreen"
|
||||
color="add"
|
||||
@click="dialog = true"
|
||||
/>
|
||||
</div>
|
||||
<q-separator style="margin-top: -1px; z-index: 1" />
|
||||
<div class="q-pa-sm">
|
||||
<div class="q-pa-sm row q-gutter-sm">
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
icon="mdi-file-pdf"
|
||||
label="ดาวน์โหลดไฟล์ PDF"
|
||||
@click="downloadCover('pdf')"
|
||||
class="q-px-sm"
|
||||
>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="tab === 'main'"
|
||||
outline
|
||||
class="q-px-sm"
|
||||
color="blue"
|
||||
icon="mdi-file-word"
|
||||
label="ดาวน์โหลดไฟล์ docx"
|
||||
@click="downloadCover('docx')"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-else
|
||||
outline
|
||||
class="q-px-sm"
|
||||
color="green"
|
||||
icon="mdi-file-excel"
|
||||
label="ดาวน์โหลดไฟล์ xlsx"
|
||||
@click="downloadCover('xlsx')"
|
||||
/>
|
||||
</div>
|
||||
<q-card bordered class="card-pdf q-mx-sm q-pa-md">
|
||||
<div class="justify-between items-center align-center q-pb-sm row">
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth" v-if="isLoadView">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
<div
|
||||
class="full-width row flex-center text-accent q-gutter-sm"
|
||||
v-else
|
||||
>
|
||||
<span
|
||||
><div
|
||||
style="
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
class="text-grey-5"
|
||||
>
|
||||
<q-spinner color="primary" size="3em" :thickness="10" />
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<q-dialog
|
||||
v-model="dialog"
|
||||
persistent
|
||||
:maximized="true"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="bg-white text-white">
|
||||
<div
|
||||
class="flex justify-end items-center align-center q-mr-md q-mt-sm"
|
||||
>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
size="12px"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
||||
<div
|
||||
class="justify-between items-center align-center q-pb-sm row"
|
||||
>
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text text-black">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<VuePDF
|
||||
ref="vuePDFRef"
|
||||
:pdf="pdfSrc"
|
||||
:page="page"
|
||||
fit-parent
|
||||
:scale="0.1"
|
||||
/>
|
||||
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
||||
</div>
|
||||
<div
|
||||
class="justify-between items-center align-center q-pt-sm row"
|
||||
>
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page > 1 ? page - 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-left" />
|
||||
</q-btn>
|
||||
|
||||
<span class="body-2 grey--text text-black">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</span>
|
||||
|
||||
<q-btn
|
||||
class="text-dark bg-grey-4"
|
||||
flat
|
||||
dense
|
||||
@click="page = page < numOfPages ? page + 1 : page"
|
||||
>
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.space {
|
||||
background-color: #e9eaec61;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.card-header-active {
|
||||
margin-top: 5px;
|
||||
margin-left: -1px;
|
||||
background-color: white;
|
||||
padding: 2px !important;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid #e9eaec;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-bottom-style: none;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-top: 5px;
|
||||
background-color: transparent;
|
||||
padding: 2px !important;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-pdf {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e9eaec;
|
||||
background-color: #e9eaec61;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue