ปริ้นใบคะแนน
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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue