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