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

tab

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-12 15:43:51 +07:00
parent 0f86f97d91
commit 483155dc18
32 changed files with 10140 additions and 9400 deletions
Download patch file Download diff file Expand all files Collapse all files

621
src/modules/01_manual/components/3_Structure/36_account2.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"
@ -24,319 +24,322 @@ 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">
3.5 จัดการบัญชี 2
</div>
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงหน้าจอดังรูป
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-46.png"
style="
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">
รูปภาพที่ 3 - 46 หน้าผังโครงสร้าง
</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 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br>
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
</div>
</div>
<div class="col-12">
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px">
- สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
</p>
</div>
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-47.png"
style="
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">
รูปภาพที่ 3 - 47 รายละเอียดที่ได้ทำการเลือก
</div>
</div>
<div class="col-12">
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px">
- สามารถกดเลือกไอคอน
<span class="circle-icon" style="margin-left: 10px">
<span
style="font-weight: bold;
font-size: 10px;
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
">
>
</span>
</span>
แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
<span class="circle-icon" style="margin-left: 10px">
<span
style="font-weight: bold;
font-size: 10px;
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
">
>
</span>
</span>
</p>
</div>
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-48.png"
style="
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">
รูปภาพที่ 3 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
</div>
</div>
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px; display: flex;">
- สามารถคลิกไอคอน
<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<i class="q-icon notranslate material-icons" aria-hidden="true" role="img">assignment_turned_in</i>
</span>
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
</p>
<q-img class="col-12"
src="@/assets/manual/03_structure/6_account2/3-49.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">
รูปภาพที่ 3 - 49 ออกคำสั่ง
</div>
</div>
<div class="col-12">
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px">
- เมื่อกดปุ่ม “ยืนยัน” จะปรากฏป้ายเตือนบริเวณมุมขวาล่างดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการยืนยันเพื่อเอาไปออกคำสั่ง
</p>
</div>
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-50.png"
style="
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">
รูปภาพที่ 3 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
</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 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br>
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
</div>
</div>
<div class="col-12">
<p
style="margin-top: 50px;
margin-left: 10px;display: flex;
justify-content: flex-start;
align-items: center;">
- สามารถคลิกไอคอน
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ
</p>
<q-img class="col-12"
src="@/assets/manual/03_structure/6_account2/3-51.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">
รูปภาพที่ 3 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
</div>
</div>
<div class="col-12">
<p
style="margin-top: 50px;
margin-left: 10px;display: flex;
justify-content: flex-start;
align-items: center;">
- สามารถสืบค้นข้อมูลที่ช่องค้นหา และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ
</p>
<q-img class="col-12"
src="@/assets/manual/03_structure/6_account2/3-52.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">
รูปภาพที่ 3 - 52 รายละเอียดที่ได้ทำการเลือก
</div>
<div
style="
margin-top: 20px;
padding: 10px;
background-color: #f3f3f3;
font-size: 14px;
color: #000000;
border-radius: 5px;
"
>
หมายเลข 1 ช่องสำหรับกรอกเพื่อค้นหาข้อมูลจัดการบัญชีที่ต้องการรายละเอียดข้อมูล <br>
หมายเลข 2 ช่องสำหรับคลิกเลือกหัวคอลัมแสดงตารางข้อมูลตามที่ได้ทำการคลิกเลือกคอมลัมน์แสดงข้อมูลไว้
</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">
3.5 จัดการบัญชี 2
</div>
</div>
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร”
ระบบแสดงหน้าจอดังรูป
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-46.png"
style="
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">
รูปภาพที่ 3 - 46 หน้าผังโครงสร้าง
</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 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
</div>
</div>
<div class="col-12">
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px">
- สามารถกดเลือกแถบเมนูหน่วยงานหรือสำนักงาน
ระบบจะแสดงรายละเอียดเฉพาะที่เลือกดังรูปภาพ
</p>
</div>
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-47.png"
style="
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">
รูปภาพที่ 3 - 47 รายละเอียดที่ได้ทำการเลือก
</div>
</div>
<div class="col-12">
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px">
- สามารถกดเลือกไอคอน
<span class="circle-icon" style="margin-left: 10px">
<span
style="
font-weight: bold;
font-size: 10px;
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
transform: rotate(180deg); /* หมุน 90 องศาทางขวา */
"
>
>
</span>
</span>
แถบเมนูหน่วยงานหรือสำนักงานจะถูกซ่อน ดังรูปภาพ
และเมื่อต้องการให้แสดงเหมือนเดิมให้กดไอคอน
<span class="circle-icon" style="margin-left: 10px">
<span
style="
font-weight: bold;
font-size: 10px;
display: inline-flex; /* เพื่อให้สามารถใช้ transform ได้ */
transform: rotate(0deg); /* หมุน 90 องศาทางขวา */
"
>
>
</span>
</span>
</p>
</div>
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-48.png"
style="
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">
รูปภาพที่ 3 - 48 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
</div>
</div>
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px; display: flex">
- สามารถคลิกไอคอน
<span
class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
>
<i
class="q-icon notranslate material-icons"
aria-hidden="true"
role="img"
>assignment_turned_in</i
>
</span>
เพื่อเพิ่มข้อมูลหน่วยงานและตำแหน่ง ดังรูปภาพ
</p>
<q-img
class="col-12"
src="@/assets/manual/03_structure/6_account2/3-49.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">
รูปภาพที่ 3 - 49 ออกคำสั่ง
</div>
</div>
<div class="col-12">
<div class="col-12">
<p style="margin-top: 50px; margin-left: 10px">
- เมื่อกดปุ่ม “ยืนยัน” จะปรากฏป้ายเตือนบริเวณมุมขวาล่างดังรูปภาพ
และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการยืนยันเพื่อเอาไปออกคำสั่ง
</p>
</div>
</div>
<div class="col-12">
<q-img
src="@/assets/manual/03_structure/6_account2/3-50.png"
style="
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">
รูปภาพที่ 3 - 50 ป้าย “ยืนยันเพื่อเอาไปออกคำสั่ง”
</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 ข้อมูลรายละเอียดจัดการบัญชี2 กรณีไม่มี ชื่อ-นามสกุล คือ
เลขที่ตำแหน่งนั้นยังไม่มีการถือครองหรือว่าง <br />
หมายเลข 6 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br />
หมายเลข 7 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
</div>
</div>
<div class="col-12">
<p
style="
margin-top: 50px;
margin-left: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
"
>
- สามารถคลิกไอคอน
<q-icon
name="mdi-plus"
style="margin: 0 5px; color: #00aa86"
size="xs"
/>
เพื่อดูประวัติบัญชีจัดการข้าราชการกรุงเทพฯ ดังรูปภาพ
</p>
<q-img
class="col-12"
src="@/assets/manual/03_structure/6_account2/3-51.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">
รูปภาพที่ 3 - 51 ซ่อนแถบเมนูหน่วยงานหรือสำนักงาน
</div>
</div>
<div class="col-12">
<p
style="
margin-top: 50px;
margin-left: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
"
>
- สามารถสืบค้นข้อมูลที่ช่องค้นหา
และทีช่องคอลัมน์สามารถเลือกรายการที่ต้องการซ่อนได้ดังรูปภาพ
</p>
<q-img
class="col-12"
src="@/assets/manual/03_structure/6_account2/3-52.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">
รูปภาพที่ 3 - 52 รายละเอียดที่ได้ทำการเลือก
</div>
<div
style="
margin-top: 20px;
padding: 10px;
background-color: #f3f3f3;
font-size: 14px;
color: #000000;
border-radius: 5px;
"
>
หมายเลข 1
ช่องสำหรับกรอกเพื่อค้นหาข้อมูลจัดการบัญชีที่ต้องการรายละเอียดข้อมูล
<br />
หมายเลข 2
ช่องสำหรับคลิกเลือกหัวคอลัมแสดงตารางข้อมูลตามที่ได้ทำการคลิกเลือกคอมลัมน์แสดงข้อมูลไว้
</div>
</div>
</q-card>
<!-- </div>
</div> -->
</template>
<style>
.circle-icon {
width: 20px;
height: 20px;
background-color: hwb(0 100% 0%);
border: 1px solid hwb(0 86% 14% / 0.611); ;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
vertical-align: middle;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
width: 20px;
height: 20px;
background-color: hwb(0 100% 0%);
border: 1px solid hwb(0 86% 14% / 0.611);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
vertical-align: middle;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}
.col, .col-xs {
flex: 0 0 5%;
color: #00aa86;
font-size: 20px;
.col,
.col-xs {
flex: 0 0 5%;
color: #00aa86;
font-size: 20px;
}
</style>