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-12 row q-pa-md">
      <div class="col-xs-12 col-sm-8">
        <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 text-bold q-pl-sm">{{ examSeat }}</div>
        </div>
        <div class="row">
          <div class="">วันสอบ :</div>
          <div class="text-black text-bold q-pl-sm">25 มิ.ย. 2568</div>
        </div>
        <div class="row">
          <div class="">ครั้งที่สอบ :</div>
          <div class="text-black text-bold q-pl-sm">1</div>
        </div>
        <div class="row">
          <div class="">ชุดข้อสอบ :</div>
          <div class="text-black text-bold q-pl-sm">ทดสอบ</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4 row justify-center">
        <q-img
          v-if="avatar == ''"
          class="rounded-borders"
          src="@/assets/avatar_user.jpg"
          :ratio="1"
          style="width: 150px; height: 600px"
        />
        <q-img
          v-else
          class="rounded-borders"
          :src="avatar"
          :ratio="1"
          style="width: 150px; height: 600px"
        />
      </div>
    </div>
  </q-card>
  <q-card bordered flat class="q-pa-md q-mt-sm">
    <div class="col-12 text-weight-bold" v-if="scoreSumFull != 0">ผลคะแนนสอบ</div>
    <div class="row items-center q-gutter-y-sm col-12" v-if="scoreSumFull != 0">
      <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 text-center">คะแนนเต็ม</div>
      <div class="col-xs-3 col-sm-2 text-primary text-weight-bold text-center">คะแนนที่ได้</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 text-center">
        {{ scoreAFull }}
      </div>
      <div class="col-xs-3 col-sm-2 q-pr-xs text-center">
        {{ scoreA }}
      </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 text-center">
        {{ scoreBFull }}
      </div>
      <div class="col-xs-3 col-sm-2 q-pr-xs text-center">
        {{ 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 text-center">
        {{ scoreCFull }}
      </div>
      <div class="col-xs-3 col-sm-2 q-pr-xs text-center">
        {{ 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 text-center">
        {{ scoreSumFull }}
      </div>
      <div class="col-xs-3 col-sm-2 q-pr-xs text-center">
        {{ 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-grey-7">ลำดับที่สอบได้</div>
      <div class="col-xs-8 col-sm-6 q-pr-xs text-grey-7">
        {{ number }}
      </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 class="row items-center q-gutter-y-sm col-12 q-pt-md">
      <div class="col-xs-6 col-sm-5 text-grey-7">ตำแหน่ง</div>
      <div class="col-xs-6 col-sm-7 q-pr-xs">
        {{ position }}
      </div>
      <div class="col-xs-6 col-sm-5 text-grey-7">ระดับ</div>
      <div class="col-xs-6 col-sm-7 q-pr-xs">
        {{ positionLevel }}
      </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>
  </q-card>
  <q-card bordered flat class="col-12 row q-mt-md">
    <div class="q-pa-md row">
      <div class="col-12 text-weight-bold row items-center">
        แบบสอบถามความพึงพอใจ
        <q-space />
      </div>
      <div class="row items-center q-gutter-y-sm col-12">
        <div class="col-xs-4 col-sm-5 q-pr-sm text-grey-7">คะแนนความพึงพอใจ</div>
        <div class="col-xs-8 col-sm-6 q-pr-xs">
          <q-rating
            v-model="reviewPoint"
            :max="reviewPoint"
            size="2em"
            color="orange"
            class="full-width"
            readonly
          />
        </div>
        <div class="col-xs-4 col-sm-5 q-pr-sm text-grey-7">ความคิดเห็น/ข้อแนะนำ</div>
        <div class="col-xs-8 col-sm-6 q-pr-xs">
          {{ review }}
        </div>
      </div>
    </div>
  </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import http from '@/plugins/http'
import config from '@/app.config'
import { useQuasar } from 'quasar'

const $q = useQuasar()
const route = useRoute()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { date2Thai, messageError } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const fullName = ref<string>('')
const examNumber = ref<string>('')
const position = ref<string>('')
const positionLevel = ref<string>('')
const citizenId = ref<string>('')
const examSeat = ref<string>('')
const scoreAFull = ref<number | null>(null)
const scoreA = ref<number | null>(null)
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 | null>(new Date())
const number = ref<string>('')
const reviewPoint = ref<number>(0)
const review = ref<string>('-')

onMounted(async () => {
  await fetchStatus()
})

const fetchStatus = async () => {
  loaderPage(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
      scoreAFull.value = data.pointTotalA
      scoreA.value = data.pointA
      scoreBFull.value = data.pointTotalB
      scoreB.value = data.pointB
      scoreCFull.value = data.pointTotalC
      scoreC.value = data.pointC
      scoreSum.value =
        parseInt(data.pointA == null ? 0 : data.pointA) +
        parseInt(data.pointB == null ? 0 : data.pointB) +
        parseInt(data.pointC == null ? 0 : data.pointC)
      scoreSumFull.value =
        parseInt(data.pointTotalA == null ? 0 : data.pointTotalA) +
        parseInt(data.pointTotalB == null ? 0 : data.pointTotalB) +
        parseInt(data.pointTotalC == null ? 0 : data.pointTotalC)
      examResultinscore.value = data.pass
      avatar.value = data.avatar
      score_expired.value = data.announcementDate == null ? null : new Date(data.announcementDate)
      number.value = data.number
      position.value = data.position
      positionLevel.value = data.positionLevel
      reviewPoint.value = data.reviewPoint
      review.value = data.review == null ? '-' : data.review
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const download = () => {
  window.print()
}
</script>

<style scoped></style>