195 lines
15 KiB
Vue
195 lines
15 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">2.3 ข้อมูลตำแหน่งของข้าราชการ</div>
|
|
|
|
<div class="col-12" style="margin-top: 20px; margin-left: 10px">- เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของข้าราชการ” จะปรากฏรายละเอียดดังรูปภาพ</div>
|
|
|
|
<div class="col-12">
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-41.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 41 รายละเอียดข้อมูลตำแหน่งของข้าราชการ</div>
|
|
</div>
|
|
|
|
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
<p>
|
|
- เลือกกดแถบเมนูย่อย “ตำแหน่งประเภท, ชื่อสายงาน, ชื่อตำแหน่งสายงาน, ด้าน/สาขาของสายงาน, ระดับตำแหน่ง, ชื่อตำแหน่งทางการบริหาร, ด้านทางการบริหารหรือ สถานะของตำแหน่ง”
|
|
ระบบแสดงข้อมูลโดยสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดง
|
|
หน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-42.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 42 แถบเมนูข้อมูลตำแหน่งของข้าราชการ</div>
|
|
|
|
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของข้าราชการ <br />
|
|
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
|
</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/02_data/4_officer/2-43.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 43 แก้ไขหรือลบข้อมูล</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-content-save-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
|
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%)" size="xs" />
|
|
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
|
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
|
</p>
|
|
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-44.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">รูปภาพที่ 2 - 44 เพิ่มข้อมูลในช่องที่ปรากฏ</div>
|
|
|
|
<div style="margin-top: 20px; padding: 10px; background-color: #f3f3f3; font-size: 14px; color: #000000; border-radius: 5px">
|
|
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
|
<div style="margin-left: 50px">
|
|
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
|
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%)" size="xs" />
|
|
เพื่อลบช่องเพิ่มข้อมูล <br />
|
|
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
|
<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.35em"
|
|
>
|
|
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em"></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-cloud-upload-outline" style="margin: 0 5px; color: #01435f" size="xs" />
|
|
เพื่อเผยแพร่ข้อมูล
|
|
</div>
|
|
</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" />
|
|
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
|
</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-45.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 45 ป้าย “บันทึกข้อมูลร่างสำเร็จ”</div>
|
|
|
|
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; 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/02_data/4_officer/2-46.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">รูปภาพที่ 2 - 46 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”</div>
|
|
</div>
|
|
|
|
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
<p>- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-47.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 47 ป้าย “ลบข้อมูลร่างสำเร็จ”</div>
|
|
|
|
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลตำแหน่งของข้าราชการ
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
<p>
|
|
- กดไอคอน
|
|
<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/02_data/4_officer/2-48.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">รูปภาพที่ 2 - 48 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”</div>
|
|
</div>
|
|
|
|
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
<p>- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-49.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 49 ป้าย “เผยแพร่ข้อมูลสำเร็จ”</div>
|
|
|
|
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากคลิกเผยแพร่ข้อมูลตำแหน่ง
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
|
<p>
|
|
- กดไอคอน
|
|
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec" size="xs" />
|
|
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
|
</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-img src="@/assets/manual/02_data/4_officer/2-50.png" style="display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px" />
|
|
<div class="text-center text-grey-6" style="margin-top: 20px">รูปภาพที่ 2 - 50 หน้าประวัติแก้ไขข้อมูล</div>
|
|
|
|
<div class="col-12" style="margin-top: -; padding: 10px; background-color: rgb(243, 243, 243); font-size: 14px; margin-top: 20px; border-radius: 5px">
|
|
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อตำแหน่งของข้าราชการที่ทำการกรอกค้นหา
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|