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

Merge branch 'nice' into develop

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-26 12:10:43 +07:00
commit 6136295d31
4 changed files with 285 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

166
src/modules/18_command/components/Step/PerviewPDF.vue Normal file
View file

@ -0,0 +1,166 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import axios from "axios";
import { useCounterMixin } from "@/stores/mixin";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const { messageError } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const dataFile = defineModel<DataFileDownload>("dataFile", { required: true });
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);
const isLoadPDF = ref<boolean>(false);
/**
* function loafFile PDF
* @param url linkLoadFile
* @param type ประเภทไฟล์
*/
async function fetchPDF(url: string, type: string) {
isLoadPDF.value = false;
axios
.get(url, {
method: "GET",
responseType: "blob",
headers: {
"Content-Type": "application/json",
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
},
})
.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;
isLoadPDF.value = true;
}, 1500);
})
.catch((err) => {
messageError($q, err);
});
}
function onClose() {
modal.value = false;
}
watch(modal, (val) => {
if (val) {
fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
} else {
pdfSrc.value = undefined;
numOfPages.value = 0;
}
});
</script>
<template>
<q-dialog
v-model="modal"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card>
<DialogHeader :close="onClose" />
<q-card-section
v-if="isLoadPDF"
bordered
class="card-pdf q-ma-md q-pa-md scroll"
style="max-height: 90vh"
>
<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"
/>
</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-section v-else>
<div class="full-width row flex-center text-accent q-gutter-sm">
<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-section>
</q-card>
</q-dialog>
</template>
<style scoped></style>

56
src/modules/18_command/components/Step/View0_Digital.vue
View file

@ -11,8 +11,10 @@ import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/18_command/interface/index/Main";
import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
import DialogHeader from "@/components/DialogHeader.vue";
import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";
const $q = useQuasar();
const route = useRoute();
@ -110,20 +112,23 @@ const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำส
const isLoad = ref<boolean>(false); //แสดงโหลด
const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
const modalPerView = ref<boolean>(false);
/**
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
*/
function onConfirmDraft() {
if (
store?.dataCommand?.commandNo !== "" &&
store?.dataCommand?.commandAffectDate !== null &&
store?.dataCommand?.commandExcecuteDate !== null
) {
modalSelect.value = true;
} else {
dialogMessageNotify(
$q,
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง วันที่ลงนาม และวันที่คำสั่งมีผลให้ครบ"
"ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง และวันที่คำสั่งมีผลให้ครบ"
);
}
}
@ -174,6 +179,7 @@ function onSubmitComment() {
function onCloseDialog() {
modalSelect.value = false;
modalComment.value = false;
isPersonSign.value = false;
}
async function fetchDoc(group: string) {
@ -253,11 +259,13 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
});
}
const dataFile = ref<DataFileDownload>();
/**
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(file: any, group: string) {
function downloadFile(file: any, group: string, isView: boolean = false) {
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
showLoader();
http
@ -270,8 +278,13 @@ function downloadFile(file: any, group: string) {
)
)
.then((res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
const data = res.data;
dataFile.value = data;
if (isView) {
modalPerView.value = true;
} else {
window.open(data.downloadUrl, "_blank");
}
})
.catch((e) => {
messageError($q, e);
@ -317,6 +330,17 @@ onMounted(async () => {
>
คำสั่ง
<q-space />
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileOrder, 'order', true)"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
v-if="fileOrder"
rounded
@ -370,6 +394,17 @@ onMounted(async () => {
>
เอกสารแนบท้าย
<q-space />
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="fileTailer"
rounded
@ -379,7 +414,7 @@ onMounted(async () => {
icon="mdi-download"
@click.prevent="downloadFile(fileTailer, 'tailer')"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
@ -650,6 +685,10 @@ onMounted(async () => {
</template>
</d-table>
</div>
<div class="col-12">
<q-checkbox v-model="isPersonSign" label="ผู้มีอำนาจลงนาม" />
</div>
</div>
</q-card-section>
<q-separator />
@ -694,6 +733,11 @@ onMounted(async () => {
</q-form>
</q-card>
</q-dialog>
<PerviewPDF
v-model:modal="modalPerView"
v-model:data-file="dataFile as DataFileDownload"
/>
</template>
<style lang="scss" scoped>

46
src/modules/18_command/components/Step/View0_Live.vue
View file

@ -9,6 +9,10 @@ import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import http from "@/plugins/http";
import config from "@/app.config";
import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";
const $q = useQuasar();
const route = useRoute();
const store = useCommandDetail();
@ -42,6 +46,7 @@ const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const isLoad = ref<boolean>(false); //แสดงโหลด
const modalPerView = ref<boolean>(false);
/**
* ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@ -178,11 +183,12 @@ async function fetchDoc(group: string) {
});
}
const dataFile = ref<DataFileDownload>();
/**
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(file: any, group: string) {
function downloadFile(file: any, group: string, isView: boolean = false) {
let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
showLoader();
http
@ -195,8 +201,13 @@ function downloadFile(file: any, group: string) {
)
)
.then((res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
const data = res.data;
dataFile.value = data;
if (isView) {
modalPerView.value = true;
} else {
window.open(data.downloadUrl, "_blank");
}
})
.catch((e) => {
messageError($q, e);
@ -326,6 +337,17 @@ onMounted(async () => {
>
คำสั่ง
<q-space />
<q-btn
v-if="fileOrder"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileOrder, 'order', true)"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn
v-if="fileOrder"
rounded
@ -379,6 +401,17 @@ onMounted(async () => {
>
เอกสารแนบท้าย
<q-space />
<q-btn
v-if="fileTailer"
rounded
flat
dense
color="primary"
icon="mdi-eye"
@click.prevent="downloadFile(fileTailer, 'tailer', true)"
>
<q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn
v-if="fileTailer"
rounded
@ -388,7 +421,7 @@ onMounted(async () => {
icon="mdi-download"
@click.prevent="downloadFile(fileTailer, 'tailer')"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
<q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
</q-btn>
</div>
<div class="col-12"><q-separator /></div>
@ -493,6 +526,11 @@ onMounted(async () => {
</div>
</span>
</div>
<PerviewPDF
v-model:modal="modalPerView"
v-model:data-file="dataFile as DataFileDownload"
/>
</template>
<style lang="scss" scoped>

28
src/modules/18_command/interface/response/Main.ts
View file

@ -32,4 +32,30 @@ interface DataCommandType {
name: string;
}
export type { ResListCommand, DataListCommand, DataCommandType };
interface DataFileDownload {
author: string;
category: [];
createdAt: string;
createdBy: string;
description: string;
downloadUrl: string;
fileName: string;
fileSize: number;
fileType: string;
hidden: boolean;
keyword: [];
metadata: {};
path: string;
pathname: string;
title: string;
updatedAt: string;
updatedBy: string;
upload: boolean;
}
export type {
ResListCommand,
DataListCommand,
DataCommandType,
DataFileDownload,
};