985 lines
48 KiB
Vue
985 lines
48 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
const rightDrawerOpen = ref(false);
|
||
const text = ref("");
|
||
</script>
|
||
|
||
<template>
|
||
<!-- <div class="row col-12">
|
||
<div class="col-9">
|
||
<div class="toptitle text-dark col-12 row items-center">
|
||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||
</div>
|
||
|
||
<q-card
|
||
flat
|
||
bordered
|
||
class="col-12 q-pa-md"
|
||
style="
|
||
background-color: #ecebeb;
|
||
border-radius: 8px 8px 0px 0px;
|
||
padding: 10px 16px 10px 16px;
|
||
"
|
||
>
|
||
<div class="custom-topic text-dark">
|
||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||
</div>
|
||
</q-card> -->
|
||
|
||
<q-card
|
||
flat
|
||
bordered
|
||
class="col-12 q-pa-md"
|
||
style="border-radius: 0px 0px 8px 8px"
|
||
>
|
||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||
2.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>
|