ปริ้นใบคะแนน
This commit is contained in:
Kittapath
parent
ef8586f870
commit
352a4ac7d3
2 changed files with 206 additions and 110 deletions
180
src/modules/01_exam/components/ExamCard.vue
Normal file
180
src/modules/01_exam/components/ExamCard.vue
Normal file
|
|
@ -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>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<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">
|
<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">
|
<div v-if="status == 'checkRegister'" class="text-orange-6 text-bold">
|
||||||
<q-icon
|
<q-icon
|
||||||
name="mdi-timer-sand"
|
name="mdi-timer-sand"
|
||||||
|
|
@ -35,110 +35,8 @@
|
||||||
/>รอเจ้าหน้าที่จัดที่นั่งสอบ
|
/>รอเจ้าหน้าที่จัดที่นั่งสอบ
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
<ExamCard />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -147,6 +45,7 @@ import { onMounted, ref } from 'vue'
|
||||||
import http from '@/plugins/http'
|
import http from '@/plugins/http'
|
||||||
import config from '@/app.config'
|
import config from '@/app.config'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
import ExamCard from '@/modules/01_exam/components/ExamCard.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
fetchStep: {
|
fetchStep: {
|
||||||
|
|
@ -214,13 +113,30 @@ const fetchStatus = async () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const download = () => {
|
|
||||||
window.print()
|
|
||||||
}
|
|
||||||
|
|
||||||
const getClass = (val: string) => {
|
const getClass = (val: string) => {
|
||||||
return val == 'done' || val == 'checkPoint' ? 'bg-green-1' : 'bg-yellow-2'
|
return val == 'done' || val == 'checkPoint' ? 'bg-green-1' : 'bg-yellow-2'
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue