365 lines
11 KiB
Vue
365 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
|
|
import { useQuasar } from "quasar";
|
|
import type { QTableProps } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
|
const $q = useQuasar();
|
|
|
|
const props = defineProps({
|
|
Modal: Boolean,
|
|
close: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
personalId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
validate: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
});
|
|
|
|
const rows = ref<any[]>([]);
|
|
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
|
|
// const graduationDate = new Date(graduationExample);
|
|
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
|
|
|
|
//--------------------------------------------------------------------//
|
|
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "university",
|
|
align: "center",
|
|
label: "สถานศึกษา",
|
|
sortable: true,
|
|
field: "university",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "degree",
|
|
align: "center",
|
|
label: "วุฒิการศึกษา",
|
|
sortable: true,
|
|
field: "degree",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "major",
|
|
align: "center",
|
|
label: "สาขาวิชาเอก",
|
|
sortable: true,
|
|
field: "major",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "graduation",
|
|
align: "center",
|
|
label: "วันที่สำเร็จการศึกษา",
|
|
sortable: true,
|
|
field: "graduation",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
]);
|
|
const myForm = ref<any>([]);
|
|
const personalForm = ref<any>([]);
|
|
const selection = ref<any>([]);
|
|
// เมื่อ props.Modal จะเรียกข้อมูลการศึกษา
|
|
watch(props, () => {
|
|
if (props.Modal === true) {
|
|
fetchData();
|
|
}
|
|
});
|
|
// ข้อมูลการศึกษา
|
|
const fetchData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.getDatapersonal(props.personalId))
|
|
.then((res) => {
|
|
personalForm.value = res.data.result;
|
|
personalForm.value.education.map((e: any) => {
|
|
rows.value.push({
|
|
university: e.name,
|
|
degree: e.degree,
|
|
major: e.field,
|
|
graduation: date2Thai(e.finishDate),
|
|
});
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
const formBmaofficer = (val: string) => {
|
|
switch (val) {
|
|
case "OFFICER":
|
|
return "ขรก.กทม. สามัญ";
|
|
case "EMPLOYEE_PERM":
|
|
return "ลูกจ้างประจำ";
|
|
case "EMPLOYEE_TEMP":
|
|
return "ลูกจ้างชั่วคราว";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
// ปิด POPUP ข้อมูล
|
|
const close = async () => {
|
|
props.close();
|
|
selection.value = [];
|
|
rows.value = [];
|
|
};
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="props.Modal" persistent>
|
|
<q-card style="max-width: 100%; width: 80%">
|
|
<q-form ref="myForm">
|
|
<div class="row">
|
|
<DialogHeader
|
|
:title="`รายละเอียดของ ${personalForm.fullName}`"
|
|
@click="close"
|
|
/>
|
|
</div>
|
|
<q-separator />
|
|
|
|
<div class="contanier-box-main">
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">
|
|
ข้อมูลทั่วไป
|
|
<span
|
|
v-if="personalForm.bmaOfficer != null"
|
|
class="check-officer"
|
|
>
|
|
<q-icon name="mdi-check" />
|
|
{{ formBmaofficer(personalForm.bmaOfficer) }}
|
|
</span>
|
|
</div>
|
|
<div class="row q-pa-xs">
|
|
<div class="col-3 header-sub-text">
|
|
<div class="q-pb-md">เลขประจำตัวประชาชน</div>
|
|
<div>วัน/เดือน/ปีเกิด</div>
|
|
</div>
|
|
<div class="col-4 sub-text">
|
|
<div class="q-pb-md">
|
|
{{ personalForm.idCard }}
|
|
</div>
|
|
<div>
|
|
{{ date2Thai(personalForm.dateOfBirth) }}
|
|
</div>
|
|
</div>
|
|
<div class="col-2 header-sub-text">
|
|
<div class="q-pb-md">ชื่อ-นามสกุล</div>
|
|
<div>เพศ</div>
|
|
</div>
|
|
<div class="col-3 sub-text">
|
|
<div class="q-pb-md">
|
|
{{ personalForm.fullName }}
|
|
</div>
|
|
<div>
|
|
{{ personalForm.gender }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
|
|
<div class="row q-pa-xs">
|
|
<div class="col-3 header-sub-text">ที่อยู่</div>
|
|
<div class="col-9 sub-text">
|
|
{{ personalForm.address }}
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
|
<q-table
|
|
ref="table"
|
|
:rows="rows"
|
|
:columns="columns"
|
|
flat
|
|
bordered
|
|
class="custom-header-table"
|
|
virtual-scroll
|
|
:virtual-scroll-sticky-size-start="48"
|
|
dense
|
|
hide-bottom
|
|
>
|
|
</q-table>
|
|
</q-card>
|
|
</div>
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">การสอบ</div>
|
|
<div class="row q-pa-xs">
|
|
<div class="col-6">
|
|
<q-card class="card-exam q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-4 q-pa-xs header-sub-text-exam">
|
|
<div>ประเภท</div>
|
|
<div>ภาค ก</div>
|
|
<div>ภาค ข</div>
|
|
<div>ภาค ค</div>
|
|
<div>รวมทั้งหมด</div>
|
|
</div>
|
|
<div class="col-4 q-pa-xs text-right">
|
|
<div class="header-sub-text-exam-2">คะแนนที่ได้</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotalA }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotalB }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotalC }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotal }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-4 q-pa-xs header-sub-text-exam-2 text-right"
|
|
>
|
|
<div class="header-sub-text-exam-2 text-right">
|
|
ผลการสอบ
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointA }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointB }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointC }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.point }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-5 q-pt-sm q-pl-lg">
|
|
<div class="row">
|
|
<div class="col-7 header-sub-text">
|
|
<div class="q-pb-sm">ผลการสอบ</div>
|
|
<div class="q-pb-sm">ลำดับที่สอบได้</div>
|
|
<div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
|
|
</div>
|
|
<div class="col-5 sub-text-exam">
|
|
<div class="q-pb-sm">
|
|
{{ personalForm.pass }}
|
|
</div>
|
|
<div class="q-pb-sm">{{ personalForm.examNumber }}</div>
|
|
<div class="q-pb-sm">{{ personalForm.examRound }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.icon-officer {
|
|
color: #00aa86;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.check-officer {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
line-height: 26px;
|
|
color: #00aa86;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.contanier-box-main {
|
|
padding: 10px 21px 10px 21px;
|
|
}
|
|
|
|
.contanier-box-mini {
|
|
padding: 10px 0px 10px 0px;
|
|
}
|
|
|
|
.card-panding {
|
|
padding: 15px 21px 15px 21px;
|
|
}
|
|
|
|
.header-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #4f4f4f;
|
|
}
|
|
|
|
.header-sub-text {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 150%;
|
|
color: #818181;
|
|
}
|
|
|
|
.sub-text {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
letter-spacing: 0.0025em;
|
|
color: #35373c;
|
|
}
|
|
|
|
.card-exam {
|
|
border-radius: 5px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.header-sub-text-exam {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 150%;
|
|
color: #818181;
|
|
}
|
|
|
|
.header-sub-text-exam-2 {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 150%;
|
|
color: #00aa86;
|
|
}
|
|
|
|
.sub-text-exam {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.checkbox-group {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #35373c;
|
|
}
|
|
</style>
|