ประเมินบุคคล

src/modules/06_evaluate/components/viewstep/viewStep3.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
 
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
@@ -8,12 +10,27 @@ const props = defineProps({
   },
 });
 
-
+const modalPerview = ref<boolean>(false);
 
 const store = useEvaluateStore();
 </script>
 
 <template>
+  <div class="col-12 row">
+    <q-space />
+    <q-btn flat round color="primary" icon="download">
+      <q-tooltip>ดาวน์โหลด</q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="mdi-fullscreen"
+      @click="modalPerview = true"
+      ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
+    >
+  </div>
+
   <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
     <q-tab-panel name="1">
       <ViewPDF :pdfSrc="props.pdfSrc" />
@@ -36,6 +53,22 @@ const store = useEvaluateStore();
       <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
   </q-tab-panels>
+
+  <q-dialog v-model="modalPerview" full-width fullHeight>
+    <q-card>
+      <q-card-section>
+        <DialogHeader :close="() => (modalPerview = false)" />
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <ViewPDF :pdfSrc="props.pdfSrc" :type="'popup'" />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.q-tab-panel {
+  padding: 0px;
+}
+</style>