tab
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
0f86f97d91
commit
483155dc18
32 changed files with 10140 additions and 9400 deletions
|
|
@ -606,6 +606,89 @@ const tabStructuremain = readonly<any[]>([
|
|||
tag: "chartemploy",
|
||||
}
|
||||
])
|
||||
const tabRegistration = readonly<any[]>([
|
||||
{
|
||||
no: 1,
|
||||
label: "การเข้าสู่หน้าระบบทะเบียนประวัติ",
|
||||
tag: "registrationmain",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
label: "การค้นหาข้อมูลทะเบียนประวัติ",
|
||||
tag: "registrationFind",
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
label: "การดูรายละเอียดข้อมูลทะเบียน",
|
||||
tag: "registrationDetail",
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
label: "การเพิ่ม แก้ไข ดูประวัติแก้ไขข้อมูล",
|
||||
tag: "registrationEdit",
|
||||
},
|
||||
{
|
||||
no: 5,
|
||||
label: "การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล",
|
||||
tag: "registrationSelect",
|
||||
},
|
||||
{
|
||||
no: 6,
|
||||
label: "การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว",
|
||||
tag: "registrationWindow",
|
||||
}
|
||||
])
|
||||
const tabRecruit = readonly<any[]>([
|
||||
{
|
||||
no: 1,
|
||||
label: "การเข้าสู่หน้าระบบสรรหา",
|
||||
tag: "recruitmain",
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
label: "การตั้งค่าเว็บไซต์ระบบสรรหา",
|
||||
tag: "recruitSetting",
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
label: "สอบแข่งขัน",
|
||||
tag: "recruitManagemain",
|
||||
childern: [
|
||||
{
|
||||
no: 3.1,
|
||||
label: "จัดการรอบสอบการแข่งขัน",
|
||||
tag: "recruitManage",
|
||||
},
|
||||
{
|
||||
no: 3.2,
|
||||
label: "สถิติสมัครสอบแข่งขัน",
|
||||
tag: "recruitstati",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
label: "คัดเลือก",
|
||||
tag: "recruitQualifiersmain",
|
||||
childern: [
|
||||
{
|
||||
no: 4.1,
|
||||
label: "จัดการรอบคัดเลือก",
|
||||
tag: "recruitQualifiers",
|
||||
},
|
||||
{
|
||||
no: 4.2,
|
||||
label: "จัดการรอบคัดเลือกคนพิการ",
|
||||
tag: "recruitDisabilities",
|
||||
},
|
||||
{
|
||||
no: 4.3,
|
||||
label: "จัดการรายชื่อคัดเลือก",
|
||||
tag: "recruitSelection",
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const tabList = readonly<any[]>([
|
||||
{
|
||||
|
|
@ -839,5 +922,5 @@ const tabList = readonly<any[]>([
|
|||
|
||||
]);
|
||||
|
||||
export { menuList, tabList, tabListLogin, tabListDatamain, tabStructuremain };
|
||||
export { menuList, tabList, tabListLogin, tabListDatamain, tabStructuremain, tabRegistration, tabRecruit };
|
||||
export type { ScrollType, tabType, menuType, notiType, optionType };
|
||||
|
|
|
|||
|
|
@ -5,82 +5,80 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก” ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/1_main/3-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 392.06px;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 1 เมนูโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- ระบบปรากฏเมนูย่อยของโครงสร้างอัตรากำลัง ดังรูปภาพ
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/1_main/3-2.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 571.37px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 2 เมนูย่อยของโครงสร้างอัตรากำลัง </div>
|
||||
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล
|
||||
ให้กดเลือกแถบเมนู “ข้อมูลหลัก” ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/1_main/3-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 392.06px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 1 เมนูโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- ระบบปรากฏเมนูย่อยของโครงสร้างอัตรากำลัง ดังรูปภาพ
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/1_main/3-2.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 571.37px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 2 เมนูย่อยของโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -24,368 +24,395 @@ const text = ref("");
|
|||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.1 จัดการตำแหน่ง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “จัดการตำแหน่ง” ระบบแสดงหน้าจอดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-3.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 3 หน้าจัดการตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
จากรูปที่ 3 - 3 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
|
||||
<div style="margin-left: 50px;">
|
||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยเลือกกดรายการจัดการตำแหน่งที่ต้องการจัดการ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-4.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 4 แก้ไขข้อมูลจัดการตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
จะสามารถกดเลือกรายการจัดการตำแหน่งเพื่อแก้ไขข้อมูลได้ เมื่อกดเลือกรายการจัดการตำแหน่ง ระบบแสดงดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-5.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 5 แก้ไขข้อมูลที่มีอยู่
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกข้อมูลตำแหน่งประเภท <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกข้อมูลตำแหน่ง <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกตำแหน่งทางการบริหาร <br>
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกระดับ <br>
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกสายงาน <br>
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกด้าน/สาขา <br>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้านทางการบริหาร <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกข้อมูลศึกษาศาสตรบัณฑิต <br>
|
||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลหมายเหตุ <br>
|
||||
หมายเลข 12 ช่องสำหรับคลิกเลือกเพื่อแสดงสถานะการเป็นหัวหน้างาน <br>
|
||||
หมายเลข 13 ปุ่มบันทึก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกข้อมูลร่าง ระบบปรากฏป้าย“บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ </p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-6.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 6 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากคลิกยืนยันการแก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อไม่ต้องแก้ไขหรือยกเลิกแก้ไขให้กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อยกเลิกแบบร่างที่แก้ไขล่าสุดระบบปรากฏป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-7.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 7 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-8.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 8 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างการจัดตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อแก้ไข และกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs" />
|
||||
เพื่อบันทึกข้อมูลร่างให้กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบจะขึ้นป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-9.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพ 3 - 9 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-10.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 10 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลจัดการตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูล ระบบจะปรากฏฟอร์มเพื่อให้เพิ่มข้อมูลดังรูปภาพ เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่) เมื่อกดบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 6 โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างเมื่อกดลบบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 7 และ 3 – 8 และสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบจะแสดงดังรูปภาพที่ 3 – 9 และ 3 – 10 โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบ มีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล เมื่อกดเลือกที่ “หัวหน้า” ระบบปรากฏไอคอน
|
||||
<q-icon name="mdi-bookmark" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
กำกับ
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-11.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 11 ฟอร์มสร้างโครงสร้างและกรอบอัตรากำลัง </div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งประเภท <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกตำแหน่ง <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกตำแหน่งทางการบริหาร <br>
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกระดับ <br>
|
||||
หมายเลข 5 ช่องสำหรับคลิกสายงาน <br>
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกด้าน/สาขา <br>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้นทางการบริหาร <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกรายละเอียกข้อมูลคุณวุฒิ <br>
|
||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลรายละเอียดหมายเหตุ <br>
|
||||
หมายเลข 12 ช่องสำหรับคลิกเพื่อกำหนดการเป็นหัวหน้างาน <br>
|
||||
หมายเลข 13 ปุ่มสำหรับคลิกบันทึกข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.1 จัดการตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “จัดการตำแหน่ง”
|
||||
ระบบแสดงหน้าจอดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-3.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 3 หน้าจัดการตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
จากรูปที่ 3 - 3 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br />
|
||||
<div style="margin-left: 50px">
|
||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-pencil-outline"
|
||||
style="margin: 0 5px; color: #02a998"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
||||
โดยเลือกกดรายการจัดการตำแหน่งที่ต้องการจัดการ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-4.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 4 แก้ไขข้อมูลจัดการตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon
|
||||
name="mdi-pencil-outline"
|
||||
style="margin: 0 5px; color: #02a998"
|
||||
size="xs"
|
||||
/>
|
||||
จะสามารถกดเลือกรายการจัดการตำแหน่งเพื่อแก้ไขข้อมูลได้
|
||||
เมื่อกดเลือกรายการจัดการตำแหน่ง ระบบแสดงดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-5.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 5 แก้ไขข้อมูลที่มีอยู่
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกข้อมูลตำแหน่งประเภท <br />
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกข้อมูลตำแหน่ง <br />
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกตำแหน่งทางการบริหาร <br />
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกระดับ <br />
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกสายงาน <br />
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกด้าน/สาขา <br />
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้านทางการบริหาร <br />
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br />
|
||||
หมายเลข 9 ช่องสำหรับกรอกข้อมูลศึกษาศาสตรบัณฑิต <br />
|
||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br />
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลหมายเหตุ <br />
|
||||
หมายเลข 12 ช่องสำหรับคลิกเลือกเพื่อแสดงสถานะการเป็นหัวหน้างาน <br />
|
||||
หมายเลข 13 ปุ่มบันทึก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-content-save-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อบันทึกข้อมูลร่าง ระบบปรากฏป้าย“บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-6.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 6 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ”
|
||||
หลังจากคลิกยืนยันการแก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อไม่ต้องแก้ไขหรือยกเลิกแก้ไขให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-file-remove-outline"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อยกเลิกแบบร่างที่แก้ไขล่าสุดระบบปรากฏป้าย
|
||||
“ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-7.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 7 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-8.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 8 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ”
|
||||
หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างการจัดตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อแก้ไข และกดไอคอน
|
||||
<q-icon
|
||||
name="mdi-content-save-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อบันทึกข้อมูลร่างให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-cloud-upload-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบจะขึ้นป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/2_position/3-9.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพ 3 - 9 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ
|
||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-10.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 10 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ”
|
||||
หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลจัดการตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86" size="xs" />
|
||||
เพื่อเพิ่มข้อมูล ระบบจะปรากฏฟอร์มเพื่อให้เพิ่มข้อมูลดังรูปภาพ
|
||||
เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-content-save-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่)
|
||||
เมื่อกดบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 6
|
||||
โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้
|
||||
สามารถกดไอคอน
|
||||
<q-icon
|
||||
name="mdi-file-remove-outline"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อลบบันทึกร่างเมื่อกดลบบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 7 และ 3 – 8
|
||||
และสามารถกดไอคอน
|
||||
<q-icon
|
||||
name="mdi-cloud-upload-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบจะแสดงดังรูปภาพที่ 3 – 9 และ 3 – 10
|
||||
โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบ
|
||||
มีการตรวจสอบความถูกต้องเรียบร้อยแล้ว
|
||||
และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล เมื่อกดเลือกที่ “หัวหน้า”
|
||||
ระบบปรากฏไอคอน
|
||||
<q-icon
|
||||
name="mdi-bookmark"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
กำกับ
|
||||
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/2_position/3-11.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 11 ฟอร์มสร้างโครงสร้างและกรอบอัตรากำลัง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งประเภท <br />
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกตำแหน่ง <br />
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกตำแหน่งทางการบริหาร <br />
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกระดับ <br />
|
||||
หมายเลข 5 ช่องสำหรับคลิกสายงาน <br />
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกด้าน/สาขา <br />
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้นทางการบริหาร <br />
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br />
|
||||
หมายเลข 9 ช่องสำหรับกรอกรายละเอียกข้อมูลคุณวุฒิ <br />
|
||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br />
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลรายละเอียดหมายเหตุ <br />
|
||||
หมายเลข 12 ช่องสำหรับคลิกเพื่อกำหนดการเป็นหัวหน้างาน <br />
|
||||
หมายเลข 13 ปุ่มสำหรับคลิกบันทึกข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,415 +5,394 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.2 แผนภูมิโครงสร้าง
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิโครงสร้าง”
|
||||
ระบบแสดงหน้าจอดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-12.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 12 หน้าแผนภูมิโครงสร้าง
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
<div
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.2 แผนภูมิโครงสร้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิโครงสร้าง” ระบบแสดงหน้าจอดังรูปภาพ </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-12.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 12 หน้าแผนภูมิโครงสร้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br>
|
||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br>
|
||||
หมายเลข 3 การเข้าถึงของแต่ละหัวข้อหลัก <br>
|
||||
หมายเลข 4 รายละเอียดแผนภูมิโครงสร้าง โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้แสดงข้อมูล
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อต้องการดูข้อมูลให้เล็กลงสามารถกดเลือกแต่ละหัวข้อต่างๆได้ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-13.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 13 รายละเอียดโครงสร้าง </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดเลือกหัวข้อที่ต้องการ ระบบจะแสดงเฉพาะข้อมูลที่เลือก โดยจะมีการบอกหัวข้อที่มีการเข้าถึง ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-14.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 14 รายละเอียดโครงสร้างที่แสดงเฉพาะข้อมูลที่ทำการเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 คอลัมน์แสดงการเข้าถึงของแต่ละหน้า <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงรายละเอียดข้อมูลหน่วยงานที่ได้ทำการเข้าถึง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถกดไอคอน
|
||||
<q-icon name="mdi-image-area" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-15.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 15 ดาวน์โหลดไฟล์ PNG
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพ PNG
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-16.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 16 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
- โดยสามารถคลิกไอคอน
|
||||
<q-icon name="mdi-image-area" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้ ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-17.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 17 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกดาวน์โหลดไฟล์ภาพ PNG (ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-18.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 18 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon name="mdi-file-pdf-box" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-19.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 19 ดาวน์โหลดไฟล์ PDF
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพเป็นไฟล์ข้อมูล PDF
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-20.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 20 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- โดยสามารถคลิกไอคอน
|
||||
<q-icon name="mdi-file-pdf-box" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้ ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-21.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 21 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ PNG (ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-22.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 22 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br />
|
||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br />
|
||||
หมายเลข 3 การเข้าถึงของแต่ละหัวข้อหลัก <br />
|
||||
หมายเลข 4 รายละเอียดแผนภูมิโครงสร้าง
|
||||
โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้แสดงข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อต้องการดูข้อมูลให้เล็กลงสามารถกดเลือกแต่ละหัวข้อต่างๆได้
|
||||
ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-13.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 13 รายละเอียดโครงสร้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดเลือกหัวข้อที่ต้องการ ระบบจะแสดงเฉพาะข้อมูลที่เลือก
|
||||
โดยจะมีการบอกหัวข้อที่มีการเข้าถึง ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-14.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 14 รายละเอียดโครงสร้างที่แสดงเฉพาะข้อมูลที่ทำการเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 คอลัมน์แสดงการเข้าถึงของแต่ละหน้า <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงรายละเอียดข้อมูลหน่วยงานที่ได้ทำการเข้าถึง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดไอคอน
|
||||
<q-icon
|
||||
name="mdi-image-area"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-15.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 15 ดาวน์โหลดไฟล์ PNG
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพ PNG
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-16.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 16 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ - โดยสามารถคลิกไอคอน
|
||||
<q-icon
|
||||
name="mdi-image-area"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้
|
||||
ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-17.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 17 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกดาวน์โหลดไฟล์ภาพ PNG
|
||||
(ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG
|
||||
ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/3_structure/3-18.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 18 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon
|
||||
name="mdi-file-pdf-box"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-19.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 19 ดาวน์โหลดไฟล์ PDF
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพเป็นไฟล์ข้อมูล PDF
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-20.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 20 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- โดยสามารถคลิกไอคอน
|
||||
<q-icon
|
||||
name="mdi-file-pdf-box"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้
|
||||
ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-21.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 21 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ PNG
|
||||
(ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG
|
||||
ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/3_structure/3-22.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 22 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -24,308 +24,288 @@ const text = ref("");
|
|||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.3 แผนภูมิองค์กร
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/4_organchart/3-23.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 23 หน้าแผนภูมิองค์กร
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br>
|
||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br>
|
||||
หมายเลข 3 รายละเอียดแผนภูมิโครงสร้าง โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้ข้อมูลที่แสดงเป็นข้อมูลเล็กลง
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดเลือกไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span class="triangle"
|
||||
style="border-top-width: 8px;
|
||||
transform: rotate(-90deg);">
|
||||
</span>
|
||||
</span>
|
||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/4_organchart/3-24.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 24 เลือกดูข้อมูลเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span class="triangle"
|
||||
style="border-top-width: 8px;
|
||||
transform: rotate(-90deg);">
|
||||
</span>
|
||||
</span>
|
||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ไอคอนจะเปลี่ยนเป็น
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span class="triangle"
|
||||
style="border-top-width: 8px;
|
||||
transform: rotate(180deg);">
|
||||
</span>
|
||||
</span>
|
||||
ดังรูปภาพ และจะแสดงข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/4_organchart/3-25.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 25 เลือกดูข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องแสดงข้อมูลแผนภูมิองค์กรเมื่อมีการกดคลิกแสดงตำแหน่งย่อย
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถกดไอคอน
|
||||
<q-icon name="mdi-image-area" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-26.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 26 ดาวน์โหลดไฟล์ PNG
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพไฟล์ PNG <br>
|
||||
หมายเลข 2 แถบการเข้าถึงไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-27.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 27 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon name="mdi-file-pdf-box" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-28.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 28 ดาวน์โหลดไฟล์ PDF
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ข้อมูล PDF <br>
|
||||
หมายเลข 2 แถบการเข้าถึงข้อมูลไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-29.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 29 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.3 แผนภูมิองค์กร
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร”
|
||||
ระบบแสดงดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/4_organchart/3-23.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 23 หน้าแผนภูมิองค์กร
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br />
|
||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br />
|
||||
หมายเลข 3 รายละเอียดแผนภูมิโครงสร้าง
|
||||
โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้ข้อมูลที่แสดงเป็นข้อมูลเล็กลง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดเลือกไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
class="triangle"
|
||||
style="border-top-width: 8px; transform: rotate(-90deg)"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/4_organchart/3-24.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 24 เลือกดูข้อมูลเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
class="triangle"
|
||||
style="border-top-width: 8px; transform: rotate(-90deg)"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ไอคอนจะเปลี่ยนเป็น
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
class="triangle"
|
||||
style="border-top-width: 8px; transform: rotate(180deg)"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
ดังรูปภาพ และจะแสดงข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/4_organchart/3-25.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 25 เลือกดูข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงข้อมูลแผนภูมิองค์กรเมื่อมีการกดคลิกแสดงตำแหน่งย่อย
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดไอคอน
|
||||
<q-icon
|
||||
name="mdi-image-area"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-26.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 26 ดาวน์โหลดไฟล์ PNG
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพไฟล์ PNG <br />
|
||||
หมายเลข 2 แถบการเข้าถึงไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-27.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 27 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon
|
||||
name="mdi-file-pdf-box"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-28.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 28 ดาวน์โหลดไฟล์ PDF
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ข้อมูล PDF <br />
|
||||
หมายเลข 2 แถบการเข้าถึงข้อมูลไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/4_organchart/3-29.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 29 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.circle-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #EFEFEF;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #efefef;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent; /* ปรับความกว้างลง */
|
||||
border-right: 5px solid transparent; /* ปรับความกว้างลง */
|
||||
border-bottom: 5px solid #000000; /* ปรับความสูงลง */
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent; /* ปรับความกว้างลง */
|
||||
border-right: 5px solid transparent; /* ปรับความกว้างลง */
|
||||
border-bottom: 5px solid #000000; /* ปรับความสูงลง */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -24,319 +24,322 @@ const text = ref("");
|
|||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.5 จัดการบัญชี 2
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงหน้าจอดังรูป
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-46.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 46 หน้าผังโครงสร้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br>
|
||||
หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br>
|
||||
หมายเลข 3 การยืนยันออกคำสั่ง <br>
|
||||
หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน และระดับตำแหน่ง <br>
|
||||
หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br>
|
||||
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-47.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 47 รายละเอียดที่ได้ทำการเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดเลือกไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
style="font-weight: bold;
|
||||
font-size: 10px;
|
||||
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
|
||||
transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
|
||||
">
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
style="font-weight: bold;
|
||||
font-size: 10px;
|
||||
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
|
||||
transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
|
||||
">
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-48.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px; display: flex;">
|
||||
- สามารถคลิกไอคอน
|
||||
<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
|
||||
<i class="q-icon notranslate material-icons" aria-hidden="true" role="img">assignment_turned_in</i>
|
||||
</span>
|
||||
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/6_account2/3-49.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 49 ออกคำสั่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ยืนยัน” จะปรากฏป้ายเตือนบริเวณมุมขวาล่างดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการยืนยันเพื่อเอาไปออกคำสั่ง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-50.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br>
|
||||
หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br>
|
||||
หมายเลข 3 การยืนยันออกคำสั่ง <br>
|
||||
หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน และระดับตำแหน่ง <br>
|
||||
หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br>
|
||||
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/6_account2/3-51.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;">
|
||||
- สามารถสืบค้นข้อมูลที่ช่องค้นหา และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/6_account2/3-52.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 52 รายละเอียดที่ได้ทำการเลือก
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพื่อค้นหาข้อมูลจัดการบัญชีที่ต้องการรายละเอียดข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกหัวคอลัมแสดงตารางข้อมูลตามที่ได้ทำการคลิกเลือกคอมลัมน์แสดงข้อมูลไว้
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.5 จัดการบัญชี 2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร”
|
||||
ระบบแสดงหน้าจอดังรูป
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-46.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 46 หน้าผังโครงสร้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br />
|
||||
หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br />
|
||||
หมายเลข 3 การยืนยันออกคำสั่ง <br />
|
||||
หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน
|
||||
และระดับตำแหน่ง <br />
|
||||
หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
|
||||
เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
|
||||
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
||||
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน
|
||||
ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-47.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 47 รายละเอียดที่ได้ทำการเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- สามารถกดเลือกไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
style="
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
|
||||
transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
|
||||
"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ
|
||||
และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span
|
||||
style="
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
|
||||
transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
|
||||
"
|
||||
>
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-48.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px; display: flex">
|
||||
- สามารถคลิกไอคอน
|
||||
<span
|
||||
class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
|
||||
>
|
||||
<i
|
||||
class="q-icon notranslate material-icons"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
>assignment_turned_in</i
|
||||
>
|
||||
</span>
|
||||
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/6_account2/3-49.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 49 ออกคำสั่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ยืนยัน” จะปรากฏป้ายเตือนบริเวณมุมขวาล่างดังรูปภาพ
|
||||
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการยืนยันเพื่อเอาไปออกคำสั่ง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/6_account2/3-50.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบเมนูหน่วยงานหรือสำนักงาน <br />
|
||||
หมายเลข 2 ไอคอนซ่อนแถบเมนูหน่วยงานหรือสำนักงาน <br />
|
||||
หมายเลข 3 การยืนยันออกคำสั่ง <br />
|
||||
หมายเลข 4 ประวัติบัญชีจัดข้าราชการกรุงเทพฯสามัญเข้าตำแหน่งประเภท สายงาน
|
||||
และระดับตำแหน่ง <br />
|
||||
หมายเลข 5 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
|
||||
เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
|
||||
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
||||
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/6_account2/3-51.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- สามารถสืบค้นข้อมูลที่ช่องค้นหา
|
||||
และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/6_account2/3-52.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 52 รายละเอียดที่ได้ทำการเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ช่องสำหรับกรอกเพื่อค้นหาข้อมูลจัดการบัญชีที่ต้องการรายละเอียดข้อมูล
|
||||
<br />
|
||||
หมายเลข 2
|
||||
ช่องสำหรับคลิกเลือกหัวคอลัมแสดงตารางข้อมูลตามที่ได้ทำการคลิกเลือกคอมลัมน์แสดงข้อมูลไว้
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.circle-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: hwb(0 100% 0%);
|
||||
border: 1px solid hwb(0 86% 14% / 0.611); ;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: hwb(0 100% 0%);
|
||||
border: 1px solid hwb(0 86% 14% / 0.611);
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
|
||||
}
|
||||
|
||||
.col, .col-xs {
|
||||
flex: 0 0 5%;
|
||||
color: #00aa86;
|
||||
font-size: 20px;
|
||||
.col,
|
||||
.col-xs {
|
||||
flex: 0 0 5%;
|
||||
color: #00aa86;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -24,382 +24,367 @@ const text = ref("");
|
|||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.6 รายงานบัญชี
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “รายงานบัญชี” ระบบแสดงดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/7_report/3-53.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 53 หน้ารายงานบัญชี
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 แถบบัญชี <br>
|
||||
หมายเลข 2 เลือกรายการหน่วยงานหรือส่วนราชการที่ต้องการออกรายงาน <br>
|
||||
หมายเลข 3 ดาวน์โหลดรายงาน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- กดเลือกบัญชี 1 เพื่อออกรายงานหน่วยงาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/7_report/3-54.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 54 เลือกหน่วยงานเพื่อออกรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
||||
<q-icon name="mdi-download"
|
||||
style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-55.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 55 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-56.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 56 ไฟล์รายงานบัญชีของหน่วยงานที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- กดเลือกบัญชี2 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-57.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 57 เลือกส่วนราชการเพื่อออกรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
||||
<q-icon name="mdi-download"
|
||||
style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-58.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 58 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 2
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-59.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 59 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- กดเลือกบัญชี 3 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-60.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 60 เลือกส่วนราชการเพื่อออกรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
||||
<q-icon name="mdi-download"
|
||||
style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-61.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 61 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 3
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-62.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 62 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.6 รายงานบัญชี
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “รายงานบัญชี” ระบบแสดงดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/7_report/3-53.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 53 หน้ารายงานบัญชี
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบบัญชี <br />
|
||||
หมายเลข 2 เลือกรายการหน่วยงานหรือส่วนราชการที่ต้องการออกรายงาน <br />
|
||||
หมายเลข 3 ดาวน์โหลดรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- กดเลือกบัญชี 1 เพื่อออกรายงานหน่วยงาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/7_report/3-54.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 54 เลือกหน่วยงานเพื่อออกรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-download"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-55.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 55 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-56.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 56 ไฟล์รายงานบัญชีของหน่วยงานที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- กดเลือกบัญชี2 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-57.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 57 เลือกส่วนราชการเพื่อออกรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-download"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-58.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 58 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-59.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 59 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- กดเลือกบัญชี 3 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-60.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 60 เลือกส่วนราชการเพื่อออกรายงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- เมื่อเลือกหน่วยงานที่ต้องการออกรายงานได้แล้วให้กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-download"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-61.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 61 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
class="col-12"
|
||||
src="@/assets/manual/03_structure/7_report/3-62.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 62 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -24,272 +24,242 @@ const text = ref("");
|
|||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.7 ผังโครงสร้างลูกจ้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-63.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 63 หน้าผังโครงสร้างลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 รายการผังโครงสร้างลูกจ้าง <br>
|
||||
หมายเลข 2 ไอคอนบวก เพื่อสร้างโครงสร้างและกรอบอัตรกำลัง <br>
|
||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br>
|
||||
หมายเลข 5 ไอคอนถังขยะ สามารถคลิกเพื่อลบรายการผังโครงสร้างลูกจ้าง
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อต้องการสร้างโครงสร้างและกรอบอัตรากำลัง ให้คลิกไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ระบบแสดงกล่องเพื่อให้กรอบข้อมูลดังรูป เมื่อกรอกข้อมูลเรียบร้อยแล้วให้กดไอคอนบันทึกข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-64.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 64 กรอกข้อมูลโครงสร้างหน่วยงาน
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับเลือกหน่วยงาน <br>
|
||||
หมายเลข 2 ช่องสำหรับเลือกรหัสหน่วยงาน <br>
|
||||
หมายเลข 3 ช่องสำหรับเลือกรหัสส่วนราชการ <br>
|
||||
หมายเลข 4 ช่องสำหรับชื่อย่อหน่วยงาน <br>
|
||||
หมายเลข 5 ช่องสำหรับกรอกเลขที่หน่วยงาน <br>
|
||||
หมายเลข 6 ช่องสำหรับกรอกเลขที่ส่วนราชการ <br>
|
||||
หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br>
|
||||
หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br>
|
||||
หมายเลข 9 ช่องสำหรับเลือกประเภทหน่วยงาน <br>
|
||||
หมายเลข 10 ช่องสำหรับเลือกระดับหน่วยงาน <br>
|
||||
หมายเลข 11 ช่องสำหรับเลือกหน่วยงานต้นสังกัด <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหน่วยราชการต้นสังกัด <br>
|
||||
หมายเลข 13 ช่องสำหรับเลือกลำดับผังโครงสร้าง <br>
|
||||
หมายเลข 14 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br>
|
||||
หมายเลข 15 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br>
|
||||
หมายเลข 16 ช่องสำหรับเลือกหมายเลขโทรสาร <br>
|
||||
หมายเลข 17 ช่องสำหรับเลือกกรอกหน้าที่รับผิดชอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-65.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 65 กรอกข้อมูลโครงสร้างตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับเลือกสายงาน <br>
|
||||
หมายเลข 2 ช่องสำหรับเลือกตำแหน่ง <br>
|
||||
หมายเลข 3 ช่องสำหรับเลือกด้าน/สาขา <br>
|
||||
หมายเลข 4 ช่องสำหรับเลือกระดับ <br>
|
||||
หมายเลข 5 ช่องสำหรับเลือกสถานภาพของตำแหน่ง <br>
|
||||
หมายเลข 6 ช่องสำหรับเลือกเลขที่ตำแหน่ง <br>
|
||||
หมายเลข 7 ช่องสำหรับกรอกคุณวุฒิ <br>
|
||||
หมายเลข 8 ช่องสำหรับกรอกเงื่อนไขตำแหน่ง <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกหมายเหตุ <br>
|
||||
หมายเลข 10 ช่องสำหรับเลือหัวหน้า
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-66.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 66 กรอกข้อมูลโครงสร้างตำแหน่ง(ต่อ)
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br>
|
||||
หมายเลข 3 ปุ่มบันทึก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อต้องแก้ไขโครงสร้างและกรอบอัตรากำลัง ให้คลิกเลือกรายการผังโครงสร้างลูกจ้าง ระบบแสดงกล่องเพื่อให้แก้ไขข้อมูลดังรูป เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน บันทึกข้อมูล โดยสามารถดูรายละเอียดตามรูปที่ 3 – 64, 3 – 65 และ3 - 66
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-67.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 67 แก้ไขข้อมูลโครงสร้างตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br>
|
||||
หมายเลข 3 ปุ่มบันทึก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
3.7 ผังโครงสร้างลูกจ้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px"></div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-63.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 63 หน้าผังโครงสร้างลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 รายการผังโครงสร้างลูกจ้าง <br />
|
||||
หมายเลข 2 ไอคอนบวก เพื่อสร้างโครงสร้างและกรอบอัตรกำลัง <br />
|
||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
|
||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br />
|
||||
หมายเลข 5 ไอคอนถังขยะ สามารถคลิกเพื่อลบรายการผังโครงสร้างลูกจ้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อต้องการสร้างโครงสร้างและกรอบอัตรากำลัง ให้คลิกไอคอน
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
ระบบแสดงกล่องเพื่อให้กรอบข้อมูลดังรูป
|
||||
เมื่อกรอกข้อมูลเรียบร้อยแล้วให้กดไอคอนบันทึกข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-64.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 64 กรอกข้อมูลโครงสร้างหน่วยงาน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับเลือกหน่วยงาน <br />
|
||||
หมายเลข 2 ช่องสำหรับเลือกรหัสหน่วยงาน <br />
|
||||
หมายเลข 3 ช่องสำหรับเลือกรหัสส่วนราชการ <br />
|
||||
หมายเลข 4 ช่องสำหรับชื่อย่อหน่วยงาน <br />
|
||||
หมายเลข 5 ช่องสำหรับกรอกเลขที่หน่วยงาน <br />
|
||||
หมายเลข 6 ช่องสำหรับกรอกเลขที่ส่วนราชการ <br />
|
||||
หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br />
|
||||
หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br />
|
||||
หมายเลข 9 ช่องสำหรับเลือกประเภทหน่วยงาน <br />
|
||||
หมายเลข 10 ช่องสำหรับเลือกระดับหน่วยงาน <br />
|
||||
หมายเลข 11 ช่องสำหรับเลือกหน่วยงานต้นสังกัด <br />
|
||||
หมายเลข 12 ช่องสำหรับเลือกหน่วยราชการต้นสังกัด <br />
|
||||
หมายเลข 13 ช่องสำหรับเลือกลำดับผังโครงสร้าง <br />
|
||||
หมายเลข 14 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br />
|
||||
หมายเลข 15 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br />
|
||||
หมายเลข 16 ช่องสำหรับเลือกหมายเลขโทรสาร <br />
|
||||
หมายเลข 17 ช่องสำหรับเลือกกรอกหน้าที่รับผิดชอบ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-65.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 65 กรอกข้อมูลโครงสร้างตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับเลือกสายงาน <br />
|
||||
หมายเลข 2 ช่องสำหรับเลือกตำแหน่ง <br />
|
||||
หมายเลข 3 ช่องสำหรับเลือกด้าน/สาขา <br />
|
||||
หมายเลข 4 ช่องสำหรับเลือกระดับ <br />
|
||||
หมายเลข 5 ช่องสำหรับเลือกสถานภาพของตำแหน่ง <br />
|
||||
หมายเลข 6 ช่องสำหรับเลือกเลขที่ตำแหน่ง <br />
|
||||
หมายเลข 7 ช่องสำหรับกรอกคุณวุฒิ <br />
|
||||
หมายเลข 8 ช่องสำหรับกรอกเงื่อนไขตำแหน่ง <br />
|
||||
หมายเลข 9 ช่องสำหรับกรอกหมายเหตุ <br />
|
||||
หมายเลข 10 ช่องสำหรับเลือหัวหน้า
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-66.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 66 กรอกข้อมูลโครงสร้างตำแหน่ง(ต่อ)
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br />
|
||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br />
|
||||
หมายเลข 3 ปุ่มบันทึก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อต้องแก้ไขโครงสร้างและกรอบอัตรากำลัง
|
||||
ให้คลิกเลือกรายการผังโครงสร้างลูกจ้าง
|
||||
ระบบแสดงกล่องเพื่อให้แก้ไขข้อมูลดังรูป
|
||||
เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน บันทึกข้อมูล
|
||||
โดยสามารถดูรายละเอียดตามรูปที่ 3 – 64, 3 – 65 และ3 - 66
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure/8_chartemploy/3-67.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 – 67 แก้ไขข้อมูลโครงสร้างตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br />
|
||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br />
|
||||
หมายเลข 3 ปุ่มบันทึก
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
88
src/modules/01_manual/components/3_Structure/view.vue
Normal file
88
src/modules/01_manual/components/3_Structure/view.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<script setup lang="ts">
|
||||
import structuremain from "./31_Main.vue";
|
||||
import position from "./32_Position.vue";
|
||||
import structure from "./33_Structure.vue";
|
||||
import organchart from "./34_organchart.vue";
|
||||
import chartstru from "./35_chartstru.vue";
|
||||
import account2 from "./36_account2.vue";
|
||||
import report from "./37_report.vue";
|
||||
import chartemploy from "./38_chartemploy.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="structuremain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<structuremain />
|
||||
</div>
|
||||
<div
|
||||
id="position"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<position />
|
||||
</div>
|
||||
<div
|
||||
id="structure"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<structure />
|
||||
</div>
|
||||
<div
|
||||
id="organchart"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<organchart />
|
||||
</div>
|
||||
<div
|
||||
id="chartstru"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<chartstru />
|
||||
</div>
|
||||
<div
|
||||
id="account2"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<account2 />
|
||||
</div>
|
||||
<div
|
||||
id="report"
|
||||
name="7"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<report />
|
||||
</div>
|
||||
<div
|
||||
id="chartemploy"
|
||||
name="8"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<chartemploy />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,525 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.2 การค้นหาข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเข้าสู่หน้า ทะเบียนประวัติ สามารถทำการค้นหารายชื่อข้อมูลต่างๆ ได้จากการคลิกเมาส์เลือกประเภทข้อมูลของลูกจ้าง ดังในรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-3.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 3 แสดงช่องเลือกประเภทลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกประเภทลูกจ้างที่ต้องการข้อมูล
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกเลือกประเภทข้อมูลลูกจ้างที่ต้องการข้อมูล และทำการใช้เมาส์คลิกปุ่มค้นหา จากนั้นระบบจะแสดงข้อมูลรายชื่อประวัติทะเบียนตามประเภทลูกจ้างที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-4.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 4 แสดงการเลือกประเภทข้อมูลทะเบียนของลูกจ้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเมนูย่อยประเภทของลูกจ้างที่ต้องการข้อมูล
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกช่อง “เลขประจำตัวประชาชน” แล้วกรอกเลขบัตรประจำตัวประชาชนที่ต้องการค้นหาข้อมูลทะเบียนประวัติ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-5.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 5 แสดงช่องกรอกเลขประจำตัวประชาชน
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลตรงตามเลขประจำตัวประชาชนที่กรอก และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิกในช่อง “เลขประจำตัวประชาชน” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-6.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 6 แสดงการกรอกเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกหมายเลขประจำตัวประชาชนที่ต้องการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกหมายเลขประจำตัวประชาชน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px; display: flex; align-items: center;">
|
||||
- สามารถกดเลือกไอคอน
|
||||
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: white;
|
||||
background-color: #D1D1D1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
|
||||
ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-7.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 7 แสดงการกรอกชื่อ-นามสกุลเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- ทำการใช้เมาส์คลิกช่อง “ปีเกษียณ” และทำการกรอกหรือเลือกปีเกษียณของผู้ที่ต้องการข้อมูลทะเบียนประวัติ และทำการคลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลตรงตามปีเกษียณที่เลือก และหากต้องการค้นหาข้อมูลเพิ่มให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: white;
|
||||
background-color: #D1D1D1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
|
||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก และทำการเลือกข้อมูลปีเกษียณใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-8.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 8 แสดงการเลือกและกรอกข้อมูลปีเกษียณเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกปีเกษียณที่ต้องการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงรายชื่อปีเกษียณที่ทำการคลิกเลือกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- ทำการใช้เมาส์คลิกช่อง “อายุราชการ” และทำการกรอกหรือใช้เมาส์คลิกลูกศรขึ้นเพื่อเพิ่มตัวเลขจำนวนปีของผู้ที่ต้องการข้อมูลทะเบียนประวัติ และทำการคลิกปุ่ม “ค้นหา”
|
||||
ระบบแสดงข้อมูลรายชื่อตรงตามปีเกษียณตามที่กรอก และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: white;
|
||||
background-color: #D1D1D1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-9.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 9 แสดงการกรอกหรือคลิกเพิ่มตัวเลขของปีอายุราชการเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกอายุราชการเพื่อทำการค้นหารายชื่อที่ต้องการ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อที่อายุราชการตรงตามที่กรอกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ทำการใช้เมาส์คลิกช่อง “คอลัมน์” เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลที่ต้องการ หากต้องการให้ตารางแสดงข้อมูลเพียง ชื่อ-สกุล, ตำแหน่ง, ตำแหน่งทางการบริหาร,
|
||||
เงินเดือน ให้ใช้เมาส์ทำการคลิกหัวข้อคอลัมน์ที่เหลือให้กลายเป็นสีดำ และหัวข้อที่ต้องการให้แสดงหรือหัวข้อคอลัมน์ที่เลือกจะเป็นสีเขียว ดังในรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-10.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 10 แสดงการเลือกหัวข้อคอลัมน์ที่ต้องให้แสดง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 เมนูย่อยของช่องคอลัมน์สามารถทำการคลิกเลือกรายชื่อคอลัมน์สำหรับการแสดงข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ระบบแสดงตารางแสดงรายชื่อข้อมูลมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-11.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 11 แสดงรายชื่อข้อมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่เลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงผลคอลัมน์ที่ทำการเลือกเพื่อแสดงข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px; display: inline-block;">
|
||||
- ทำการใช้เมาส์คลิกปุ่ม
|
||||
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.45em;">
|
||||
<div class="q-toggle__track"></div>
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;" ></div>
|
||||
</div>
|
||||
|
||||
ให้กลายเป็น
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.45em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
ในช่อง “แสดงข้อมูลผู้พ้นจากราชการ” เพื่อแสดงข้อมูลรายชื่อทะเบียนประวัติผู้พ้นจากราชการ จากนั้นใช้เมาส์คลิกปุ่ม “ค้นหา”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-12.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 12 แสดงรายชื่อข้อมูลผู้พ้นจากราชการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเพื่อดูข้อมูลผู้พ้นจากราชการ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อผู้พ้นจากราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,473 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.3 การดูรายละเอียดข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเข้าสู้หน้าทะเบียนประวัติ ให้ใช้เมาส์ทำการคลิกข้อมูลรายชื่อรายชื่อที่ต้องการดูรายละเอียด ระบบจะแสดงข้อมูลตามหัวข้อย่อยตามตารางข้อมูลส่วนตัว ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-13.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 13 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลส่วนตัว
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลส่วนตัว <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อกรอกข้อมูลออกจากราชการ <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลส่วนตัว <br>
|
||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลราชการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-14.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 14 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลราชการ
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลราชการ <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลราชการ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลที่อยู่ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-15.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 15 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลที่อยู่
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลที่อยู่ <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลที่อยู่
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลครอบครัว ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-16.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 16 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลครอบครัว
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลครอบครัว <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลครอบครัว
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px; display: flex; align-items: center;">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลใบอนุญาตประกอบอาชีพ, ประวัติการศึกษาและการฝึกอบรม/ดูงาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-17.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 17 แสดงหน้าต่างทะเบียนประวัติข้อมูลใบอนุญาตประกอบอาชีพ ประวัติการศึกษา การอบรม
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลใบอนุญาตประกอบอาชีพ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลใบอนุญาตประกอบอาชีพ <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาใบประกอบอาชีพ <br>
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลใบประกอบอาชีพ <br>
|
||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลประวัติการศึกษา <br>
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลประวัติการศึกษา <br>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประวัติการศึกษา <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประวัติการศึกษา <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการฝึกอบรมดูงาน <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลการฝึกอบรมดูงาน <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาการฝึกอบรมดูงาน <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการฝึกอบรมดูงาน
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลเครื่องราชอิสริยาภรณ์, ประกาศเกียรติคุณและผลการประเมินการปฏิบัติราชการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-18.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 18 แสดงหน้าต่างทะเบียนประวัติข้อมูลเครื่องราชฯ ประกาศเกียรติคุณ ผลการประเมิน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลเครื่องราชอิสริยาภรณ์ <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาเครื่องราชอิสริยาภรณ์ <br>
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลเครื่องราชอิสริยาภรณ์ <br>
|
||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลประกาศเกียรติคุณ <br>
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลประกาศเกียรติคุณ <br>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประกาศเกียรติคุณ <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประกาศเกียรติคุณ <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลผลการประเมินการปฏิบัติราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลตำแหน่งเงินเดือน, วินัยและการลา ดังรูปรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-19.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 19 แสดงหน้าต่างทะเบียนประวัติข้อมูลตำแหน่งเงินเดือน, วินัยและการลา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลตำแหน่งเงินเดือน <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลตำแหน่งเงินเดือน <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลตำแหน่งเงินเดือน <br>
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลตำแหน่งเงินเดือน <br>
|
||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลวินัย <br>
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลวินัย <br>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลเกี่ยวกับวินัย <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวินัย <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการลา <br>
|
||||
หมายเลข 10 ปุ่มสำหรับแสดงข้อมูลสรุปวันลา <br>
|
||||
หมายเลข 11 ช่องสำหรับแสดงข้อมูลการลา <br>
|
||||
หมายเลข 12 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลการลา <br>
|
||||
หมายเลข 13 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการลา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลความสามารถพิเศษ, ปฏิบัติราชการพิเศษและวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-20.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 20 แสดงหน้าต่างทะเบียนประวัติข้อมูลความสามารถพิเศษ, ปฏิบัติราชการพิเศษฯ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลความสามารถพิเศษ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลความสามารถพิเศษ <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาความสามารถพิเศษ <br>
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลความสามารถพิเศษ <br>
|
||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลปฏิบัติราชการพิเศษ <br>
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลปฏิบัติราชการพิเศษ <br>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาปฏิบัติราชการพิเศษ <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลปฏิบัติราชการพิเศษ <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลอื่นๆ และเอกสารหลักฐาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-21.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 21 แสดงหน้าต่างทะเบียนประวัติข้อมูลอื่นๆ และเอกสารหลักฐาน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หหมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลอื่นๆ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลอื่นๆ <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลอื่นๆ <br>
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลอื่นๆ <br>
|
||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขอัปโหลดไฟล์เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,156 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.5 การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลในหัวข้อต่างๆ ในหน้าข้อมูลส่วนตัวที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาของแต่ละหัวข้อและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้า
|
||||
นี้ลงไประบบจะแสดงข้อมูลที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/5_select/4-81.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 81 แสดงตารางการค้นหาข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากการกรอกค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตารางที่ต้องการข้อมูลและหากหัวคอลัมน์
|
||||
แสดงข้อมูลไม่ครบและต้องการให้คอลัมน์แสดงผลเพิ่มขึ้นและลดลงหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/5_select/4-82.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 82 แสดงตารางการเลือกคอลัมน์แสดงข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูล <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,282 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.6 การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 20px; margin-left: 10px;">
|
||||
- หากต้องการให้หน้าแสดงผลหน้าข้อมูลส่วนตัวของพนักงานแสดงข้อมูลเต็มจอให้ใช้เมาส์คลิก
|
||||
<i class="q-icon mdi mdi-backburger"
|
||||
style="color: #747474;
|
||||
background-color: #DADADA;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อให้แถบเมนูด้านข้างของหน้าจอพับเก็บเข้าด้านข้าง และระบบจะแสดง
|
||||
ข้อมูลของพนักงานเต็มจอ และหากต้องการให้ระบบแสดงแถบเมนูเหมือนเดิมให้ใช้เมาส์ทำการคลิก
|
||||
<i class="q-icon mdi mdi-backburger"
|
||||
style="color: #747474;
|
||||
background-color: #DADADA;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อให้แถบเมนูแสดงเหมือนเดิม
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-83.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 83 แสดงการพับแถบเมนูด้ายซ้ายเพื่อให้ข้อมูลแสดงเต็มจอ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อเปิด-ปิด แถบเมนูด้านข้าง เพื่อให้ระบบแสดงข้อมูลส่วนกว้างขึ้น
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถทำการคลิกเลือกหัวข้อเมนูตารางเพื่อให้ระบบเลื่อนตารางให้อัตโนมัติด้วยการคลิกชื่อหัวตารางจากแถบเมนูด้านขวาได้
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-84.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 84 แสดงแถบหัวข้อเมนูตาราง
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 แถบหัวข้อเมนูตารางข้อมูลส่วนตัวสำหรับกดคลิกชื่อตาราง เพื่อให้ระบบเลื่อนไปยังตารางนั้นๆได้ เพื่อให้ง่ายต่อการดูข้อมูลและแก้ไขข้อมูล
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ และวัติแบบย่อให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-file-eye-outline" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดข้อมูลของพนักงาน
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-85.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 85 แสดงหน้าดาวน์โหลดไฟล์เอกสารของพนักงาน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ข้อความสำหรับคลิกเลือกเพื่อดาวน์โหลดชนิดของเอกสารที่ต้องการดาวน์โหลด โดยระบบแสดงการเลือกการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ
|
||||
ประวัติแบบย่อของพนักงาน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- และหากต้องการทำการบันทึกการออกจากราชการของพนักงานให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-home-export-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
จากนั้นระบบจะทำการแสดงตาราง “ประเภทการพ้นราชการ” ให้ทำการบันทึกข้อมูลให้ครบตามที่ระบบแนะนำ หลังจากกรอกข้อมูลเสร็จแล้วให้ทำการคลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูล และถ้าหากต้องการยกเลิกการเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: red;
|
||||
background-color: #FFE5E6;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อยกเลิกการบันทึกข้อมูล
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-86.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 86 แสดงตารางการเพิ่มข้อมูลประเภทการพ้นราชการ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกประเภทการพ้นราชการ <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกวันที่พ้นราชการ <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดสาเหตุ/เหตุผลของการพ้นจากราชการ <br>
|
||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลคำสั่ง/เอกสารอ้างอิง <br>
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวัน เดือน ปีที่ออกคำสั่ง
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -5,12 +5,12 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<!--
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -26,7 +26,7 @@ const text = ref("");
|
|||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
|
|
@ -117,8 +117,8 @@ const text = ref("");
|
|||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
530
src/modules/01_manual/components/4_registration/42_find.vue
Normal file
530
src/modules/01_manual/components/4_registration/42_find.vue
Normal file
|
|
@ -0,0 +1,530 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.2 การค้นหาข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเข้าสู่หน้า ทะเบียนประวัติ สามารถทำการค้นหารายชื่อข้อมูลต่างๆ
|
||||
ได้จากการคลิกเมาส์เลือกประเภทข้อมูลของลูกจ้าง ดังในรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-3.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 3 แสดงช่องเลือกประเภทลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกประเภทลูกจ้างที่ต้องการข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกเลือกประเภทข้อมูลลูกจ้างที่ต้องการข้อมูล
|
||||
และทำการใช้เมาส์คลิกปุ่มค้นหา
|
||||
จากนั้นระบบจะแสดงข้อมูลรายชื่อประวัติทะเบียนตามประเภทลูกจ้างที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-4.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 4 แสดงการเลือกประเภทข้อมูลทะเบียนของลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเมนูย่อยประเภทของลูกจ้างที่ต้องการข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกช่อง “เลขประจำตัวประชาชน”
|
||||
แล้วกรอกเลขบัตรประจำตัวประชาชนที่ต้องการค้นหาข้อมูลทะเบียนประวัติ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-5.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 5 แสดงช่องกรอกเลขประจำตัวประชาชน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกปุ่ม “ค้นหา”
|
||||
ระบบแสดงข้อมูลตรงตามเลขประจำตัวประชาชนที่กรอก
|
||||
และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิกในช่อง
|
||||
“เลขประจำตัวประชาชน” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-6.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 6 แสดงการกรอกเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกหมายเลขประจำตัวประชาชนที่ต้องการค้นหา <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกหมายเลขประจำตัวประชาชน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- สามารถกดเลือกไอคอน
|
||||
|
||||
<i
|
||||
class="q-icon mdi mdi-close"
|
||||
style="
|
||||
color: white;
|
||||
background-color: #d1d1d1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
"
|
||||
>
|
||||
</i>
|
||||
|
||||
ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-7.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 7 แสดงการกรอกชื่อ-นามสกุลเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกช่อง “ปีเกษียณ”
|
||||
และทำการกรอกหรือเลือกปีเกษียณของผู้ที่ต้องการข้อมูลทะเบียนประวัติ
|
||||
และทำการคลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลตรงตามปีเกษียณที่เลือก
|
||||
และหากต้องการค้นหาข้อมูลเพิ่มให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<i
|
||||
class="q-icon mdi mdi-close"
|
||||
style="
|
||||
color: white;
|
||||
background-color: #d1d1d1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
"
|
||||
>
|
||||
</i>
|
||||
|
||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก
|
||||
และทำการเลือกข้อมูลปีเกษียณใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-8.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 8 แสดงการเลือกและกรอกข้อมูลปีเกษียณเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกปีเกษียณที่ต้องการค้นหา <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงรายชื่อปีเกษียณที่ทำการคลิกเลือกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกช่อง “อายุราชการ”
|
||||
และทำการกรอกหรือใช้เมาส์คลิกลูกศรขึ้นเพื่อเพิ่มตัวเลขจำนวนปีของผู้ที่ต้องการข้อมูลทะเบียนประวัติ
|
||||
และทำการคลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลรายชื่อตรงตามปีเกษียณตามที่กรอก
|
||||
และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<i
|
||||
class="q-icon mdi mdi-close"
|
||||
style="
|
||||
color: white;
|
||||
background-color: #d1d1d1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
"
|
||||
>
|
||||
</i>
|
||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-9.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 9 แสดงการกรอกหรือคลิกเพิ่มตัวเลขของปีอายุราชการเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกอายุราชการเพื่อทำการค้นหารายชื่อที่ต้องการ
|
||||
<br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อที่อายุราชการตรงตามที่กรอกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกช่อง “คอลัมน์”
|
||||
เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลที่ต้องการ
|
||||
หากต้องการให้ตารางแสดงข้อมูลเพียง ชื่อ-สกุล, ตำแหน่ง,
|
||||
ตำแหน่งทางการบริหาร, เงินเดือน
|
||||
ให้ใช้เมาส์ทำการคลิกหัวข้อคอลัมน์ที่เหลือให้กลายเป็นสีดำ
|
||||
และหัวข้อที่ต้องการให้แสดงหรือหัวข้อคอลัมน์ที่เลือกจะเป็นสีเขียว
|
||||
ดังในรูป
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-10.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 10 แสดงการเลือกหัวข้อคอลัมน์ที่ต้องให้แสดง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
เมนูย่อยของช่องคอลัมน์สามารถทำการคลิกเลือกรายชื่อคอลัมน์สำหรับการแสดงข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
-
|
||||
ระบบแสดงตารางแสดงรายชื่อข้อมูลมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-11.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 11 แสดงรายชื่อข้อมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่เลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงผลคอลัมน์ที่ทำการเลือกเพื่อแสดงข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px; display: inline-block">
|
||||
- ทำการใช้เมาส์คลิกปุ่ม
|
||||
|
||||
<div
|
||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy"
|
||||
aria-hidden="true"
|
||||
style="
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
padding: 0 0.3em !important ;
|
||||
height: 0.45em;
|
||||
"
|
||||
>
|
||||
<div class="q-toggle__track"></div>
|
||||
<div
|
||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
||||
style="top: -0.07em"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
ให้กลายเป็น
|
||||
<div
|
||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
|
||||
aria-hidden="true"
|
||||
style="
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
padding: 0 0.3em !important ;
|
||||
height: 0.45em;
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
||||
style="top: -0.07em"
|
||||
></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
ในช่อง “แสดงข้อมูลผู้พ้นจากราชการ”
|
||||
เพื่อแสดงข้อมูลรายชื่อทะเบียนประวัติผู้พ้นจากราชการ
|
||||
จากนั้นใช้เมาส์คลิกปุ่ม “ค้นหา”
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-12.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 12 แสดงรายชื่อข้อมูลผู้พ้นจากราชการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเพื่อดูข้อมูลผู้พ้นจากราชการ <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อผู้พ้นจากราชการ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
483
src/modules/01_manual/components/4_registration/43_detail.vue
Normal file
483
src/modules/01_manual/components/4_registration/43_detail.vue
Normal file
|
|
@ -0,0 +1,483 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.3 การดูรายละเอียดข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเข้าสู้หน้าทะเบียนประวัติ
|
||||
ให้ใช้เมาส์ทำการคลิกข้อมูลรายชื่อรายชื่อที่ต้องการดูรายละเอียด
|
||||
ระบบจะแสดงข้อมูลตามหัวข้อย่อยตามตารางข้อมูลส่วนตัว ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-13.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 13 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลส่วนตัว
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลส่วนตัว <br />
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อกรอกข้อมูลออกจากราชการ <br />
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลส่วนตัว <br />
|
||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลราชการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-14.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 14 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลราชการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลราชการ <br />
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลที่อยู่ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-15.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 15 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลที่อยู่
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลที่อยู่ <br />
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลที่อยู่
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลครอบครัว ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-16.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 16 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลครอบครัว
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลครอบครัว <br />
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลครอบครัว
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="
|
||||
margin-top: 50px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลใบอนุญาตประกอบอาชีพ,
|
||||
ประวัติการศึกษาและการฝึกอบรม/ดูงาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-17.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 17 แสดงหน้าต่างทะเบียนประวัติข้อมูลใบอนุญาตประกอบอาชีพ
|
||||
ประวัติการศึกษา การอบรม
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลใบอนุญาตประกอบอาชีพ
|
||||
<br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลใบอนุญาตประกอบอาชีพ <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาใบประกอบอาชีพ <br />
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลใบประกอบอาชีพ <br />
|
||||
หมายเลข 5
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลประวัติการศึกษา
|
||||
<br />
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลประวัติการศึกษา <br />
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประวัติการศึกษา <br />
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประวัติการศึกษา <br />
|
||||
หมายเลข 9
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการฝึกอบรมดูงาน
|
||||
<br />
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลการฝึกอบรมดูงาน <br />
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาการฝึกอบรมดูงาน <br />
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการฝึกอบรมดูงาน
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลเครื่องราชอิสริยาภรณ์,
|
||||
ประกาศเกียรติคุณและผลการประเมินการปฏิบัติราชการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-18.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 18 แสดงหน้าต่างทะเบียนประวัติข้อมูลเครื่องราชฯ
|
||||
ประกาศเกียรติคุณ ผลการประเมิน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
<br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลเครื่องราชอิสริยาภรณ์ <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาเครื่องราชอิสริยาภรณ์ <br />
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
<br />
|
||||
หมายเลข 5
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลประกาศเกียรติคุณ
|
||||
<br />
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลประกาศเกียรติคุณ <br />
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประกาศเกียรติคุณ <br />
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประกาศเกียรติคุณ <br />
|
||||
หมายเลข 9
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ
|
||||
<br />
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลผลการประเมินการปฏิบัติราชการ <br />
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาผลการประเมินการปฏิบัติราชการ
|
||||
<br />
|
||||
หมายเลข 12
|
||||
ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลผลการประเมินการปฏิบัติราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลตำแหน่งเงินเดือน,
|
||||
วินัยและการลา ดังรูปรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-19.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 19 แสดงหน้าต่างทะเบียนประวัติข้อมูลตำแหน่งเงินเดือน,
|
||||
วินัยและการลา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลตำแหน่งเงินเดือน
|
||||
<br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลตำแหน่งเงินเดือน <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลตำแหน่งเงินเดือน <br />
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลตำแหน่งเงินเดือน <br />
|
||||
หมายเลข 5 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลวินัย
|
||||
<br />
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลวินัย <br />
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลเกี่ยวกับวินัย <br />
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวินัย <br />
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการลา
|
||||
<br />
|
||||
หมายเลข 10 ปุ่มสำหรับแสดงข้อมูลสรุปวันลา <br />
|
||||
หมายเลข 11 ช่องสำหรับแสดงข้อมูลการลา <br />
|
||||
หมายเลข 12 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลการลา <br />
|
||||
หมายเลข 13 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการลา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลความสามารถพิเศษ,
|
||||
ปฏิบัติราชการพิเศษและวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
||||
ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-20.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 20 แสดงหน้าต่างทะเบียนประวัติข้อมูลความสามารถพิเศษ,
|
||||
ปฏิบัติราชการพิเศษฯ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลความสามารถพิเศษ
|
||||
<br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลความสามารถพิเศษ <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาความสามารถพิเศษ <br />
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลความสามารถพิเศษ <br />
|
||||
หมายเลข 5
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลปฏิบัติราชการพิเศษ
|
||||
<br />
|
||||
หมายเลข 6 ช่องสำหรับแสดงข้อมูลปฏิบัติราชการพิเศษ <br />
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาปฏิบัติราชการพิเศษ <br />
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลปฏิบัติราชการพิเศษ
|
||||
<br />
|
||||
หมายเลข 9
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ
|
||||
<br />
|
||||
หมายเลข 10
|
||||
ช่องสำหรับแสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
||||
<br />
|
||||
หมายเลข 11
|
||||
ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
||||
<br />
|
||||
หมายเลข 12
|
||||
ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลอื่นๆ และเอกสารหลักฐาน
|
||||
ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-21.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 21 แสดงหน้าต่างทะเบียนประวัติข้อมูลอื่นๆ และเอกสารหลักฐาน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หหมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลอื่นๆ
|
||||
<br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลอื่นๆ <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลอื่นๆ <br />
|
||||
หมายเลข 4 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลอื่นๆ <br />
|
||||
หมายเลข 5
|
||||
ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขอัปโหลดไฟล์เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
3396
src/modules/01_manual/components/4_registration/44_edit.vue
Normal file
3396
src/modules/01_manual/components/4_registration/44_edit.vue
Normal file
File diff suppressed because it is too large
Load diff
138
src/modules/01_manual/components/4_registration/45_select.vue
Normal file
138
src/modules/01_manual/components/4_registration/45_select.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.5 การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 20px; margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลในหัวข้อต่างๆ
|
||||
ในหน้าข้อมูลส่วนตัวที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon
|
||||
name="mdi-magnify"
|
||||
style="margin: 0 5px; color: #afafaf"
|
||||
size="xs"
|
||||
/>
|
||||
ที่ช่องค้นหาของแต่ละหัวข้อและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้า
|
||||
นี้ลงไประบบจะแสดงข้อมูลที่ทำการค้นหา
|
||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon
|
||||
name="mdi-close"
|
||||
style="margin: 0 5px; color: #afafaf"
|
||||
size="xs"
|
||||
/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/5_select/4-81.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 81 แสดงตารางการค้นหาข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลสำหรับการค้นหา <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากการกรอกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-menu-down"
|
||||
style="margin: 0 5px; color: #afafaf"
|
||||
size="sm"
|
||||
/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตารางที่ต้องการข้อมูลและหากหัวคอลัมน์
|
||||
แสดงข้อมูลไม่ครบและต้องการให้คอลัมน์แสดงผลเพิ่มขึ้นและลดลงหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/5_select/4-82.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 82 แสดงตารางการเลือกคอลัมน์แสดงข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูล <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูล
|
||||
<br />
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลตามคอลัมน์ที่ทำการเลือก
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
256
src/modules/01_manual/components/4_registration/46_window.vue
Normal file
256
src/modules/01_manual/components/4_registration/46_window.vue
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
4.6 การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 20px; margin-left: 10px">
|
||||
-
|
||||
หากต้องการให้หน้าแสดงผลหน้าข้อมูลส่วนตัวของพนักงานแสดงข้อมูลเต็มจอให้ใช้เมาส์คลิก
|
||||
<i
|
||||
class="q-icon mdi mdi-backburger"
|
||||
style="
|
||||
color: #747474;
|
||||
background-color: #dadada;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
"
|
||||
>
|
||||
</i>
|
||||
เพื่อให้แถบเมนูด้านข้างของหน้าจอพับเก็บเข้าด้านข้าง และระบบจะแสดง
|
||||
ข้อมูลของพนักงานเต็มจอ
|
||||
และหากต้องการให้ระบบแสดงแถบเมนูเหมือนเดิมให้ใช้เมาส์ทำการคลิก
|
||||
<i
|
||||
class="q-icon mdi mdi-backburger"
|
||||
style="
|
||||
color: #747474;
|
||||
background-color: #dadada;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
"
|
||||
>
|
||||
</i>
|
||||
เพื่อให้แถบเมนูแสดงเหมือนเดิม
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-83.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 83 แสดงการพับแถบเมนูด้ายซ้ายเพื่อให้ข้อมูลแสดงเต็มจอ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อเปิด-ปิด แถบเมนูด้านข้าง
|
||||
เพื่อให้ระบบแสดงข้อมูลส่วนกว้างขึ้น
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
-
|
||||
สามารถทำการคลิกเลือกหัวข้อเมนูตารางเพื่อให้ระบบเลื่อนตารางให้อัตโนมัติด้วยการคลิกชื่อหัวตารางจากแถบเมนูด้านขวาได้
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-84.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 84 แสดงแถบหัวข้อเมนูตาราง
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบหัวข้อเมนูตารางข้อมูลส่วนตัวสำหรับกดคลิกชื่อตาราง
|
||||
เพื่อให้ระบบเลื่อนไปยังตารางนั้นๆได้
|
||||
เพื่อให้ง่ายต่อการดูข้อมูลและแก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- หากต้องการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ
|
||||
และวัติแบบย่อให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-file-eye-outline"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อดาวน์โหลดข้อมูลของพนักงาน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-85.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 85 แสดงหน้าดาวน์โหลดไฟล์เอกสารของพนักงาน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ข้อความสำหรับคลิกเลือกเพื่อดาวน์โหลดชนิดของเอกสารที่ต้องการดาวน์โหลด
|
||||
โดยระบบแสดงการเลือกการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ
|
||||
ประวัติแบบย่อของพนักงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- และหากต้องการทำการบันทึกการออกจากราชการของพนักงานให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-home-export-outline"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
จากนั้นระบบจะทำการแสดงตาราง “ประเภทการพ้นราชการ”
|
||||
ให้ทำการบันทึกข้อมูลให้ครบตามที่ระบบแนะนำ
|
||||
หลังจากกรอกข้อมูลเสร็จแล้วให้ทำการคลิก
|
||||
<q-icon
|
||||
name="mdi-content-save-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อยืนยันการบันทึกข้อมูล
|
||||
และถ้าหากต้องการยกเลิกการเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
||||
<i
|
||||
class="q-icon mdi mdi-close"
|
||||
style="
|
||||
color: red;
|
||||
background-color: #ffe5e6;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
"
|
||||
>
|
||||
</i>
|
||||
เพื่อยกเลิกการบันทึกข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-86.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 86 แสดงตารางการเพิ่มข้อมูลประเภทการพ้นราชการ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกประเภทการพ้นราชการ <br />
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกวันที่พ้นราชการ <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดสาเหตุ/เหตุผลของการพ้นจากราชการ
|
||||
<br />
|
||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลคำสั่ง/เอกสารอ้างอิง <br />
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวัน เดือน ปีที่ออกคำสั่ง
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
70
src/modules/01_manual/components/4_registration/view.vue
Normal file
70
src/modules/01_manual/components/4_registration/view.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<script setup lang="ts">
|
||||
import registrationmain from "./41_main.vue";
|
||||
import registrationFind from "./42_find.vue";
|
||||
import registrationDetail from "./43_detail.vue";
|
||||
import registrationEdit from "./44_edit.vue";
|
||||
import registrationSelect from "./45_select.vue";
|
||||
import registrationWindow from "./46_window.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบทะเบียนประวัติ
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="registrationmain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationmain />
|
||||
</div>
|
||||
<div
|
||||
id="registrationFind"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationFind />
|
||||
</div>
|
||||
<div
|
||||
id="registrationDetail"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationDetail />
|
||||
</div>
|
||||
<div
|
||||
id="registrationEdit"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationEdit />
|
||||
</div>
|
||||
<div
|
||||
id="registrationSelect"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationSelect />
|
||||
</div>
|
||||
<div
|
||||
id="registrationWindow"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationWindow />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -5,11 +5,11 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
|
|
@ -93,8 +93,8 @@ const text = ref("");
|
|||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -26,238 +26,207 @@ const text = ref("");
|
|||
หน้าจัดการระบบสรรหา
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
5.3 สอบแข่งขัน
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
สถิติสมัครสอบแข่งขัน
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- การเข้าสู่หน้าสถิติการสมัครสอบแข่งขันให้ใช้เมาส์คลิก “สอบแข่งขัน” จากนั้นระบบจะแสดงเมนูย่อยให้ใช้เมาส์ทำการคลิกที่ “สถิติสมัครสอบแข่งขัน” อีกที่เพื่อเข้าสู่หน้าข้อมูลสถิติ
|
||||
การสอบแข่งในต่างๆ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-31.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 224.92px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 31 แสดงการเข้าสู่หน้าสถิติสมัครสอบแข่งขัน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การเลือกแสดงข้อมูลของรอบการสอบตามที่ต้องการ ให้ใช้เมาส์คลิกช่องรอบการสอบเพื่อทำการเลือกรอบการสอบเพื่อแสดงข้อมูลสถิติสมัครสอบแข่งขันที่ต้องการทราบข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-32.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 32 แสดงการเลือกรอบการทดสอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ตำแหน่งแสดงชื่อหน้าสถิติสมัครสอบแข่งขัน <br>
|
||||
หมายเลข 2 ช่องสำหรับเลือกรอบการสอบสมัครสอบแข่งขันสำหรับแสดงข้อมูลสถิติ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ ออกมาในรูปแบบไฟล์ xlsx เพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล
|
||||
คลิกเลือก Inspect >> Data ระบบจะแสดงข้อมูลออกมาในรูปแบบตาราง ให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #2196f3;
|
||||
border: 1px solid #2196f3;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
Download CSV
|
||||
</span>
|
||||
และหากต้องการให้หน้าต่างแสดงข้อมูลเต็มจอให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="chevron_left" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
หรือหากต้องการยกเลิกการดูข้อมูลให้ทำการคลิก
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
เพื่อออกจากหน้าต่างแสดงผลข้อมูลในรูปแบบตาราง
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-33.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 33 แสดงการเลือกรอบการทดสอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกขยายหน้าจอข้อมูลและปุ่มสำหรับคลิกออกจากหน้าดูข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากรูปแบบกราฟมาเป็นข้อมูลแบบตารางข้อมูล <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์ข้อมูลออกมาในรูปแบบไฟล์ xlsx
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ ออกมาในรูปแบบไฟล์รูปภาพเพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล
|
||||
คลิกเลือก Share >>Link >> Direct link rendered image จากนั้นระบบจะทำการดาวน์โหลดข้อมูลสถิติที่ทำการเลือกข้อมูดาวน์โหลดออกมาในรูปแบบไฟล์รูปภาพ และหากต้องการ
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
เพื่อออกจากหน้าต่างการดาวน์โหลดข้อมูล
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-34.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 34 แสดงการดาวน์โหลดข้อมูลสถิติออกเป็นมาเป็นข้อมูลรูปภาพ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลสถิติเป็นไฟล์รูปภาพ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
5.3 สอบแข่งขัน
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
||||
สถิติสมัครสอบแข่งขัน
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- การเข้าสู่หน้าสถิติการสมัครสอบแข่งขันให้ใช้เมาส์คลิก “สอบแข่งขัน”
|
||||
จากนั้นระบบจะแสดงเมนูย่อยให้ใช้เมาส์ทำการคลิกที่ “สถิติสมัครสอบแข่งขัน”
|
||||
อีกที่เพื่อเข้าสู่หน้าข้อมูลสถิติ การสอบแข่งในต่างๆ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-31.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 224.92px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 31 แสดงการเข้าสู่หน้าสถิติสมัครสอบแข่งขัน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- การเลือกแสดงข้อมูลของรอบการสอบตามที่ต้องการ
|
||||
ให้ใช้เมาส์คลิกช่องรอบการสอบเพื่อทำการเลือกรอบการสอบเพื่อแสดงข้อมูลสถิติสมัครสอบแข่งขันที่ต้องการทราบข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-32.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 32 แสดงการเลือกรอบการทดสอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ตำแหน่งแสดงชื่อหน้าสถิติสมัครสอบแข่งขัน <br />
|
||||
หมายเลข 2 ช่องสำหรับเลือกรอบการสอบสมัครสอบแข่งขันสำหรับแสดงข้อมูลสถิติ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ ออกมาในรูปแบบไฟล์ xlsx
|
||||
เพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-dots-vertical"
|
||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
||||
size="xs"
|
||||
/>
|
||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล คลิกเลือก Inspect >>
|
||||
Data ระบบจะแสดงข้อมูลออกมาในรูปแบบตาราง ให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #2196f3;
|
||||
border: 1px solid #2196f3;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
Download CSV
|
||||
</span>
|
||||
และหากต้องการให้หน้าต่างแสดงข้อมูลเต็มจอให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="chevron_left"
|
||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
||||
size="xs"
|
||||
/>
|
||||
หรือหากต้องการยกเลิกการดูข้อมูลให้ทำการคลิก
|
||||
<q-icon
|
||||
name="mdi-close"
|
||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อออกจากหน้าต่างแสดงผลข้อมูลในรูปแบบตาราง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-33.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 33 แสดงการเลือกรอบการทดสอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1
|
||||
ปุ่มสำหรับคลิกขยายหน้าจอข้อมูลและปุ่มสำหรับคลิกออกจากหน้าดูข้อมูล <br />
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากรูปแบบกราฟมาเป็นข้อมูลแบบตารางข้อมูล
|
||||
<br />
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์ข้อมูลออกมาในรูปแบบไฟล์ xlsx
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ
|
||||
ออกมาในรูปแบบไฟล์รูปภาพเพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-dots-vertical"
|
||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
||||
size="xs"
|
||||
/>
|
||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล คลิกเลือก Share
|
||||
>>Link >> Direct link rendered image
|
||||
จากนั้นระบบจะทำการดาวน์โหลดข้อมูลสถิติที่ทำการเลือกข้อมูดาวน์โหลดออกมาในรูปแบบไฟล์รูปภาพ
|
||||
และหากต้องการ
|
||||
<q-icon
|
||||
name="mdi-close"
|
||||
style="margin: 0 5px; color: hsl(0, 0%, 18%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อออกจากหน้าต่างการดาวน์โหลดข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-34.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 34 แสดงการดาวน์โหลดข้อมูลสถิติออกเป็นมาเป็นข้อมูลรูปภาพ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลสถิติเป็นไฟล์รูปภาพ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<!--
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -26,441 +26,463 @@ const text = ref("");
|
|||
หน้าจัดการระบบสรรหา
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
จัดการรอบคัดเลือก
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อต้องการเข้าหน้าระบบสรรหาเพื่อจัดการรอบการสอบ รอบคัดเลือก หรือการตั้งค่าเว็บสรรหาให้ทำการคลิกแถบเมนู “สรรหา” ทางด้านซ้ายของระบบ ดังรูป
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-35.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 315.39px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 35 แสดงการเข้าสู่หน้าจัดการรอบคัดเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การเพิ่มรอบการคัดเลือกให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ที่หน้า “จัดการรอบคัดเลือก” จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกให้ครบตามที่ระบบแนะนำ หรือหาก
|
||||
ต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูลและถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-36.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 36 แสดงเพิ่มข้อมูลเพิมรอบคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกชื่อรอบคัดเลือก/ชื่อประกาศ <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกรอบการสอบ(ครั้ง) <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกค่าธรรมเนียมสมัครสอบคัดเลือก <br>
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกปีงบประมาณ <br>
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวันที่สอบคัดเลือก <br>
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่ประกาศรับสมัครคัดเลือก <br>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือก <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงิน <br>
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบ <br>
|
||||
หมายเลข 10 ช่องสำหรับคลิกเลือกรหัสส่วนราชการ <br>
|
||||
หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงาน <br>
|
||||
หมายเลข 12 ปุ่มสำหรับคลิกเพื่อย้อนกลับหรือคลิกเพื่อยกเลิกการเพิ่มข้อมูลรอบคัดเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การเพิ่มข้อมูลตำแหน่งที่จะทำการสอบคัดเลือกให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ในช่องตาราง “ตำแหน่ง” จากนั้นทำการกรอกข้อมูลตำแหน่งให้ครบตามที่ระบบแนะนำ หรือหากทำการ
|
||||
บันทึกข้อมูลไปก่อนหน้านี้แล้วต้องการลบข้อมูลตำแหน่งทิ้งให้ทำการเลื่อนลงมาที่ตาราง “ตำแหน่ง” และทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-delete" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบตำแหน่งที่ต้องการสมัครคัดเลือกออก และทำการเลือกวิธีการชำระเงินสมัครสอบคัดเลือกด้วยการคลิก
|
||||
<q-icon name="mdi-radiobox-marked" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
||||
เลือกในช่องวิธีการชำระเงินที่ต้องการในตาราง “เลือกวิธีการชำระเงิน”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-37.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 37 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งที่จะเปิดสมัครสอบคัดเลือก <br>
|
||||
หมายเลข 2 ช่องคลิกเลือกว่าต้องการวุฒิปริญญาตรีในการสมัครสอบคัดเลือกหรือไม่ <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกประเภทแบบฟอร์มการสมัครคัดเลือก <br>
|
||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อลบข้อมูลการเพิ่มตำแหน่งที่รับสมัครสอบคัดเลือก <br>
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวิธีการชำระเงินการสมัครสอบคัดเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การเพิ่มข้อมูลรูปภาพประกอบหรือเอกสารประกอบให้ทำการใช้เมาส์คลิก ที่ตาราง
|
||||
<q-icon name="mdi-plus"
|
||||
style="margin: 0 5px;
|
||||
color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
border-radius: 2px;
|
||||
"
|
||||
size="xs"/>
|
||||
“รูปภาพประกอบ” และช่อง “เอกสารประกอบ” หรือหากต้องการเพิ่มรายละเอียดข้อมูลการ
|
||||
สมัครสอบคัดเลือกเพิ่มเติมให้ทำการกรอกข้อมูลที่ตาราง “รายละเอียด” โดยสามารถจัดเรียงรูปแบบฟอนต์จากในระบบได้ หรือหากต้องการกรอกรายละเอียดหมายเหตุก็ทำการคลิกกรอก
|
||||
ได้ที่ตารางหมายเหตุ หลังจากที่ได้ทำการกรอกข้อมูลเพิ่มรอบคัดเลือกเสร็จสิ้นหมดแล้ว ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูลการเพิ่มหรือแก้ไขรอบคัดเลือก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-38.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 38 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการสมัครคัดเลือก <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเพิ่มเอกสารประกอบ <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดเพิ่มเติมการสมัครคัดเลือก <br>
|
||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลหมายเหตุการณ์สมัครคัดเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการลบรายการรอบสอบคัดเลือก ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-delete" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
และยืนยันการลบข้อมูลรายการสอบสมัครคัดเลือก ดังรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-39.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 39 แสดงการลบรายการข้อมูลสมัครสอบคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อลบรายการสอบคัดเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- และหากต้องการโพสต์เพื่อประกาศข่าวไม่มีการสมัครสอบใดๆ ให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.45em;">
|
||||
<div class="q-toggle__track"></div>
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;" ></div>
|
||||
</div>
|
||||
ที่ “ประกาศข่าวทั่วไป” ให้เป็น
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.45em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
จากนั้นระบบจะแสดงหน้ากรอกข้อมูลเพื่อประกาศ
|
||||
และให้ทำการกรอกข้อมูลรายละเอียดที่ต้องกรประกาศ และหลังจากที่กรอกข้อมูลประกาศข่าวทั่วไปเสร็จเรียบร้อยแล้ว ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูลประกาศ
|
||||
ข่าวทั่วไป หรือต้องการยกเลิกการประกาศข่าวทั่วไปหรือยกเลิกการกรอกข้อมูลให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-40.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 40 แสดงการเพิ่มข้อมูลประกาศข่าวทั่วไป
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับเปิดเพื่อประกาศข่าวทั่วไป หรือปิดเพื่อประกาศสอบคัดเลือก <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกชื่อรอบคัดเลือก/ชื่อประกาศ <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกวันที่ประกาศขาวทั่วไป <br>
|
||||
หมายเลข 4 ช่องสำหรับเพิ่มรูปภาพประกอบประกาศข่าวทั่วไป <br>
|
||||
หมายเลข 5 ช่องสำหรับเพิ่มเอกสารประกอบประกาศข่าวทั่วไป
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลรายการสอบคัดเลือกหรือประกาศข่าวทั่วไปที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบ
|
||||
จะแสดงข้อมูลที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-41.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 41 แสดงตารางการค้นหาข้อมูลจัดการรอบคัดเลือก
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลรายการรอบคัดเลือกขันสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายการรอบคัดเลือกจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “จัดการรอบคัดเลือก” ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-42.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 42 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลจัดการรอบคัดเลือก <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลจัดการรอบคัดเลือกตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
||||
จัดการรอบคัดเลือก
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อต้องการเข้าหน้าระบบสรรหาเพื่อจัดการรอบการสอบ รอบคัดเลือก
|
||||
หรือการตั้งค่าเว็บสรรหาให้ทำการคลิกแถบเมนู “สรรหา” ทางด้านซ้ายของระบบ
|
||||
ดังรูป
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-35.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 315.39px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 35 แสดงการเข้าสู่หน้าจัดการรอบคัดเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- การเพิ่มรอบการคัดเลือกให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
ที่หน้า “จัดการรอบคัดเลือก”
|
||||
จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกให้ครบตามที่ระบบแนะนำ
|
||||
หรือหาก
|
||||
ต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูลและถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-arrow-left"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-36.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 36 แสดงเพิ่มข้อมูลเพิมรอบคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกชื่อรอบคัดเลือก/ชื่อประกาศ <br />
|
||||
หมายเลข 2 ช่องสำหรับกรอกรอบการสอบ(ครั้ง) <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกค่าธรรมเนียมสมัครสอบคัดเลือก <br />
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกปีงบประมาณ <br />
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวันที่สอบคัดเลือก <br />
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่ประกาศรับสมัครคัดเลือก <br />
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือก <br />
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงิน <br />
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบ <br />
|
||||
หมายเลข 10 ช่องสำหรับคลิกเลือกรหัสส่วนราชการ <br />
|
||||
หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงาน <br />
|
||||
หมายเลข 12
|
||||
ปุ่มสำหรับคลิกเพื่อย้อนกลับหรือคลิกเพื่อยกเลิกการเพิ่มข้อมูลรอบคัดเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- การเพิ่มข้อมูลตำแหน่งที่จะทำการสอบคัดเลือกให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
ในช่องตาราง “ตำแหน่ง” จากนั้นทำการกรอกข้อมูลตำแหน่งให้ครบตามที่ระบบแนะนำ
|
||||
หรือหากทำการ
|
||||
บันทึกข้อมูลไปก่อนหน้านี้แล้วต้องการลบข้อมูลตำแหน่งทิ้งให้ทำการเลื่อนลงมาที่ตาราง
|
||||
“ตำแหน่ง” และทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-delete"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อลบตำแหน่งที่ต้องการสมัครคัดเลือกออก
|
||||
และทำการเลือกวิธีการชำระเงินสมัครสอบคัดเลือกด้วยการคลิก
|
||||
<q-icon
|
||||
name="mdi-radiobox-marked"
|
||||
style="margin: 0 5px; color: #2196f3"
|
||||
size="xs"
|
||||
/>
|
||||
เลือกในช่องวิธีการชำระเงินที่ต้องการในตาราง “เลือกวิธีการชำระเงิน”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-37.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 37 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกตำแหน่งที่จะเปิดสมัครสอบคัดเลือก <br />
|
||||
หมายเลข 2
|
||||
ช่องคลิกเลือกว่าต้องการวุฒิปริญญาตรีในการสมัครสอบคัดเลือกหรือไม่ <br />
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกประเภทแบบฟอร์มการสมัครคัดเลือก <br />
|
||||
หมายเลข 4
|
||||
ปุ่มสำหรับคลิกเพื่อลบข้อมูลการเพิ่มตำแหน่งที่รับสมัครสอบคัดเลือก <br />
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวิธีการชำระเงินการสมัครสอบคัดเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- การเพิ่มข้อมูลรูปภาพประกอบหรือเอกสารประกอบให้ทำการใช้เมาส์คลิก
|
||||
ที่ตาราง
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="
|
||||
margin: 0 5px;
|
||||
color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
border-radius: 2px;
|
||||
"
|
||||
size="xs"
|
||||
/>
|
||||
“รูปภาพประกอบ” และช่อง “เอกสารประกอบ”
|
||||
หรือหากต้องการเพิ่มรายละเอียดข้อมูลการ
|
||||
สมัครสอบคัดเลือกเพิ่มเติมให้ทำการกรอกข้อมูลที่ตาราง “รายละเอียด”
|
||||
โดยสามารถจัดเรียงรูปแบบฟอนต์จากในระบบได้
|
||||
หรือหากต้องการกรอกรายละเอียดหมายเหตุก็ทำการคลิกกรอก ได้ที่ตารางหมายเหตุ
|
||||
หลังจากที่ได้ทำการกรอกข้อมูลเพิ่มรอบคัดเลือกเสร็จสิ้นหมดแล้ว
|
||||
ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-content-save-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อยืนยันการบันทึกข้อมูลการเพิ่มหรือแก้ไขรอบคัดเลือก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-38.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 38 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการสมัครคัดเลือก <br />
|
||||
หมายเลข 2 ช่องสำหรับคลิกเพิ่มเอกสารประกอบ <br />
|
||||
หมายเลข 3 ช่องสำหรับกรอกข้อมูลรายละเอียดเพิ่มเติมการสมัครคัดเลือก <br />
|
||||
หมายเลข 4 ช่องสำหรับกรอกข้อมูลหมายเหตุการณ์สมัครคัดเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- หากต้องการลบรายการรอบสอบคัดเลือก ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-delete"
|
||||
style="margin: 0 5px; color: hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
และยืนยันการลบข้อมูลรายการสอบสมัครคัดเลือก ดังรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-39.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 39 แสดงการลบรายการข้อมูลสมัครสอบคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อลบรายการสอบคัดเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row">
|
||||
<div style="margin-top: 50px; margin-left: 10px">
|
||||
- และหากต้องการโพสต์เพื่อประกาศข่าวไม่มีการสมัครสอบใดๆ
|
||||
ให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<div
|
||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy"
|
||||
aria-hidden="true"
|
||||
style="
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
padding: 0 0.3em !important ;
|
||||
height: 0.45em;
|
||||
"
|
||||
>
|
||||
<div class="q-toggle__track"></div>
|
||||
<div
|
||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
||||
style="top: -0.07em"
|
||||
></div>
|
||||
</div>
|
||||
ที่ “ประกาศข่าวทั่วไป” ให้เป็น
|
||||
<div
|
||||
class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive"
|
||||
aria-hidden="true"
|
||||
style="
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
padding: 0 0.3em !important ;
|
||||
height: 0.45em;
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="q-toggle__thumb absolute flex flex-center no-wrap"
|
||||
style="top: -0.07em"
|
||||
></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
จากนั้นระบบจะแสดงหน้ากรอกข้อมูลเพื่อประกาศ
|
||||
และให้ทำการกรอกข้อมูลรายละเอียดที่ต้องกรประกาศ
|
||||
และหลังจากที่กรอกข้อมูลประกาศข่าวทั่วไปเสร็จเรียบร้อยแล้ว
|
||||
ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-content-save-outline"
|
||||
style="margin: 0 5px; color: #01435f"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อยืนยันการบันทึกข้อมูลประกาศ ข่าวทั่วไป
|
||||
หรือต้องการยกเลิกการประกาศข่าวทั่วไปหรือยกเลิกการกรอกข้อมูลให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-arrow-left"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-40.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 40 แสดงการเพิ่มข้อมูลประกาศข่าวทั่วไป
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับเปิดเพื่อประกาศข่าวทั่วไป
|
||||
หรือปิดเพื่อประกาศสอบคัดเลือก <br />
|
||||
หมายเลข 2 ช่องสำหรับกรอกชื่อรอบคัดเลือก/ชื่อประกาศ <br />
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกวันที่ประกาศขาวทั่วไป <br />
|
||||
หมายเลข 4 ช่องสำหรับเพิ่มรูปภาพประกอบประกาศข่าวทั่วไป <br />
|
||||
หมายเลข 5 ช่องสำหรับเพิ่มเอกสารประกอบประกาศข่าวทั่วไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
-
|
||||
หากต้องการค้นหาข้อมูลรายการสอบคัดเลือกหรือประกาศข่าวทั่วไปที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon
|
||||
name="mdi-magnify"
|
||||
style="margin: 0 5px; color: #afafaf"
|
||||
size="xs"
|
||||
/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบ
|
||||
จะแสดงข้อมูลที่ทำการค้นหา
|
||||
แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon
|
||||
name="mdi-close"
|
||||
style="margin: 0 5px; color: #afafaf"
|
||||
size="xs"
|
||||
/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-41.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 41 แสดงตารางการค้นหาข้อมูลจัดการรอบคัดเลือก
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลรายการรอบคัดเลือกขันสำหรับการค้นหา <br />
|
||||
หมายเลข 2
|
||||
ช่องสำหรับแสดงข้อมูลรายการรอบคัดเลือกจากการกรอกข้อมูลเพื่อค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-menu-down"
|
||||
style="margin: 0 5px; color: #afafaf"
|
||||
size="sm"
|
||||
/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง
|
||||
“จัดการรอบคัดเลือก”
|
||||
ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-42.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 42 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก
|
||||
<br />
|
||||
หมายเลข 2
|
||||
ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลจัดการรอบคัดเลือก
|
||||
<br />
|
||||
หมายเลข 3
|
||||
ช่องสำหรับแสดงตารางข้อมูลจัดการรอบคัดเลือกตามคอลัมน์ที่ทำการเลือก
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -26,94 +26,85 @@ const text = ref("");
|
|||
หน้าจัดการระบบสรรหา
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
จัดการรอบคัดเลือกคนพิการ
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
- การเพิ่มรอบการคัดเลือกคนพิการให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ที่หน้า “จัดการรอบคัดเลือกคนพิการ” จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกคนพิการให้ครบตาม
|
||||
ที่ระบบแนะนำ หรือหากต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูล และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้
|
||||
เมาส์คลิก
|
||||
<q-icon name="mdi-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/6_disabilities/5-43.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 43 แสดงตารางการเพิ่มข้อมูลการคัดเลือกคนพิการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับการกรอกชื่อรอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเพื่อเพิ่มหรือคลิกกรอกรอบการสอบ (ครั้ง) <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกปีงบประมาณ <br>
|
||||
หมายเลข 4 ช่องสำหรับกรอกค่าธรรมเนียมการสอบคัดเลือก <br>
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวันที่สอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่ประกาศการสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงินสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 10 ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 11 ช่องสำหรับคลิกเพิ่มเอกสารประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px">
|
||||
จัดการรอบคัดเลือกคนพิการ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 20px; margin-left: 10px">
|
||||
- การเพิ่มรอบการคัดเลือกคนพิการให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
ที่หน้า “จัดการรอบคัดเลือกคนพิการ”
|
||||
จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกคนพิการให้ครบตาม
|
||||
ที่ระบบแนะนำ
|
||||
หรือหากต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูล
|
||||
และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้ เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-arrow-left"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/6_disabilities/5-43.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 43 แสดงตารางการเพิ่มข้อมูลการคัดเลือกคนพิการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับการกรอกชื่อรอบคัดเลือกคนพิการ <br />
|
||||
หมายเลข 2 ช่องสำหรับคลิกเพื่อเพิ่มหรือคลิกกรอกรอบการสอบ (ครั้ง) <br />
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกปีงบประมาณ <br />
|
||||
หมายเลข 4 ช่องสำหรับกรอกค่าธรรมเนียมการสอบคัดเลือก <br />
|
||||
หมายเลข 5 ช่องสำหรับคลิกเลือกวันที่สอบคัดเลือกคนพิการ <br />
|
||||
หมายเลข 6 ช่องสำหรับคลิกเลือกวันที่ประกาศการสอบคัดเลือกคนพิการ <br />
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือกคนพิการ <br />
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงินสอบคัดเลือกคนพิการ <br />
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบคัดเลือกคนพิการ <br />
|
||||
หมายเลข 10
|
||||
ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ
|
||||
<br />
|
||||
หมายเลข 11
|
||||
ช่องสำหรับคลิกเพิ่มเอกสารประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ const text = ref("");
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
<!-- <q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
|
|
@ -26,7 +26,7 @@ const text = ref("");
|
|||
หน้าจัดการระบบสรรหา
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
|
|
@ -519,8 +519,8 @@ const text = ref("");
|
|||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
|
|
|||
87
src/modules/01_manual/components/5_recruitment/view.vue
Normal file
87
src/modules/01_manual/components/5_recruitment/view.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<script setup lang="ts">
|
||||
import recruitmain from "./51_main.vue";
|
||||
import recruitSetting from "./52_setting.vue";
|
||||
import recruitManage from "./53_managecompet.vue";
|
||||
import recruitstati from "./54_staticompet.vue";
|
||||
import recruitQualifiers from "./55_qualifiers.vue";
|
||||
import recruitDisabilities from "./56_disabilities.vue";
|
||||
import recruitSelection from "./57_selection.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบจัดการระบบสรรหา
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="recruitmain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitmain />
|
||||
</div>
|
||||
<div
|
||||
id="recruitSetting"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitSetting />
|
||||
</div>
|
||||
<!-- <div
|
||||
id="recruitManage"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
สอบแข่งขัน
|
||||
</div> -->
|
||||
<div
|
||||
id="recruitManage"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitManage />
|
||||
</div>
|
||||
<div
|
||||
id="recruitstati"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitstati />
|
||||
</div>
|
||||
<div
|
||||
id="recruitQualifiers"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitQualifiers />
|
||||
</div>
|
||||
<div
|
||||
id="recruitDisabilities"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitDisabilities />
|
||||
</div>
|
||||
<div
|
||||
id="recruitSelection"
|
||||
name="7"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitSelection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -16,7 +16,7 @@ const Dataemployee = () => import("@/modules/01_manual/components/2_data/25_Empl
|
|||
const Datacalendar = () => import("@/modules/01_manual/components/2_data/26_Calendar.vue");
|
||||
const Datalnsignia = () => import("@/modules/01_manual/components/2_data/27_Insignia.vue");
|
||||
|
||||
|
||||
const viewStructure = () => import("@/modules/01_manual/components/3_Structure/view.vue")
|
||||
const Structuremain = () => import("@/modules/01_manual/components/3_Structure/31_Main.vue");
|
||||
const Structureposition = () => import("@/modules/01_manual/components/3_Structure/32_Position.vue");
|
||||
const Structurestructure = () => import("@/modules/01_manual/components/3_Structure/33_Structure.vue");
|
||||
|
|
@ -27,15 +27,16 @@ const Structurereport = () => import("@/modules/01_manual/components/3_Structure
|
|||
const Structurechartemploy = () => import("@/modules/01_manual/components/3_Structure/38_chartemploy.vue");
|
||||
|
||||
|
||||
const registmain = () => import("@/modules/01_manual/components/4_ registration/41_main.vue");
|
||||
const registfind = () => import("@/modules/01_manual/components/4_ registration/42_find.vue");
|
||||
const registdetail = () => import("@/modules/01_manual/components/4_ registration/43_detail.vue");
|
||||
const registedit = () => import("@/modules/01_manual/components/4_ registration/44_edit.vue");
|
||||
const registselect = () => import("@/modules/01_manual/components/4_ registration/45_select.vue");
|
||||
const registwindow = () => import("@/modules/01_manual/components/4_ registration/46_window.vue");
|
||||
|
||||
const viewRegist = () => import("@/modules/01_manual/components/4_registration/view.vue")
|
||||
// const registmain = () => import("@/modules/01_manual/components/4_ registration/41_main.vue");
|
||||
// const registfind = () => import("@/modules/01_manual/components/4_ registration/42_find.vue");
|
||||
// const registdetail = () => import("@/modules/01_manual/components/4_ registration/43_detail.vue");
|
||||
// const registedit = () => import("@/modules/01_manual/components/4_ registration/44_edit.vue");
|
||||
// const registselect = () => import("@/modules/01_manual/components/4_ registration/45_select.vue");
|
||||
// const registwindow = () => import("@/modules/01_manual/components/4_ registration/46_window.vue");
|
||||
|
||||
|
||||
const viewRecruit = () => import("@/modules/01_manual/components/5_recruitment/view.vue")
|
||||
const recruitmain = () => import("@/modules/01_manual/components/5_recruitment/51_main.vue");
|
||||
const recruitsetting = () => import("@/modules/01_manual/components/5_recruitment/52_setting.vue");
|
||||
|
||||
|
|
@ -218,7 +219,7 @@ export default [
|
|||
{
|
||||
path: "/structuremain",
|
||||
name: "structuremain",
|
||||
component: Structuremain,
|
||||
component: viewStructure,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
|
|
@ -310,7 +311,7 @@ export default [
|
|||
{
|
||||
path: "/registrationmain",
|
||||
name: "registmain",
|
||||
component: registmain,
|
||||
component: viewRegist,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
|
|
@ -319,61 +320,61 @@ export default [
|
|||
},
|
||||
|
||||
|
||||
{
|
||||
path: "/Registration/find",
|
||||
name: "registfind",
|
||||
component: registfind,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/Registration/find",
|
||||
// name: "registfind",
|
||||
// component: registfind,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [10],
|
||||
// Role: "order",
|
||||
// },
|
||||
// },
|
||||
|
||||
|
||||
{
|
||||
path: "/Registration/detail",
|
||||
name: "registdetail",
|
||||
component: registdetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/Registration/detail",
|
||||
// name: "registdetail",
|
||||
// component: registdetail,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [10],
|
||||
// Role: "order",
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
path: "/Registration/edit",
|
||||
name: "registedit",
|
||||
component: registedit,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/Registration/edit",
|
||||
// name: "registedit",
|
||||
// component: registedit,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [10],
|
||||
// Role: "order",
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
path: "/Registration/select",
|
||||
name: "registselect",
|
||||
component: registselect,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/Registration/select",
|
||||
// name: "registselect",
|
||||
// component: registselect,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [10],
|
||||
// Role: "order",
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
path: "/Registration/window",
|
||||
name: "registwindow",
|
||||
component: registwindow,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/Registration/window",
|
||||
// name: "registwindow",
|
||||
// component: registwindow,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// Key: [10],
|
||||
// Role: "order",
|
||||
// },
|
||||
// },
|
||||
|
||||
|
||||
|
||||
|
|
@ -382,7 +383,7 @@ export default [
|
|||
{
|
||||
path: "/recruitmain",
|
||||
name: "recruitmain",
|
||||
component: recruitmain,
|
||||
component: viewRecruit,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
|
|
@ -20,6 +20,8 @@ import {
|
|||
tabListLogin,
|
||||
tabListDatamain,
|
||||
tabStructuremain,
|
||||
tabRegistration,
|
||||
tabRecruit,
|
||||
tabList,
|
||||
// tabListPlacement,
|
||||
} from "../interface/request/main/main";
|
||||
|
|
@ -91,8 +93,6 @@ const tabScroll = () => {
|
|||
return route.name == "registryDetail";
|
||||
};
|
||||
const tabLogin = async () => {
|
||||
await setListTab();
|
||||
|
||||
let namePath = menuList[1].children.find((e: any) => e.path === route.path);
|
||||
if (namePath) {
|
||||
return true;
|
||||
|
|
@ -135,7 +135,7 @@ const onScroll = (scroll: ScrollType) => {
|
|||
* updateScroll เป็น function active แทปด้านขวา
|
||||
*/
|
||||
const updateScroll = (position: number) => {
|
||||
console.log(position);
|
||||
// console.log(position);
|
||||
|
||||
// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
|
||||
if (position === void 0) {
|
||||
|
|
@ -149,6 +149,29 @@ const updateScroll = (position: number) => {
|
|||
for (const i in listTab.value) {
|
||||
const section = listTab.value[i];
|
||||
const item = document.getElementById(section.tag);
|
||||
// console.log(section.childern);
|
||||
if (section.childern) {
|
||||
for (const x in section.childern) {
|
||||
const sectionchildern = section.childern[x];
|
||||
const itemchildern = document.getElementById(sectionchildern.tag);
|
||||
console.log(sectionchildern);
|
||||
|
||||
if (itemchildern === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (itemchildern.offsetTop >= position + 155) {
|
||||
console.log(last);
|
||||
if (last === void 0) {
|
||||
last = sectionchildern.tag;
|
||||
}
|
||||
break;
|
||||
} else {
|
||||
last = sectionchildern.tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* วนหา id ของ div หน้านั้น
|
||||
* เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
|
||||
|
|
@ -174,6 +197,7 @@ const updateScroll = (position: number) => {
|
|||
* ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
|
||||
* และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
|
||||
*/
|
||||
|
||||
if (last !== void 0) {
|
||||
changeTab(last);
|
||||
const tocEl = document.getElementById("tab--" + last);
|
||||
|
|
@ -204,14 +228,23 @@ onMounted(async () => {
|
|||
});
|
||||
|
||||
const setListTab = () => {
|
||||
console.log(route.name);
|
||||
|
||||
if (route.name == "manual") {
|
||||
listTab.value = tabListLogin;
|
||||
} else if (route.name == "datamain") {
|
||||
listTab.value = tabListDatamain;
|
||||
} else if (route.name == "structuremain") {
|
||||
listTab.value = tabStructuremain;
|
||||
} else if (route.name == "registmain") {
|
||||
listTab.value = tabRegistration;
|
||||
} else if (route.name == "recruitmain") {
|
||||
listTab.value = tabRecruit;
|
||||
}
|
||||
};
|
||||
watch(route, () => {
|
||||
setListTab();
|
||||
});
|
||||
|
||||
/**
|
||||
* เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
|
||||
|
|
@ -866,26 +899,49 @@ const clickTag = (val: string) => {
|
|||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item
|
||||
v-for="(tabItem, index) in listTab"
|
||||
:key="index"
|
||||
:id="'tab--' + tabItem.tag"
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="activeTab(tabItem.tag)"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
@click="tagClick(tabItem.tag)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
><q-icon size="11px" name="mdi-circle-medium" />
|
||||
<span class="q-pl-xs">{{ tabItem.label }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div v-for="(tabItem, index) in listTab" :key="index">
|
||||
<q-item
|
||||
:id="'tab--' + tabItem.tag"
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="activeTab(tabItem.tag)"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
@click="tagClick(tabItem.tag)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
><q-icon size="11px" name="mdi-circle-medium" />
|
||||
<span class="q-pl-xs">{{ tabItem.label }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div v-if="route.name == 'recruitmain'">
|
||||
<q-item
|
||||
v-if="route.name == 'recruitmain'"
|
||||
v-for="(childItem, childIndex) in tabItem.childern"
|
||||
:key="'child-' + childIndex"
|
||||
:id="'tab--' + childItem.tag"
|
||||
class="tabNative child-tab"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="activeTab(childItem.tag)"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
@click="tagClick(childItem.tag)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<!-- <q-icon size="11px" name="mdi-circle-small" /> -->
|
||||
<span class="q-pl-xl">{{ childItem.label }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue