hrms-bangkok/hrms-manual
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

scrolltab

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-11 12:10:00 +07:00
parent 259c69d0b0
commit f8a018ef68
18 changed files with 1375 additions and 911 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/01_manual/components/1_login/01_Main.vue
View file

@ -7,9 +7,9 @@ const text = ref("");
<template>
<div class="row col-12">
<div class="col-12">
<div class="toptitle text-dark col-12 row items-center">
<!-- <div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div> -->
<q-card
flat

149
src/modules/01_manual/components/1_login/02_login.vue
View file

@ -1,70 +1,103 @@
<script setup lang="ts">
import { ref } from 'vue'
const rightDrawerOpen = ref(false)
const text = ref('')
import { ref } from "vue";
const rightDrawerOpen = ref(false);
const text = ref("");
</script>
<template>
<div class="row col-12">
<div class="col-9">
<!-- <div class="row col-12">
<div class="col-9"> -->
<!-- <div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div> -->
<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="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;">
1.1 การเข้าสู่ระบบโดยใช้ User name และ Password
</div>
<q-img src="@/assets/manual/01_login/2_login/1-2.png" style="max-width: 100%; display: block; margin: 0 auto; border-radius: 20px; margin-top: 20px;"/>
<div class="text-center text-grey-6" style="margin-top: 20px;">รูปภาพที่ 1 – 2 การเข้าสู่ระบบโดยการกรอกชื่อผู้ใช้งานและรหัสผ่าน</div>
<div style="margin-top: 20px; padding: 10px; background-color: #F3F3F3; font-size: 14px; color: #000000; border-radius: 5px;">
หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน <br>
หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน <br>
หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน <br>
หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ <br>
หมายเลข 5 ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่ <br>
หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่ <br>
</div>
<div class="col-12 text16" style="margin-top: 40px; margin-left: 10px;">
- เมื่อเข้าสู่ระบบบริหารทรัพยากรบุคคลกรุงเทพมหานคร ระบบแสดงหน้าจอของระบบบริหารทรัพยากรบุคคลกรุงเทพมหานครของเจ้าหน้าที่ดูแลระบบ
</div>
<q-img src="@/assets/manual/01_login/2_login/1-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;">รูปภาพที่ 1 – 3 การเข้าสู่ระบบหลังจากกรอกชื่อผู้ใช้งาน</div>
</q-card>
</div>
<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">
1.1 การเข้าสู่ระบบโดยใช้ User name และ Password
</div>
</template>
<q-img
src="@/assets/manual/01_login/2_login/1-2.png"
style="
max-width: 100%;
display: block;
margin: 0 auto;
border-radius: 20px;
margin-top: 20px;
"
/>
<div class="text-center text-grey-6" style="margin-top: 20px">
รูปภาพที่ 1 – 2 การเข้าสู่ระบบโดยการกรอกชื่อผู้ใช้งานและรหัสผ่าน
</div>
<div
style="
margin-top: 20px;
padding: 10px;
background-color: #f3f3f3;
font-size: 14px;
color: #000000;
border-radius: 5px;
"
>
หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ใช้งาน <br />
หมายเลข 2 ช่องสำหรับกรอกรหัสผ่านใช้งาน <br />
หมายเลข 3 ปุ่มสำหรับคลิกเข้าสู่ระบบใช้งาน <br />
หมายเลข 4 ช่องสำหรับคลิก หากต้องการให้ระบบจดจำการเข้าสู่ระบบ <br />
หมายเลข 5
ช่องสำหรับคลิกหากลืมรหัสผ่านเพื่อให้ทำระบบทำการรีเซ็ตรหัสผ่านใหม่
<br />
หมายเลข 6 ช่องสำหรับคลิกเพื่อลงทะเบียนผู้ใช้งานใหม่ <br />
</div>
<div class="col-12 text16" style="margin-top: 40px; margin-left: 10px">
- เมื่อเข้าสู่ระบบบริหารทรัพยากรบุคคลกรุงเทพมหานคร
ระบบแสดงหน้าจอของระบบบริหารทรัพยากรบุคคลกรุงเทพมหานครของเจ้าหน้าที่ดูแลระบบ
</div>
<q-img
src="@/assets/manual/01_login/2_login/1-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">
รูปภาพที่ 1 – 3 การเข้าสู่ระบบหลังจากกรอกชื่อผู้ใช้งาน
</div>
</q-card>
<!-- </div>
</div> -->
</template>
<style lang="scss" scoped>
.custom-topic {
font-weight: bold;
font-size: 1.2rem;
font-weight: bold;
font-size: 1.2rem;
}
</style>
</style>

