hrms-mgt/src/modules/03_recruiting/components/ExamFinished.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

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 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 reviewPoint = ref<any>();
const review = ref<string>("-");

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;
      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;
      reviewPoint.value = data.reviewPoint;
      review.value = data.review == null ? "-" : data.review;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>
<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>

    <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 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 text-weight-bold">
          รวมทั้งหมด
        </div>
        <div class="col-xs-2 col-sm-2 q-pr-xs text-center">
          {{ scoreSumFull }}
        </div>
        <div class="col-xs-2 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-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>
  <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>

<style lang="scss" scoped></style>