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", role: "placement",
children: [ children: [
{ {
key: 6.1,
label: "รายชื่อผู้สอบผ่าน" /* รายชื่อผู้สอบผ่าน */, label: "รายชื่อผู้สอบผ่าน" /* รายชื่อผู้สอบผ่าน */,
path: "placement", path: "placement",
role: "placement", role: "placement",
}, },
{ {
key: 6.2,
label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */, label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
path: "Orderplacement", path: "Orderplacement",
role: "placement", role: "placement",
@ -289,7 +291,7 @@ const tabList = readonly<tabType[]>([
}, },
]); ]);
const tabList_placement = readonly<tabType[]>([ const tabListPlacement = readonly<tabType[]>([
{ {
key: 1, key: 1,
label: "ข้อมูลทั่วไป", label: "ข้อมูลทั่วไป",
@ -297,30 +299,25 @@ const tabList_placement = readonly<tabType[]>([
}, },
{ {
key: 2, key: 2,
label: "ประวัติการศึกษา",
tag: "education",
},
{
key: 3,
label: "ใบอนุญาตประกอบอาชีพ", label: "ใบอนุญาตประกอบอาชีพ",
tag: "certicate", tag: "certicate",
}, },
{ {
key: 4, key: 3,
label: "เครื่องราชอิสริยาภรณ์", label: "ประวัติการศึกษา",
tag: "insignia", tag: "education",
}, },
{ {
key: 5, key: 4,
label: "ผลการสอบ", label: "ผลการสอบ",
tag: "examresult", tag: "examresult",
}, },
{ {
key: 6, key: 5,
label: "การคัดกรองคุณสมบัติ", label: "การคัดกรองคุณสมบัติ",
tag: "qualification", tag: "qualification",
}, },
]); ]);
export { menuList, tabList, tabList_placement }; export { menuList, tabList, tabListPlacement };
export type { ScrollType, tabType, menuType, notiType, optionType }; 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 Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue"; import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.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 ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.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 store = useDataStore();
const { changeTab } = store; const { changeTab } = store;
@ -38,29 +38,34 @@ onMounted(async () => {
รายละเอียดของ {{ FormData.fullName }} รายละเอียดของ {{ FormData.fullName }}
</div> </div>
</div> </div>
<div> <div class="q-pb-lg">
<q-card flat bordered class="q-px-lg q-pb-lg"> <q-card class="row q-pb-lg">
<div id="information" name="1" class="row col-12 information"> <div id="information" name="1" class="col-12 q-pa-sm">
<Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" /> <Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" />
</div> </div>
<div class="horizontal-line"></div>
<div id="education" name="2" class="row col-12 q-mt-md"> <div id="family" name="10" class="col-12 q-pa-sm" >
<EducationVue v-model:statusEdit="statusEdit" /> <div class="col-12 q-px-md"><q-separator size="4px"/></div>
<Family v-model:statusEdit="statusEdit" />
</div> </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" /> <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
</div> </div>
<div class="horizontal-line"></div>
<div id="insignia" name="5" class="row col-12 q-mt-md"> <div id="education" name="3" class="col-12 q-pa-sm" >
<InsigniaVue v-model:statusEdit="statusEdit" /> <div class="col-12 q-px-md"><q-separator size="4px"/></div>
<EducationVue v-model:statusEdit="statusEdit" />
</div> </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 /> <ExamResult />
</div> </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" /> <Qualification v-model:statusEdit="statusEdit" />
</div> </div>
</q-card> </q-card>

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

@ -1,14 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
</script> </script>
<template> <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" /> <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>
<div class="row"> <div class="row q-px-md">
<div class="col-7 q-pl-xl"> <div class="col-7">
<q-card class="card-exam"> <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="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>
@ -35,12 +35,12 @@
</div> </div>
<div class="col q-pl-xl"> <div class="col q-pl-xl">
<q-card class="q-pt-xs"> <q-card class="q-pt-xs">
<div class="header-text-right">ผลการสอบ</div> <div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-pb-xs">ผ่าน</div> <div class="sub-text-right q-px-xs q-pb-sm">ผ่าน</div>
<div class="header-text-right">ลำดับที่สอบได้</div> <div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
<div class="sub-text-right q-pb-xs">3</div> <div class="sub-text-right q-px-xs q-pb-sm">3</div>
<div class="header-text-right">จำนวนครั้งที่สมัครสอบ</div> <div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
<div class="sub-text-right q-pb-xs">5</div> <div class="sub-text-right q-px-xs q-pb-sm">5</div>
</q-card> </q-card>
</div> </div>
</div> </div>
@ -53,7 +53,7 @@
} }
.header-text-right { .header-text-right {
font-size: 12px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 150%; line-height: 150%;
color: #818181; 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 editData = async () => {
const body: ResponseObject = { // const body: ResponseObject = {
registrationSame: addressData.value.same == "1", // registrationSame: addressData.value.same == "1",
registrationAddress: addressData.value.address, // registrationAddress: addressData.value.address,
registrationSubDistrictId: addressData.value.subdistrictId, // registrationSubDistrictId: addressData.value.subdistrictId,
registrationDistrictId: addressData.value.districtId, // registrationDistrictId: addressData.value.districtId,
registrationProvinceId: addressData.value.provinceId, // registrationProvinceId: addressData.value.provinceId,
registrationZipCode: codep.value, // registrationZipCode: codep.value,
currentAddress: // currentAddress:
addressData.value.same == "1" // addressData.value.same == "1"
? addressData.value.address // ? addressData.value.address
: addressData.value.addressC, // : addressData.value.addressC,
currentSubDistrictId: // currentSubDistrictId:
addressData.value.same == "1" // addressData.value.same == "1"
? addressData.value.subdistrictId // ? addressData.value.subdistrictId
: addressData.value.subdistrictIdC, // : addressData.value.subdistrictIdC,
currentDistrictId: // currentDistrictId:
addressData.value.same == "1" // addressData.value.same == "1"
? addressData.value.districtId // ? addressData.value.districtId
: addressData.value.districtIdC, // : addressData.value.districtIdC,
currentProvinceId: // currentProvinceId:
addressData.value.same == "1" // addressData.value.same == "1"
? addressData.value.provinceId // ? addressData.value.provinceId
: addressData.value.provinceIdC, // : addressData.value.provinceIdC,
currentZipCode: addressData.value.same == "1" ? codep.value : codec.value, // currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
createdAt: new Date(), // createdAt: new Date(),
createdFullName: "-", // createdFullName: "-",
}; // };
showLoader(); // showLoader();
await http // await http
.put(config.API.profileAdrsId(route.params.id.toString()), body) // .put(config.API.profileAdrsId(route.params.id.toString()), body)
.then((res) => { // .then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ"); // success($q, "บันทึกข้อมูลสำเร็จ");
}) // })
.catch((e) => { // .catch((e) => {
messageError($q, e); // messageError($q, e);
}) // })
.finally(async () => { // .finally(async () => {
edit.value = false; // edit.value = false;
emit("update:statusEdit", false); // emit("update:statusEdit", false);
await getNewData(); // await getNewData();
}); // });
}; };
const saveData = async () => { const saveData = async () => {
await myform.value.validate().then(async (success: boolean) => { // await myform.value.validate().then(async (success: boolean) => {
if (success) { // if (success) {
await editData(); // await editData();
} else { // } else {
} // }
}); // });
}; };
const selectProvince = async (e: string | null, name: string) => { const selectProvince = async (e: string | null, name: string) => {
@ -546,13 +546,13 @@ const getClass = (val: boolean) => {
}; };
</script> </script>
<template> <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 <HeaderTop
v-model:edit="edit" v-model:edit="edit"
header="ข้อมูลที่อยู่" header="ข้อมูลที่อยู่"
icon="mdi-map-marker" icon="mdi-map-marker"
:save="saveData" :save="saveData"
:history="true" :history="false"
:changeBtn="changeBtn" :changeBtn="changeBtn"
:disable="statusEdit" :disable="statusEdit"
:cancel="refreshData" :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 () => { const onCancel = async () => {
if (myform.value != null) { // if (myform.value != null) {
myform.value.reset(); // myform.value.reset();
} // }
await fetchData(); // await fetchData();
}; };
/** /**
@ -538,45 +538,45 @@ const fetchData = async () => {
}; };
const editData = async () => { const editData = async () => {
if (age.value == false) { // if (age.value == false) {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง"); // modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
return; // return;
} // }
const body: any = { // const body: any = {
citizenId: informaData.value.cardid, // citizenId: informaData.value.cardid,
prefixId: informaData.value.prefixId, // prefixId: informaData.value.prefixId,
firstName: informaData.value.firstname, // firstName: informaData.value.firstname,
lastName: informaData.value.lastname, // lastName: informaData.value.lastname,
genderId: informaData.value.genderId, // genderId: informaData.value.genderId,
nationality: informaData.value.nationality, // nationality: informaData.value.nationality,
race: informaData.value.ethnicity, // race: informaData.value.ethnicity,
religionId: informaData.value.religionId, // religionId: informaData.value.religionId,
birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()), // birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
bloodGroupId: informaData.value.bloodId, // bloodGroupId: informaData.value.bloodId,
relationshipId: informaData.value.statusId, // relationshipId: informaData.value.statusId,
telephoneNumber: informaData.value.tel, // telephoneNumber: informaData.value.tel,
createdAt: new Date(), // createdAt: new Date(),
age: null, // age: null,
employeeType: informaData.value.employeeType, // employeeType: informaData.value.employeeType,
employeeClass: informaData.value.employeeClass, // employeeClass: informaData.value.employeeClass,
profileType: informaData.value.profileType, // profileType: informaData.value.profileType,
createdFullName: "-", // createdFullName: "-",
}; // };
showLoader(); // showLoader();
await http // await http
.put(config.API.profileInforId(route.params.id.toString()), body) // .put(config.API.profileInforId(route.params.id.toString()), body)
.then((res) => { // .then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ"); // success($q, "บันทึกข้อมูลสำเร็จ");
}) // })
.catch((e) => { // .catch((e) => {
messageError($q, e); // messageError($q, e);
}) // })
.finally(async () => { // .finally(async () => {
edit.value = false; // edit.value = false;
emit("update:statusEdit", false); // emit("update:statusEdit", false);
await fetchData(); // await fetchData();
await changeBirth(informaData.value.birthDate ?? new Date()); // await changeBirth(informaData.value.birthDate ?? new Date());
}); // });
}; };
const saveData = async () => { const saveData = async () => {
@ -617,7 +617,7 @@ const getClass = (val: boolean) => {
header="ข้อมูลส่วนตัว" header="ข้อมูลส่วนตัว"
icon="mdi-account" icon="mdi-account"
:save="saveData" :save="saveData"
:history="true" :history="false"
:changeBtn="changeBtn" :changeBtn="changeBtn"
:disable="statusEdit" :disable="statusEdit"
:cancel="onCancel" :cancel="onCancel"

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

@ -46,18 +46,21 @@ const closeModalError = () => {
</script> </script>
<template> <template>
<div> <div class="row col-12 items-center">
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <div>
</div> <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
<div class="horizontal-line"></div> </div>
<div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" /> <div class="col-12 q-px-md"><q-separator size="4px"/></div>
<div>
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.horizontal-line { .horizontal-line {
background-color: #F4F4F4; background-color: #F4F4F4;
width: 100%;
height: 5px; height: 5px;
} }
</style> </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 () => { const editData = async () => {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง"); modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
} }
const onCancel = async () => { const onCancel = async () => {
if (myform.value != null) { if (myform.value != null) {
myform.value.reset(); myform.value.reset();
} }
// await fetchData(); // await fetchData();
}; };
const selection = ref([]); const selection = ref([]);
const checkboxItems: CheckboxItem[] = [ const checkboxItems: CheckboxItem[] = [
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' }, { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' }, { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' }, { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' }, { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' }, { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' }, { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' }, { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' }, { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' }, { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' }, { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' }, { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
] ]
</script> </script>
<template> <template>
<div class="row"> <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
<HeaderTop <HeaderTop v-model:edit="edit" header="การคัดกรองคุณสมบัติ" icon="mdi-account-search" :save="saveData"
v-model:edit="edit" :history="false" :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" />
header="การคัดกรองคุณสมบัติ" </div>
icon="mdi-briefcase-edit" <div class="row col-12 q-px-lg">
:save="saveData" <div v-for="item of checkboxItems" :key="item.id" class="q-pt-sm">
:history="false" <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
:changeBtn="changeBtn" :disable="!statusEdit" />
:disable="statusEdit" <q-separator />
:cancel="onCancel"
/>
</div> </div>
<div class="contanier-checkbox"> </div>
<div v-for="item of checkboxItems" :key="item.id" class="q-pt-md"> </template>
<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>

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

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

140
src/views/MainLayout.vue
View file

@ -13,7 +13,7 @@ import type {
import { import {
menuList, menuList,
tabList, tabList,
tabList_placement, tabListPlacement,
} from "../interface/request/main/main"; } from "../interface/request/main/main";
const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll; const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
@ -71,10 +71,6 @@ const tabScroll = () => {
return route.name == "registryDetail"; return route.name == "registryDetail";
}; };
const tabScroll2 = () => {
return route.name == "placement2Detail";
};
/** /**
* toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
*/ */
@ -101,7 +97,7 @@ const toggleBtnLeft = () => {
const onScroll = (scroll: ScrollType) => { const onScroll = (scroll: ScrollType) => {
const { position } = scroll; const { position } = scroll;
updateScroll(position); updateScroll(position);
updateScroll2(position); updateScrollPlacement(position);
}; };
/** /**
@ -161,60 +157,6 @@ const activeBtn = () => {
return route.name == "registryDetail" && rightActive.value; 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 * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
* set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@ -298,8 +240,7 @@ const tagClick = (tag: string) => {
// router.replace({ hash }); // router.replace({ hash });
if (route.hash !== hash) { if (route.hash !== hash) {
const check = activeBtn(); const check = activeBtn();
const check2 = activeBtn2(); if (check) {
if (check || check2) {
// router.replace({ hash, position: { x: 0, y: 0 } }); // router.replace({ hash, position: { x: 0, y: 0 } });
// router.replace({ hash }).then(() => { // router.replace({ hash }).then(() => {
// setVerticalScrollPosition(window, offset, 300); // 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 * logout keycloak
* confirm ก่อนออกจากระบบ * confirm ก่อนออกจากระบบ
@ -500,7 +506,7 @@ if (keycloak.tokenParsed != null) {
<q-btn <q-btn
size="13px" size="13px"
class="bg-blue-1" class="bg-blue-1"
v-if="activeBtn() || activeBtn2()" v-if="activeBtn() || activeBtnPlacement()"
flat flat
dense dense
round round
@ -848,7 +854,7 @@ if (keycloak.tokenParsed != null) {
side="right" side="right"
class="bg-grey-2" class="bg-grey-2"
show-if-above show-if-above
v-if="tabScroll2()" v-if="tabScrollPlacement()"
v-model="drawerR" v-model="drawerR"
:width="220" :width="220"
:breakpoint="1023" :breakpoint="1023"
@ -856,17 +862,17 @@ if (keycloak.tokenParsed != null) {
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<q-list padding> <q-list padding>
<q-item <q-item
v-for="(tabItem, index) in tabList_placement" v-for="(tabItem, index) in tabListPlacement"
:key="index" :key="index"
:id="'tab--' + tabItem.tag" :id="'tab--' + tabItem.tag"
class="tabNative" class="tabNative"
active-class="text-blue-7 active-item text-weight-medium tabActive" active-class="text-blue-7 active-item text-weight-medium tabActive"
:active="activeTab(tabItem.tag)" :active="activeTabPlacement(tabItem.tag)"
clickable clickable
v-ripple v-ripple
dense dense
exact exact
@click="tagClick(tabItem.tag)" @click="tagClickPlacement(tabItem.tag)"
> >
<q-item-section> <q-item-section>
<q-item-label <q-item-label