12
src/modules/01_manual/components/1_login/03_Password.vue
View file

@ -5,13 +5,13 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div> -->
<q-card
<!-- <q-card
flat
bordered
class="col-12 q-pa-md"
@ -26,7 +26,7 @@ const text = ref("");
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -112,8 +112,8 @@ const text = ref("");
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อย้อนกลับไปหน้าเข้าสู่ระบบ <br />
</div>
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>
<style>

67
src/modules/01_manual/components/1_login/04_newuser.vue
View file

@ -5,13 +5,13 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div> -->
<q-card
<!-- <q-card
flat
bordered
class="col-12 q-pa-md"
@ -26,7 +26,7 @@ const text = ref("");
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -42,20 +42,24 @@ const text = ref("");
class="col-12 q-gutter-xs"
style="margin-top: 20px; margin-left: 10px"
>
- หากเป็นผู้ใช้งานใหม่ต้องการที่จะลงทะเบียนเพื่อใช้งานระบบทรัพยากรบุคคคลกรุงเทพมหานครให้ทำการใช้เมาส์คลิก
-
หากเป็นผู้ใช้งานใหม่ต้องการที่จะลงทะเบียนเพื่อใช้งานระบบทรัพยากรบุคคคลกรุงเทพมหานครให้ทำการใช้เมาส์คลิก
<span
style="color: #0082CA;
background-color: #ffffff;
border: 1px solid #0082CA;
text-align: center;
display: inline-block;
padding: 0px 5px;
font-size: 13px; "
style="
color: #0082ca;
background-color: #ffffff;
border: 1px solid #0082ca;
text-align: center;
display: inline-block;
padding: 0px 5px;
font-size: 13px;
"
>
ลงทะเบียน
ลงทะเบียน
</span>
จากนั้นระบบแสดงหน้าลงทะเบียนผู้ใช้งาน ทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ จากนั้นทำการใช้เมาส์คลิก
จากนั้นระบบแสดงหน้าลงทะเบียนผู้ใช้งาน
ทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ จากนั้นทำการใช้เมาส์คลิก
<span
style="
background-color: #00aa86;
@ -67,21 +71,21 @@ const text = ref("");
padding: 0px 5px;
"
>
ลงทะเบียน
ลงทะเบียน
</span>
หรือหากไม่ต้องการลงทะเบียนผู้ใช้งานแล้วให้ทำการคลิกที่
<span
style="
background-color: #ffffff;
border: 1px solid #0082CA;
color: #0082CA;
border: 1px solid #0082ca;
color: #0082ca;
font-size: 13px;
text-align: center;
display: inline-block;
padding: 0px 5px;
"
>
« กลับหน้าเข้าสู่ระบบ
« กลับหน้าเข้าสู่ระบบ
</span>
เพื่อยกเลิกการลงทะเบียนผู้ใช้งานใหม่หรือย้อนกลับไปยังหน้าเข้าสู่ระบบ
</div>
@ -97,7 +101,7 @@ const text = ref("");
"
/>
<div class="text-center text-grey-6" style="margin-top: 20px">
รูปภาพที่ 1 – 5 แสดงการกรอกข้อมูลลงทะเบียนผู้ใช้งานใหม่
รูปภาพที่ 1 – 5 แสดงการกรอกข้อมูลลงทะเบียนผู้ใช้งานใหม่
</div>
<div
@ -110,21 +114,16 @@ const text = ref("");
border-radius: 5px;
"
>
หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ลงทะเบียนใช้งาน <br>
หมายเลข 2 ช่องสำหรับกรอกนามสกุลผู้ลงทะเบียนใช้งาน <br>
หมายเลข 3 ช่องสำหรับกรอกอีเมลผู้ลงทะเบียนใช้งาน <br>
หมายเลข 4 ช่องสำหรับกรอกชื่อผู้ใช้งานของผู้ลงทะเบียนใช้งาน <br>
หมายเลข 5 ช่องสำหรับกรอกตั้งรหัสผ่านสำหรับใช้งานระบบ <br>
หมายเลข 6 ช่องสำหรับกรอกยืนยันรหัสผ่านสำหรับใช้งานระบบ <br>
หมายเลข 7 ปุ่มสำหรับคลิกยืนยันการลงทะเบียนผู้ใช้งาน <br>
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าเข้าสู่ระบบ <br>
หมายเลข 1 ช่องสำหรับกรอกชื่อผู้ลงทะเบียนใช้งาน <br />
หมายเลข 2 ช่องสำหรับกรอกนามสกุลผู้ลงทะเบียนใช้งาน <br />
หมายเลข 3 ช่องสำหรับกรอกอีเมลผู้ลงทะเบียนใช้งาน <br />
หมายเลข 4 ช่องสำหรับกรอกชื่อผู้ใช้งานของผู้ลงทะเบียนใช้งาน <br />
หมายเลข 5 ช่องสำหรับกรอกตั้งรหัสผ่านสำหรับใช้งานระบบ <br />
หมายเลข 6 ช่องสำหรับกรอกยืนยันรหัสผ่านสำหรับใช้งานระบบ <br />
หมายเลข 7 ปุ่มสำหรับคลิกยืนยันการลงทะเบียนผู้ใช้งาน <br />
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าเข้าสู่ระบบ <br />
</div>
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

12
src/modules/01_manual/components/1_login/05_logout.vue
View file

@ -5,13 +5,13 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div> -->
<q-card
<!-- <q-card
flat
bordered
class="col-12 q-pa-md"
@ -26,7 +26,7 @@ const text = ref("");
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -76,8 +76,8 @@ const text = ref("");
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>
<style>

8
src/modules/01_manual/components/1_login/06_noti.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -26,7 +26,7 @@ const text = ref("");
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div>
</q-card>
</q-card> -->
<q-card
@ -168,8 +168,8 @@ const text = ref("");
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

70
src/modules/01_manual/components/1_login/view.vue Normal file
View file

@ -0,0 +1,70 @@
<script setup lang="ts">
import Mainlogin from "../1_login/01_Main.vue";
import login from "../1_login/02_login.vue";
import Password from "../1_login/03_Password.vue";
import newuser from "../1_login/04_newuser.vue";
import logout from "../1_login/05_logout.vue";
import noti from "../1_login/06_noti.vue";
</script>
<template>
<div class="col-12 row">
<div
class="toptitle text-dark col-12 row items-center"
style="padding-top: 20px"
>
คู่มือการเข้าสู่ระบบ
</div>
<div class="row col-12 q-gutter-xs">
<div
id="Mainlogin"
name="1"
class="row col-12 information"
style="padding-bottom: 60px"
>
<Mainlogin />
</div>
<div
id="login"
name="2"
class="row col-12 information"
style="padding-bottom: 60px"
>
<login />
</div>
<div
id="Password"
name="3"
class="row col-12 information"
style="padding-bottom: 60px"
>
<Password />
</div>
<div
id="newuser"
name="4"
class="row col-12 information"
style="padding-bottom: 60px"
>
<newuser />
</div>
<div
id="logout"
name="5"
class="row col-12 information"
style="padding-bottom: 60px"
>
<logout />
</div>
<div
id="noti"
name="6"
class="row col-12 information"
style="padding-bottom: 60px"
>
<noti />
</div>
</div>
</div>
</template>
<style lang="scss" scoped></style>

8
src/modules/01_manual/components/2_data/21_Main.vue
View file

@ -5,11 +5,11 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-12">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
</div>
</div> -->
<q-card
flat
@ -135,7 +135,7 @@ const text = ref("");
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

8
src/modules/01_manual/components/2_data/22_About.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -24,7 +24,7 @@ const text = ref("");
<div class="custom-topic text-dark">
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -970,8 +970,8 @@ const text = ref("");
</div>
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

8
src/modules/01_manual/components/2_data/23_Gov.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -24,7 +24,7 @@ const text = ref("");
<div class="custom-topic text-dark">
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -375,7 +375,7 @@ const text = ref("");
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

765
src/modules/01_manual/components/2_data/24_Officer.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -24,351 +24,424 @@ const text = ref("");
<div class="custom-topic text-dark">
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
</div>
</q-card>
</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>
<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>
</template>
<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>

8
src/modules/01_manual/components/2_data/25_Employee.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -24,7 +24,7 @@ const text = ref("");
<div class="custom-topic text-dark">
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -368,7 +368,7 @@ const text = ref("");
</div>
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

8
src/modules/01_manual/components/2_data/26_Calendar.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -24,7 +24,7 @@ const text = ref("");
<div class="custom-topic text-dark">
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
</div>
</q-card>
</q-card> -->
<q-card
flat
@ -590,7 +590,7 @@ const text = ref("");
</div>
</q-card>
</div>
</div>
<!-- </div>
</div> -->
</template>

793
src/modules/01_manual/components/2_data/27_Insignia.vue
View file

@ -5,7 +5,7 @@ const text = ref("");
</script>
<template>
<div class="row col-12">
<!-- <div class="row col-12">
<div class="col-9">
<div class="toptitle text-dark col-12 row items-center">
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
@ -24,372 +24,431 @@ const text = ref("");
<div class="custom-topic text-dark">
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
</div>
</q-card>
</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>
<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>
</template>
<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>

79
src/modules/01_manual/components/2_data/view.vue Normal file
View file

@ -0,0 +1,79 @@
<script setup lang="ts">
import MainData from "../2_data/21_Main.vue";
import About from "../2_data/22_About.vue";
import gov from "../2_data/23_Gov.vue";
import officer from "../2_data/24_Officer.vue";
import employee from "../2_data/25_Employee.vue";
import calender from "../2_data/26_Calendar.vue";
import insignia from "../2_data/27_Insignia.vue";
</script>
<template>
<div class="col-12 row">
<div
class="toptitle text-dark col-12 row items-center"
style="padding-top: 40px"
>
คู่มือการใช้งานระบบข้อมูลหลัก
</div>
<div class="row col-12 q-gutter-xs">
<div
id="MainData"
name="1"
class="row col-12 information"
style="padding-bottom: 60px"
>
<MainData />
</div>
<div
id="About"
name="2"
class="row col-12 information"
style="padding-bottom: 60px"
>
<About />
</div>
<div
id="gov"
name="3"
class="row col-12 information"
style="padding-bottom: 60px"
>
<gov />
</div>
<div
id="officer"
name="4"
class="row col-12 information"
style="padding-bottom: 60px"
>
<officer />
</div>
<div
id="employee"
name="5"
class="row col-12 information"
style="padding-bottom: 60px"
>
<employee />
</div>
<div
id="calender"
name="6"
class="row col-12 information"
style="padding-bottom: 60px"
>
<calender />
</div>
<div
id="insignia"
name="6"
class="row col-12 information"
style="padding-bottom: 60px"
>
<insignia />
</div>
</div>
</div>
</template>
<style scoped></style>

36
src/modules/01_manual/router.ts
View file

@ -1,3 +1,4 @@
const viewLogin = () => import("@/modules/01_manual/components/1_login/view.vue")
const Mainlogin = () => import("@/modules/01_manual/components/1_login/01_Main.vue");
const MainLog = () => import("@/modules/01_manual/components/1_login/02_login.vue");
const Mainpass = () => import("@/modules/01_manual/components/1_login/03_Password.vue");
@ -6,6 +7,7 @@ const Mainlogout = () => import("@/modules/01_manual/components/1_login/05_logou
const Mainnoti = () => import("@/modules/01_manual/components/1_login/06_noti.vue");
const viewDatamain = () => import("@/modules/01_manual/components/2_data/view.vue")
const Datamain = () => import("@/modules/01_manual/components/2_data/21_Main.vue");
const Dataabout = () => import("@/modules/01_manual/components/2_data/22_About.vue");
const Datagov = () => import("@/modules/01_manual/components/2_data/23_Gov.vue");
@ -53,13 +55,23 @@ export default [
{
path: "/manual",
name: "manual",
component: Mainlogin,
component: viewLogin,
meta: {
Auth: true,
Key: [10],
Role: "order",
},
},
// {
// path: "/manual",
// name: "manual",
// component: Mainlogin,
// meta: {
// Auth: true,
// Key: [10],
// Role: "order",
// },
// },
{
path: "/login/log",
@ -71,7 +83,7 @@ export default [
Role: "order",
},
},
{
path: "/login/password",
name: "mainpassword",
@ -122,9 +134,9 @@ export default [
{
path: "/Datamain",
name: "Datamain",
component: Datamain,
path: "/datamain",
name: "datamain",
component: viewDatamain,
meta: {
Auth: true,
Key: [10],
@ -200,12 +212,12 @@ export default [
},
},
/****** 3 ********/
/****** 3 ********/
{
path: "/Structuremain",
name: "Structuremain",
path: "/structuremain",
name: "structuremain",
component: Structuremain,
meta: {
Auth: true,
@ -293,10 +305,10 @@ export default [
/****** 4 ********/
/****** 4 ********/
{
path: "/Registrationmain",
path: "/registrationmain",
name: "registmain",
component: registmain,
meta: {
@ -365,10 +377,10 @@ export default [
/****** 5 ********/
/****** 5 ********/
{
path: "/Recruitmain",
path: "/recruitmain",
name: "recruitmain",
component: recruitmain,
meta: {