ui ออกคำสั่ง

This commit is contained in:
Thanit Konmek 2023-06-23 12:10:59 +07:00
parent fb1ab7669a
commit 70fb166d89
10 changed files with 1338 additions and 385 deletions

View file

@ -1,304 +1,237 @@
<!-- page:detail page สรรหา -->
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอยดของผสมครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 col-md-6">
<q-card bordered flat class="col-12 q-pa-md">
<div class="col-12 q-col-gutter-sm row items-center">
<div class="col-12 text-weight-bold">อมลทวไป</div>
<div
class="col-6 text-grey-7"
v-if="profile_id !== null"
>
เลขประจำตวประชาชน
</div>
<div
class="col-6 text-black"
v-if="profile_id !== null"
>
{{ profile_id }}
</div>
<div class="toptitle text-dark col-12 row items-center">
<q-btn
icon="mdi-arrow-"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
รายละเอยดของผสมครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
</div>
<q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-12 col-md-6">
<q-card bordered flat class="col-12 q-pa-md">
<div class="col-12 q-col-gutter-sm row items-center">
<div class="col-12 text-weight-bold">อมลทวไป</div>
<div class="col-6 text-grey-7" v-if="profile_id !== null">
เลขประจำตวประชาชน
</div>
<div class="col-6 text-black" v-if="profile_id !== null">
{{ profile_id }}
</div>
<div class="col-6 text-grey-7" v-if="prefix !== null">
คำนำหนานาม
</div>
<div class="col-6 text-black" v-if="prefix !== null">
{{ prefix }}
</div>
<div class="col-6 text-grey-7" v-if="prefix !== null">
คำนำหนานาม
</div>
<div class="col-6 text-black" v-if="prefix !== null">
{{ prefix }}
</div>
<div class="col-6 text-grey-7" v-if="fullname !== null">
-นามสก
</div>
<div class="col-6 text-black" v-if="fullname !== null">
{{ fullname }}
</div>
<div class="col-6 text-grey-7" v-if="fullname !== null">
-นามสก
</div>
<div class="col-6 text-black" v-if="fullname !== null">
{{ fullname }}
</div>
<div
class="col-6 text-grey-7"
v-if="birthdate !== null"
>
/เดอน/ เก
</div>
<div class="col-6 text-black" v-if="birthdate !== null">
{{ birthdate }}
</div>
<div class="col-6 text-grey-7" v-if="birthdate !== null">
/เดอน/ เก
</div>
<div class="col-6 text-black" v-if="birthdate !== null">
{{ birthdate }}
</div>
<div class="col-6 text-grey-7" v-if="gender !== null">
เพศ
</div>
<div class="col-6 text-black" v-if="gender !== null">
{{ gender }}
</div>
<div class="col-6 text-grey-7" v-if="gender !== null">เพศ</div>
<div class="col-6 text-black" v-if="gender !== null">
{{ gender }}
</div>
<div
class="col-6 text-grey-7"
v-if="position_name !== null"
>
ตำแหนงทสมคร
</div>
<div
class="col-6 text-black"
v-if="position_name !== null"
>
{{ position_name }}
</div>
<div class="col-6 text-grey-7" v-if="position_name !== null">
ตำแหนงทสมคร
</div>
<div class="col-6 text-black" v-if="position_name !== null">
{{ position_name }}
</div>
<div
class="col-6 text-grey-7"
v-if="university !== null"
>
สถานศกษา
</div>
<div
class="col-6 text-black"
v-if="university !== null"
>
{{ university }}
</div>
<div class="col-6 text-grey-7" v-if="university !== null">
สถานศกษา
</div>
<div class="col-6 text-black" v-if="university !== null">
{{ university }}
</div>
<div class="col-6 text-grey-7" v-if="degree !== null">
การศกษา
</div>
<div class="col-6 text-black" v-if="degree !== null">
{{ degree }}
</div>
<div class="col-6 text-grey-7" v-if="degree !== null">
การศกษา
</div>
<div class="col-6 text-black" v-if="degree !== null">
{{ degree }}
</div>
<div class="col-6 text-grey-7" v-if="major !== null">
สาขาวชาเอก
</div>
<div class="col-6 text-black" v-if="major !== null">
{{ major }}
</div>
<div class="col-6 text-grey-7" v-if="major !== null">
สาขาวชาเอก
</div>
<div class="col-6 text-black" v-if="major !== null">
{{ major }}
</div>
<div class="col-6 text-grey-7" v-if="major !== null">
จำนวนครงทสมครสอบ
</div>
<div class="col-6 text-black" v-if="major !== null">
{{ examCount }}
</div>
<div class="col-6 text-grey-7" v-if="major !== null">
จำนวนครงทสมครสอบ
</div>
<div class="col-6 text-black" v-if="major !== null">
{{ examCount }}
</div>
<div
class="col-6 text-grey-7"
v-if="cert_issuedate !== null"
>
ใบอนญาตประกอบวชาช เดอน ได
</div>
<div
class="col-6 text-black"
v-if="cert_issuedate !== null"
>
{{ cert_issuedate }}
</div>
<div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
ใบอนญาตประกอบวชาช เดอน ได
</div>
<div class="col-6 text-black" v-if="cert_issuedate !== null">
{{ cert_issuedate }}
</div>
<div
class="col-6 text-grey-7"
v-if="examAttribute !== null"
>
สถานะการคดกรองคณสมบ
</div>
<div
class="col-6 text-black"
v-if="examAttribute !== null"
>
{{ examAttribute }}
</div>
</div>
</q-card>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<q-card
bordered
flat
class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
>
<div class="col-12 row q-col-gutter-sm">
<div class="col-12 text-weight-bold row items-center">
ผลการสอบ
<q-space />
<q-btn
color="primary"
flat
round
icon="mdi-download"
v-if="examResultinscore === 'ผ่าน'"
>
<q-tooltip>ดาวนโหลดไฟล</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item
clickable
v-close-popup
@click="downloadScore()"
>
<q-item-section class="text-primary"
>ดาวนโหลดผลคะแนน</q-item-section
>
</q-item>
<q-item
clickable
v-close-popup
@click="downloadCertificate()"
>
<q-item-section class="text-blue"
>ดาวนโหลดเอกสารรบรอง</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
v-else
color="blue"
flat
round
icon="mdi-download"
@click="downloadScore()"
>
<q-tooltip>ดาวนโหลดผลคะแนน</q-tooltip>
</q-btn>
</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-6 text-grey-7" v-if="examAttribute !== null">
สถานะการคดกรองคณสมบ
</div>
<div class="col-6 text-black" v-if="examAttribute !== null">
{{ examAttribute }}
</div>
</div>
</q-card>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<q-card
bordered
flat
class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
>
<div class="col-12 row q-col-gutter-sm">
<div class="col-12 text-weight-bold row items-center">
ผลการสอบ
<q-space />
<q-btn
color="primary"
flat
round
icon="mdi-download"
v-if="examResultinscore === 'ผ่าน'"
>
<q-tooltip>ดาวนโหลดไฟล</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="downloadScore()">
<q-item-section class="text-primary"
>ดาวนโหลดผลคะแนน</q-item-section
>
</q-item>
<q-item
clickable
v-close-popup
@click="downloadCertificate()"
>
<q-item-section class="text-blue"
>ดาวนโหลดเอกสารรบรอง</q-item-section
>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
v-else
color="blue"
flat
round
icon="mdi-download"
@click="downloadScore()"
>
<q-tooltip>ดาวนโหลดผลคะแนน</q-tooltip>
</q-btn>
</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">
{{ scoreAFull }}
</div>
<div class="col-xs-3 col-sm-2 q-pr-xs">
{{ 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">
{{ scoreAFull }}
</div>
<div class="col-xs-3 col-sm-2 q-pr-xs">
{{ 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">
{{ 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">
{{ 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">
{{ 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-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 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-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">
{{ 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 }}
</div>
</div>
</div>
</q-card>
</div>
</div>
</q-card>
<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 }}
</div>
</div>
</div>
</q-card>
</div>
</div>
</q-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
@ -344,95 +277,92 @@ const importId = ref<string>(route.params.id as string); // Period Import Id
const examId = ref<string>(route.params.examId as string); //
onMounted(async () => {
await fetchData();
await fetchData();
});
const fetchData = async () => {
loaderPage(true);
await http
.get(config.API.getExamDetail(importId.value, examId.value))
.then((res) => {
let data = res.data.result;
loaderPage(true);
await http
.get(config.API.getExamDetail(importId.value, examId.value))
.then((res) => {
let data = res.data.result;
profile_id.value = data.profileID;
examID.value = data.examID;
prefix.value = data.prefix;
fullname.value = data.fullName;
birthdate.value = data.dateOfBirth;
gender.value = data.gender;
degree.value = data.degree;
major.value = data.major;
university.value = data.university;
position_name.value = data.positionName;
cert_issuedate.value = data.certificateIssueDate;
examAttribute.value = data.examAttribute;
number.value = data.number;
examCount.value = data.examCount;
score_expired.value = data.scoreExpire;
if (data.scoreResult != null) {
scoreAFull.value = data.scoreResult.scoreAFull;
scoreA.value = data.scoreResult.scoreA;
scoreBFull.value = data.scoreResult.scoreBFull;
scoreB.value = data.scoreResult.scoreB;
scoreCFull.value = data.scoreResult.scoreCFull;
scoreC.value = data.scoreResult.scoreC;
scoreSumFull.value = data.scoreResult.scoreSumFull;
scoreSum.value = data.scoreResult.scoreSum;
examResultinscore.value = data.scoreResult.examResult;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
profile_id.value = data.profileID;
examID.value = data.examID;
prefix.value = data.prefix;
fullname.value = data.fullName;
birthdate.value = data.dateOfBirth;
gender.value = data.gender;
degree.value = data.degree;
major.value = data.major;
university.value = data.university;
position_name.value = data.positionName;
cert_issuedate.value = data.certificateIssueDate;
examAttribute.value = data.examAttribute;
number.value = data.number;
examCount.value = data.examCount;
score_expired.value = data.scoreExpire;
if (data.scoreResult != null) {
scoreAFull.value = data.scoreResult.scoreAFull;
scoreA.value = data.scoreResult.scoreA;
scoreBFull.value = data.scoreResult.scoreBFull;
scoreB.value = data.scoreResult.scoreB;
scoreCFull.value = data.scoreResult.scoreCFull;
scoreC.value = data.scoreResult.scoreC;
scoreSumFull.value = data.scoreResult.scoreSumFull;
scoreSum.value = data.scoreResult.scoreSum;
examResultinscore.value = data.scoreResult.examResult;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
const downloadScore = async () => {
loaderPage(true);
await http
.get(config.API.downloadScoreReport(importId.value, examId.value), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `ผลคะแนน_${examId.value}.pdf`;
// start download
a.click();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
loaderPage(true);
await http
.get(config.API.downloadScoreReport(importId.value, examId.value), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `ผลคะแนน_${examId.value}.pdf`;
// start download
a.click();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
const downloadCertificate = async () => {
loaderPage(true);
let type = degree.value.includes("บัณฑิต") ? 2 : 1;
await http
.get(
config.API.downloadExamReport(importId.value, examId.value, type),
{
responseType: "blob",
}
)
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `เอกสารรับรอง_${examId.value}.pdf`;
// start download
a.click();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
loaderPage(true);
let type = degree.value.includes("บัณฑิต") ? 2 : 1;
await http
.get(config.API.downloadExamReport(importId.value, examId.value, type), {
responseType: "blob",
})
.then((res) => {
var a = document.createElement("a");
a.href = URL.createObjectURL(res.data);
a.download = `เอกสารรับรอง_${examId.value}.pdf`;
// start download
a.click();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
</script>