hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ UI หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่านให้ตรงกับ Req. #25

Browse source
This commit is contained in:
Warunee Tamkoo 2023-06-28 17:22:44 +07:00
parent b9c272a49d
commit 95a20c7050
11 changed files with 1351 additions and 1454 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/interface/request/main/main.ts
View file

@ -182,11 +182,13 @@ const menuList = readonly<any[]>([
role: "placement",
children: [
{
key: 6.1,
label: "รายชื่อผู้สอบผ่าน" /* รายชื่อผู้สอบผ่าน */,
path: "placement",
role: "placement",
},
{
key: 6.2,
label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
path: "Orderplacement",
role: "placement",
@ -289,7 +291,7 @@ const tabList = readonly<tabType[]>([
},
]);
const tabList_placement = readonly<tabType[]>([
const tabListPlacement = readonly<tabType[]>([
{
key: 1,
label: "ข้อมูลทั่วไป",
@ -297,30 +299,25 @@ const tabList_placement = readonly<tabType[]>([
},
{
key: 2,
label: "ประวัติการศึกษา",
tag: "education",
},
{
key: 3,
label: "ใบอนุญาตประกอบอาชีพ",
tag: "certicate",
},
{
key: 4,
label: "เครื่องราชอิสริยาภรณ์",
tag: "insignia",
key: 3,
label: "ประวัติการศึกษา",
tag: "education",
},
{
key: 5,
key: 4,
label: "ผลการสอบ",
tag: "examresult",
},
{
key: 6,
key: 5,
label: "การคัดกรองคุณสมบัติ",
tag: "qualification",
},
]);
export { menuList, tabList, tabList_placement };
export { menuList, tabList, tabListPlacement };
export type { ScrollType, tabType, menuType, notiType, optionType };

37
src/modules/05_placement/components/PersonalDetail/Detail.vue
View file

@ -7,9 +7,9 @@ const router = useRouter();
import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
import InsigniaVue from "@/modules/05_placement/components/PersonalDetail/Insignia.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";
const store = useDataStore();
const { changeTab } = store;
@ -38,29 +38,34 @@ onMounted(async () => {
รายละเอียดของ {{ FormData.fullName }}
</div>
</div>
<div>
<q-card flat bordered class="q-px-lg q-pb-lg">
<div id="information" name="1" class="row col-12 information">
<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 class="horizontal-line"></div>
<div id="education" name="2" class="row col-12 q-mt-md">
<EducationVue v-model:statusEdit="statusEdit" />
<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 class="horizontal-line"></div>
<div id="certicate" name="4" class="row col-12 q-mt-md">
<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 class="horizontal-line"></div>
<div id="insignia" name="5" class="row col-12 q-mt-md">
<InsigniaVue v-model:statusEdit="statusEdit" />
<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 class="horizontal-line"></div>
<div id="examresult" name="6" class="q-px-lg q-py-lg">
<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 class="horizontal-line"></div>
<div id="qualification" name="7" class="q-px-lg q-py-lg">
<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>

24
src/modules/05_placement/components/PersonalDetail/ExamResult.vue
View file

@ -1,14 +1,14 @@
<script setup lang="ts">
</script>
<template>
<div class="row">
<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>
<span class="text-bold text-subtitle2">ผลการสอบ</span>
</div>
<div class="row">
<div class="col-7 q-pl-xl">
<div class="row q-px-md">
<div class="col-7">
<q-card class="card-exam">
<div class="row">
<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>
@ -35,12 +35,12 @@
</div>
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right">ผลการสอบ</div>
<div class="sub-text-right q-pb-xs">ผ่าน</div>
<div class="header-text-right">ลำดับที่สอบได้</div>
<div class="sub-text-right q-pb-xs">3</div>
<div class="header-text-right">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-pb-xs">5</div>
<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>
</div>
@ -53,7 +53,7 @@
}
.header-text-right {
font-size: 12px;
font-size: 14px;
font-weight: 400;
line-height: 150%;
color: #818181;

98
src/modules/05_placement/components/PersonalDetail/Information/Address.vue
View file

@ -348,56 +348,56 @@ const fetchData = async () => {
};
const editData = async () => {
const body: ResponseObject = {
registrationSame: addressData.value.same == "1",
registrationAddress: addressData.value.address,
registrationSubDistrictId: addressData.value.subdistrictId,
registrationDistrictId: addressData.value.districtId,
registrationProvinceId: addressData.value.provinceId,
registrationZipCode: codep.value,
currentAddress:
addressData.value.same == "1"
? addressData.value.address
: addressData.value.addressC,
currentSubDistrictId:
addressData.value.same == "1"
? addressData.value.subdistrictId
: addressData.value.subdistrictIdC,
currentDistrictId:
addressData.value.same == "1"
? addressData.value.districtId
: addressData.value.districtIdC,
currentProvinceId:
addressData.value.same == "1"
? addressData.value.provinceId
: addressData.value.provinceIdC,
currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
createdAt: new Date(),
createdFullName: "-",
};
showLoader();
await http
.put(config.API.profileAdrsId(route.params.id.toString()), body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
edit.value = false;
emit("update:statusEdit", false);
await getNewData();
});
// const body: ResponseObject = {
// registrationSame: addressData.value.same == "1",
// registrationAddress: addressData.value.address,
// registrationSubDistrictId: addressData.value.subdistrictId,
// registrationDistrictId: addressData.value.districtId,
// registrationProvinceId: addressData.value.provinceId,
// registrationZipCode: codep.value,
// currentAddress:
// addressData.value.same == "1"
// ? addressData.value.address
// : addressData.value.addressC,
// currentSubDistrictId:
// addressData.value.same == "1"
// ? addressData.value.subdistrictId
// : addressData.value.subdistrictIdC,
// currentDistrictId:
// addressData.value.same == "1"
// ? addressData.value.districtId
// : addressData.value.districtIdC,
// currentProvinceId:
// addressData.value.same == "1"
// ? addressData.value.provinceId
// : addressData.value.provinceIdC,
// currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
// createdAt: new Date(),
// createdFullName: "-",
// };
// showLoader();
// await http
// .put(config.API.profileAdrsId(route.params.id.toString()), body)
// .then((res) => {
// success($q, "บันทึกข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// edit.value = false;
// emit("update:statusEdit", false);
// await getNewData();
// });
};
const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => {
if (success) {
await editData();
} else {
}
});
// await myform.value.validate().then(async (success: boolean) => {
// if (success) {
// await editData();
// } else {
// }
// });
};
const selectProvince = async (e: string | null, name: string) => {
@ -546,13 +546,13 @@ const getClass = (val: boolean) => {
};
</script>
<template>
<q-card flat class="col-12 q-px-lg q-py-md q-mt-md no-border">
<q-card class="col-12 q-px-lg q-py-md q-mt-md no-border">
<HeaderTop
v-model:edit="edit"
header="ข้อมูลที่อยู่"
icon="mdi-map-marker"
:save="saveData"
:history="true"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="refreshData"

1099
src/modules/05_placement/components/PersonalDetail/Information/Family.vue Normal file
View file

File diff suppressed because it is too large Load diff

88
src/modules/05_placement/components/PersonalDetail/Information/Information.vue
View file

@ -293,10 +293,10 @@ onMounted(async () => {
});
const onCancel = async () => {
if (myform.value != null) {
myform.value.reset();
}
await fetchData();
// if (myform.value != null) {
// myform.value.reset();
// }
// await fetchData();
};
/**
@ -538,45 +538,45 @@ const fetchData = async () => {
};
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());
});
// 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 () => {
@ -617,7 +617,7 @@ const getClass = (val: boolean) => {
header="ข้อมูลส่วนตัว"
icon="mdi-account"
:save="saveData"
:history="true"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"

17
src/modules/05_placement/components/PersonalDetail/Information/layout.vue
View file

@ -46,18 +46,21 @@ const closeModalError = () => {
</script>
<template>
<div>
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div>
<div class="horizontal-line"></div>
<div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<div class="row col-12 items-center">
<div>
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div>
<div class="col-12 q-px-md"><q-separator size="4px"/></div>
<div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div>
</div>
</template>
<style lang="scss" scoped>
.horizontal-line {
background-color: #F4F4F4;
width: 100%;
height: 5px;
}
</style>

1199
src/modules/05_placement/components/PersonalDetail/Insignia.vue
View file

File diff suppressed because it is too large Load diff

66
src/modules/05_placement/components/PersonalDetail/Qualification.vue
View file

@ -50,56 +50,42 @@ const changeBtn = async () => {
};
const editData = async () => {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
}
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
}
const onCancel = async () => {
const onCancel = async () => {
if (myform.value != null) {
myform.value.reset();
}
// await fetchData();
// await fetchData();
};
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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
{ 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">
<HeaderTop
v-model:edit="edit"
header="การคัดกรองคุณสมบัติ"
icon="mdi-briefcase-edit"
:save="saveData"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:cancel="onCancel"
/>
<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" />
</div>
<div class="row col-12 q-px-lg">
<div v-for="item of checkboxItems" :key="item.id" class="q-pt-sm">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
:disable="!statusEdit" />
<q-separator />
</div>
<div class="contanier-checkbox">
<div v-for="item of checkboxItems" :key="item.id" class="q-pt-md">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
:disable="false" />
<q-separator />
</div>
</div>
</template>
<style lang="scss" scoped>
.contanier-checkbox {
padding-left: 20px;
padding-top: 10px;
}
</style>
</div>
</template>

16
src/modules/05_placement/router.ts
View file

@ -28,27 +28,27 @@ export default [
component: PlacementMain,
meta: {
Auth: true,
Key: [7],
Key: [6.1],
Role: "placement",
},
},
{
path: "/placement/detail",
name: "placement-detail",
name: "placementDetail",
component: PlacementDetail,
meta: {
Auth: true,
Key: [7],
Key: [6.1],
Role: "placement",
},
},
{
path: "/placement/detail/:personalId",
name: "placement-personal-detail",
name: "PlacementPersonalDetail",
component: PlacementPersonalDetail,
meta: {
Auth: true,
Key: [7],
Key: [6.1],
Role: "placement",
},
},
@ -58,7 +58,7 @@ export default [
component: MainOrderPlacement,
meta: {
Auth: true,
Key: [7],
Key: [6.2],
Role: "placement",
},
},
@ -68,7 +68,7 @@ export default [
component: detailOrderReplace,
meta: {
Auth: true,
Key: [7],
Key: [6.2],
Role: "placement",
},
},
@ -78,7 +78,7 @@ export default [
component: addOrderPlacement,
meta: {
Auth: true,
Key: [8],
Key: [6.2],
Role: "placement",
},
},

140
src/views/MainLayout.vue
View file

@ -13,7 +13,7 @@ import type {
import {
menuList,
tabList,
tabList_placement,
tabListPlacement,
} from "../interface/request/main/main";
const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
@ -71,10 +71,6 @@ const tabScroll = () => {
return route.name == "registryDetail";
};
const tabScroll2 = () => {
return route.name == "placement2Detail";
};
/**
* toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
*/
@ -101,7 +97,7 @@ const toggleBtnLeft = () => {
const onScroll = (scroll: ScrollType) => {
const { position } = scroll;
updateScroll(position);
updateScroll2(position);
updateScrollPlacement(position);
};
/**
@ -161,60 +157,6 @@ const activeBtn = () => {
return route.name == "registryDetail" && rightActive.value;
};
const updateScroll2 = (position: number) => {
// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
if (position === void 0) {
position = document.documentElement.scrollTop || document.body.scrollTop;
}
let last;
/**
* วนหา id ของ div นั้น
*/
for (const i in tabList_placement) {
const section = tabList_placement[i];
const item = document.getElementById(section.tag);
/**
* วนหา id ของ div หน้านั้น
* เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
* เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
* ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
* ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
*/
if (item === null) {
continue;
}
if (item.offsetTop >= position + 155) {
if (last === void 0) {
last = section.tag;
}
break;
} else {
last = section.tag;
}
}
/**
* ถ้า last ไม่เท่ากับ undifind
* ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
* และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
*/
if (last !== void 0) {
changeTab(last);
const tocEl = document.getElementById("tab--" + last);
if (tocEl) {
tocEl.scrollIntoView({ block: "nearest" });
}
}
};
/**
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดหน่อยงานอื่นๆ และ rightActive เท่ากับ true
*/
const activeBtn2 = () => {
return route.name == "placement2Detail" && rightActive.value;
};
/**
* เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
* set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@ -298,8 +240,7 @@ const tagClick = (tag: string) => {
// router.replace({ hash });
if (route.hash !== hash) {
const check = activeBtn();
const check2 = activeBtn2();
if (check || check2) {
if (check) {
// router.replace({ hash, position: { x: 0, y: 0 } });
// router.replace({ hash }).then(() => {
// setVerticalScrollPosition(window, offset, 300);
@ -314,6 +255,71 @@ const tagClick = (tag: string) => {
}
};
//**** Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
const tabScrollPlacement = () => {
return route.name == "PlacementPersonalDetail";
};
const updateScrollPlacement = (position: number) => {
if (position === void 0) {
position = document.documentElement.scrollTop || document.body.scrollTop;
}
let last;
for (const i in tabListPlacement) {
const section = tabListPlacement[i];
const item = document.getElementById(section.tag);
if (item === null) {
continue;
}
if (item.offsetTop >= position + 100) {
if (last === void 0) {
last = section.tag;
}
break;
} else {
last = section.tag;
}
}
if (last !== void 0) {
changeTab(last);
const tocEl = document.getElementById("tab--" + last);
if (tocEl) {
tocEl.scrollIntoView({ block: "nearest" });
}
}
};
const activeBtnPlacement = () => {
return route.name == "PlacementPersonalDetail" && rightActive.value;
};
const activeTabPlacement = (tag: string) => {
return tabData.value == tag;
};
const tagClickPlacement = (tag: string) => {
const hash = `#${tag}`;
const items = document.getElementById(tag);
const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
// router.replace({ hash });
if (route.hash !== hash) {
const checkPlacement = activeBtnPlacement();
if (checkPlacement) {
drawerR.value = !drawerR.value;
setVerticalScrollPosition(window, offset, 300);
} else {
setVerticalScrollPosition(window, offset, 300);
}
} else {
setVerticalScrollPosition(window, offset, 300);
}
};
//**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
/**
* logout keycloak
* confirm ก่อนออกจากระบบ
@ -500,7 +506,7 @@ if (keycloak.tokenParsed != null) {
<q-btn
size="13px"
class="bg-blue-1"
v-if="activeBtn() || activeBtn2()"
v-if="activeBtn() || activeBtnPlacement()"
flat
dense
round
@ -848,7 +854,7 @@ if (keycloak.tokenParsed != null) {
side="right"
class="bg-grey-2"
show-if-above
v-if="tabScroll2()"
v-if="tabScrollPlacement()"
v-model="drawerR"
:width="220"
:breakpoint="1023"
@ -856,17 +862,17 @@ if (keycloak.tokenParsed != null) {
<q-scroll-area class="fit">
<q-list padding>
<q-item
v-for="(tabItem, index) in tabList_placement"
v-for="(tabItem, index) in tabListPlacement"
:key="index"
:id="'tab--' + tabItem.tag"
class="tabNative"
active-class="text-blue-7 active-item text-weight-medium tabActive"
:active="activeTab(tabItem.tag)"
:active="activeTabPlacement(tabItem.tag)"
clickable
v-ripple
dense
exact
@click="tagClick(tabItem.tag)"
@click="tagClickPlacement(tabItem.tag)"
>
<q-item-section>
<q-item-label