From 352a4ac7d37d4769bcc5e8269fd161b2058e5d10 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Fri, 28 Apr 2023 00:08:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B4=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=E0=B9=83=E0=B8=9A=E0=B8=84=E0=B8=B0=E0=B9=81=E0=B8=99=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_exam/components/ExamCard.vue   | 180 ++++++++++++++++++
 .../01_exam/components/ExamFinished.vue       | 136 +++----------
 2 files changed, 206 insertions(+), 110 deletions(-)
 create mode 100644 src/modules/01_exam/components/ExamCard.vue

diff --git a/src/modules/01_exam/components/ExamCard.vue b/src/modules/01_exam/components/ExamCard.vue
new file mode 100644
index 0000000..458ed95
--- /dev/null
+++ b/src/modules/01_exam/components/ExamCard.vue
@@ -0,0 +1,180 @@
+<template>
+  <q-card bordered flat class="col-12 row" id="print">
+    <div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
+      บัตรประจำตัวผู้สอบ
+      <q-space />
+      <q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
+        <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="col-8 q-pa-md">
+      <div class="q-pt-xs row">
+        <div class="">ชื่อ :</div>
+        <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
+      </div>
+      <div class="q-pt-xs row">
+        <div class="">เลขประจำตัวประชาชน :</div>
+        <div class="text-black text-bold q-pl-sm">{{ citizenId }}</div>
+      </div>
+      <div class="q-pt-xs row">
+        <div class="">เลขประจำตัวสอบ :</div>
+        <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
+      </div>
+      <!-- <div class="q-pt-xs row">
+            <div class="">เวลาสอบ :</div>
+            <div class="text-black q-pl-sm">{{ examTime }}</div>
+          </div> -->
+      <div class="q-pt-xs row">
+        <div class="">เลขที่นั่งสอบ :</div>
+        <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
+      </div>
+      <div class="q-pt-xs row">
+        <!-- <div class="">คะแนน</div>
+            <div class="text-black text-bold q-pl-sm">{{ point }}</div> -->
+        <div class="col-12 text-weight-bold">ผลการสอบ</div>
+        <div class="row items-center q-gutter-y-sm col-12">
+          <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
+          <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
+          <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนที่ได้</div>
+          <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
+
+          <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
+          <div class="col-xs-3 col-sm-2 q-pr-xs">
+            {{ scoreBFull }}
+          </div>
+          <div class="col-xs-3 col-sm-2 q-pr-xs">
+            {{ scoreB }}
+          </div>
+          <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+
+          <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
+          <div class="col-xs-3 col-sm-2 q-pr-xs">
+            {{ scoreCFull }}
+          </div>
+          <div class="col-xs-3 col-sm-2 q-pr-xs">
+            {{ scoreC }}
+          </div>
+          <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+
+          <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
+          <div class="col-xs-3 col-sm-2 q-pr-xs">
+            {{ scoreSumFull }}
+          </div>
+          <div class="col-xs-3 col-sm-2 q-pr-xs">
+            {{ scoreSum }}
+          </div>
+          <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+
+          <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
+          <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
+            <span :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'">{{
+              examResultinscore
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="q-pt-xs row">
+            <div class="">ห้องสอบ :</div>
+            <div class="text-black q-pl-sm">{{ examRoom }}</div>
+          </div>
+          <div class="q-pt-xs row">
+            <div class="">เลขที่นั่ง :</div>
+            <div class="text-black q-pl-sm">{{ seatNumber }}</div>
+          </div> -->
+    </div>
+
+    <q-card-section class="col-4 flex flex-center">
+      <q-img
+        v-if="avatar == ''"
+        class="rounded-borders"
+        src="@/assets/avatar_user.jpg"
+        :ratio="1"
+        style="max-width: 300px; max-height: 300px"
+      />
+      <q-img
+        v-else
+        class="rounded-borders"
+        :src="avatar"
+        :ratio="1"
+        style="max-width: 300px; max-height: 300px"
+      />
+    </q-card-section>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
+const loader = ref<boolean>(false)
+const fullName = ref<string>('')
+const examNumber = ref<string>('')
+const citizenId = ref<string>('')
+const examSeat = ref<string>('')
+const scoreBFull = ref<number | null>(null)
+const scoreB = ref<number | null>(null)
+const scoreCFull = ref<number | null>(null)
+const scoreC = ref<number | null>(null)
+const scoreSumFull = ref<number | null>(null)
+const scoreSum = ref<number | null>(null)
+const examResultinscore = ref<string>('')
+const avatar = ref<string>('')
+
+onMounted(async () => {
+  await fetchStatus()
+})
+
+const fetchStatus = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateCard(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      fullName.value = data.prefix + data.firstName + ' ' + data.lastName
+      examNumber.value = data.examIdenNumber
+      citizenId.value = data.citizenId
+      examSeat.value = data.seatNumber
+      scoreBFull.value = data.pointTotalB
+      scoreB.value = data.pointB
+      scoreCFull.value = data.pointTotalC
+      scoreC.value = data.pointC
+      scoreSumFull.value =
+        data.pointTotalB == null || data.pointTotalC == null
+          ? null
+          : parseInt(data.pointTotalB) + parseInt(data.pointTotalC)
+      scoreSum.value =
+        data.pointB == null || data.pointC == null
+          ? null
+          : parseInt(data.pointB) + parseInt(data.pointC)
+      scoreC.value = data.pointC
+      examResultinscore.value = data.pass
+      avatar.value = data.avatar
+    })
+    .catch(() => {
+      //   acceptTermOfUse.value = false
+    })
+    .finally(() => {
+      loader.value = false
+    })
+}
+
+const download = () => {
+  window.print()
+  //   var printContent = document.getElementById('print')
+  //   var WinPrint = window.open()
+  //   if (WinPrint != null && printContent != null) {
+  //     WinPrint.document.write(printContent.innerHTML)
+  //     // WinPrint.document.close()
+  //     // WinPrint.focus()
+  //     // WinPrint.print()
+  //     // WinPrint.close()
+  //   }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 03ec7d8..ad55f31 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="q-pa-md row items-center justify-center">
+  <div class="q-pa-md row items-center justify-center" id="noPrint">
     <div class="col-xs-12 col-sm-8 col-md-6">
-      <q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
+      <q-card flat class="q-pa-md q-mb-sm" id="noPrint" :class="getClass(status)">
         <div v-if="status == 'checkRegister'" class="text-orange-6 text-bold">
           <q-icon
             name="mdi-timer-sand"
@@ -35,110 +35,8 @@
           />รอเจ้าหน้าที่จัดที่นั่งสอบ
         </div>
       </q-card>
-
-      <q-card bordered flat class="col-12 row">
-        <div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
-          บัตรประจำตัวผู้สอบ
-          <q-space />
-          <q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
-            <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
-          </q-btn>
-        </div>
-        <div class="col-8 q-pa-md">
-          <div class="q-pt-xs row">
-            <div class="">ชื่อ :</div>
-            <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
-          </div>
-          <div class="q-pt-xs row">
-            <div class="">เลขประจำตัวประชาชน :</div>
-            <div class="text-black text-bold q-pl-sm">{{ citizenId }}</div>
-          </div>
-          <div class="q-pt-xs row">
-            <div class="">เลขประจำตัวสอบ :</div>
-            <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
-          </div>
-          <!-- <div class="q-pt-xs row">
-            <div class="">เวลาสอบ :</div>
-            <div class="text-black q-pl-sm">{{ examTime }}</div>
-          </div> -->
-          <div class="q-pt-xs row">
-            <div class="">เลขที่นั่งสอบ :</div>
-            <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
-          </div>
-          <div class="q-pt-xs row">
-            <!-- <div class="">คะแนน</div>
-            <div class="text-black text-bold q-pl-sm">{{ point }}</div> -->
-            <div class="col-12 text-weight-bold">ผลการสอบ</div>
-            <div class="row items-center q-gutter-y-sm col-12">
-              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนที่ได้</div>
-              <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
-
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreBFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreB }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
-
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreCFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreC }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
-
-              <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreSumFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreSum }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
-
-              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
-              <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
-                <span :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'">{{
-                  examResultinscore
-                }}</span>
-              </div>
-            </div>
-          </div>
-          <!-- <div class="q-pt-xs row">
-            <div class="">ห้องสอบ :</div>
-            <div class="text-black q-pl-sm">{{ examRoom }}</div>
-          </div>
-          <div class="q-pt-xs row">
-            <div class="">เลขที่นั่ง :</div>
-            <div class="text-black q-pl-sm">{{ seatNumber }}</div>
-          </div> -->
-        </div>
-
-        <q-card-section class="col-4 flex flex-center">
-          <q-img
-            v-if="avatar == ''"
-            class="rounded-borders"
-            src="@/assets/avatar_user.jpg"
-            :ratio="1"
-            style="max-width: 300px; max-height: 300px"
-          />
-          <q-img
-            v-else
-            class="rounded-borders"
-            :src="avatar"
-            :ratio="1"
-            style="max-width: 300px; max-height: 300px"
-          />
-        </q-card-section>
-      </q-card>
+      <ExamCard />
     </div>
-    <!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
   </div>
 </template>
 
@@ -147,6 +45,7 @@ import { onMounted, ref } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useRoute } from 'vue-router'
+import ExamCard from '@/modules/01_exam/components/ExamCard.vue'
 
 const props = defineProps({
   fetchStep: {
@@ -214,13 +113,30 @@ const fetchStatus = async () => {
     })
 }
 
-const download = () => {
-  window.print()
-}
-
 const getClass = (val: string) => {
   return val == 'done' || val == 'checkPoint' ? 'bg-green-1' : 'bg-yellow-2'
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+@page {
+  size: A4;
+  margin: 0;
+}
+/* #print {
+  display: none;
+  visibility: none;
+} */
+
+@media print {
+  @page {
+    margin-left: 0.8in;
+    margin-right: 0.8in;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+.nonePrint {
+  display: none;
+}
+</style>