332 lines
11 KiB
Vue
332 lines
11 KiB
Vue
<!-- หน้า รายละเอียดของ -->
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import { useDataStore } from "@/stores/data";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
|
|
import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
|
|
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
|
|
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
|
|
import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
|
|
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
|
|
import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
|
|
|
|
import type {
|
|
Property,
|
|
PointExam,
|
|
Education,
|
|
Family,
|
|
Address,
|
|
} from "@/modules/05_placement/interface/index/Main.ts";
|
|
|
|
import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
|
|
|
const $q = useQuasar(); // show dialog
|
|
const router = useRouter();
|
|
const store = useDataStore();
|
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
const { showLoader, hideLoader, messageError } = mixin;
|
|
const { changeTab } = store;
|
|
const statusEdit = ref<boolean>(false);
|
|
const profileType = ref<string>("");
|
|
|
|
const route = useRoute();
|
|
const examId = ref<string>(
|
|
route.params.personalId ? route.params.personalId.toString() : ""
|
|
);
|
|
|
|
const ExamDataDefualt: PointExam = {
|
|
pointA: 0,
|
|
pointB: 0,
|
|
pointC: 0,
|
|
pointTotalA: 0,
|
|
pointTotalB: 0,
|
|
pointTotalC: 0,
|
|
point: 0,
|
|
pointTotal: 0,
|
|
examNumber: 0,
|
|
examRound: 0,
|
|
pass: "",
|
|
};
|
|
|
|
const InformationDataDefualt: Information = {
|
|
idCard: "",
|
|
prefix: "",
|
|
prefixId: "",
|
|
fullName: "",
|
|
firstname: "",
|
|
lastname: "",
|
|
nationality: "",
|
|
race: "",
|
|
dateOfBirth: new Date(),
|
|
age: "",
|
|
telephone: "",
|
|
gender: "",
|
|
genderId: "",
|
|
relationship: "",
|
|
relationshipId: "",
|
|
bloodGroup: "",
|
|
bloodGroupId: "",
|
|
religion: "",
|
|
religionId: "",
|
|
};
|
|
|
|
const FamilyDataDefualt: Family = {
|
|
couple: false,
|
|
marryPrefix: "",
|
|
marryPrefixId: "",
|
|
marryFirstName: "",
|
|
marryLastName: "",
|
|
marryOccupation: "",
|
|
fatherPrefix: "",
|
|
fatherPrefixId: "",
|
|
fatherFirstName: "",
|
|
fatherLastName: "",
|
|
fatherOccupation: "",
|
|
motherPrefix: "",
|
|
motherPrefixId: "",
|
|
motherFirstName: "",
|
|
motherLastName: "",
|
|
motherOccupation: "",
|
|
};
|
|
|
|
const AddressDataDefualt: Address = {
|
|
registSubDistrict: "",
|
|
registSubDistrictId: "",
|
|
registZipCode: "",
|
|
registDistrict: "",
|
|
registDistrictId: "",
|
|
registProvince: "",
|
|
registProvinceId: "",
|
|
currentSubDistrict: "",
|
|
currentSubDistrictId: "",
|
|
currentZipCode: "",
|
|
currentDistrict: "",
|
|
currentDistrictId: "",
|
|
currentProvince: "",
|
|
currentProvinceId: "",
|
|
registSame: false,
|
|
};
|
|
|
|
const personalData = ref({
|
|
id: "",
|
|
fullName: "",
|
|
});
|
|
const QualificationData = ref<Property[]>([]);
|
|
const ExamData = ref<PointExam>(ExamDataDefualt);
|
|
const InformationData = ref<Information>(InformationDataDefualt);
|
|
const EducationData = ref<Education[]>([]);
|
|
const FamilyData = ref<Family>(FamilyDataDefualt);
|
|
const AddressData = ref<Address>(AddressDataDefualt);
|
|
|
|
onMounted(async () => {
|
|
// await checkProfileData();
|
|
await fetchData();
|
|
await changeTab("information");
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.placementPersonalId(examId.value))
|
|
.then((res: any) => {
|
|
const data = res.data.result;
|
|
// data.value = data;
|
|
console.log(data);
|
|
personalData.value.fullName = data.fullName;
|
|
personalData.value.id = data.personalId;
|
|
|
|
InformationData.value.idCard = data.idCard;
|
|
InformationData.value.fullName = data.fullName;
|
|
InformationData.value.firstname = data.firstname;
|
|
InformationData.value.lastname = data.lastname;
|
|
InformationData.value.nationality = data.nationality;
|
|
InformationData.value.race = data.race;
|
|
InformationData.value.genderId = data.genderId;
|
|
InformationData.value.prefixId = data.prefixId;
|
|
InformationData.value.relationshipId = data.relationshipId;
|
|
InformationData.value.religionId = data.religionId;
|
|
InformationData.value.bloodGroupId = data.bloodGroupId;
|
|
InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
|
|
InformationData.value.age = data.age;
|
|
InformationData.value.telephone = data.telephone;
|
|
|
|
AddressData.value.registSame = data.registSame ?? false;
|
|
AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
|
|
AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
|
|
AddressData.value.registZipCode = data.registZipCode ?? "";
|
|
AddressData.value.registDistrict = data.registDistrict ?? "";
|
|
AddressData.value.registDistrictId = data.registDistrictId ?? "";
|
|
AddressData.value.registProvince = data.registProvince ?? "";
|
|
AddressData.value.registProvinceId = data.registProvinceId ?? "";
|
|
AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
|
|
AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
|
|
AddressData.value.currentZipCode = data.currentZipCode ?? "";
|
|
AddressData.value.currentDistrict = data.currentDistrict ?? "";
|
|
AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
|
|
AddressData.value.currentProvince = data.currentProvince ?? "";
|
|
AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
|
|
|
|
FamilyData.value.couple = data.couple ?? false;
|
|
FamilyData.value.marryPrefix = data.marryPrefix ?? "";
|
|
FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
|
|
FamilyData.value.marryFirstName = data.marryFirstName ?? "";
|
|
FamilyData.value.marryLastName = data.marryLastName ?? "";
|
|
FamilyData.value.marryOccupation = data.marryOccupation ?? "";
|
|
FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
|
|
FamilyData.value.fatherPrefixId = data.fatherPrefixId ?? "";
|
|
FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
|
|
FamilyData.value.fatherLastName = data.fatherLastName ?? "";
|
|
FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
|
|
FamilyData.value.motherPrefix = data.motherPrefix ?? "";
|
|
FamilyData.value.motherPrefixId = data.motherPrefixId ?? "";
|
|
FamilyData.value.motherFirstName = data.motherFirstName ?? "";
|
|
FamilyData.value.motherLastName = data.motherLastName ?? "";
|
|
FamilyData.value.motherOccupation = data.motherOccupation ?? "";
|
|
|
|
ExamData.value.pointA = data.pointA;
|
|
ExamData.value.pointB = data.pointB;
|
|
ExamData.value.pointC = data.pointC;
|
|
ExamData.value.point = data.point;
|
|
ExamData.value.pointTotalA = data.pointTotalA;
|
|
ExamData.value.pointTotalB = data.pointTotalB;
|
|
ExamData.value.pointTotalC = data.pointTotalC;
|
|
ExamData.value.pointTotal = data.pointTotal;
|
|
ExamData.value.examNumber = data.examNumber;
|
|
ExamData.value.examRound = data.examRound;
|
|
ExamData.value.pass = data.pass;
|
|
|
|
QualificationData.value = data.isProperty;
|
|
|
|
let listRow: Education[] = [];
|
|
data.education.map((row: any) => {
|
|
listRow.push({
|
|
id: row.id ?? "",
|
|
educationLevel: row.educationLevel ?? "",
|
|
institute: row.institute ?? "",
|
|
degree: row.degree ?? "",
|
|
field: row.field ?? "",
|
|
gpa: row.gpa ?? "",
|
|
country: row.country ?? "",
|
|
duration: row.duration ?? "",
|
|
other: row.other ?? "",
|
|
fundName: row.fundName ?? "",
|
|
durationYear: row.durationYear ?? 0,
|
|
finishDate: row.finishDate ?? new Date(),
|
|
isDate: row.isDate ?? "",
|
|
startDate: row.startDate ?? 0,
|
|
endDate: row.endDate ?? 0,
|
|
positionPath: row.positionPath ?? "",
|
|
isEducation: row.isEducation ?? "",
|
|
});
|
|
});
|
|
EducationData.value = listRow;
|
|
})
|
|
.catch((e: any) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
|
|
<div class="header-text">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.go(-1)"
|
|
/>
|
|
รายละเอียดของ {{ personalData.fullName }}
|
|
</div>
|
|
</div>
|
|
<div class="q-pb-lg">
|
|
<q-card class="row q-pb-lg">
|
|
<div id="information" name="1" class="col-12 q-pa-sm">
|
|
<Informationvue
|
|
v-model:statusEdit="statusEdit"
|
|
v-model:data="InformationData"
|
|
:fetch="fetchData"
|
|
/>
|
|
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
|
<Addressvue
|
|
v-model:statusEdit="statusEdit"
|
|
v-model:data="AddressData"
|
|
:fetch="fetchData"
|
|
/>
|
|
</div>
|
|
|
|
<div id="family" name="10" class="col-12 q-pa-sm">
|
|
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
|
<Familyvue
|
|
v-model:statusEdit="statusEdit"
|
|
v-model:data="FamilyData"
|
|
:fetch="fetchData"
|
|
/>
|
|
</div>
|
|
|
|
<div id="certicate" name="2" class="col-12 q-pa-sm">
|
|
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
|
<Certicate
|
|
v-model:statusEdit="statusEdit"
|
|
:profileType="profileType"
|
|
v-model:data="InformationData"
|
|
:fetch="fetchData"
|
|
/>
|
|
</div>
|
|
|
|
<div id="education" name="3" class="col-12 q-pa-sm">
|
|
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
|
<EducationVue
|
|
v-model:statusEdit="statusEdit"
|
|
v-model:data="EducationData"
|
|
:fetch="fetchData"
|
|
/>
|
|
</div>
|
|
|
|
<div id="examresult" name="4" class="col-12 q-pa-sm">
|
|
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
|
<ExamResult v-model:data="ExamData" />
|
|
</div>
|
|
|
|
<div id="qualification" name="5" class="col-12 q-pa-sm">
|
|
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
|
<Qualification
|
|
v-model:statusEdit="statusEdit"
|
|
v-model:data="QualificationData"
|
|
:fetch="fetchData"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.header-text {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 32px;
|
|
letter-spacing: 0.0025em;
|
|
color: #35373c;
|
|
}
|
|
|
|
.information:target {
|
|
padding-top: 84px;
|
|
}
|
|
|
|
.horizontal-line {
|
|
background-color: #f4f4f4;
|
|
height: 5px;
|
|
}
|
|
</style>
|