รายละเอียดคำสั่ง => Tab พรีวิวคำสั่ง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
5d33b1babb
commit
d3b9cb9cc4
3 changed files with 127 additions and 106 deletions
|
|
@ -1,33 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import axios from "axios";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import axios from "axios";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
import type { DataFileOrder } from "@/modules/18_command/interface/response/Main";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
success,
|
||||
} = mixin;
|
||||
const { messageError, showLoader, hideLoader } = mixin;
|
||||
|
||||
const commandId = ref<string>(route.params.id.toString());
|
||||
|
||||
const isChangeData = defineModel<boolean>("isChangeData", { required: true });
|
||||
const isAttachment = defineModel<boolean>("isAttachment", { required: true });
|
||||
const { onCheckChangeData } = defineProps({
|
||||
onCheckChangeData: { type: Function, required: true },
|
||||
});
|
||||
|
||||
const tab = ref<string>("main"); //tab
|
||||
const page = ref<number>(1);
|
||||
|
|
@ -35,28 +30,37 @@ const numOfPages = ref<number>(0); //จำนวนหน้า pdf
|
|||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
|
||||
|
||||
const dialog = ref<boolean>(false); // เปิด dialog
|
||||
const isLoadView = ref<boolean>(false);
|
||||
const dataCover = ref<DataFileOrder>(); //ข้อมูลไฟล์คำสั่ง
|
||||
const dataAttachment = ref<DataFileOrder>(); //ข้อมูลไฟล์แบนท้าย
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab
|
||||
* @param val ชื่อ tab
|
||||
* ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
|
||||
* @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
|
||||
*/
|
||||
function setTab(val: string) {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึง 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,
|
||||
};
|
||||
}
|
||||
function onSubmit() {}
|
||||
|
||||
/** ฟังชั่นจองลอง แสดง pdf */
|
||||
async function genPDf(data: any, type: string = "docx") {
|
||||
showLoader();
|
||||
/**
|
||||
* ฟังชั่นกำหนดค่าของ PDF
|
||||
*
|
||||
*/
|
||||
async function fetchPDF(data: any, type: string = "docx?folder=command") {
|
||||
isLoadView.value = false;
|
||||
await axios
|
||||
.post(config.API.reportTemplate + `/${type}`, data, {
|
||||
headers: {
|
||||
|
|
@ -68,17 +72,16 @@ async function genPDf(data: any, type: string = "docx") {
|
|||
.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;
|
||||
hideLoader();
|
||||
isLoadView.value = true;
|
||||
}, 1500);
|
||||
})
|
||||
.catch(async (e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
isLoadView.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -87,88 +90,62 @@ async function genPDf(data: any, type: string = "docx") {
|
|||
* @param type pdf/docx
|
||||
*/
|
||||
async function downloadCover(type: string) {
|
||||
genReport(
|
||||
tab.value == "main" ? data1 : data2,
|
||||
`${
|
||||
tab.value == "main"
|
||||
? "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
|
||||
: "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
|
||||
}`,
|
||||
type
|
||||
);
|
||||
if (tab.value === "main") {
|
||||
genReport(
|
||||
dataCover.value,
|
||||
"คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
|
||||
type
|
||||
);
|
||||
} else {
|
||||
genReportXLSX(
|
||||
dataAttachment.value,
|
||||
"เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
|
||||
type
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/** ข้อมูลจำลอง */
|
||||
const data1 = {
|
||||
template: "C-PM-01",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
commandNo: "",
|
||||
commandYear: "๒๕๖๗",
|
||||
issuerOrganizationName: "",
|
||||
conclusionRegisterNo: "test",
|
||||
conclusionRegisterDate: "๒ สิงหาคม ๒๕๖๗",
|
||||
conclusionResultNo: "test",
|
||||
conclusionResultDate: "๓ สิงหาคม ๒๕๖๗",
|
||||
positionList: "",
|
||||
count: "๑",
|
||||
commandAffectDate: "๑ สิงหาคม ๒๕๖๗",
|
||||
authorizedUserFullName: "นายวิษณุ สุวรรณรัตน์",
|
||||
authorizedPosition: "ผู้อำนวยการ",
|
||||
subject: "เรื่อง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
|
||||
},
|
||||
};
|
||||
const data2 = {
|
||||
template: "C-PM-01-attachment",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
commandNo: "",
|
||||
commandYear: "๒๕๖๗",
|
||||
issuerOrganizationName: "",
|
||||
commandExcecuteDate: "-",
|
||||
data: [
|
||||
{
|
||||
citizenId: "๒๔๕๙๙๐๐๐๑๙๖๘๐",
|
||||
fullName: "นางสาวบุปผารัตน์ สีลาเหลี่ยม",
|
||||
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||||
positionName: "นักบริหาร",
|
||||
positionLevel: "ต้น",
|
||||
positionType: "บริหาร",
|
||||
positionNumber: "สกก.๒",
|
||||
salary: "๑๒,๐๐๐",
|
||||
appointDate: "๒๓ ส.ค. ๖๗",
|
||||
examNumber: "๑",
|
||||
placementName: "สอบแข่งขันนักคอมพิวเตอร์ ครั้งที่ ๑/๒๕๖๗",
|
||||
seq: "๑",
|
||||
education: "การศึกษาบัณฑิต",
|
||||
remarkHorizontal:
|
||||
"โดยมีเงื่อนไขว่าต้องปฏิบัติงานให้กรุงเทพมหานครเป็นระยะเวลาไม่น้อยกว่า ๕ ปี นับแต่วันที่ได้รับการบรรจุและแต่งตั้ง โดยห้ามโอนไปหน่วยงานหรือส่วนราชการอื่น เว้นเเต่ลาออกจากราชการ",
|
||||
remarkVertical: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
/**
|
||||
* เปลี่ยน tab
|
||||
* @param val ชื่อ tab
|
||||
*/
|
||||
function setTab(val: string) {
|
||||
tab.value = val;
|
||||
page.value = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
|
||||
* ดึง class ตามที่ set ไว้
|
||||
*/
|
||||
defineExpose({
|
||||
onSubmit,
|
||||
});
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
||||
/** check tab เมื่อมีการเปลี่ยน tab */
|
||||
/**
|
||||
* check tab เมื่อมีการเปลี่ยน tab
|
||||
*/
|
||||
watch(tab, () => {
|
||||
if (tab.value === "main") {
|
||||
genPDf(data1);
|
||||
fetchPDF(dataCover.value);
|
||||
}
|
||||
if (tab.value === "second") {
|
||||
genPDf(data2);
|
||||
fetchPDF(dataAttachment.value, "xlsx?folder=command");
|
||||
}
|
||||
});
|
||||
|
||||
/** hook */
|
||||
onMounted(async () => {
|
||||
await genPDf(data1);
|
||||
showLoader();
|
||||
const promises = [fetchDataCommand("cover")];
|
||||
if (isAttachment.value) {
|
||||
promises.push(fetchDataCommand("attachment"));
|
||||
}
|
||||
await Promise.all(promises).finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -209,14 +186,24 @@ onMounted(async () => {
|
|||
</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>
|
||||
/>
|
||||
|
||||
<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">
|
||||
|
|
@ -242,9 +229,25 @@ onMounted(async () => {
|
|||
<q-icon name="mdi-chevron-right" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="pdfWidth">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue