249 lines
9.4 KiB
Vue
249 lines
9.4 KiB
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>
|