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

refactor ออกคำสั่ง

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-22 10:47:31 +07:00
parent 8dfa5ca02e
commit 3802d5d5a2
8 changed files with 526 additions and 916 deletions
Download patch file Download diff file Expand all files Collapse all files

540
src/modules/10_order/components/step/step04.vue
View file

@ -55,7 +55,7 @@ onMounted(async () => {
hideLoader();
}
});
// เรียกข้อมูลคำสั่ง
const getCommandDetail = async () => {
await http
.get(config.API.detailOrder(orderId.value))
@ -85,7 +85,7 @@ const getCommandDetail = async () => {
messageError($q, e);
});
};
// โหลดคำสั่ง
const downloadCover = async (type: string) => {
showLoader();
await http
@ -102,7 +102,7 @@ const downloadCover = async (type: string) => {
hideLoader();
});
};
// โหลด เอกสารแนบท้าย
const downloadAttachment = async (type: string) => {
showLoader();
await http
@ -119,7 +119,7 @@ const downloadAttachment = async (type: string) => {
hideLoader();
});
};
// เรียกไฟล์ คำสั่ง
const fetchReportCover = async (type: string, orderId: string) => {
await http
.get(config.API.reportOrderCover(type, orderId, code.value), {
@ -137,7 +137,7 @@ const fetchReportCover = async (type: string, orderId: string) => {
messageError($q, e);
});
};
// เรียกไฟล์ เอกสารแนบท้าย
const fetchReportAttachment = async (type: string, orderId: string) => {
await http
.get(config.API.reportOrderAttachment(type, orderId, code.value), {
@ -159,7 +159,6 @@ const fetchAttachment = async (orderId: string) => {
.get(config.API.attachmentOrder(orderId))
.then(async (res) => {
let response = res.data.result;
order.value = response.orderNo;
years.value = Number(response.orderYear);
if (response.date !== undefined) {
@ -176,7 +175,7 @@ const fetchAttachment = async (orderId: string) => {
messageError($q, e);
});
};
// สถานะคำสั่ง
const fecthstatusOrder = async () => {
await http
.get(config.API.orderReady(orderId.value))
@ -188,7 +187,7 @@ const fecthstatusOrder = async () => {
messageError($q, e);
});
};
// แสดงไฟล์ PDF
const viewPDF = async (pdf: string) => {
const pdfData = await usePDF(`${pdf}`);
showLoader();
@ -198,7 +197,7 @@ const viewPDF = async (pdf: string) => {
hideLoader();
}, 1500);
};
// แสดงไฟล์อัพโหล PDF
const viewPDFUpload = async (pdf: string) => {
const pdfData = await usePDF(`${pdf}`);
showLoader();
@ -246,7 +245,7 @@ const onchangePage = (val: any) => {
vuePDFRef.value.reload();
}
};
// ดาวน์โหลดไฟล์
const downloadFile = (response: any, filename: string) => {
const link = document.createElement("a");
var fileName = filename;
@ -317,7 +316,6 @@ const saveDetail = () => {
// แสดงผลส่วนของแนบท้ายใหม่
await viewPDF(orderAttachmentPdf.value);
}
}
// ดึงข้อมูลสถานะการออกคำสั่ง (Y = ออกคำสั่งได้แล้ว, N = เงื่อนไขยังไม่ครบไม่สามารถกดออกคำสั่งได้)
@ -346,7 +344,7 @@ const putOrderData = async () => {
messageError($q, e);
});
};
// บันทึกไฟล์คำสั่ง
const postfileOrder = async () => {
const formData = new FormData();
formData.append("File", fileOrder.value);
@ -359,7 +357,7 @@ const postfileOrder = async () => {
messageError($q, e);
});
};
//บันทึกไฟล์ เอกสารแนบท้าย
const postfileTailer = async () => {
const formData = new FormData();
formData.append("File", fileTailer.value);
@ -372,7 +370,7 @@ const postfileTailer = async () => {
messageError($q, e);
});
};
// การออกคำสั่ง
const clickExecute = async (id: string) => {
dialogConfirm(
$q,
@ -396,7 +394,6 @@ const clickExecute = async (id: string) => {
"ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?"
);
};
const validateFormUpload = () => {
if (
code.value != "c-pm-10" &&
@ -446,61 +443,96 @@ const viewFileUpload = async (url: string) => {
<template>
<div>
<div style="min-height: 70vh">
<q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
<q-splitter
v-model="splitterModel"
style="height: 70vh"
@update:model-value="onchangePage"
>
<template v-slot:before>
<div class="space">
<div @click="setTab('main')" :class="getClass(tab == 'main')">
<div class="q-pr-sm">คำสั่ง</div>
<q-btn v-if="orderStatusName != 'ออกคำสั่งแล้ว'" size="12px" flat dense icon="mdi-download"
:disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
<q-btn
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'main'"
:color="tab !== 'main' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="downloadCover('pdf')">
<!-- type="a"
:href="orderCoverPdf"
target="_blank" -->
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item
clickable
v-close-popup
@click="downloadCover('pdf')"
>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="downloadCover('docx')">
<!-- type="a"
:href="orderCoverDocs"
target="_blank" -->
<q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
<q-item
clickable
v-close-popup
@click="downloadCover('docx')"
>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div v-if="code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
" @click="setTab('second')" :class="getClass(tab == 'second')">
<div
v-if="
code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
"
@click="setTab('second')"
:class="getClass(tab == 'second')"
>
<div class="q-pr-sm">เอกสารแนบท้าย</div>
<q-btn v-if="orderStatusName != 'ออกคำสั่งแล้ว'" size="12px" flat dense
:color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
<q-btn
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
size="12px"
flat
dense
:color="tab !== 'second' ? 'grey' : 'add'"
icon="mdi-download"
:disable="tab !== 'second'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="downloadAttachment('pdf')">
<!-- type="a"
:href="orderAttachmentPdf"
target="_blank" -->
<q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
<q-item
clickable
v-close-popup
@click="downloadAttachment('pdf')"
>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="downloadAttachment('xlsx')">
<!-- type="a"
:href="orderAttachmentXlsx"
target="_blank" -->
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item
clickable
v-close-popup
@click="downloadAttachment('xlsx')"
>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>ไฟล์ .xls</q-item-section>
</q-item>
</q-list>
@ -508,12 +540,24 @@ const viewFileUpload = async (url: string) => {
</q-btn>
</div>
<q-space />
<q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
<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" />
<q-card 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-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -521,16 +565,25 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<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 />
<!-- <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-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -538,7 +591,12 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<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>
@ -546,7 +604,12 @@ const viewFileUpload = async (url: string) => {
</template>
<template v-slot:separator>
<q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
<q-avatar
color="primary"
text-color="white"
size="30px"
icon="drag_indicator"
/>
</template>
<template v-slot:after>
@ -558,47 +621,94 @@ const viewFileUpload = async (url: string) => {
<div>
<label class="text-file">คำสั่ง</label>
<div v-if="OrderPDFUpload != ''" class="text-right">
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
@click="viewFileUpload(OrderPDFUpload)">
<q-btn
size="12px"
flat
dense
color="primary"
icon="mdi-eye"
@click="viewFileUpload(OrderPDFUpload)"
>
<q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
</q-btn>
<q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-btn
type="a"
:href="OrderPDFUpload"
size="12px"
flat
dense
color="red"
icon="mdi-download"
target="_blank"
>
<q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
</q-btn>
</div>
<q-file v-if="orderStatusName != 'ออกคำสั่งแล้ว'" outlined dense v-model="fileOrder"
label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']" accept=".pdf">
<q-file
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
outlined
dense
v-model="fileOrder"
label="เลือกไฟล์คำสั่ง"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div v-if="code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
">
<div
v-if="
code != 'c-pm-10' &&
code != 'c-pm-11' &&
code != 'c-pm-12' &&
code != 'c-pm-16' &&
code != 'c-pm-18' &&
code != 'c-pm-19' &&
code != 'c-pm-20' &&
code != 'c-pm-21'
"
>
<label class="text-file">เอกสารแนบท้าย</label>
<div v-if="TailerPDFUpload != ''" class="text-right">
<q-btn size="12px" flat dense color="primary" icon="mdi-eye"
@click="viewFileUpload(TailerPDFUpload)">
<q-btn
size="12px"
flat
dense
color="primary"
icon="mdi-eye"
@click="viewFileUpload(TailerPDFUpload)"
>
<q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
</q-btn>
<q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
target="_blank">
<q-btn
type="a"
:href="TailerPDFUpload"
size="12px"
flat
dense
color="red"
icon="mdi-download"
target="_blank"
>
<q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
</q-btn>
</div>
<q-file v-if="orderStatusName != 'ออกคำสั่งแล้ว'" outlined dense v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
<q-file
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
outlined
dense
v-model="fileTailer"
label="เลือกไฟล์เอกสารแนบท้าย"
hide-bottom-space
lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
@ -606,15 +716,26 @@ const viewFileUpload = async (url: string) => {
</div>
<!-- บันทึกอัพโหลดเอกสาร -->
<div v-if="orderStatusName != 'ออกคำสั่งแล้ว'" class="row col-12 q-mt-md">
<div
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
class="row col-12 q-mt-md"
>
<q-space></q-space>
<q-btn unelevated label="บันทึก" :color="validateFormUpload() &&
orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
" :disable="!validateFormUpload() ||
orderStatusName == 'ออกคำสั่งแล้ว'
" @click="saveUpload">
<q-btn
unelevated
label="บันทึก"
:color="
validateFormUpload() &&
orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
"
:disable="
!validateFormUpload() ||
orderStatusName == 'ออกคำสั่งแล้ว'
"
@click="saveUpload"
>
</q-btn>
</div>
</div>
@ -627,25 +748,54 @@ const viewFileUpload = async (url: string) => {
<div class="q-gutter-y-md q-mb-md">
<div>
<label class="text-file">เลขที่คำสั่ง</label>
<q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`" :disable="orderStatusName == 'ออกคำสั่งแล้ว'" />
<q-input
:outlined="true"
dense
lazy-rules
:readonly="!true"
:borderless="!true"
v-model="order"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
hide-bottom-space
:label="`${'เลขที่คำสั่ง'}`"
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
/>
</div>
<div>
<label class="text-file">ปีที่ออกคำสั่ง</label>
<datepicker :disabled="orderStatusName == 'ออกคำสั่งแล้ว'" menu-class-name="modalfix" v-model="years"
:locale="'th'" autoApply year-picker :enableTimePicker="false" week-start="0">
<datepicker
:disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
menu-class-name="modalfix"
v-model="years"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input :disable="orderStatusName == 'ออกคำสั่งแล้ว'" outlined dense lazy-rules
:model-value="years + 543" :rules="[
<q-input
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
outlined
dense
lazy-rules
:model-value="years + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
]"
hide-bottom-space
:label="`${'ปีที่ออกคำสั่ง'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
</q-icon>
</template>
</q-input>
@ -654,8 +804,16 @@ const viewFileUpload = async (url: string) => {
</div>
<div>
<label class="text-file">วันที่ลงนาม</label>
<datepicker :disabled="orderStatusName == 'ออกคำสั่งแล้ว'" menu-class-name="modalfix" v-model="date"
:locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<datepicker
:disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
menu-class-name="modalfix"
v-model="date"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -663,13 +821,24 @@ const viewFileUpload = async (url: string) => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input :disable="orderStatusName == 'ออกคำสั่งแล้ว'" outlined dense
class="full-width datepicker" hide-bottom-space
:model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
<q-input
:disable="orderStatusName == 'ออกคำสั่งแล้ว'"
outlined
dense
class="full-width datepicker"
hide-bottom-space
:model-value="date != null ? date2Thai(date) : null"
:label="`${'วันที่ลงนาม'}`"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
]">
]"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-grey)"
>
</q-icon>
</template>
</q-input>
@ -678,13 +847,24 @@ const viewFileUpload = async (url: string) => {
</div>
<!-- บันทึกรายละเอียดคำสั่ง -->
<div v-if="orderStatusName != 'ออกคำสั่งแล้ว'" class="row col-12 q-mt-md">
<div
v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
class="row col-12 q-mt-md"
>
<q-space></q-space>
<q-btn unelevated label="บันทึก" :color="validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
" :disable="!validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
" @click="saveDetail">
<q-btn
unelevated
label="บันทึก"
:color="
validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
? 'public'
: 'grey'
"
:disable="
!validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
"
@click="saveDetail"
>
</q-btn>
</div>
</div>
@ -696,13 +876,26 @@ const viewFileUpload = async (url: string) => {
</div>
<q-separator />
<div class="flex justify-end q-pa-sm q-gutter-sm">
<q-btn v-if="orderStatusName !== 'ออกคำสั่งแล้ว'" dense outline color="primary" icon="chevron_left"
@click="previous" class="q-pr-md" label="เลือกรายชื่อส่งสำเนา">
<q-btn
v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
dense
outline
color="primary"
icon="chevron_left"
@click="previous"
class="q-pr-md"
label="เลือกรายชื่อส่งสำเนา"
>
</q-btn>
<!-- ออกคำสั่ง -->
<q-btn v-if="orderStatusName !== 'ออกคำสั่งแล้ว'" :disable="statusOrder == 'N'" unelevated label="ออกคำสั่ง"
:color="statusOrder == 'Y' ? 'public' : 'grey'">
<q-btn
v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
:disable="statusOrder == 'N'"
unelevated
label="ออกคำสั่ง"
:color="statusOrder == 'Y' ? 'public' : 'grey'"
>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="clickExecute(orderId)">
@ -715,18 +908,42 @@ const viewFileUpload = async (url: string) => {
</q-menu>
</q-btn>
<q-btn v-else disable unelevated label="ออกคำสั่งเสร็จสิ้น" color="green"></q-btn>
<q-btn
v-else
disable
unelevated
label="ออกคำสั่งเสร็จสิ้น"
color="green"
></q-btn>
</div>
<q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
<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 />
<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-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -734,16 +951,31 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<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" /> -->
<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-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -751,7 +983,12 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<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>
@ -759,16 +996,33 @@ const viewFileUpload = async (url: string) => {
</q-card>
</q-dialog>
<q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
transition-hide="slide-down">
<q-dialog
v-model="dialogFileUpload"
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 />
<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-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -776,16 +1030,31 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<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="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
<VuePDF
ref="vuePDFRef"
:pdf="pdfFileUploadSrc"
: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-btn
class="text-dark bg-grey-4"
flat
dense
@click="page = page > 1 ? page - 1 : page"
>
<q-icon name="mdi-chevron-left" />
</q-btn>
@ -793,7 +1062,12 @@ const viewFileUpload = async (url: string) => {
หน้าที่ {{ page }} จาก {{ numOfPages }}
</span>
<q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
<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>