ต่อ api บรรจุ
This commit is contained in:
Thanit Konmek
parent
78ca0ceff7
commit
211ee33310
14 changed files with 1142 additions and 799 deletions
|
|
@ -3,89 +3,330 @@
|
|||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
|
||||
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 Family from "@/modules/05_placement/components/PersonalDetail/Information/Family.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.toString());
|
||||
const examId = ref<string>(
|
||||
route.params.personalId ? route.params.personalId.toString() : ""
|
||||
);
|
||||
|
||||
const FormData = reactive<any>({
|
||||
fullName: examId,
|
||||
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");
|
||||
// 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)" />
|
||||
รายละเอียดของ {{ FormData.fullName }}
|
||||
</div>
|
||||
<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 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" :profileType="profileType" />
|
||||
</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>
|
||||
<Family v-model:statusEdit="statusEdit" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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 />
|
||||
</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" />
|
||||
</div>
|
||||
</q-card>
|
||||
</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;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.0025em;
|
||||
color: #35373c;
|
||||
}
|
||||
|
||||
.information:target {
|
||||
padding-top: 84px;
|
||||
padding-top: 84px;
|
||||
}
|
||||
|
||||
.horizontal-line {
|
||||
background-color: #F4F4F4;
|
||||
height: 5px;
|
||||
background-color: #f4f4f4;
|
||||
height: 5px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,18 +13,30 @@ import type {
|
|||
DataProps,
|
||||
} from "@/modules/05_placement/interface/request/Education";
|
||||
import type { ResponseObject } from "@/modules/05_placement/interface/response/Education";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { EduOps } from "@/modules/05_placement/interface/index/Main";
|
||||
import type {
|
||||
EduOps,
|
||||
Education,
|
||||
DataOption,
|
||||
} from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
data: {
|
||||
type: Array as PropType<Education[]>,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -74,9 +86,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
|
|||
const filterHistory = ref<string>(""); //search data table history
|
||||
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
||||
const profileId = ref<string>('');
|
||||
const profileId = ref<string>("");
|
||||
// const profileId = ref<string>(route.params.id.toString());
|
||||
const rows = ref<RequestItemsObject[]>([]);
|
||||
const rows = ref<Education[]>(props.data);
|
||||
const filter = ref<string>(""); //search data table
|
||||
const visibleColumns = ref<String[]>([]);
|
||||
profileData.education.columns.length == 0
|
||||
|
|
@ -459,8 +471,8 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|||
});
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchLevel();
|
||||
// await fetchPositionPath();
|
||||
await fetchLevel();
|
||||
await fetchPositionPath();
|
||||
// await fetchData();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,101 +1,137 @@
|
|||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type { PointExam } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<PointExam>,
|
||||
default: {
|
||||
pointA: 0,
|
||||
pointB: 0,
|
||||
pointC: 0,
|
||||
pointTotalA: 0,
|
||||
pointTotalB: 0,
|
||||
pointTotalC: 0,
|
||||
point: 0,
|
||||
pointTotal: 0,
|
||||
examNumber: 0,
|
||||
examRound: 0,
|
||||
pass: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
|
||||
<q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
|
||||
<span class="text-bold text-subtitle2">ผลการสอบ</span>
|
||||
</div>
|
||||
<div class="row q-px-md">
|
||||
<div class="col-7">
|
||||
<q-card class="card-exam">
|
||||
<div class="row q-px-md q-py-sm">
|
||||
<div class="col q-pa-xs header-sub-text-exam">
|
||||
<div class="q-pb-xs"> ประเภท </div>
|
||||
<div class="q-pb-xs"> ภาค ก </div>
|
||||
<div class="q-pb-xs"> ภาค ข </div>
|
||||
<div class="q-pb-xs"> ภาค ค </div>
|
||||
<div> รวมทั้งหมด </div>
|
||||
</div>
|
||||
<div class="col q-pa-xs">
|
||||
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
|
||||
<div class="sub-text-exam q-pb-xs">200</div>
|
||||
<div class="sub-text-exam q-pb-xs">200</div>
|
||||
<div class="sub-text-exam q-pb-xs">100</div>
|
||||
<div class="sub-text-exam ">500</div>
|
||||
</div>
|
||||
<div class="col q-pa-xs header-sub-text-exam-2">
|
||||
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
|
||||
<div class="sub-text-exam q-pb-xs">133</div>
|
||||
<div class="sub-text-exam q-pb-xs">149</div>
|
||||
<div class="sub-text-exam q-pb-xs">100</div>
|
||||
<div class="sub-text-exam q-pb-xs">382</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col q-pl-xl">
|
||||
<q-card class="q-pt-xs">
|
||||
<div class="header-text-right q-px-xs">ผลการสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">ผ่าน</div>
|
||||
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">3</div>
|
||||
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">5</div>
|
||||
</q-card>
|
||||
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
|
||||
<q-icon
|
||||
name="mdi-briefcase-edit"
|
||||
size="1.5em"
|
||||
color="grey-5"
|
||||
class="q-pr-md"
|
||||
/>
|
||||
<span class="text-bold text-subtitle2">ผลการสอบ</span>
|
||||
</div>
|
||||
<div class="row q-px-md">
|
||||
<div class="col-7">
|
||||
<q-card class="card-exam">
|
||||
<div class="row q-px-md q-py-sm">
|
||||
<div class="col q-pa-xs header-sub-text-exam">
|
||||
<div class="q-pb-xs">ประเภท</div>
|
||||
<div class="q-pb-xs">ภาค ก</div>
|
||||
<div class="q-pb-xs">ภาค ข</div>
|
||||
<div class="q-pb-xs">ภาค ค</div>
|
||||
<div>รวมทั้งหมด</div>
|
||||
</div>
|
||||
<div class="col q-pa-xs">
|
||||
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
|
||||
<div class="sub-text-exam q-pb-xs">
|
||||
{{ props.data.pointTotalA }}
|
||||
</div>
|
||||
<div class="sub-text-exam q-pb-xs">
|
||||
{{ props.data.pointTotalB }}
|
||||
</div>
|
||||
<div class="sub-text-exam q-pb-xs">
|
||||
{{ props.data.pointTotalC }}
|
||||
</div>
|
||||
<div class="sub-text-exam">{{ props.data.pointTotal }}</div>
|
||||
</div>
|
||||
<div class="col q-pa-xs header-sub-text-exam-2">
|
||||
<div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
|
||||
<div class="sub-text-exam q-pb-xs">{{ props.data.pointA }}</div>
|
||||
<div class="sub-text-exam q-pb-xs">{{ props.data.pointB }}</div>
|
||||
<div class="sub-text-exam q-pb-xs">{{ props.data.pointC }}</div>
|
||||
<div class="sub-text-exam q-pb-xs">{{ props.data.point }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col q-pl-xl">
|
||||
<q-card class="q-pt-xs">
|
||||
<div class="header-text-right q-px-xs">ผลการสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
|
||||
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examNumber }}
|
||||
</div>
|
||||
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examRound }}
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.header-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #4F4F4F;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.header-text-right {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
color: #818181;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.sub-text-right {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 150%;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 150%;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.0025em;
|
||||
color: #35373C;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.0025em;
|
||||
color: #35373c;
|
||||
}
|
||||
|
||||
.card-exam {
|
||||
border-radius: 5px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 5px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.header-sub-text-exam {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: #818181;
|
||||
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;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: #00aa86;
|
||||
}
|
||||
|
||||
.sub-text-exam {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ const props = defineProps({
|
|||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
|
|||
|
|
@ -27,6 +27,10 @@ const props = defineProps({
|
|||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
|
|
@ -198,56 +202,55 @@ const fetchHistory = async () => {
|
|||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
|
||||
familyData.value.childrens = [];
|
||||
|
||||
// loaderPage(true);
|
||||
// await http
|
||||
// .get(config.API.profileFamiId(route.params.id.toString()))
|
||||
// .then((res) => {
|
||||
// const data: ResponseObject = res.data.result;
|
||||
// familyData.value.prefixC = "";
|
||||
// familyData.value.prefixIdC = data.couplePrefixId;
|
||||
// familyData.value.firstnameC = data.coupleFirstName;
|
||||
// familyData.value.lastnameC = data.coupleLastName;
|
||||
// familyData.value.lastnameCOld = data.coupleLastNameOld;
|
||||
// familyData.value.occupationC = data.coupleCareer;
|
||||
// familyData.value.prefixM = "";
|
||||
// familyData.value.prefixIdM = data.fatherPrefixId;
|
||||
// const data: ResponseObject = res.data.result;
|
||||
// familyData.value.prefixC = "";
|
||||
// familyData.value.prefixIdC = data.couplePrefixId;
|
||||
// familyData.value.firstnameC = data.coupleFirstName;
|
||||
// familyData.value.lastnameC = data.coupleLastName;
|
||||
// familyData.value.lastnameCOld = data.coupleLastNameOld;
|
||||
// familyData.value.occupationC = data.coupleCareer;
|
||||
// familyData.value.prefixM = "";
|
||||
// familyData.value.prefixIdM = data.fatherPrefixId;
|
||||
|
||||
// familyData.value.firstnameM = data.fatherFirstName;
|
||||
// familyData.value.lastnameM = data.fatherLastName;
|
||||
// familyData.value.occupationM = data.fatherCareer;
|
||||
// familyData.value.prefixF = "";
|
||||
// familyData.value.prefixIdF = data.motherPrefixId;
|
||||
// familyData.value.firstnameM = data.fatherFirstName;
|
||||
// familyData.value.lastnameM = data.fatherLastName;
|
||||
// familyData.value.occupationM = data.fatherCareer;
|
||||
// familyData.value.prefixF = "";
|
||||
// familyData.value.prefixIdF = data.motherPrefixId;
|
||||
|
||||
// familyData.value.firstnameF = data.motherFirstName;
|
||||
// familyData.value.lastnameF = data.motherLastName;
|
||||
// familyData.value.occupationF = data.motherCareer;
|
||||
// familyData.value.same = data.couple ? "1" : "0";
|
||||
// familyData.value.firstnameF = data.motherFirstName;
|
||||
// familyData.value.lastnameF = data.motherLastName;
|
||||
// familyData.value.occupationF = data.motherCareer;
|
||||
// familyData.value.same = data.couple ? "1" : "0";
|
||||
|
||||
// if (data.childrens.length > 0) {
|
||||
// let dataChild: childrenFamily[] = [];
|
||||
// data.childrens.map((row: childrenFamily, index: number) => {
|
||||
// dataChild.push({
|
||||
// id: `${index + 1}`,
|
||||
// childrenPrefixId: row.childrenPrefixId,
|
||||
// childrenFirstName: row.childrenFirstName,
|
||||
// childrenLastName: row.childrenLastName,
|
||||
// childrenCareer: row.childrenCareer,
|
||||
// });
|
||||
// });
|
||||
// familyData.value.childrens = dataChild;
|
||||
// } else {
|
||||
// familyData.value.childrens = [];
|
||||
// }
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// loaderPage(false);
|
||||
// });
|
||||
// if (data.childrens.length > 0) {
|
||||
// let dataChild: childrenFamily[] = [];
|
||||
// data.childrens.map((row: childrenFamily, index: number) => {
|
||||
// dataChild.push({
|
||||
// id: `${index + 1}`,
|
||||
// childrenPrefixId: row.childrenPrefixId,
|
||||
// childrenFirstName: row.childrenFirstName,
|
||||
// childrenLastName: row.childrenLastName,
|
||||
// childrenCareer: row.childrenCareer,
|
||||
// });
|
||||
// });
|
||||
// familyData.value.childrens = dataChild;
|
||||
// } else {
|
||||
// familyData.value.childrens = [];
|
||||
// }
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// loaderPage(false);
|
||||
// });
|
||||
};
|
||||
|
||||
const editData = async () => {
|
||||
|
|
@ -1094,6 +1097,6 @@ const getClass = (val: boolean) => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.q-card {
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,26 +2,23 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { useQuasar } from "quasar";
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import type {
|
||||
RequestItemsHistoryObject,
|
||||
Columns,
|
||||
} from "@/modules/05_placement/interface/request/Information";
|
||||
import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
|
||||
|
||||
import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useProfileDataStore } from "@/modules/05_placement/store";
|
||||
import type { QTableColumn, QForm } from "quasar";
|
||||
|
||||
import type { QForm } from "quasar";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
|
|
@ -32,6 +29,14 @@ const props = defineProps({
|
|||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
data: {
|
||||
type: Object as PropType<Information>,
|
||||
default: defaultInformation,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
|
|
@ -47,16 +52,11 @@ const {
|
|||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const dataStore = useDataStore();
|
||||
const { loaderPage } = dataStore;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
const edit = ref<boolean>(false);
|
||||
const informaData = ref<Information>(defaultInformation);
|
||||
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
|
||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
|
||||
const filterHistory = ref<string>(""); //search data table history
|
||||
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
||||
const informaData = ref<Information>(props.data);
|
||||
const age = ref<boolean>(true);
|
||||
const myform = ref<QForm | null>(null);
|
||||
const Ops = ref<InformationOps>({
|
||||
|
|
@ -89,214 +89,17 @@ const OpsFilter = ref<InformationOps>({
|
|||
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
|
||||
],
|
||||
});
|
||||
const columnsHistory = ref<QTableColumn[]>([
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขบัตรประจำตัวประชาชน",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "prefix",
|
||||
align: "left",
|
||||
label: "คำนำหน้า",
|
||||
sortable: true,
|
||||
field: "prefix",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ",
|
||||
sortable: true,
|
||||
field: "firstName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "lastName",
|
||||
align: "left",
|
||||
label: "นามสกุล",
|
||||
sortable: true,
|
||||
field: "lastName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "birthDate",
|
||||
align: "left",
|
||||
label: "วัน/เดือน/ปี เกิด",
|
||||
sortable: true,
|
||||
field: "birthDate",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "gender",
|
||||
align: "left",
|
||||
label: "เพศ",
|
||||
sortable: true,
|
||||
field: "gender",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "relationship",
|
||||
align: "left",
|
||||
label: "สถานภาพ",
|
||||
sortable: true,
|
||||
field: "relationship",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "bloodGroup",
|
||||
align: "left",
|
||||
label: "หมู่เลือด",
|
||||
sortable: true,
|
||||
field: "bloodGroup",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "nationality",
|
||||
align: "left",
|
||||
label: "สัญชาติ",
|
||||
sortable: true,
|
||||
field: "nationality",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "race",
|
||||
align: "left",
|
||||
label: "เชื้อชาติ",
|
||||
sortable: true,
|
||||
field: "race",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "religion",
|
||||
align: "left",
|
||||
label: "ศาสนา",
|
||||
sortable: true,
|
||||
field: "religion",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "telephoneNumber",
|
||||
align: "left",
|
||||
label: "เบอร์โทร",
|
||||
sortable: true,
|
||||
field: "telephoneNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeType",
|
||||
align: "left",
|
||||
label: "ประเภทการจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "employeeClass",
|
||||
align: "left",
|
||||
label: "ประเภทลูกจ้าง",
|
||||
sortable: true,
|
||||
field: "employeeClass",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ดำเนินการ",
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่แก้ไข",
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumnsHistory = ref<String[]>([
|
||||
"citizenId",
|
||||
"prefix",
|
||||
"firstName",
|
||||
"lastName",
|
||||
"birthDate",
|
||||
"gender",
|
||||
"relationship",
|
||||
"bloodGroup",
|
||||
"nationality",
|
||||
"race",
|
||||
"religion",
|
||||
"telephoneNumber",
|
||||
"employeeType",
|
||||
"employeeClass",
|
||||
"createdFullName",
|
||||
"createdAt",
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchPerson();
|
||||
// await fetchData();
|
||||
await fetchPerson();
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
|
||||
const onCancel = async () => {
|
||||
// if (myform.value != null) {
|
||||
// myform.value.reset();
|
||||
// }
|
||||
// await fetchData();
|
||||
if (myform.value != null) {
|
||||
myform.value.reset();
|
||||
}
|
||||
await props.fetch();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -364,56 +167,6 @@ const fetchPerson = async () => {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
||||
*/
|
||||
const clickHistory = async () => {
|
||||
modalHistory.value = true;
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileInforHisId(route.params.id.toString()))
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
rowsHistory.value = [];
|
||||
data.map((e: RequestItemsHistoryObject) => {
|
||||
rowsHistory.value.push({
|
||||
citizenId: e.citizenId,
|
||||
prefix: e.prefix,
|
||||
firstName: e.firstName,
|
||||
lastName: e.lastName,
|
||||
birthDate: new Date(e.birthDate),
|
||||
gender: e.gender,
|
||||
relationship: e.relationship,
|
||||
bloodGroup: e.bloodGroup,
|
||||
nationality: e.nationality,
|
||||
race: e.race,
|
||||
religion: e.religion,
|
||||
telephoneNumber: e.telephoneNumber,
|
||||
employeeType:
|
||||
e.employeeType == "gov"
|
||||
? "งบประมาณเงินอุดหนุนรัฐบาล"
|
||||
: e.employeeType == "bkk"
|
||||
? "งบประมาณกรุงเทพมหานคร"
|
||||
: "-",
|
||||
employeeClass:
|
||||
e.employeeClass == "perm"
|
||||
? "ลูกจ้างประจำ"
|
||||
: e.employeeClass == "temp"
|
||||
? "ลูกจ้างชั่วคราว"
|
||||
: "-",
|
||||
createdFullName: e.createdFullName,
|
||||
createdAt: new Date(e.createdAt),
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
|
|
@ -472,7 +225,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
|
|||
};
|
||||
|
||||
const handleDate = async (modelData: Date) => {
|
||||
informaData.value.birthDate = modelData;
|
||||
informaData.value.dateOfBirth = modelData;
|
||||
await calRetire(modelData);
|
||||
};
|
||||
|
||||
|
|
@ -500,91 +253,51 @@ const calRetire = async (birth: Date) => {
|
|||
});
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
const editData = async () => {
|
||||
if (age.value == false) {
|
||||
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
|
||||
return;
|
||||
}
|
||||
|
||||
const body: any = {
|
||||
citizenId: informaData.value.idCard,
|
||||
prefixId: informaData.value.prefixId,
|
||||
firstName: informaData.value.firstname,
|
||||
lastName: informaData.value.lastname,
|
||||
genderId: informaData.value.genderId,
|
||||
nationality: informaData.value.nationality,
|
||||
race: informaData.value.race,
|
||||
religionId: informaData.value.religionId,
|
||||
birthDate: informaData.value.dateOfBirth,
|
||||
bloodGroupId: informaData.value.bloodGroupId,
|
||||
relationshipId: informaData.value.relationshipId,
|
||||
telephoneNumber: informaData.value.telephone,
|
||||
};
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.profileInforId(route.params.id.toString()))
|
||||
.then(async (res: any) => {
|
||||
const data: ResponseObject = res.data.result;
|
||||
informaData.value.cardid = data.citizenId;
|
||||
informaData.value.prefix = "";
|
||||
informaData.value.prefixId = data.prefixId;
|
||||
informaData.value.firstname = data.firstName;
|
||||
informaData.value.lastname = data.lastName;
|
||||
informaData.value.birthDate = new Date(data.birthDate);
|
||||
informaData.value.genderId = data.genderId;
|
||||
informaData.value.bloodId = data.bloodGroupId;
|
||||
informaData.value.nationality = data.nationality;
|
||||
informaData.value.ethnicity = data.race;
|
||||
informaData.value.statusId = data.relationshipId;
|
||||
informaData.value.religionId = data.religionId;
|
||||
informaData.value.tel = data.telephoneNumber;
|
||||
informaData.value.age = data.age;
|
||||
informaData.value.employeeType = data.employeeType;
|
||||
informaData.value.employeeClass = data.employeeClass;
|
||||
informaData.value.profileType = data.profileType;
|
||||
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
|
||||
if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
|
||||
columnsHistory.value.splice(13, 1);
|
||||
columnsHistory.value.splice(12, 1);
|
||||
}
|
||||
.put(
|
||||
config.API.placementInformationId(route.params.personalId.toString()),
|
||||
body
|
||||
)
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
.finally(async () => {
|
||||
edit.value = false;
|
||||
emit("update:statusEdit", false);
|
||||
await props.fetch();
|
||||
await changeBirth(informaData.value.dateOfBirth ?? new Date());
|
||||
});
|
||||
};
|
||||
|
||||
const editData = async () => {
|
||||
// if (age.value == false) {
|
||||
// modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
|
||||
// return;
|
||||
// }
|
||||
// const body: any = {
|
||||
// citizenId: informaData.value.cardid,
|
||||
// prefixId: informaData.value.prefixId,
|
||||
// firstName: informaData.value.firstname,
|
||||
// lastName: informaData.value.lastname,
|
||||
// genderId: informaData.value.genderId,
|
||||
// nationality: informaData.value.nationality,
|
||||
// race: informaData.value.ethnicity,
|
||||
// religionId: informaData.value.religionId,
|
||||
// birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
|
||||
// bloodGroupId: informaData.value.bloodId,
|
||||
// relationshipId: informaData.value.statusId,
|
||||
// telephoneNumber: informaData.value.tel,
|
||||
// createdAt: new Date(),
|
||||
// age: null,
|
||||
// employeeType: informaData.value.employeeType,
|
||||
// employeeClass: informaData.value.employeeClass,
|
||||
// profileType: informaData.value.profileType,
|
||||
// createdFullName: "-",
|
||||
// };
|
||||
// showLoader();
|
||||
// await http
|
||||
// .put(config.API.profileInforId(route.params.id.toString()), body)
|
||||
// .then((res) => {
|
||||
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// edit.value = false;
|
||||
// emit("update:statusEdit", false);
|
||||
// await fetchData();
|
||||
// await changeBirth(informaData.value.birthDate ?? new Date());
|
||||
// });
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
if (myform.value != null) {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
await editData();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -621,7 +334,6 @@ const getClass = (val: boolean) => {
|
|||
:changeBtn="changeBtn"
|
||||
:disable="statusEdit"
|
||||
:cancel="onCancel"
|
||||
:historyClick="clickHistory"
|
||||
/>
|
||||
<q-form ref="myform" class="col-12">
|
||||
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
|
||||
|
|
@ -634,7 +346,7 @@ const getClass = (val: boolean) => {
|
|||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.cardid"
|
||||
v-model="informaData.idCard"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
|
||||
|
|
@ -702,7 +414,7 @@ const getClass = (val: boolean) => {
|
|||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<datepicker
|
||||
v-model="informaData.birthDate"
|
||||
v-model="informaData.dateOfBirth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
|
|
@ -726,7 +438,7 @@ const getClass = (val: boolean) => {
|
|||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:model-value="date2Thai(informaData.birthDate)"
|
||||
:model-value="date2Thai(informaData.dateOfBirth)"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||
>
|
||||
|
|
@ -793,7 +505,7 @@ const getClass = (val: boolean) => {
|
|||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.statusId"
|
||||
v-model="informaData.relationshipId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
@ -818,7 +530,7 @@ const getClass = (val: boolean) => {
|
|||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.bloodId"
|
||||
v-model="informaData.bloodGroupId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
|
|
@ -855,7 +567,7 @@ const getClass = (val: boolean) => {
|
|||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.ethnicity"
|
||||
v-model="informaData.race"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
|
||||
:label="`${'เชื้อชาติ'}`"
|
||||
/>
|
||||
|
|
@ -885,7 +597,7 @@ const getClass = (val: boolean) => {
|
|||
) "
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
|
|
@ -895,7 +607,7 @@ const getClass = (val: boolean) => {
|
|||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="informaData.tel"
|
||||
v-model="informaData.telephone"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
|
||||
|
|
@ -903,90 +615,8 @@ const getClass = (val: boolean) => {
|
|||
:label="`${'เบอร์โทร'}`"
|
||||
mask="##########"
|
||||
/>
|
||||
</div> -->
|
||||
<div
|
||||
class="col-xs-6 col-sm-4 col-md-4"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.employeeType"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeTypeOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทการจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col-xs-6 col-sm-2 col-md-2"
|
||||
v-if="informaData.profileType == 'employee'"
|
||||
>
|
||||
<selector
|
||||
:hide-dropdown-icon="!edit"
|
||||
hide-bottom-space
|
||||
:class="getClass(edit)"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.employeeClass"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.employeeClassOps"
|
||||
option-value="id"
|
||||
:label="`${'ประเภทลูกจ้าง'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
<HistoryTable
|
||||
:rows="rowsHistory"
|
||||
:columns="columnsHistory"
|
||||
:filter="filterHistory"
|
||||
:visible-columns="visibleColumnsHistory"
|
||||
v-model:modal="modalHistory"
|
||||
v-model:inputfilter="filterHistory"
|
||||
v-model:inputvisible="visibleColumnsHistory"
|
||||
v-model:tittle="tittleHistory"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props">
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div
|
||||
v-if="col.name == 'birthDate' || col.name == 'createdAt'"
|
||||
class="table_ellipsis"
|
||||
>
|
||||
{{ date2Thai(col.value) }}
|
||||
</div>
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</HistoryTable>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ const notiNoEdit = () => {
|
|||
const closeModalError = () => {
|
||||
modalNoEdit.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12 items-center">
|
||||
|
|
@ -51,7 +50,7 @@ const closeModalError = () => {
|
|||
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
|
||||
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
||||
|
||||
<div>
|
||||
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
|
|
@ -60,7 +59,7 @@ const closeModalError = () => {
|
|||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.horizontal-line {
|
||||
background-color: #F4F4F4;
|
||||
background-color: #f4f4f4;
|
||||
height: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,69 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QForm } from 'quasar';
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { PropType } from "vue";
|
||||
import type { Property } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
modalError,
|
||||
} = mixin;
|
||||
const route = useRoute();
|
||||
const { showLoader, hideLoader, messageError, success } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
notiNoEdit: {
|
||||
data: {
|
||||
type: Array as PropType<Property[]>,
|
||||
default: [],
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
const emit = defineEmits(["update:statusEdit", "update:data"]);
|
||||
|
||||
const edit = ref<boolean>(false);
|
||||
const myform = ref<QForm | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
|
||||
const saveData = async () => {
|
||||
if (myform.value != null) {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
await editData();
|
||||
} else {
|
||||
}
|
||||
showLoader();
|
||||
await http
|
||||
.put(
|
||||
config.API.placementPropertyId(route.params.personalId.toString()),
|
||||
props.data
|
||||
)
|
||||
.then((res: any) => {
|
||||
success($q, "แก้ไขข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await props.fetch();
|
||||
edit.value = false;
|
||||
hideLoader();
|
||||
changeBtn();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false;
|
||||
props.notiNoEdit();
|
||||
} else {
|
||||
emit("update:statusEdit", true);
|
||||
}
|
||||
|
|
@ -49,43 +72,34 @@ const changeBtn = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const editData = async () => {
|
||||
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
|
||||
}
|
||||
|
||||
const onCancel = async () => {
|
||||
if (myform.value != null) {
|
||||
myform.value.reset();
|
||||
}
|
||||
// await fetchData();
|
||||
await props.fetch();
|
||||
};
|
||||
|
||||
|
||||
const selection = ref([]);
|
||||
const checkboxItems: CheckboxItem[] = [
|
||||
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
|
||||
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
|
||||
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
|
||||
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
|
||||
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
|
||||
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
|
||||
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
|
||||
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
|
||||
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
|
||||
]
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
|
||||
<HeaderTop v-model:edit="edit" header="การคัดกรองคุณสมบัติ" icon="mdi-account-search" :save="saveData"
|
||||
:history="false" :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" />
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="การคัดกรองคุณสมบัติ"
|
||||
icon="mdi-account-search"
|
||||
:save="saveData"
|
||||
:history="false"
|
||||
:changeBtn="changeBtn"
|
||||
:disable="statusEdit"
|
||||
:cancel="onCancel"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-px-lg">
|
||||
<div v-for="item of checkboxItems" :key="item.id" class="col-12 q-pt-sm">
|
||||
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
|
||||
:disable="!statusEdit" />
|
||||
<div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
v-model="item.value"
|
||||
:label="item.name"
|
||||
keep-color
|
||||
color="gray-5"
|
||||
:disable="!statusEdit"
|
||||
/>
|
||||
<q-separator />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,23 +8,25 @@ interface ChangeActive {
|
|||
|
||||
//ข้อมูลส่วนตัว
|
||||
interface Information {
|
||||
cardid: string | null;
|
||||
idCard: string | null;
|
||||
prefix: string | null;
|
||||
age: string | null;
|
||||
prefixId: string | null;
|
||||
fullName: string | null;
|
||||
firstname: string | null;
|
||||
lastname: string | null;
|
||||
birthDate: Date;
|
||||
genderId: string | null;
|
||||
bloodId: string | null;
|
||||
nationality: string | null;
|
||||
ethnicity: string | null;
|
||||
statusId: string | null;
|
||||
race: string | null;
|
||||
dateOfBirth: Date | null;
|
||||
age: string | null;
|
||||
telephone: string | null;
|
||||
gender: string | null;
|
||||
genderId: string | null;
|
||||
relationship: string | null;
|
||||
relationshipId: string | null;
|
||||
bloodGroup: string | null;
|
||||
bloodGroupId: string | null;
|
||||
religion: string | null;
|
||||
religionId: string | null;
|
||||
tel: string | null;
|
||||
employeeType: string | null;
|
||||
employeeClass: string | null;
|
||||
profileType: string | null;
|
||||
}
|
||||
|
||||
interface Family {
|
||||
|
|
@ -119,23 +121,25 @@ const defaultAddress: Address = {
|
|||
};
|
||||
|
||||
const defaultInformation: Information = {
|
||||
cardid: null,
|
||||
age: null,
|
||||
idCard: null,
|
||||
prefix: null,
|
||||
prefixId: null,
|
||||
fullName: null,
|
||||
firstname: null,
|
||||
lastname: null,
|
||||
birthDate: new Date(),
|
||||
genderId: null,
|
||||
bloodId: null,
|
||||
nationality: null,
|
||||
ethnicity: null,
|
||||
statusId: null,
|
||||
race: null,
|
||||
dateOfBirth: new Date(),
|
||||
age: null,
|
||||
telephone: null,
|
||||
gender: null,
|
||||
genderId: null,
|
||||
relationship: null,
|
||||
relationshipId: null,
|
||||
bloodGroup: null,
|
||||
bloodGroupId: null,
|
||||
religion: null,
|
||||
religionId: null,
|
||||
tel: null,
|
||||
employeeType: null,
|
||||
employeeClass: null,
|
||||
profileType: null,
|
||||
};
|
||||
|
||||
const defaultFamily: Family = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue