141 lines
5.8 KiB
Vue
141 lines
5.8 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-12">
|
||
<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>
|
||
|