From 2ef5a7b8459c079fdd782fd1beda67391977efbe Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Sat, 26 Aug 2023 13:17:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AA=E0=B9=80=E0=B8=95=E0=B8=9B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/reports/api.report.ts                 |   5 +
 .../10_order/components/step/step04.vue       | 538 ++++++++++++++----
 2 files changed, 443 insertions(+), 100 deletions(-)

diff --git a/src/api/reports/api.report.ts b/src/api/reports/api.report.ts
index b7d868f5b..41314672f 100644
--- a/src/api/reports/api.report.ts
+++ b/src/api/reports/api.report.ts
@@ -12,4 +12,9 @@ export default {
     `${reportOrder}/attachment/${fileType}/${id}`,
   reportRetireList: (fileType: string, id: string) =>
     `${reportRetire}/${fileType}/${id}`,
+
+  fileCover: (format: string, fileType: string, id: string) =>
+    `${reportOrder}/${format}/cover/${fileType}/${id}`,
+  fileAttachment: (format: string, fileType: string, id: string) =>
+    `${reportOrder}/${format}/attachment/${fileType}/${id}`,
 };
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 6284cf6dd..47be1245d 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -10,7 +10,14 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -21,6 +28,7 @@ const splitterModel = ref<number>(70);
 const tab = ref<string>("main");
 
 const order = ref<string>("");
+const code = ref<string>("");
 const years = ref<number>(new Date().getDate());
 const date = ref<Date>(new Date());
 const fileOrder = ref<any>(null);
@@ -39,21 +47,69 @@ const statusOrder = ref<string>();
 const orderId = ref<string>(orderId_params.toString());
 onMounted(async () => {
   if (orderId.value) {
-    fetchReportCover('pdf', orderId.value);
-    fetchReportCover('docx', orderId.value);
-    fetchReportAttachment('pdf', orderId.value);
-    fetchReportAttachment('xlsx', orderId.value);
+    fetchReportCover("pdf", orderId.value);
+    fetchReportCover("docx", orderId.value);
+    fetchReportAttachment("pdf", orderId.value);
+    fetchReportAttachment("xlsx", orderId.value);
     fetchAttachment(orderId.value);
     fecthstatusOrder(orderId.value);
+    getType();
   }
 });
 
+const getType = async () => {
+  showLoader();
+  await http
+    .get(config.API.detailOrder(orderId.value))
+    .then(async (res) => {
+      const data = res.data.result;
+      const orderTypeCode = data.orderTypeCode;
+      code.value = orderTypeCode ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const downloadCover = async (type: string) => {
+  showLoader();
+  await http
+    .get(config.API.fileCover(code.value, type, orderId.value))
+    .then(async (res) => {
+      downloadFile(res.data.result, "คำสั่ง");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const downloadAttachment = async (type: string) => {
+  showLoader();
+  await http
+    .get(config.API.fileCover(code.value, type, orderId.value))
+    .then(async (res) => {
+      downloadFile(res.data.result, "เอกสารแนบท้าย");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 const fetchReportCover = async (type: string, orderId: string) => {
   showLoader();
   await http
     .get(config.API.reportOrderCover(type, orderId))
     .then(async (res) => {
-      if (type == 'pdf') {
+      if (type == "pdf") {
         orderCoverPdf.value = res.data.result;
         viewPDF(orderCoverPdf.value);
       } else {
@@ -73,7 +129,7 @@ const fetchReportAttachment = async (type: string, orderId: string) => {
   await http
     .get(config.API.reportOrderAttachment(type, orderId))
     .then(async (res) => {
-      if (type == 'pdf') {
+      if (type == "pdf") {
         orderAttachmentPdf.value = res.data.result;
       } else {
         orderAttachmentXlsx.value = res.data.result;
@@ -183,21 +239,27 @@ const onchangePage = (val: any) => {
   }
 };
 
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
 const save = () => {
   if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
-        dialogConfirm(
-          $q,
-          async () => {
-            await putOrderData();
-            await postfileOrder();
-            await postfileTailer();
-            await fetchAttachment(orderId.value);
-            await fecthstatusOrder(orderId.value);
-          },
-        );
-
+        dialogConfirm($q, async () => {
+          await putOrderData();
+          await postfileOrder();
+          await postfileTailer();
+          await fetchAttachment(orderId.value);
+          await fecthstatusOrder(orderId.value);
+        });
       }
     });
   }
@@ -222,15 +284,20 @@ const putOrderData = async () => {
 const postfileOrder = async () => {
   const formData = new FormData();
   formData.append("File", fileOrder.value);
-  await http.post(config.API.attachmentOrderId(orderId.value), formData).then(() => {
-    // fileOrder.value = null 
-  });
+  await http
+    .post(config.API.attachmentOrderId(orderId.value), formData)
+    .then(() => {
+      // fileOrder.value = null
+    });
 };
 const postfileTailer = async () => {
   const formData = new FormData();
   formData.append("File", fileTailer.value);
-  await http.post(config.API.attachmentFileId(orderId.value), formData).then(() => { //fileTailer.value = null 
-  });
+  await http
+    .post(config.API.attachmentFileId(orderId.value), formData)
+    .then(() => {
+      //fileTailer.value = null
+    });
 };
 
 const clickExecute = async (id: string) => {
@@ -247,7 +314,7 @@ const clickExecute = async (id: string) => {
         });
     },
     "ยืนยันการออกคำสั่ง",
-    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?"
   );
 };
 
@@ -270,32 +337,60 @@ const setTab = (val: string) => {
 };
 
 const viewFileUpload = async (url: string) => {
-  pdfFileUploadSrc.value = undefined
+  pdfFileUploadSrc.value = undefined;
   await viewPDFUpload(url);
 
-  dialogFileUpload.value = true
-}
+  dialogFileUpload.value = true;
+};
 </script>
 
 <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 size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
-                :color="tab !== 'main' ? 'grey' : 'add'">
+              <q-btn
+                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 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')"
+                    >
+                      <!-- type="a"
+                      :href="orderCoverPdf"
+                      target="_blank" -->
+                      <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 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')"
+                    >
+                      <!-- type="a"
+                      :href="orderCoverDocs"
+                      target="_blank" -->
+                      <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>
@@ -304,17 +399,41 @@ const viewFileUpload = async (url: string) => {
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download"
-                :disable="tab !== 'second'">
+              <q-btn
+                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 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')"
+                    >
+                      <!-- type="a"
+                      :href="orderAttachmentPdf"
+                      target="_blank" -->
+                      <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 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')"
+                    >
+                      <!-- type="a"
+                      :href="orderAttachmentXlsx"
+                      target="_blank" -->
+                      <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>
@@ -322,12 +441,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>
 
@@ -335,7 +466,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>
@@ -344,7 +480,12 @@ const viewFileUpload = async (url: string) => {
               <!-- <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>
 
@@ -352,7 +493,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>
@@ -360,7 +506,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>
@@ -372,17 +523,39 @@ const viewFileUpload = async (url: string) => {
                   <div>
                     <label class="text-file">คำสั่ง</label>
                     <div 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 outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
+                    <q-file
+                      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>
@@ -391,18 +564,40 @@ const viewFileUpload = async (url: string) => {
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
                     <div 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 outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
-                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
+                    <q-file
+                      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>
@@ -416,24 +611,51 @@ 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="`${'เลขที่คำสั่ง'}`" />
+                    <q-input
+                      :outlined="true"
+                      dense
+                      lazy-rules
+                      :readonly="!true"
+                      :borderless="!true"
+                      v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                    />
                   </div>
                   <div>
                     <label class="text-file">ปีที่ออกคำสั่ง</label>
-                    <datepicker menu-class-name="modalfix" v-model="years" :locale="'th'" autoApply year-picker
-                      :enableTimePicker="false" week-start="0">
+                    <datepicker
+                      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 outlined dense lazy-rules :model-value="years + 543" :rules="[
-                          (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                        ]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
+                        <q-input
+                          outlined
+                          dense
+                          lazy-rules
+                          :model-value="years + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                          ]"
+                          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>
@@ -442,8 +664,15 @@ const viewFileUpload = async (url: string) => {
                   </div>
                   <div>
                     <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
-                      :enableTimePicker="false" week-start="0">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -451,13 +680,23 @@ const viewFileUpload = async (url: string) => {
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input outlined dense class="full-width datepicker" hide-bottom-space
-                          :model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
-                          ]">
+                        <q-input
+                          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>
@@ -467,9 +706,20 @@ const viewFileUpload = async (url: string) => {
                 </div>
               </fieldset>
               <div class="flex justify-around">
-                <q-btn unelevated label="ออกคำสั่ง" :color="validateForm() ? 'public' : 'grey'"
-                  :disable="statusOrder == 'N'" @click="clickExecute(orderId)" />
-                <q-btn class="text-dark" unelevated label="ส่งไปลงนาม" color="grey" :disable="statusOrder == 'N'" />
+                <q-btn
+                  unelevated
+                  label="ออกคำสั่ง"
+                  :color="validateForm() ? 'public' : 'grey'"
+                  :disable="statusOrder == 'N'"
+                  @click="clickExecute(orderId)"
+                />
+                <q-btn
+                  class="text-dark"
+                  unelevated
+                  label="ส่งไปลงนาม"
+                  color="grey"
+                  :disable="statusOrder == 'N'"
+                />
               </div>
             </div>
           </q-form>
@@ -478,23 +728,53 @@ const viewFileUpload = async (url: string) => {
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md"
-        label="เลือกรายชื่อส่งสำเนา">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อส่งสำเนา"
+      >
       </q-btn>
-      <q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
-        @click="save">
+      <q-btn
+        unelevated
+        label="บันทึก"
+        :color="validateForm() ? 'public' : 'grey'"
+        :disable="!validateForm()"
+        @click="save"
+      >
       </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>
 
@@ -502,16 +782,32 @@ 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
+              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-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -519,7 +815,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>
@@ -527,16 +828,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>
 
@@ -544,16 +862,32 @@ 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
+              ref="vuePDFRef"
+              :pdf="pdfFileUploadSrc"
+              :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-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -561,14 +895,18 @@ 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>
         </q-card-section>
       </q-card>
     </q-dialog>
-
   </div>
 </template>