201 lines
6.9 KiB
Vue
201 lines
6.9 KiB
Vue
<template>
|
|
<q-card bordered flat class="col-12 row">
|
|
<div class="col-9 q-pa-md q-col-gutter-sm">
|
|
<div class="row">
|
|
<div class="">ชื่อ :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="">เลขประจำตัวประชาชน :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ citizenId }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="">เลขประจำตัวสอบ :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
|
|
</div>
|
|
<div class="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">5 มิ.ย. 2566</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">0506-1/2566</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-card-section class="col-3">
|
|
<q-img
|
|
v-if="avatar == ''"
|
|
class="rounded-borders"
|
|
src="@/assets/avatar_user.jpg"
|
|
:ratio="1"
|
|
/>
|
|
<q-img v-else class="rounded-borders" :src="avatar" :ratio="1" />
|
|
</q-card-section>
|
|
</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 text-weight-bold 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 text-weight-bold">
|
|
รวมทั้งหมด
|
|
</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-4 col-sm-5 q-pr-sm text-grey-7">ลำดับที่สอบได้</div>
|
|
<div class="col-xs-8 col-sm-6 q-pr-xs">
|
|
{{ number }}
|
|
</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">
|
|
{{ score_expired == null ? "" : date2Thai(score_expired) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import { useQuasar } from "quasar";
|
|
|
|
const props = defineProps({
|
|
status: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
candidateId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
const { messageError, date2Thai, showLoader, hideLoader } = mixin;
|
|
|
|
const fullName = ref<string>("");
|
|
const examNumber = ref<string>("");
|
|
const citizenId = ref<string>("");
|
|
const examSeat = ref<string>("");
|
|
const number = 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());
|
|
|
|
onMounted(async () => {
|
|
await fetchCard();
|
|
});
|
|
|
|
const fetchCard = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.candidateCard(props.candidateId))
|
|
.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((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|