เพิ่มโค้ดคู่มือ
This commit is contained in:
kanyarat2001
parent
2b399efa90
commit
fc8235d330
40 changed files with 14948 additions and 46 deletions
141
src/modules/01_manual/components/2_data/21_Main.vue
Normal file
141
src/modules/01_manual/components/2_data/21_Main.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<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 class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล
|
||||
ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก”
|
||||
ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 495px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 1 เมนูข้อมูลหลัก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลหลัก” ระบบปรากฏหน้าจัดการข้อมูลหลักดังรูปภาพ
|
||||
</div>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-2.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 - 2 หน้าจัดการข้อมูลหลัก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
margin-left: 0px;
|
||||
"
|
||||
>
|
||||
จากรูปที่ 2 - 2 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
|
||||
<div style="margin-left: 50px;">
|
||||
หมายเลข 1 แถบเมนูหลักในหน้าจัดการข้อมูลหลัก <br>
|
||||
หมายเลข 2 สรุปจำนวนข้อมูล <br>
|
||||
หมายเลข 3 แถบเมนูย่อยของแต่ละเมนูหลัก <br>
|
||||
หมายเลข 4 แถบเมนูเพิ่ม ลบหรือแก้ไขข้อมูล <br>
|
||||
หมายเลข 5 รายละเอียดของเมนูย่อย <br>
|
||||
หมายเลข 6 ดูประวัติแก้ไข <br>
|
||||
หมายเลข 7 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 8 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000;"/>
|
||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะถูกซ่อนดังรูปภาพ และเมื่อกดไอคอน
|
||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000; transform: rotate(90deg);"/>
|
||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะกลับมาแสดงเหมือนเดิม ดังรูปภาพที่ 2 – 2 ที่หมายเลข1 และ หมายเลข2
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-3.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 - 3 ซ่อนแถบเมนูและสรุปจำนวนข้อมูล
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
985
src/modules/01_manual/components/2_data/22_About.vue
Normal file
985
src/modules/01_manual/components/2_data/22_About.vue
Normal file
|
|
@ -0,0 +1,985 @@
|
|||
<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.1 ข้อมูลเกี่ยวกับบุคคล
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลเกี่ยวกับบุคคล” จะปรากฏรายละเอียดดังรูปภาพ
|
||||
</p>
|
||||
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-4.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 - 4 รายละเอียดข้อมูลเกี่ยวกับบุคคล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12 ">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
|
||||
- เลือกกดแถบเมนูย่อย “คำนำหน้าชื่อ, กลุ่มเลือด, เพศ, ศาสนา, สถานภาพ,
|
||||
ระดับการศึกษา หรือจังหวัด” ระบบแสดงข้อมูล ซึ่งจะสามารถเพิ่ม
|
||||
ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ
|
||||
ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้
|
||||
เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์
|
||||
สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-5.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 - 5 แถบเมนูย่อยข้อมูลเกี่ยวกับบุคคล
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบเมนูย่อยของข้อมูลเกี่ยวกับบุคคล ประกอบด้วย
|
||||
คำนำหน้าชื่อ, กลุ่มเลือด,เพศ, ศาสนา, สถานภาพ,
|
||||
ระดับการศึกษาและจังหวัด <br />
|
||||
หมายเลข 2 ช่องค้นหาซึ่งสามารถสืบค้นข้อมูลที่ต้องการ
|
||||
และช่องคอลัมน์สามารถกดเลือกแต่ละรายการที่ต้องการซ่อนได้ <br />
|
||||
</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: #00aa86"
|
||||
/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
||||
โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-6.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 – 6 แก้ไขข้อมูล
|
||||
</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/2_about/2-7.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 - 7 เพิ่มข้อมูลในช่องที่ปรากฏ
|
||||
</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.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-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</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"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบจะปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 8 ป้าย “บันทึกข้อมูลร่างสำเร็จ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
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"/>
|
||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 9 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 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">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-11.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 - 11 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-12.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 - 12 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</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-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-13.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 - 13 ประวัติแก้ไขข้อมูล
|
||||
</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>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-14.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 - 14 หน้ารายละเอียดจังหวัด
|
||||
</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: #00aa86"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูป โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-15.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 - 15 แก้ไขจังหวัด
|
||||
</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/2_about/2-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">
|
||||
รูปภาพที่ 2 - 16 เพิ่มข้อมูลจังหวัดในช่องที่ปรากฏ
|
||||
</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.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-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</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>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 17 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
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"/>
|
||||
เพื่อลบบันทึกร่าง ระบบปรากฏป้าย “ต้องการลบข้อมูลร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-18.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 - 18 ป้าย “ต้องการลบข้อมูลร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 19 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</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-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-20.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 - 20 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบระบบปรากฏ “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 21 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</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-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 22 ประวัติแก้ไขจังหวัด
|
||||
</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-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการจังหวัดเพื่อดูรายการเขต/อำเภอของจังหวัดนั้นๆ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-23.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 - 23 เลือกรายการเพื่อดูข้อมูลเขต/อำเภอ
|
||||
</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-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการจังหวัดเพื่อดูรายการเขต/อำเภอของจังหวัดนั้นๆ ระบบจะแสดงรายการเขต/อำเภอ ดังรูปภาพและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-24.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 - 24 รายการเขต/อำเภอ
|
||||
</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>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-25.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 - 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-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/2_about/2-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">
|
||||
รูปภาพที่ 2 - 26 เพิ่มข้อมูลเขต/อำเภอในช่องที่ปรากฏ
|
||||
</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-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการเขต/อำเภอเพื่อดูรายการแขวง/ตำบลของจังหวัดนั้นๆ ดังภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 27 เลือกรายการเพื่อดูข้อมูลแขวง/ตำบล
|
||||
</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-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการเขต/อำเภอเพื่อดูรายการแขวง/ตำบลของเขต/อำเภอนั้นๆระบบจะแสดงรายการแขวง/ตำบล ดังรูปภาพ และในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 28 รายการแขวง/ตำบล
|
||||
</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-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-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">
|
||||
รูปภาพที่ 2 - 29 แก้ไขแขวง/ตำบล
|
||||
</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/2_about/2-30.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 - 30 เพิ่มข้อมูลแขวง/ตำบลในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลแขวง/ตำบล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
.bell {
|
||||
background-color: #dadada;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
color: #747474;
|
||||
}
|
||||
</style>
|
||||
381
src/modules/01_manual/components/2_data/23_Gov.vue
Normal file
381
src/modules/01_manual/components/2_data/23_Gov.vue
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
<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.2 ข้อมูลโครงสร้างหน่วยงาน
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลโครงสร้างหน่วยงาน” จะปรากฏรายละเอียดดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-31.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 - 31 รายละเอียดข้อมูลโครงสร้างหน่วยงาน
|
||||
</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/3_gov/2-32.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 - 32 แถบเมนูย่อยข้อมูลโครงสร้างหน่วยงาน
|
||||
</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/3_gov/2-33.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 – 33 แก้ไขข้อมูล
|
||||
</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-trash-can-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/3_gov/2-34.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 - 34 เพิ่มข้อมูลหน่วยงานในช่องที่ปรากฏ
|
||||
</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/3_gov/2-35.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 - 35 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</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>
|
||||
</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/3_gov/2-36.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 - 36 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</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/3_gov/2-37.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 - 37 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</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>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-38.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 - 38 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </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/3_gov/2-39.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 - 39 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</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/3_gov/2-40.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 - 40 หน้าประวัติแก้ไขข้อมูล
|
||||
</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>
|
||||
|
||||
374
src/modules/01_manual/components/2_data/24_Officer.vue
Normal file
374
src/modules/01_manual/components/2_data/24_Officer.vue
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
<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>
|
||||
|
||||
374
src/modules/01_manual/components/2_data/25_Employee.vue
Normal file
374
src/modules/01_manual/components/2_data/25_Employee.vue
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
<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.4 ข้อมูลตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของลูกจ้าง” จะปรากฏรายละเอียดดังรูปภาพ </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-51.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 - 51 รายละเอียดข้อมูลตำแหน่งของลูกจ้าง
|
||||
</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/5_employee/2-52.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 - 52 แถบเมนูข้อมูลตำแหน่งของลูกจ้าง
|
||||
</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/5_employee/2-53.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 - 53 เพิ่ม ลบหรือแก้ไขข้อมูล
|
||||
</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/5_employee/2-54.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 - 54 เพิ่มข้อมูลในช่องที่ปรากฏ
|
||||
</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;">
|
||||
<div class="q-toggle__track"></div>
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap"></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/5_employee/2-55.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 - 55 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</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/5_employee/2-56.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 - 56 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</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/5_employee/2-57.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 - 57 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</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/5_employee/2-58.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 - 58 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </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/5_employee/2-59.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 - 59 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</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/5_employee/2-60.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 - 60 หน้าประวัติแก้ไขข้อมูล
|
||||
</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>
|
||||
|
||||
596
src/modules/01_manual/components/2_data/26_Calendar.vue
Normal file
596
src/modules/01_manual/components/2_data/26_Calendar.vue
Normal file
|
|
@ -0,0 +1,596 @@
|
|||
<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.5 ข้อมูลปฏิทินวันหยุด
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลปฏิทินวันหยุด” จะปรากฏรายละเอียดดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-61.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 - 61 รายละเอียดข้อมูลปฏิทินวันหยุด
|
||||
</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 การสรุปวันหยุดในแต่ละเดือนประจำปีนั้นๆ โดยยึดวันหยุดของการทำงาน 5 วัน <br>
|
||||
หมายเลข 2 สามารถกดเลือกเดือนและปี ที่ต้องการให้ระบบแสดง <br>
|
||||
หมายเลข 3 ไอคอนบวกเป็นการเพิ่มวันหยุด และไอคอนสี่เหลี่นมซ้อนเป็นการคัดลอกวันหยุด <br>
|
||||
หมายเลข 4 เป็นการแสดงปฏิทินแบบตาราง <br>
|
||||
หมายเลข 5 เป็นการแสดงรายการวันหยุดของการทำงาน 5 วัน และ 6 วัน <br>
|
||||
หมายเลข 6 เป็นการอธิบายแถบสี โดยสีน้ำเงินจะเป้นแถบสีของการทำงานวันจันทร์-ศุกร์(5วัน) และสีส้มแถบสีของการทำงานวันจันทร์-วันเสาร์(6วัน) <br>
|
||||
หมายเลข 7 รายละเอียดวันหยุดที่มีการเพิ่ม
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<span
|
||||
style="
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid #C8D3DB;
|
||||
color: #000000;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-calendar" style="color: #00aa86;" size="xs"/>
|
||||
|
||||
ก.ค 2566
|
||||
</span>
|
||||
ระบบจะแสดงข้อมูลให้เลือกเดือนหรือสามารถกดไอคอน หรือเพื่อเลื่อนเลือกปี ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-62.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 - 52 แถบเมนูข้อมูลตำแหน่งของลูกจ้าง
|
||||
</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 ปุ่มสำหรับคลิกเลือกเดือนและปีก่อนหน้านี้ <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเลือกเดือนและปีถัดไป
|
||||
|
||||
</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"/>
|
||||
ระบบจะแสดงเพื่อให้เพิ่มวันหยุด โดยสามารถกดเลือกว่าเป็นวันหยุดของทำงาน 5 วัน หรือ 6 วัน หรือทั้งหมดจากนั้นให้กดไอคอน
|
||||
<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/6_calendar/2-63.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 - 63 เพิ่มวันหยุด
|
||||
</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 ช่องสำหรับกรอกข้อมูลรายละเอียกคำอธิบายการเพิ่มวันหยุด <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกวันหยุดของการทำงาน <br>
|
||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลการเพิ่มวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ในการเพิ่มวันหยุดมีอีกหนึ่งวิธี โดยการกดเลือกช่องวันที่ ที่ต้องการเพิ่มวันหยุดได้ ดังรูปภาพเมื่อกดที่ช่องวันที่จะปรากฏรายละเอียดให้กรอก ดังรูปภาพก่อนหน้า
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-64.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 – 64 เพิ่มวันหยุด
|
||||
</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"/>
|
||||
เพื่อบันทึก ระบบปรากฏป้าย “เพิ่มวันหยุดสำเร็จ” ดังรูปภาพ และปรากฏวันหยุดที่เพิ่มล่าสุด
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-65.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 - 65 ป้าย “เพิ่มวันหยุดสำเร็จ”
|
||||
</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"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
ระบบจะแสดงเพื่อให้คัดลอกวันหยุดปีที่คัดลอกวันหยุด และปีที่ลงวันหยุดคัดลอก จากนั้นกดไอคอน
|
||||
<q-icon name="mdi-content-copy" style="margin: 0 5px; color: hwb(0 0% 100%);" size="xs"/>
|
||||
เพื่อบันทึก ดังรูปภาพ
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/6_calendar/2-66.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 - 66 คัดลอกวันหยุด
|
||||
</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" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเลือกปีที่คัดลอกวันหยุด และปีที่ลงวันหยุดคัดลอกเรียบร้อยแล้ว และกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
ระบบปรากฏป้าย “คัดลอกวันหยุดสำเร็จ” ดังรูปภาพs
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-67.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 - 67 ป้าย “คัดลอกวันหยุดสำเร็จ”
|
||||
</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-calendar-month" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ระบบจะแสดงปฏิทินดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-68.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 - 68 ปฏิทินวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดเลือกไอคอน
|
||||
<q-icon name="mdi-format-list-bulleted" style="margin: 0 5px; color: hsl(0, 0%, 78%);" size="xs"/>
|
||||
ระบบจะแสดงรายการวันหยุดโดยสามารถเลือกได้ว่าต้องการดูรายการวันหยุดของการทำงาน 5 วัน และ 6 วัน หากกดเลือกทำงาน 5 วัน ระบบจะแสดง ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-69.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 - 69 รายการวันหยุด 5 วัน
|
||||
</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>
|
||||
- หากกดเลือกทำงาน 6 วัน ระบบจะแสดงรายการดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-70.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 - 70 รายการวันหยุด 6 วัน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- ในรายการแสดงวันหยุดของการทำงาน 5 วัน และ 6 วัน สามารถแก้ไขหรือลบวันหยุดได้โดย กดไอคอน
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hwb(0 31% 69%);" size="xs"/>
|
||||
ระบบจะขึ้นให้เลือกเมนูแก้ไขวันหยุด หรือลบวันหยุดดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-71.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 - 71 การแก้ไขหรือลบวันหยุด
|
||||
</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-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึก
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-72.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 – 72 แก้ไขวันหยุด
|
||||
</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 ช่องสำหรับกรอกคำแก้ไขอธิบายวันหยุด <br>
|
||||
หมายเลข 3 ปุ่มสำหรับกดคลิกบันทึกการแก้ไขข้อมูลวันหยุด
|
||||
</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/6_calendar/2-73.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 - 73 ป้าย “แก้ไขข้อมูลสำเร็จ”
|
||||
</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>
|
||||
- เมื่อกดเลือกเมนู “ลบวันหยุด” ระบบปรากฏป้าย “ต้องการลบวันหยุดหรือไม่” ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/6_calendar/2-74.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 - 74 ป้าย “ต้องการลบวันหยุดหรือไม่” </div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ตกลง” ระบบปรากฏป้าย “ลบข้อมูลสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/6_calendar/2-75.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 - 75 ป้าย “ลบข้อมูลสำเร็จ”
|
||||
</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>
|
||||
|
||||
395
src/modules/01_manual/components/2_data/27_Insignia.vue
Normal file
395
src/modules/01_manual/components/2_data/27_Insignia.vue
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
<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.6 ข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลเครื่องราชอิสริยาภรณ์” จะปรากฏรายละเอียดดังรูปภาพ </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-76.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 - 76 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เลือกกดแถบเมนูย่อย “ลำดับชั้นเครื่องราชฯหรือชื่อเครื่องราชฯ” ระบบจะแสดงข้อมูล ซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพซึ่งเมนูย่อย อื่นๆสามารถทำตามขั้นตอน ดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-77.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 - 77 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ </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: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้เลย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-78.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 - 78 แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</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/7_insignia/2-79.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 - 79 เพิ่มข้อมูลในช่องที่ปรากฏ </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
|
||||
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/02_data/7_insignia/2-80.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 - 80 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</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/7_insignia/2-81.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 - 81 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง </p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/7_insignia/2-82.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 - 82 ป้าย “ลบข้อมูลร่างสำเร็จ” </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/7_insignia/2-83.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 - 83 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/7_insignia/2-84.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 - 84 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</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/7_insignia/2-85.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 - 85 หน้าประวัติแก้ไขข้อมูล
|
||||
</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>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue