488 lines
24 KiB
Vue
488 lines
24 KiB
Vue
<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">
|
||
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>
|
||
<!-- </div>
|
||
</div> -->
|
||
</template>
|