fix:evaluate

src/modules/12_evaluatePersonal/components/Detail/step/step3.vue

@@ -94,7 +94,7 @@ async function getPDF(url: string, type: string) {
       store.urlDownloadFile = url;
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
-
+      store.currentObjectUrl = objectUrl;
       const pdfData = await usePDF(`${objectUrl}`);
       setTimeout(() => {
         store.log = 1;

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import { VuePDF } from "@tato30/vue-pdf";
 
 /** importStore*/
@@ -14,6 +14,8 @@ const props = defineProps({
   },
 });
 
+const isPopup = computed(() => props.type === "popup");
+
 const splitterModel = ref(14);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
@@ -33,6 +35,17 @@ function backPage() {
   }
 }
 
+function onDownloadFile() {
+  if (store.currentObjectUrl) {
+    const link = document.createElement("a");
+    link.href = store.currentObjectUrl;
+    link.download = `เอกสาร.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
 watch(
   () => store.log,
   () => {
@@ -51,7 +64,57 @@ onMounted(() => {
 </script>
 
 <template>
+  <div
+    v-if="isPopup"
+    class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+  >
+    <q-btn
+      flat
+      round
+      icon="mdi-chevron-left"
+      :disable="page == 1"
+      @click="backPage"
+      color="primary"
+    />
+
+    <q-chip
+      outline
+      color="primary"
+      label-color="grey-9"
+      class="q-px-lg text-weight-bold"
+    >
+      หน้า {{ page }} / {{ numOfPages || "-" }}
+    </q-chip>
+
+    <q-btn
+      flat
+      round
+      icon="mdi-chevron-right"
+      :disable="page === numOfPages"
+      @click="nextPage"
+      color="primary"
+    />
+  </div>
+  <q-card-section v-if="isPopup" class="col scroll q-pa-md flex flex-center">
+    <div class="pdf-viewer-wrapper shadow-5">
+      <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+    </div>
+  </q-card-section>
+
+  <q-page-sticky v-if="isPopup" position="bottom-right" :offset="[20, 20]">
+    <q-btn
+      fab
+      size="xl"
+      icon="mdi-download"
+      color="primary"
+      @click="onDownloadFile"
+    >
+      <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+    </q-btn>
+  </q-page-sticky>
+
   <q-splitter
+    v-if="!isPopup"
     v-model="splitterModel"
     horizontal
     class="bg-grey-1 q-px-sm"
@@ -144,4 +207,12 @@ onMounted(() => {
   </q-splitter>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+</style>

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue

@@ -10,7 +10,7 @@ import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/Eval
 
 /** use*/
 const store = useEvaluateDetailStore();
-const modalPerview = ref<boolean>(false);  //แสดง Popup เอกสาร
+const modalPerview = ref<boolean>(false); //แสดง Popup เอกสาร
 </script>
 
 <template>
@@ -68,21 +68,35 @@ const modalPerview = ref<boolean>(false);  //แสดง Popup เอกสา
     </q-tab-panels>
   </q-card>
 
-  <q-dialog v-model="modalPerview" full-width fullHeight persistent>
-    <q-card>
-      <q-card-section>
-        <DialogHeader :close="() => (modalPerview = false)" />
-      </q-card-section>
+  <q-dialog
+    v-model="modalPerview"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :close="() => (modalPerview = false)" class="bg-white" />
 
-      <q-card-section class="q-pt-none">
-        <ViewPDF :type="'popup'" />
-      </q-card-section>
+      <ViewPDF :type="'popup'" />
     </q-card>
   </q-dialog>
 </template>
 
-<style>
+<style scoped>
 .q-tab-panel {
   padding: 0px;
 }
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
 </style>

src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue

@@ -42,17 +42,31 @@ const modalPerview = ref<boolean>(false);
     <div class="col-12"><ViewPDF class="col-12" /></div>
   </q-card>
 
-  <q-dialog v-model="modalPerview" full-width fullHeight persistent>
-    <q-card>
-      <q-card-section>
-        <DialogHeader :close="() => (modalPerview = false)" />
-      </q-card-section>
+  <q-dialog
+    v-model="modalPerview"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="column full-height bg-grey-2">
+      <DialogHeader :close="() => (modalPerview = false)" class="bg-white" />
 
-      <q-card-section class="q-pt-none">
-        <ViewPDF :type="'popup'" />
-      </q-card-section>
+      <ViewPDF :type="'popup'" />
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+</style>