hrms-recruit/src/modules/01_exam/components/ExamCard.vue

<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 class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
          <div class="col-xs-6 col-sm-7 q-pr-xs">
            {{ number }}
          </div>
          <div class="col-xs-6 col-sm-5 text-grey-7">วันหมดอายุบัญชีสอบคัดเลือก</div>
          <div class="col-xs-6 col-sm-7 q-pr-xs">
            {{ score_expired == null ? '' : date2Thai(score_expired) }}
          </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 { useRoute } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'

const route = useRoute()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, date2Thai } = mixin
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>('')
const score_expired = ref<Date>(new Date())
const number = 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
      if (data.pointB != null && data.pointC != null) {
        scoreSum.value = parseInt(data.pointB) + parseInt(data.pointC)
      } else if (data.pointC != null) {
        scoreSum.value = parseInt(data.pointC)
      } else if (data.pointB != null) {
        scoreSum.value = parseInt(data.pointB)
      } else {
        scoreSum.value = null
      }
      if (data.pointTotalB != null && data.pointTotalC != null) {
        scoreSumFull.value = parseInt(data.pointTotalB) + parseInt(data.pointTotalC)
      } else if (data.pointTotalC != null) {
        scoreSumFull.value = parseInt(data.pointTotalC)
      } else if (data.pointTotalB != null) {
        scoreSumFull.value = parseInt(data.pointTotalB)
      } else {
        scoreSumFull.value = null
      }
      scoreC.value = data.pointC
      examResultinscore.value = data.pass
      avatar.value = data.avatar
      score_expired.value = new Date(data.announcementDate)
      number.value = data.number
    })
    .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>