เพิ่มโค้ดคู่มือ
This commit is contained in:
kanyarat2001
parent
2b399efa90
commit
fc8235d330
40 changed files with 14948 additions and 46 deletions
|
|
@ -1,7 +0,0 @@
|
|||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการเข้าสู่ระบบ (Login)
|
||||
<q-space />
|
||||
</div>
|
||||
</template>
|
||||
219
src/modules/01_manual/components/1_login/01_Main.vue
Normal file
219
src/modules/01_manual/components/1_login/01_Main.vue
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
const rightDrawerOpen = ref(false)
|
||||
const text = ref('')
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
|
||||
<div class="toptitle text-dark col-12 row items-center">คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร</div>
|
||||
|
||||
<q-card flat bordered class="col-12 q-pa-md" style="background-color: #ECEBEB; border-radius: 8px 8px 0px 0px; padding: 10px 16px 10px 16px; ">
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700;">
|
||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
||||
<q-card flat bordered class="col-12 q-pa-md" style="border-radius: 0px 0px 8px 8px;">
|
||||
|
||||
|
||||
<div class="col-12 text16">เปิดโปรแกรม Google Chrome เวอร์ชั่น 20 ขึ้นไป หรือ Firefox เวอร์ชั่น 14 ขึ้นไป กรอก <span class="text-green">URL: https://bma-ehr.frappet.com</span> ลงในช่อง Address จากนั้นกดแป้น Enter ที่คีย์บอร์ด 1 ครั้ง ดังรูป</div>
|
||||
<div class="col-12">
|
||||
<q-img src="@/assets/manual/01_login/1_main/1-1.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–1 แสดงการเข้าสู่เว็บไซต์</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-3 row justify-center" style="position: relative;">
|
||||
<q-list dense padding class="col-12" style="max-width: 328px; position: absolute; top: 50px;">
|
||||
|
||||
<q-expansion-item label="การเข้าสู่ระบบ" >
|
||||
<q-list dense>
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การลงทะเบียนผู้ใช้งานใหม่</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การแสดงแจ้งเตือน</q-item-section>
|
||||
</q-item>
|
||||
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item label="ระบบข้อมูลหลัก" class="text-grey-7">
|
||||
<q-list dense>
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การเข้าสู่ระบบโดยใช้ User name และ Password</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การเปลี่ยนรหัสผ่านผู้ใช้งาน</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การลงทะเบียนผู้ใช้งานใหม่</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การออกจากระบบ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การแสดงแจ้งเตือน</q-item-section>
|
||||
</q-item>
|
||||
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item label="ระบบโครงสร้างอัตรากำลัง" class="text-grey-7">
|
||||
<q-list dense>
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">จัดการตำแหน่ง</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">แผนภูมิโครงสร้าง</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">แผนภูมิองค์กร</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">ผังโครงสร้าง</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
|
||||
</q-item>
|
||||
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">รายงานบัญชี</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">จัดการบัญชี 2</q-item-section>
|
||||
</q-item>
|
||||
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item label="หน้าจัดการระบบทะเบียนประวัติ" class="text-grey-7">
|
||||
<q-list dense>
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การเข้าสู่หน้าระบบทะเบียนประวัติ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การค้นหาข้อมูลทะเบียนประวัติ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การดูรายละเอียดข้อมูลทะเบียนประวัติ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การเพิ่ม แก้ไข ดูประวัติแก้ไขข้อมูลทะเบียนประวัติ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล</q-item-section>
|
||||
</q-item>
|
||||
|
||||
|
||||
<q-item dense clickable v-ripple>
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 36px; margin-left: 30px;">
|
||||
</q-item-section>
|
||||
<q-item-section class="text-grey-7">การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว</q-item-section>
|
||||
</q-item>
|
||||
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.q-item__section--side .q-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
70
src/modules/01_manual/components/1_login/02_login.vue
Normal file
70
src/modules/01_manual/components/1_login/02_login.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<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;">
|
||||
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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-topic {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
132
src/modules/01_manual/components/1_login/03_Password.vue
Normal file
132
src/modules/01_manual/components/1_login/03_Password.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<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">
|
||||
1.2 การเปลี่ยนรหัสผ่านผู้ใช้งาน
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12 text16 q-gutter-xs"
|
||||
style="margin-top: 20px; margin-left: 10px"
|
||||
>
|
||||
- หากลืมรหัสผ่านผู้ใช้งานให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
class="dd text-red"
|
||||
>
|
||||
ลืมรหัสผ่าน
|
||||
</span>
|
||||
|
||||
จากนั้นระบบจะหน้า “ลืมรหัสผ่าน”
|
||||
ให้ทำการกรอกชื่อผู้ใช้งานหรือที่อยู่อีเมลของผู้ใช้งานลงไป
|
||||
จากนั้นทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
"
|
||||
>
|
||||
ยืนยัน
|
||||
</span>
|
||||
ระบบจะทำการรีเซ็ตรหัสผ่านใหม่ให้โดยการส่งคำแนะนำไปทางอีเมลของผู้ใช้งานหรือหากไม่ต้องการ
|
||||
ให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #ffffff;
|
||||
border: 1px solid hsl(0, 100%, 50%);
|
||||
color: red;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
"
|
||||
>
|
||||
« กลับหน้าเข้าสู่ระบบ
|
||||
</span>
|
||||
เพื่อกลับไปยังหน้าเข้าสู่ระบบเพื่อใช้งาน
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/01_login/3_password/1-4.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 – 4 แสดงการกรอกข้อมูลหากลืมรหัสผ่านใช้งาน
|
||||
</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 />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dd {
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: 1px solid red;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
130
src/modules/01_manual/components/1_login/04_newuser.vue
Normal file
130
src/modules/01_manual/components/1_login/04_newuser.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<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">
|
||||
1.3 การลงทะเบียนผู้ใช้งานใหม่
|
||||
</div>
|
||||
|
||||
<div
|
||||
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; "
|
||||
>
|
||||
ลงทะเบียน
|
||||
</span>
|
||||
|
||||
จากนั้นระบบแสดงหน้าลงทะเบียนผู้ใช้งาน ทำการกรอกข้อมูลให้ครบตามที่ระบบแนะนำ จากนั้นทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
"
|
||||
>
|
||||
ลงทะเบียน
|
||||
</span>
|
||||
หรือหากไม่ต้องการลงทะเบียนผู้ใช้งานแล้วให้ทำการคลิกที่
|
||||
<span
|
||||
style="
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #0082CA;
|
||||
color: #0082CA;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
"
|
||||
>
|
||||
« กลับหน้าเข้าสู่ระบบ
|
||||
</span>
|
||||
เพื่อยกเลิกการลงทะเบียนผู้ใช้งานใหม่หรือย้อนกลับไปยังหน้าเข้าสู่ระบบ
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/01_login/4_newuser/1-5.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 – 5 แสดงการกรอกข้อมูลลงทะเบียนผู้ใช้งานใหม่
|
||||
</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>
|
||||
หมายเลข 7 ปุ่มสำหรับคลิกยืนยันการลงทะเบียนผู้ใช้งาน <br>
|
||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับหน้าเข้าสู่ระบบ <br>
|
||||
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
91
src/modules/01_manual/components/1_login/05_logout.vue
Normal file
91
src/modules/01_manual/components/1_login/05_logout.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<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">
|
||||
1.4 การออกจากระบบ
|
||||
</div>
|
||||
|
||||
<div class="col-12 drop" style="margin-top: 20px; margin-left: 10px; align-items: center;">
|
||||
- หากต้องการออกจากระบบหลังจากที่ใช้งานเสร็จแล้ว ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="arrow_drop_down" size="sm"/>
|
||||
ระบบแสดงเมนูย่อยให้ทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
"
|
||||
>
|
||||
ออกจากระบบ
|
||||
</span>
|
||||
เพื่อออกจากระบบ ดังรูป
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/01_login/5_logout/1-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">
|
||||
รูปภาพที่ 1 – 6 แสดงการออกจากระบบผู้ใช้งาน
|
||||
</div>
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.drop {
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
187
src/modules/01_manual/components/1_login/06_noti.vue
Normal file
187
src/modules/01_manual/components/1_login/06_noti.vue
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<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">
|
||||
1.5 การแสดงแจ้งเตือน
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12 q-gutter-xs" style="margin-top: 20px; margin-left: 10px; align-items: center;">
|
||||
- ระบบจะทำการแจ้งเตือนการขอคำร้องแก้ไขข้อมูลต่างๆ ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-bell" class="bell" style="margin: 0 5px;"/>
|
||||
เพื่อดูการแจ้งเตือนหรือการขอคำร้องต่างๆ จากนั้นทำการคลิกเข้าไปในการขอคำร้อง
|
||||
ระบบจะทำการแสดงข้อมูลรายละเอียดการขอคำร้องต่างๆ ให้ โดยที่สามารถทำการคลิก
|
||||
<q-icon name="mdi-close" style="margin: 0 5px;"/> เพื่อลบแจ้งเตือนข้อมูลคำร้องทิ้งเพื่อลบแจ้งเตือนข้อมูลคำร้องทิ้ง
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/01_login/6_noti/1-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">
|
||||
รูปภาพที่ 1 – 7 แสดงการดูการแจ้งเตือนคำร้องขอต่างๆ
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12 q-gutter-xs" style="margin-top: 50px; margin-left: 10px; align-items: center;">
|
||||
- หากต้องการดูข้อมูลการร้องขอต่างๆ ให้ทำการใช้เมาส์คลิกเลือกการแจ้งเตือนจากนั้นระบบจะทำการแสดงข้อมูลการแจ้งเตือนเป็นกล่องข้อความ โดยที่สามารถทำการลบข้อมูลร้องขอโดยการคลิก
|
||||
|
||||
<q-icon name="mdi-trash-can" style="margin: 0 5px;"/>
|
||||
หรือหากต้องการจัดการข้อมูลคำร้องอื่นๆ ให้ทำการคลิก
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px;"/>
|
||||
หรือหากจะย้อนกลับก็ทำการคลิก
|
||||
<q-icon name="mdi-reply" style="margin: 0 5px;"/>
|
||||
เพื่อย้อนกลับไปยังหน้าข้อมูลก่อนหน้านี้
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/01_login/6_noti/1-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">
|
||||
รูปภาพที่ 1 – 8 แสดงการดูรายละเอียดการแจ้งเตือน
|
||||
</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 class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center;">
|
||||
- การดาวน์โหลดไฟล์เอกสารแนบคำร้องขอต่างๆ เพื่อดูเอกสารเพิ่มเติมการร้องขอให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #E4F2FD;
|
||||
border: 1px solid #E4F2FD;
|
||||
color: #0082CA;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
ดาวน์โหลดทั้งหมด
|
||||
</span>
|
||||
จากนั้นระบบทำการดาวน์โหลดไฟล์เอกสารแนบหรือหากคำร้องขอไหนที่สำคัญสามารถทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-star" style="margin: 0 5px; color: #919191;"/>
|
||||
ให้เป็น
|
||||
<q-icon name="mdi-star" style="margin: 0 5px; color: #ffee00;"/>
|
||||
เพื่อให้ข้อความคำร้องนี้ขึ้นไปอยู่บนสุดของกล่องข้อความหรือให้ความสำคัญกับกล่องข้อความนี้ก่อน
|
||||
</div>
|
||||
<q-img
|
||||
src="@/assets/manual/01_login/6_noti/1-9.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 – 9 แสดงการดาวน์โหลดไฟล์เอกสารแนบคำร้อง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มดาวสำหรับคลิกเพื่อดันข้อความไว้บนสุด <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์เอกสารแนบคำร้อง <br>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
.bell{
|
||||
background-color: #DADADA;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
color: #747474;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
141
src/modules/01_manual/components/2_data/21_Main.vue
Normal file
141
src/modules/01_manual/components/2_data/21_Main.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล
|
||||
ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก”
|
||||
ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 495px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 1 เมนูข้อมูลหลัก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลหลัก” ระบบปรากฏหน้าจัดการข้อมูลหลักดังรูปภาพ
|
||||
</div>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-2.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 2 หน้าจัดการข้อมูลหลัก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
margin-left: 0px;
|
||||
"
|
||||
>
|
||||
จากรูปที่ 2 - 2 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
|
||||
<div style="margin-left: 50px;">
|
||||
หมายเลข 1 แถบเมนูหลักในหน้าจัดการข้อมูลหลัก <br>
|
||||
หมายเลข 2 สรุปจำนวนข้อมูล <br>
|
||||
หมายเลข 3 แถบเมนูย่อยของแต่ละเมนูหลัก <br>
|
||||
หมายเลข 4 แถบเมนูเพิ่ม ลบหรือแก้ไขข้อมูล <br>
|
||||
หมายเลข 5 รายละเอียดของเมนูย่อย <br>
|
||||
หมายเลข 6 ดูประวัติแก้ไข <br>
|
||||
หมายเลข 7 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 8 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000;"/>
|
||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะถูกซ่อนดังรูปภาพ และเมื่อกดไอคอน
|
||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000; transform: rotate(90deg);"/>
|
||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะกลับมาแสดงเหมือนเดิม ดังรูปภาพที่ 2 – 2 ที่หมายเลข1 และ หมายเลข2
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-3.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 3 ซ่อนแถบเมนูและสรุปจำนวนข้อมูล
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
985
src/modules/01_manual/components/2_data/22_About.vue
Normal file
985
src/modules/01_manual/components/2_data/22_About.vue
Normal file
|
|
@ -0,0 +1,985 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
2.1 ข้อมูลเกี่ยวกับบุคคล
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลเกี่ยวกับบุคคล” จะปรากฏรายละเอียดดังรูปภาพ
|
||||
</p>
|
||||
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-4.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 4 รายละเอียดข้อมูลเกี่ยวกับบุคคล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12 ">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
|
||||
- เลือกกดแถบเมนูย่อย “คำนำหน้าชื่อ, กลุ่มเลือด, เพศ, ศาสนา, สถานภาพ,
|
||||
ระดับการศึกษา หรือจังหวัด” ระบบแสดงข้อมูล ซึ่งจะสามารถเพิ่ม
|
||||
ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ
|
||||
ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้
|
||||
เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์
|
||||
สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-5.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 5 แถบเมนูย่อยข้อมูลเกี่ยวกับบุคคล
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบเมนูย่อยของข้อมูลเกี่ยวกับบุคคล ประกอบด้วย
|
||||
คำนำหน้าชื่อ, กลุ่มเลือด,เพศ, ศาสนา, สถานภาพ,
|
||||
ระดับการศึกษาและจังหวัด <br />
|
||||
หมายเลข 2 ช่องค้นหาซึ่งสามารถสืบค้นข้อมูลที่ต้องการ
|
||||
และช่องคอลัมน์สามารถกดเลือกแต่ละรายการที่ต้องการซ่อนได้ <br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon
|
||||
name="mdi-pencil-outline"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
||||
โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-6.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 – 6 แก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-7.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 7 เพิ่มข้อมูลในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงช่องเพื่อให้เพิ่มข้อมูล
|
||||
<div style="margin-left: 50px;">
|
||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง และกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบจะปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-8.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 8 ป้าย “บันทึกข้อมูลร่างสำเร็จ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-9.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 9 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-10.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 10 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” เมื่อทำการกดคลิกบันทึกข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-11.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 11 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-12.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 12 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” เมื่อทำการกดคลิกเผยแพร่
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-13.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 13 ประวัติแก้ไขข้อมูล
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับค้นหาและเลือกแสดงคอลัมน์ข้อมูลประวัติแก้ไขคำนำหน้าชื่อ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดแถบเมนูย่อย “จังหวัด” ระบบจะแสดงข้อมูลระดับจังหวัด ซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลจังหวัด ได้ดังรูปภาพ และในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน ซึ่งในหน้าข้อมูลนี้สามารถกดเลือกรายการจังหวัดเพื่อทำการเพิ่มลบหรือแก้ไขเขต/อำเภอและแขวง/ตำบลได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-14.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 14 หน้ารายละเอียดจังหวัด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #00aa86"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูป โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-15.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 15 แก้ไขจังหวัด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-16.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 16 เพิ่มข้อมูลจังหวัดในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลจังหวัด
|
||||
<div style="margin-left: 50px;">
|
||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง และกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-17.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 17 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่าง ระบบปรากฏป้าย “ต้องการลบข้อมูลร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-18.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 18 ป้าย “ต้องการลบข้อมูลร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-19.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 19 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” เมื่อทำการกดคลิกยืนยันการลบข้อมูลร่าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-20.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 20 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบระบบปรากฏ “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-21.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 21 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” เมื่อทำการทำคลิกเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-22.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 22 ประวัติแก้ไขจังหวัด
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์สำหรับแสดงข้อมูลประวัติแก้ไขจังหวัด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการจังหวัดเพื่อดูรายการเขต/อำเภอของจังหวัดนั้นๆ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-23.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 23 เลือกรายการเพื่อดูข้อมูลเขต/อำเภอ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 รายชื่อสำหรับคลิกเพื่อดูข้อมูลเพิ่มเติมของจังหวัดนั้นๆ ที่ทำการคลิกเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการจังหวัดเพื่อดูรายการเขต/อำเภอของจังหวัดนั้นๆ ระบบจะแสดงรายการเขต/อำเภอ ดังรูปภาพและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-24.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 24 รายการเขต/อำเภอ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูป โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-25.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 25 แก้ไขเขต/อำเภอ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับค้นหาและเลือกแสดงคอลัมน์ข้อมูลประวัติแก้ไขคำนำหน้าชื่อ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพ เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลโดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-26.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 26 เพิ่มข้อมูลเขต/อำเภอในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพื่อเพิ่มข้อมูลเขต
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการเขต/อำเภอเพื่อดูรายการแขวง/ตำบลของจังหวัดนั้นๆ ดังภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-27.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 27 เลือกรายการเพื่อดูข้อมูลแขวง/ตำบล
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 รายชื่อสำหรับคลิกเพื่อดูข้อมูลเพิ่มเติมของเขต/อำเภอนั้นๆ ที่ทำการคลิกเลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-chevron-right" style="margin: 0 5px; color: hsl(0, 0%, 0%);" size="xs"/>
|
||||
ที่แถบรายการเขต/อำเภอเพื่อดูรายการแขวง/ตำบลของเขต/อำเภอนั้นๆระบบจะแสดงรายการแขวง/ตำบล ดังรูปภาพ และในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-28.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 28 รายการแขวง/ตำบล
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 แถบสำหรับการเข้าถึงในส่วนของการจัดการข้อมูลจังหวัด การจัดการข้อมูลเขต และการจัดการข้อมูลแขวง/ตำบล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/2_about/2-29.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 29 แก้ไขแขวง/ตำบล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพ เมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลโดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/2_about/2-30.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 30 เพิ่มข้อมูลแขวง/ตำบลในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลแขวง/ตำบล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style>
|
||||
.bell {
|
||||
background-color: #dadada;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
color: #747474;
|
||||
}
|
||||
</style>
|
||||
381
src/modules/01_manual/components/2_data/23_Gov.vue
Normal file
381
src/modules/01_manual/components/2_data/23_Gov.vue
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
2.2 ข้อมูลโครงสร้างหน่วยงาน
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลโครงสร้างหน่วยงาน” จะปรากฏรายละเอียดดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-31.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 31 รายละเอียดข้อมูลโครงสร้างหน่วยงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เลือกกดแถบเมนูย่อย “ชื่อหน่วยงาน/ส่วนราชการ, ชื่อย่อหน่วยงาน/ส่วนราชการ, ประเภทของหน่วยงาน/ส่วนราชการ, ระดับของหน่วยงาน/ส่วนราชการ,สถานะของหน่วยงาน/ส่วนราชการ, หมายเลขโทรศัพท์ที่ติดต่อจากภายในหน่วยงาน/ส่วนราชการ,
|
||||
หมายเลขโทรศัพท์ที่ติดต่อจากภายนอกหน่วยงาน/ส่วนราชการหรือหมายเลขโทรสาร” ระบบแสดงข้อมูล
|
||||
เลือกซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้ เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดง
|
||||
ที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-32.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 32 แถบเมนูย่อยข้อมูลโครงสร้างหน่วยงาน
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลโครงสร้างหน่วยงาน <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-33.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 – 33 แก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูล ระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพ เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่) สามารถกดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-34.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 34 เพิ่มข้อมูลหน่วยงานในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
||||
<div style="margin-left: 50px;">
|
||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง และกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-35.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 35 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากทำการกรอกเพิ่มข้อมูลและทำการกดคลิกบันทึกข้อมูล <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/3_gov/2-36.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 36 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-37.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 37 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลร่าง </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-38.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 38 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-39.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 39 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากคลิกยืนยันการเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน </p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/3_gov/2-40.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 40 หน้าประวัติแก้ไขข้อมูล
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อหน่วยงาน </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
374
src/modules/01_manual/components/2_data/24_Officer.vue
Normal file
374
src/modules/01_manual/components/2_data/24_Officer.vue
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
2.3 ข้อมูลตำแหน่งของข้าราชการ
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของข้าราชการ” จะปรากฏรายละเอียดดังรูปภาพ </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-41.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 41 รายละเอียดข้อมูลตำแหน่งของข้าราชการ </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เลือกกดแถบเมนูย่อย “ตำแหน่งประเภท, ชื่อสายงาน, ชื่อตำแหน่งสายงาน, ด้าน/สาขาของสายงาน, ระดับตำแหน่ง, ชื่อตำแหน่งทางการบริหาร, ด้านทางการบริหารหรือ
|
||||
สถานะของตำแหน่ง” ระบบแสดงข้อมูลโดยสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดง
|
||||
หน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-42.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 42 แถบเมนูข้อมูลตำแหน่งของข้าราชการ </div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของข้าราชการ <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย </p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-43.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 43 แก้ไขหรือลบข้อมูล </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-44.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 44 เพิ่มข้อมูลในช่องที่ปรากฏ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
||||
<div style="margin-left: 50px;">
|
||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง และกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-45.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 45 ป้าย “บันทึกข้อมูลร่างสำเร็จ” </div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากกดบันทึกเพิ่มข้อมูลตำแหน่งของข้าราชการ </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/4_Officer/2-46.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 46 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง </p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-47.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 47 ป้าย “ลบข้อมูลร่างสำเร็จ” </div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลตำแหน่งของข้าราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-48.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 48 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล </p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-49.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 49 ป้าย “เผยแพร่ข้อมูลสำเร็จ” </div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากคลิกเผยแพร่ข้อมูลตำแหน่ง </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/4_Officer/2-50.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 50 หน้าประวัติแก้ไขข้อมูล
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและเลือกคอลัมน์แสดงข้อมูลประวัติแก้ไขชื่อตำแหน่งของข้าราชการที่ทำการกรอกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
374
src/modules/01_manual/components/2_data/25_Employee.vue
Normal file
374
src/modules/01_manual/components/2_data/25_Employee.vue
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
2.4 ข้อมูลตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลตำแหน่งของลูกจ้าง” จะปรากฏรายละเอียดดังรูปภาพ </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-51.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 51 รายละเอียดข้อมูลตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เลือกกดแถบเมนูย่อย “ชื่อตำแหน่ง, ด้านของตำแหน่ง, กลุ่มงาน, สายงาน, ระดับชั้นงานหรือสถานะของตำแหน่ง” ระบบแสดงข้อมูลเมนูย่อยทำการเลือก ซึ่งจะสามารถเพิ่ม
|
||||
ลบหรือแก้ไขข้อมูลได้ดังรูปภาพ ซึ่งเมนูย่อยอื่นๆสามารถทำตามขั้นตอนดังต่อไปนี้ได้ เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกัน และในกรอบสีแดงที่ช่องค้นหาสามารถ
|
||||
สืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-52.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 52 แถบเมนูข้อมูลตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 คอลัมน์แสดงชื่อคอลัมน์แสดงข้อมูลย่อยของข้อมูลตำแหน่งของลูกจ้าง <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกค้นหาและเลือกคอลัมน์แสดงข้อมูลตามที่ได้ได้การค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถแก้ไขรายการที่มีอยู่ได้เลย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-53.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 53 เพิ่ม ลบหรือแก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-54.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 54 เพิ่มข้อมูลในช่องที่ปรากฏ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
||||
<div style="margin-left: 50px;">
|
||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true" style="font-size: 24px; display: inline-block;">
|
||||
<div class="q-toggle__track"></div>
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap"></div>
|
||||
</div>
|
||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง และกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-55.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 55 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลสำเร็จ” หลังจากคลิกบันทึกการเพิ่มข้อมูลตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/5_employee/2-56.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 56 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-57.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 57 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” หลังจากคลิกยืนยันการลบข้อมูลร่างตำแหน่งของลูกจ้าง </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-58.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 58 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-59.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 59 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากที่คลิกยืนยันการเผยแพร่ข้อมูลตำแหน่งงานของลูกจ้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/5_employee/2-60.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 60 หน้าประวัติแก้ไขข้อมูล
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องสำหรับเลือกคอลัมน์แสดงข้อมูลการค้นหาประวัติแก้ไขชื่อตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
596
src/modules/01_manual/components/2_data/26_Calendar.vue
Normal file
596
src/modules/01_manual/components/2_data/26_Calendar.vue
Normal file
|
|
@ -0,0 +1,596 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
2.5 ข้อมูลปฏิทินวันหยุด
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลปฏิทินวันหยุด” จะปรากฏรายละเอียดดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-61.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 61 รายละเอียดข้อมูลปฏิทินวันหยุด
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 การสรุปวันหยุดในแต่ละเดือนประจำปีนั้นๆ โดยยึดวันหยุดของการทำงาน 5 วัน <br>
|
||||
หมายเลข 2 สามารถกดเลือกเดือนและปี ที่ต้องการให้ระบบแสดง <br>
|
||||
หมายเลข 3 ไอคอนบวกเป็นการเพิ่มวันหยุด และไอคอนสี่เหลี่นมซ้อนเป็นการคัดลอกวันหยุด <br>
|
||||
หมายเลข 4 เป็นการแสดงปฏิทินแบบตาราง <br>
|
||||
หมายเลข 5 เป็นการแสดงรายการวันหยุดของการทำงาน 5 วัน และ 6 วัน <br>
|
||||
หมายเลข 6 เป็นการอธิบายแถบสี โดยสีน้ำเงินจะเป้นแถบสีของการทำงานวันจันทร์-ศุกร์(5วัน) และสีส้มแถบสีของการทำงานวันจันทร์-วันเสาร์(6วัน) <br>
|
||||
หมายเลข 7 รายละเอียดวันหยุดที่มีการเพิ่ม
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<span
|
||||
style="
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid #C8D3DB;
|
||||
color: #000000;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-calendar" style="color: #00aa86;" size="xs"/>
|
||||
|
||||
ก.ค 2566
|
||||
</span>
|
||||
ระบบจะแสดงข้อมูลให้เลือกเดือนหรือสามารถกดไอคอน หรือเพื่อเลื่อนเลือกปี ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-62.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 52 แถบเมนูข้อมูลตำแหน่งของลูกจ้าง
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกเดือนและคลิกเลือกปี <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเลือกเดือนและปีก่อนหน้านี้ <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเลือกเดือนและปีถัดไป
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ระบบจะแสดงเพื่อให้เพิ่มวันหยุด โดยสามารถกดเลือกว่าเป็นวันหยุดของทำงาน 5 วัน หรือ 6 วัน หรือทั้งหมดจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึก ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-63.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 63 เพิ่มวันหยุด
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกวัน เดือน ปี ที่ต้องการเพิ่มวันหยุด <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกข้อมูลรายละเอียกคำอธิบายการเพิ่มวันหยุด <br>
|
||||
หมายเลข 3 ช่องสำหรับคลิกเลือกวันหยุดของการทำงาน <br>
|
||||
หมายเลข 4 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลการเพิ่มวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ในการเพิ่มวันหยุดมีอีกหนึ่งวิธี โดยการกดเลือกช่องวันที่ ที่ต้องการเพิ่มวันหยุดได้ ดังรูปภาพเมื่อกดที่ช่องวันที่จะปรากฏรายละเอียดให้กรอก ดังรูปภาพก่อนหน้า
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-64.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 – 64 เพิ่มวันหยุด
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 เลือกคลิกช่องวันที่เพื่อเพิ่มรายละเอียดข้อมูลวันหยุด
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเพิ่มวันหยุดเรียบร้อยแล้วและกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึก ระบบปรากฏป้าย “เพิ่มวันหยุดสำเร็จ” ดังรูปภาพ และปรากฏวันหยุดที่เพิ่มล่าสุด
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-65.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 65 ป้าย “เพิ่มวันหยุดสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับแสดงข้อมูลวันหยุดในวันที่ที่ได้ทำการเพิ่ม <br>
|
||||
หมายเลข 2 ระบบแสดงสถานะ “เพิ่มวันหยุดสำเร็จ” หลังจากคลิกบันทึกการเพิ่มข้อมูลวันหยุดเพิ่ม
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
ระบบจะแสดงเพื่อให้คัดลอกวันหยุดปีที่คัดลอกวันหยุด และปีที่ลงวันหยุดคัดลอก จากนั้นกดไอคอน
|
||||
<q-icon name="mdi-content-copy" style="margin: 0 5px; color: hwb(0 0% 100%);" size="xs"/>
|
||||
เพื่อบันทึก ดังรูปภาพ
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/6_calendar/2-66.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 66 คัดลอกวันหยุด
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคัดลอกวันหยุดก่อนปีหน้าไปยยังปีถัดไป <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกปีที่คัดลอกวันหยุดและช่องสำหรับคลิกเลือกปีที่ลงวันหยุดคัดลอก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเลือกปีที่คัดลอกวันหยุด และปีที่ลงวันหยุดคัดลอกเรียบร้อยแล้ว และกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
ระบบปรากฏป้าย “คัดลอกวันหยุดสำเร็จ” ดังรูปภาพs
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-67.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 67 ป้าย “คัดลอกวันหยุดสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “คัดลอกวันหยุดสำเร็จ” หลังจากคลิกบันทึกข้อมูลคัดลอกวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดเลือกไอคอน
|
||||
<q-icon name="mdi-calendar-month" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ระบบจะแสดงปฏิทินดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-68.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 68 ปฏิทินวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดเลือกไอคอน
|
||||
<q-icon name="mdi-format-list-bulleted" style="margin: 0 5px; color: hsl(0, 0%, 78%);" size="xs"/>
|
||||
ระบบจะแสดงรายการวันหยุดโดยสามารถเลือกได้ว่าต้องการดูรายการวันหยุดของการทำงาน 5 วัน และ 6 วัน หากกดเลือกทำงาน 5 วัน ระบบจะแสดง ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-69.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 69 รายการวันหยุด 5 วัน
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อให้ระบบแสดงรายการปฏิทิน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- หากกดเลือกทำงาน 6 วัน ระบบจะแสดงรายการดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-70.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 70 รายการวันหยุด 6 วัน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- ในรายการแสดงวันหยุดของการทำงาน 5 วัน และ 6 วัน สามารถแก้ไขหรือลบวันหยุดได้โดย กดไอคอน
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hwb(0 31% 69%);" size="xs"/>
|
||||
ระบบจะขึ้นให้เลือกเมนูแก้ไขวันหยุด หรือลบวันหยุดดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-71.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 71 การแก้ไขหรือลบวันหยุด
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 เมนูย่อยแก้ไขวันหยุดหรือลบวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดเลือกเมนู “แก้ไขวันหยุด” ระบบจะแสดงให้แก้ไขข้อมูลดังรูปภาพ และเมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึก
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-72.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 – 72 แก้ไขวันหยุด
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกวันที่ที่ต้องการแก้ไขวันหยุด <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกคำแก้ไขอธิบายวันหยุด <br>
|
||||
หมายเลข 3 ปุ่มสำหรับกดคลิกบันทึกการแก้ไขข้อมูลวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึก ระบบปรากฏป้าย “แก้ไขข้อมูลสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/6_calendar/2-73.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 73 ป้าย “แก้ไขข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “แก้ไขข้อมูลสำเร็จ” หลังจากที่ทำการคลิกบันทึกการแก้ไขข้อมูลวันหยุด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดเลือกเมนู “ลบวันหยุด” ระบบปรากฏป้าย “ต้องการลบวันหยุดหรือไม่” ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/6_calendar/2-74.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 74 ป้าย “ต้องการลบวันหยุดหรือไม่” </div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ตกลง” ระบบปรากฏป้าย “ลบข้อมูลสำเร็จ” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/6_calendar/2-75.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 75 ป้าย “ลบข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลสำเร็จ” หลังจากที่ทำการคลิกยืนยันการลบข้อมูลวันหยุด</div>
|
||||
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
395
src/modules/01_manual/components/2_data/27_Insignia.vue
Normal file
395
src/modules/01_manual/components/2_data/27_Insignia.vue
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div style="font-weight: bold; font-size: 15px; color: #00aa86">
|
||||
2.6 ข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลเครื่องราชอิสริยาภรณ์” จะปรากฏรายละเอียดดังรูปภาพ </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-76.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 76 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เลือกกดแถบเมนูย่อย “ลำดับชั้นเครื่องราชฯหรือชื่อเครื่องราชฯ” ระบบจะแสดงข้อมูล ซึ่งจะสามารถเพิ่ม ลบหรือแก้ไขข้อมูลได้ดังรูปภาพซึ่งเมนูย่อย อื่นๆสามารถทำตามขั้นตอน ดังต่อไปนี้ได้เนื่องจากมีวิธีการทำและการแสดงหน้าจอเหมือนกันและในกรอบสีแดงที่ช่องค้นหาสามารถสืบค้นข้อมูลและช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-77.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 77 รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ </div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 คอลัมน์สำหรับคลิกเลือกเพื่อแสดงข้อมูลตามรายชื่อที่ทำการคลิก <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องคอลัมน์สำหรับเลือกเพื่อแสดงข้อมูลตามที่ทำการค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ โดยสามารถเลือกแก้ไขรายการที่มีอยู่ได้เลย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-78.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 78 แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มข้อมูลระบบจะปรากฏช่องเพื่อให้เพิ่มข้อมูลดังรูปภาพและเมื่อกรอกเพื่อเพิ่มข้อมูลเรียบร้อยแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการ-เผยแพร่) โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างและสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล เพื่อเผยแพร่ข้อมูล โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล
|
||||
</p>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-79.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 79 เพิ่มข้อมูลในช่องที่ปรากฏ </div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกเพิ่มข้อมูลชื่อหน่วยงาน/หน่วยงานต้นสังกัด/ส่วนรายการต้นสังกัด
|
||||
<div style="margin-left: 50px;">
|
||||
- เมื่อไม่ต้องการเพิ่มข้อมูลแล้วให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องเพิ่มข้อมูล <br>
|
||||
- เมื่อต้องการปิดสถานะให้กดตรงไอคอน
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--truthy text-positive" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.35em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.08em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
เพื่อที่จะไม่แสดงข้อมูลนั้นในหน้าอื่นจากนั้นให้กดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง และกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อบันทึกร่าง (ข้อมูลยังไม่มีการเผยแพร่) ระบบปรากฏป้าย “บันทึกข้อมูลร่างสำเร็จ” ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-80.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 80 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากคลิกบันทึกการเพิ่มข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่าง ระบบจะขึ้นป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?” ดังรูปภาพ
|
||||
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/7_insignia/2-81.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 81 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง </p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/7_insignia/2-82.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 82 ป้าย “ลบข้อมูลร่างสำเร็จ” </div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างของข้อมูลเครื่องราชอิสริยาภรณ์ </div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบปรากฏป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-83.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 83 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/02_data/7_insignia/2-84.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 84 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “เผยแพร่ข้อมูลสำเร็จ” หลังจากที่ทำการคลิกยืนยันการเผยแพร่ข้อมูลเครื่องราชอิสริยาภรณ์
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- กดไอคอน
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
เพื่อดูประวัติข้อมูลแก้ไข ดังรูปภาพ ในกรอบสีแดงสามารถกรอกที่ช่องค้นหาเพื่อสืบค้นข้อมูลหรือที่ช่องคอลัมน์สามารถเลือกรายการเพื่อซ่อน </p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/7_insignia/2-85.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 85 หน้าประวัติแก้ไขข้อมูล
|
||||
</div>
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: -;
|
||||
padding: 10px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาและช่องสำหรับคลิกเลือกคอลัมน์แสดงข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
86
src/modules/01_manual/components/3_Structure/31_Main.vue
Normal file
86
src/modules/01_manual/components/3_Structure/31_Main.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-9">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบโครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก” ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /1_main/3-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 392.06px;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 1 เมนูโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- ระบบปรากฏเมนูย่อยของโครงสร้างอัตรากำลัง ดังรูปภาพ
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /1_main/3-2.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 571.37px;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 2 เมนูย่อยของโครงสร้างอัตรากำลัง </div>
|
||||
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
391
src/modules/01_manual/components/3_Structure/32_Position.vue
Normal file
391
src/modules/01_manual/components/3_Structure/32_Position.vue
Normal file
|
|
@ -0,0 +1,391 @@
|
|||
<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">
|
||||
3.1 จัดการตำแหน่ง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “จัดการตำแหน่ง” ระบบแสดงหน้าจอดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /2_position/3-3.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 - 3 หน้าจัดการตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
จากรูปที่ 3 - 3 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
|
||||
<div style="margin-left: 50px;">
|
||||
หมายเลข 3 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 4 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน
|
||||
</div>
|
||||
</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/03_structure /2_position/3-4.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 - 4 แก้ไขข้อมูลจัดการตำแหน่ง
|
||||
</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/03_structure /2_position/3-5.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 - 5 แก้ไขข้อมูลที่มีอยู่
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้านทางการบริหาร <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกข้อมูลศึกษาศาสตรบัณฑิต <br>
|
||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลหมายเหตุ <br>
|
||||
หมายเลข 12 ช่องสำหรับคลิกเลือกเพื่อแสดงสถานะการเป็นหัวหน้างาน <br>
|
||||
หมายเลข 13 ปุ่มบันทึก
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /2_position/3-6.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 - 6 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “บันทึกข้อมูลร่างสำเร็จ” หลังจากคลิกยืนยันการแก้ไขข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อไม่ต้องแก้ไขหรือยกเลิกแก้ไขให้กดไอคอน
|
||||
<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/03_structure /2_position/3-7.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 - 7 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อกดปุ่ม “ลบบันทึก” ระบบปรากฏป้าย “ลบข้อมูลร่างสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /2_position/3-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">
|
||||
รูปภาพที่ 3 - 8 ป้าย “ลบข้อมูลร่างสำเร็จ”
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ระบบแสดงสถานะ “ลบข้อมูลร่างสำเร็จ” หลังจากที่ทำการคลิกยืนยันการลบข้อมูลร่างการจัดตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 50px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อแก้ไข และกดไอคอน
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs" />
|
||||
เพื่อบันทึกข้อมูลร่างให้กดไอคอน
|
||||
<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/03_structure /2_position/3-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">
|
||||
รูปภาพ 3 - 9 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?” </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12"
|
||||
style="margin-top: 50px; margin-left: 10px; ">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย “เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /2_position/3-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">
|
||||
รูปภาพที่ 3 - 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"
|
||||
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"/>
|
||||
เพื่อบันทึกร่าง(ข้อมูลยังไม่มีการเผยแพร่) เมื่อกดบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 6 โดยการบันทึกเฉพาะข้อมูลร่างนั้นจะมีเพียงผู้ดูแลระบบเท่านั้นที่เห็นได้ สามารถกดไอคอน
|
||||
<q-icon name="mdi-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างเมื่อกดลบบันทึกร่างระบบจะแสดงดังรูปภาพที่ 3 – 7 และ 3 – 8 และสามารถกดไอคอน
|
||||
<q-icon name="mdi-cloud-upload-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อเผยแพร่ข้อมูลระบบจะแสดงดังรูปภาพที่ 3 – 9 และ 3 – 10 โดยในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบ มีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล เมื่อกดเลือกที่ “หัวหน้า” ระบบปรากฏไอคอน
|
||||
<q-icon name="mdi-bookmark" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
กำกับ
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /2_position/3-11.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 - 11 ฟอร์มสร้างโครงสร้างและกรอบอัตรากำลัง </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>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกด้นทางการบริหาร <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกสถานภาพของตำแหน่ง <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกรายละเอียกข้อมูลคุณวุฒิ <br>
|
||||
หมายเลข 10 ช่องสำหรับกรอกข้อมูลเงื่อนไขตำแหน่ง <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลรายละเอียดหมายเหตุ <br>
|
||||
หมายเลข 12 ช่องสำหรับคลิกเพื่อกำหนดการเป็นหัวหน้างาน <br>
|
||||
หมายเลข 13 ปุ่มสำหรับคลิกบันทึกข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
419
src/modules/01_manual/components/3_Structure/33_Structure.vue
Normal file
419
src/modules/01_manual/components/3_Structure/33_Structure.vue
Normal file
|
|
@ -0,0 +1,419 @@
|
|||
<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">
|
||||
3.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 /3_structure/3-12.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 - 12 หน้าแผนภูมิโครงสร้าง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br>
|
||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br>
|
||||
หมายเลข 3 การเข้าถึงของแต่ละหัวข้อหลัก <br>
|
||||
หมายเลข 4 รายละเอียดแผนภูมิโครงสร้าง โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้แสดงข้อมูล
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อต้องการดูข้อมูลให้เล็กลงสามารถกดเลือกแต่ละหัวข้อต่างๆได้ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /3_structure/3-13.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 - 13 รายละเอียดโครงสร้าง </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดเลือกหัวข้อที่ต้องการ ระบบจะแสดงเฉพาะข้อมูลที่เลือก โดยจะมีการบอกหัวข้อที่มีการเข้าถึง ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /3_structure/3-14.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 - 14 รายละเอียดโครงสร้างที่แสดงเฉพาะข้อมูลที่ทำการเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 คอลัมน์แสดงการเข้าถึงของแต่ละหน้า <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงรายละเอียดข้อมูลหน่วยงานที่ได้ทำการเข้าถึง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถกดไอคอน
|
||||
<q-icon name="mdi-image-area" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /3_structure/3-15.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 - 15 ดาวน์โหลดไฟล์ PNG
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพ PNG
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /3_structure/3-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">
|
||||
รูปภาพที่ 3 - 16 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
- โดยสามารถคลิกไอคอน
|
||||
<q-icon name="mdi-image-area" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้ ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /3_structure/3-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">
|
||||
รูปภาพที่ 3 - 17 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกดาวน์โหลดไฟล์ภาพ PNG (ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /3_structure/3-18.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 - 18 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon name="mdi-file-pdf-box" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /3_structure/3-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">
|
||||
รูปภาพที่ 3 - 19 ดาวน์โหลดไฟล์ PDF
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพเป็นไฟล์ข้อมูล PDF
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /3_structure/3-20.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 - 20 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- โดยสามารถคลิกไอคอน
|
||||
<q-icon name="mdi-file-pdf-box" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้ ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /3_structure/3-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">
|
||||
รูปภาพที่ 3 - 21 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ PNG (ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /3_structure/3-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">
|
||||
รูปภาพที่ 3 - 22 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
331
src/modules/01_manual/components/3_Structure/34_organchart.vue
Normal file
331
src/modules/01_manual/components/3_Structure/34_organchart.vue
Normal file
|
|
@ -0,0 +1,331 @@
|
|||
<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">
|
||||
3.3 แผนภูมิองค์กร
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /4_organchart/3-23.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 - 23 หน้าแผนภูมิองค์กร
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br>
|
||||
หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br>
|
||||
หมายเลข 3 รายละเอียดแผนภูมิโครงสร้าง โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้ข้อมูลที่แสดงเป็นข้อมูลเล็กลง
|
||||
|
||||
</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 class="triangle"
|
||||
style="border-top-width: 8px;
|
||||
transform: rotate(-90deg);">
|
||||
</span>
|
||||
</span>
|
||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /4_organchart/3-24.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 - 24 เลือกดูข้อมูลเพิ่มเติม
|
||||
</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 class="triangle"
|
||||
style="border-top-width: 8px;
|
||||
transform: rotate(-90deg);">
|
||||
</span>
|
||||
</span>
|
||||
ของแต่ละหัวข้อเมื่อต้องการดูข้อมูลเพิ่มเติม ไอคอนจะเปลี่ยนเป็น
|
||||
<span class="circle-icon" style="margin-left: 10px">
|
||||
<span class="triangle"
|
||||
style="border-top-width: 8px;
|
||||
transform: rotate(180deg);">
|
||||
</span>
|
||||
</span>
|
||||
ดังรูปภาพ และจะแสดงข้อมูลเพิ่มเติมของหัวข้อที่เลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /4_organchart/3-25.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 - 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-image-area" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /4_organchart/3-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">
|
||||
รูปภาพที่ 3 - 26 ดาวน์โหลดไฟล์ PNG
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพไฟล์ PNG <br>
|
||||
หมายเลข 2 แถบการเข้าถึงไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /4_organchart/3-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">
|
||||
รูปภาพที่ 3 - 27 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถคลิกไอคอน
|
||||
<q-icon name="mdi-file-pdf-box" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /4_organchart/3-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">
|
||||
รูปภาพที่ 3 - 28 ดาวน์โหลดไฟล์ PDF
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ข้อมูล PDF <br>
|
||||
หมายเลข 2 แถบการเข้าถึงข้อมูลไฟล์รูปภาพที่ได้ทำการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /4_organchart/3-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">
|
||||
รูปภาพที่ 3 - 29 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.circle-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #EFEFEF;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent; /* ปรับความกว้างลง */
|
||||
border-right: 5px solid transparent; /* ปรับความกว้างลง */
|
||||
border-bottom: 5px solid #000000; /* ปรับความสูงลง */
|
||||
}
|
||||
</style>
|
||||
|
||||
635
src/modules/01_manual/components/3_Structure/35_chartstru.vue
Normal file
635
src/modules/01_manual/components/3_Structure/35_chartstru.vue
Normal file
|
|
@ -0,0 +1,635 @@
|
|||
<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">
|
||||
3.4 ผังโครงสร้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิองค์กร” ระบบแสดงหน้าจอดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-30.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 - 30 หน้าผังโครงสร้าง
|
||||
</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 ช่องค้นหาข้อมูลผังโครงสร้าง
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<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-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล ระบบแสดงดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-31.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 - 31 เพิ่ม ลบหรือแก้ไขข้อมูล
|
||||
</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">
|
||||
<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-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อเพิ่มหน่วยงานภายใต้หน่วยงานกรุงเทพมหานคร
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-33.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 - 33 เพิ่มหน่วยงาน
|
||||
</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 class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-34.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 34 เพิ่มข้อมูลหน่วยงาน
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br>
|
||||
หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br>
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกประเภทหน่วยงาน <br>
|
||||
หมายเลข 10 ช่องสำหรับคลิกเลือกระดับหน่วยงาน <br>
|
||||
หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงานต้นสังกัด <br>
|
||||
หมายเลข 12 ช่องสำหรับคลิกเลือกส่วนราชการต้นสังกัด <br>
|
||||
หมายเลข 13 ช่องสำหรับกรอกข้อมูลลำดับผังโครงสร้าง <br>
|
||||
หมายเลข 14 ช่องสำหรับคลิกเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br>
|
||||
หมายเลข 15 ช่องสำหรับคลิกเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br>
|
||||
หมายเลข 16 ช่องสำหรับคลิกเลือกหมายเลขโทรสาร <br>
|
||||
หมายเลข 17 ช่องสำหรับกรอกข้อมูลรายละเอียดหน้าที่รับผิดชอบ <br>
|
||||
หมายเลข 18 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูล
|
||||
</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/03_structure /5_chartstru/3-35.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 - 35 ป้าย “บันทึกข้อมูลร่างสำเร็จ”
|
||||
</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/03_structure /5_chartstru/3-36.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 36 ป้าย “ต้องการเผยแพร่ข้อมูลนี้หรือไม่?”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดปุ่ม “เผยแพร่” ระบบปรากฏป้าย“เผยแพร่ข้อมูลสำเร็จ” ดังรูปภาพ และเมื่อกดปุ่ม“ยกเลิก” ระบบจะไม่ทำการเผยแพร่ข้อมูล โดยมีป้ายต้องการโหลดข้อมูลใหม่ขึ้นมาเพื่อสอบถามความต้องการ ให้กดปุ่ม “ตกลง” เมื่อต้องการอัปโหลดข้อมูลใหม่ และปุ่ม “ยกเลิก” เมื่อไม่ต้องการอัปโหลดข้อมูล
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-37.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 - 37 ป้าย “เผยแพร่ข้อมูลสำเร็จ”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อต้องการลบหน่วยงานให้กดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
ระบบปรากฏป้าย “ยืนยันลบหน่วยงาน” ดังรูป
|
||||
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-38.png"
|
||||
style="
|
||||
max-width: 70%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97B2DE; ;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 3 - 38 ป้าย “ยืนยันลบหน่วยงาน”
|
||||
</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/03_structure /5_chartstru/3-39.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 - 39 ป้าย “ลบข้อมูลสำเร็จ”
|
||||
</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-file-remove-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบบันทึกร่างข้อมูลที่มีการเพิ่มหรือแก้-ไขได้ดังรูปภาพ หากกดปุ่ม “ลบบันทึก” จะปรากฏป้ายเตือนบริเวณมุมขวาล่าง “ลบข้อมูลร่างสำเร็จ” และเมื่อกดปุ่ม “ยกเลิก” ระบบจะไม่ทำการลบข้อมูลร่าง
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-40.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 - 40 ป้าย “ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?”
|
||||
</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 class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-41.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 - 41 เพิ่มหน่วยงานและตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับเพิ่มข้อมูลหน่วยงานหรือตำแหน่งภายใต้สำนักงานการคลัง <br>
|
||||
หมายเลข 2 ปุ่มสำหรับเพิ่มข้อมูลหน่วยงานหรือตำแหน่งภายใต้กองคลัง
|
||||
</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 class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-42.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 - 42 เพิ่มข้อมูลหน่วยงานและตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับแสดงชื่อสำนักงานที่ทำงานเพิ่มข้อมูลหน่วยงานและตำแหน่ง <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลหน่วยงาน <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่อเพิ่มข้อมูลตำแหน่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ที่เพิ่มหน่วยงานและตำแหน่ง ระบบปรากฎดังรูปภาพ เพื่อกรอกข้อมูลหน่วย งานสำหรับการกรอกข้อมูลหน่วยงานสามารถดูได้ตามรายละเอียดในรูปภาพ ที่ 3 –34 และกรอกข้อมูลตำแหน่งในรูปภาพที่ 3 – 44 เมื่อกรอกเรียบร้อยแล้วให้กดไอคอน
|
||||
<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"/>
|
||||
เพื่อเผยแพร่ไปหน้าอื่น ในส่วนการเผยแพร่ข้อมูลนั้นผู้ดูแลระบบมีการตรวจสอบความถูกต้องเรียบร้อยแล้ว และได้ทำการเผยแพร่ให้เจ้าหน้าที่ทุกคนเห็นข้อมูล และเมื่อไม่ต้องการเพิ่มหน่วยงานหรือตำแหน่งสามารถกดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบช่องที่ปรากฏให้เพิ่มหน่วยงานหรือตำแหน่ง
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-43.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 - 43 เพิ่มข้อมูลหน่วยงาน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-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">
|
||||
รูปภาพที่ 3 - 44 เพิ่มข้อมูลตำแหน่ง
|
||||
</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>
|
||||
หมายเลข 7 ปุ่มสำหรับคลิกเพื่อลบข้อมูลร่างการเพิ่มตำแหน่ง
|
||||
</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"/>
|
||||
เพื่อแก้ไขข้อมูล และสามารถเลือกกดไอคอน
|
||||
<q-icon name="mdi-trash-can-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบข้อมูลดังรูปภาพ
|
||||
|
||||
</p>
|
||||
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /5_chartstru/3-45.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 - 45 แก้ไขและลบข้อมูล
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
342
src/modules/01_manual/components/3_Structure/36_account2.vue
Normal file
342
src/modules/01_manual/components/3_Structure/36_account2.vue
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
<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">
|
||||
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>
|
||||
</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); /* เพิ่มเงา */
|
||||
}
|
||||
|
||||
.col, .col-xs {
|
||||
flex: 0 0 5%;
|
||||
color: #00aa86;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
405
src/modules/01_manual/components/3_Structure/37_report.vue
Normal file
405
src/modules/01_manual/components/3_Structure/37_report.vue
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
<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">
|
||||
3.6 รายงานบัญชี
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “รายงานบัญชี” ระบบแสดงดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /7_report/3-53.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 - 53 หน้ารายงานบัญชี
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 แถบบัญชี <br>
|
||||
หมายเลข 2 เลือกรายการหน่วยงานหรือส่วนราชการที่ต้องการออกรายงาน <br>
|
||||
หมายเลข 3 ดาวน์โหลดรายงาน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- กดเลือกบัญชี 1 เพื่อออกรายงานหน่วยงาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /7_report/3-54.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 - 54 เลือกหน่วยงานเพื่อออกรายงาน
|
||||
</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-download"
|
||||
style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-55.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 - 55 กดดาวน์โหลดไฟล์
|
||||
</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;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-56.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 - 56 ไฟล์รายงานบัญชีของหน่วยงานที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- กดเลือกบัญชี2 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
||||
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-57.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 - 57 เลือกส่วนราชการเพื่อออกรายงาน
|
||||
</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-download"
|
||||
style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-58.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 - 58 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 2
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-59.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 - 59 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- กดเลือกบัญชี 3 เพื่อออกรายงานส่วนราชการ ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-60.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 - 60 เลือกส่วนราชการเพื่อออกรายงาน
|
||||
</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-download"
|
||||
style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดไฟล์โดยไฟล์ที่ได้จะเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-61.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 - 61 กดดาวน์โหลดไฟล์
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์ข้อมูลรายงานนบัญชี 3
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top: 50px;
|
||||
margin-left: 10px;display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
">
|
||||
- โดยจะได้รายงานเป็นไฟล์ PDF ดังรูปภาพ
|
||||
</p>
|
||||
<q-img class="col-12"
|
||||
src="@/assets/manual/03_structure /7_report/3-62.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 - 62 ไฟล์รายงานบัญชีของส่วนราชการที่เลือก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
295
src/modules/01_manual/components/3_Structure/38_chartemploy.vue
Normal file
295
src/modules/01_manual/components/3_Structure/38_chartemploy.vue
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
<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">
|
||||
3.7 ผังโครงสร้างลูกจ้าง
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /8_chartemploy/3-63.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 – 63 หน้าผังโครงสร้างลูกจ้าง
|
||||
</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 ไอคอนถังขยะ สามารถคลิกเพื่อลบรายการผังโครงสร้างลูกจ้าง
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /8_chartemploy/3-64.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 – 64 กรอกข้อมูลโครงสร้างหน่วยงาน
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกเลขที่ฝ่าย/ส่วน <br>
|
||||
หมายเลข 8 ช่องสำหรับกรอกเลขที่กอง <br>
|
||||
หมายเลข 9 ช่องสำหรับเลือกประเภทหน่วยงาน <br>
|
||||
หมายเลข 10 ช่องสำหรับเลือกระดับหน่วยงาน <br>
|
||||
หมายเลข 11 ช่องสำหรับเลือกหน่วยงานต้นสังกัด <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหน่วยราชการต้นสังกัด <br>
|
||||
หมายเลข 13 ช่องสำหรับเลือกลำดับผังโครงสร้าง <br>
|
||||
หมายเลข 14 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายนอก <br>
|
||||
หมายเลข 15 ช่องสำหรับเลือกหมายเลขโทรศัพท์ติดต่อจากภายใน <br>
|
||||
หมายเลข 16 ช่องสำหรับเลือกหมายเลขโทรสาร <br>
|
||||
หมายเลข 17 ช่องสำหรับเลือกกรอกหน้าที่รับผิดชอบ
|
||||
|
||||
</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 /8_chartemploy/3-65.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 – 65 กรอกข้อมูลโครงสร้างตำแหน่ง
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกคุณวุฒิ <br>
|
||||
หมายเลข 8 ช่องสำหรับกรอกเงื่อนไขตำแหน่ง <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกหมายเหตุ <br>
|
||||
หมายเลข 10 ช่องสำหรับเลือหัวหน้า
|
||||
|
||||
</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 /8_chartemploy/3-66.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 – 66 กรอกข้อมูลโครงสร้างตำแหน่ง(ต่อ)
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br>
|
||||
หมายเลข 3 ปุ่มบันทึก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- เมื่อต้องแก้ไขโครงสร้างและกรอบอัตรากำลัง ให้คลิกเลือกรายการผังโครงสร้างลูกจ้าง ระบบแสดงกล่องเพื่อให้แก้ไขข้อมูลดังรูป เมื่อแก้ไขข้อมูลเรียบร้อยแล้วให้กดไอคอน บันทึกข้อมูล โดยสามารถดูรายละเอียดตามรูปที่ 3 – 64, 3 – 65 และ3 - 66
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/03_structure /8_chartemploy/3-67.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 – 67 แก้ไขข้อมูลโครงสร้างตำแหน่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 กดเลือกปกติหรือติดเงื่อนไข <br>
|
||||
หมายเลข 2 ช่องสำหรับกรอกรายละเอียดเงื่อนไข <br>
|
||||
หมายเลข 3 ปุ่มบันทึก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
129
src/modules/01_manual/components/4_ registration/41_main.vue
Normal file
129
src/modules/01_manual/components/4_ registration/41_main.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<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">
|
||||
4.1 การเข้าสู่หน้าระบบทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อต้องการดูข้อมูลประวัติของข้าราชการกรุงเทพมหานครให้ทำการคลิกแถบเมนู “ทะเบียนประวัติ” ทางด้านซ้ายของระบบ ดังรูป
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/1_main/4-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 307.73px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 4 – 1 แสดงการเลือกแถบเมนู หน้าระบบทะเบียนประวัติ ของข้อมูลข้าราชการกรุงเทพฯ
|
||||
</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/04_regist/1_main/4-2.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">
|
||||
รูปภาพที่ 4 – 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>
|
||||
หมายเลข 7 ช่องสำหรับเลือกหรือกรอกข้อมูลอายุราชการ <br>
|
||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อแสดงข้อมูลผู้พ้นจากราชการ <br>
|
||||
หมายเลข 9 ปุ่มสำหรับแสดดงข้อมูลลูกจ้างที่ทดลองปฏิบัติหน้าที่ราชการ <br>
|
||||
หมายเลข 10 ปุ่มสำหรับคลิกค้นหาหลังจากทำการกรอกข้อมูล หรือเลือกประเภทข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 11 ช่องสำหรับแสดงข้อมูลทะเบียนประวัติรายชื่อ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
525
src/modules/01_manual/components/4_ registration/42_find.vue
Normal file
525
src/modules/01_manual/components/4_ registration/42_find.vue
Normal file
|
|
@ -0,0 +1,525 @@
|
|||
<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">
|
||||
4.2 การค้นหาข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเข้าสู่หน้า ทะเบียนประวัติ สามารถทำการค้นหารายชื่อข้อมูลต่างๆ ได้จากการคลิกเมาส์เลือกประเภทข้อมูลของลูกจ้าง ดังในรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-3.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">
|
||||
รูปภาพที่ 4 – 3 แสดงช่องเลือกประเภทลูกจ้าง
|
||||
</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">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกเลือกประเภทข้อมูลลูกจ้างที่ต้องการข้อมูล และทำการใช้เมาส์คลิกปุ่มค้นหา จากนั้นระบบจะแสดงข้อมูลรายชื่อประวัติทะเบียนตามประเภทลูกจ้างที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-4.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">
|
||||
รูปภาพที่ 4 – 4 แสดงการเลือกประเภทข้อมูลทะเบียนของลูกจ้าง
|
||||
</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">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกช่อง “เลขประจำตัวประชาชน” แล้วกรอกเลขบัตรประจำตัวประชาชนที่ต้องการค้นหาข้อมูลทะเบียนประวัติ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-5.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">
|
||||
รูปภาพที่ 4 – 5 แสดงช่องกรอกเลขประจำตัวประชาชน
|
||||
</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">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ทำการใช้เมาส์คลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลตรงตามเลขประจำตัวประชาชนที่กรอก และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิกในช่อง “เลขประจำตัวประชาชน” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-6.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">
|
||||
รูปภาพที่ 4 – 6 แสดงการกรอกเลขบัตรประจำตัวประชาชนเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกหมายเลขประจำตัวประชาชนที่ต้องการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกหมายเลขประจำตัวประชาชน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px; display: flex; align-items: center;">
|
||||
- สามารถกดเลือกไอคอน
|
||||
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: white;
|
||||
background-color: #D1D1D1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
|
||||
ในช่อง “ชื่อ-นามสกุล” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-7.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">
|
||||
รูปภาพที่ 4 – 7 แสดงการกรอกชื่อ-นามสกุลเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกชื่อ-นามสกุลที่ต้องการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงผลการค้นหาโดยการกรอกชื่อ-นามสกุล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- ทำการใช้เมาส์คลิกช่อง “ปีเกษียณ” และทำการกรอกหรือเลือกปีเกษียณของผู้ที่ต้องการข้อมูลทะเบียนประวัติ และทำการคลิกปุ่ม “ค้นหา” ระบบแสดงข้อมูลตรงตามปีเกษียณที่เลือก และหากต้องการค้นหาข้อมูลเพิ่มให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: white;
|
||||
background-color: #D1D1D1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
|
||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก และทำการเลือกข้อมูลปีเกษียณใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-8.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">
|
||||
รูปภาพที่ 4 – 8 แสดงการเลือกและกรอกข้อมูลปีเกษียณเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกปีเกษียณที่ต้องการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงรายชื่อปีเกษียณที่ทำการคลิกเลือกค้นหา
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- ทำการใช้เมาส์คลิกช่อง “อายุราชการ” และทำการกรอกหรือใช้เมาส์คลิกลูกศรขึ้นเพื่อเพิ่มตัวเลขจำนวนปีของผู้ที่ต้องการข้อมูลทะเบียนประวัติ และทำการคลิกปุ่ม “ค้นหา”
|
||||
ระบบแสดงข้อมูลรายชื่อตรงตามปีเกษียณตามที่กรอก และหากต้องการค้นหาข้อมูลอื่นเพิ่มให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: white;
|
||||
background-color: #D1D1D1;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
ในช่อง “ปีเกษียณ” เพื่อลบข้อมูลเก่าออก และทำการกรอกข้อมูลใหม่ลงไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-9.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">
|
||||
รูปภาพที่ 4 – 9 แสดงการกรอกหรือคลิกเพิ่มตัวเลขของปีอายุราชการเพื่อค้นหา
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกอายุราชการเพื่อทำการค้นหารายชื่อที่ต้องการ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายชื่อที่อายุราชการตรงตามที่กรอกค้นหา
|
||||
</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/04_regist/2_find/4-10.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">
|
||||
รูปภาพที่ 4 – 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">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px;">
|
||||
- ระบบแสดงตารางแสดงรายชื่อข้อมูลมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-11.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">
|
||||
รูปภาพที่ 4 – 11 แสดงรายชื่อข้อมูลทะเบียนประวัติตามหัวข้อคอลัมน์ที่เลือก
|
||||
</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">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px; display: inline-block;">
|
||||
- ทำการใช้เมาส์คลิกปุ่ม
|
||||
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.45em;">
|
||||
<div class="q-toggle__track"></div>
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;" ></div>
|
||||
</div>
|
||||
|
||||
ให้กลายเป็น
|
||||
<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.45em;">
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;"></div>
|
||||
<div class="q-toggle__track"></div>
|
||||
</div>
|
||||
ในช่อง “แสดงข้อมูลผู้พ้นจากราชการ” เพื่อแสดงข้อมูลรายชื่อทะเบียนประวัติผู้พ้นจากราชการ จากนั้นใช้เมาส์คลิกปุ่ม “ค้นหา”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/2_find/4-12.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">
|
||||
รูปภาพที่ 4 – 12 แสดงรายชื่อข้อมูลผู้พ้นจากราชการ
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
473
src/modules/01_manual/components/4_ registration/43_detail.vue
Normal file
473
src/modules/01_manual/components/4_ registration/43_detail.vue
Normal file
|
|
@ -0,0 +1,473 @@
|
|||
<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">
|
||||
4.3 การดูรายละเอียดข้อมูลทะเบียนประวัติ
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
<p>
|
||||
- เมื่อเข้าสู้หน้าทะเบียนประวัติ ให้ใช้เมาส์ทำการคลิกข้อมูลรายชื่อรายชื่อที่ต้องการดูรายละเอียด ระบบจะแสดงข้อมูลตามหัวข้อย่อยตามตารางข้อมูลส่วนตัว ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-13.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">
|
||||
รูปภาพที่ 4 – 13 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลส่วนตัว
|
||||
</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 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดไฟล์
|
||||
|
||||
</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/04_regist/3_detail/4-14.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">
|
||||
รูปภาพที่ 4 – 14 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลราชการ
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลราชการ <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลราชการ
|
||||
|
||||
</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/04_regist/3_detail/4-15.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">
|
||||
รูปภาพที่ 4 – 15 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลที่อยู่
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลที่อยู่ <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลที่อยู่
|
||||
|
||||
</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/04_regist/3_detail/4-16.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">
|
||||
รูปภาพที่ 4 – 16 แสดงหน้าต่างทะเบียนประวัติ ข้อมูลครอบครัว
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อทำการแก้ไขรายละเอียดข้อมูลครอบครัว <br>
|
||||
หมายเลข 2 ปุ่มสำหรับคลิกเพื่อดูประวัติข้อมูลครอบครัว
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px; display: flex; align-items: center;">
|
||||
- ระบบจะแสดงข้อมูลตามหัวข้อย่อยตารางข้อมูลใบอนุญาตประกอบอาชีพ, ประวัติการศึกษาและการฝึกอบรม/ดูงาน ดังรูปภาพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/3_detail/4-17.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">
|
||||
รูปภาพที่ 4 – 17 แสดงหน้าต่างทะเบียนประวัติข้อมูลใบอนุญาตประกอบอาชีพ ประวัติการศึกษา การอบรม
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประวัติการศึกษา <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประวัติการศึกษา <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการฝึกอบรมดูงาน <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลการฝึกอบรมดูงาน <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาการฝึกอบรมดูงาน <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการฝึกอบรมดูงาน
|
||||
</div>
|
||||
</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/04_regist/3_detail/4-18.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">
|
||||
รูปภาพที่ 4 – 18 แสดงหน้าต่างทะเบียนประวัติข้อมูลเครื่องราชฯ ประกาศเกียรติคุณ ผลการประเมิน
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาประกาศเกียรติคุณ <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลประกาศเกียรติคุณ <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลผลการประเมินการปฏิบัติราชการ
|
||||
</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/04_regist/3_detail/4-19.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">
|
||||
รูปภาพที่ 4 – 19 แสดงหน้าต่างทะเบียนประวัติข้อมูลตำแหน่งเงินเดือน, วินัยและการลา
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลเกี่ยวกับวินัย <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวินัย <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลการลา <br>
|
||||
หมายเลข 10 ปุ่มสำหรับแสดงข้อมูลสรุปวันลา <br>
|
||||
หมายเลข 11 ช่องสำหรับแสดงข้อมูลการลา <br>
|
||||
หมายเลข 12 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลการลา <br>
|
||||
หมายเลข 13 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลการลา
|
||||
</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/04_regist/3_detail/4-20.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">
|
||||
รูปภาพที่ 4 – 20 แสดงหน้าต่างทะเบียนประวัติข้อมูลความสามารถพิเศษ, ปฏิบัติราชการพิเศษฯ
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาปฏิบัติราชการพิเศษ <br>
|
||||
หมายเลข 8 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลปฏิบัติราชการพิเศษ <br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขรายละเอียดข้อมูลผลการประเมินการปฏิบัติราชการ <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก <br>
|
||||
หมายเลข 11 ช่องสำหรับกรอกข้อมูลเพื่อค้นหาข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก <br>
|
||||
หมายเลข 12 ช่องสำหรับเลือกหัวข้อคอลัมน์แสดงข้อมูลวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้อัยการศึก
|
||||
</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/04_regist/3_detail/4-21.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">
|
||||
รูปภาพที่ 4 – 21 แสดงหน้าต่างทะเบียนประวัติข้อมูลอื่นๆ และเอกสารหลักฐาน
|
||||
</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 ปุ่มสำหรับคลิกเพื่อทำการเพิ่มหรือแก้ไขอัปโหลดไฟล์เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2972
src/modules/01_manual/components/4_ registration/44_edit.vue
Normal file
2972
src/modules/01_manual/components/4_ registration/44_edit.vue
Normal file
File diff suppressed because it is too large
Load diff
156
src/modules/01_manual/components/4_ registration/45_select.vue
Normal file
156
src/modules/01_manual/components/4_ registration/45_select.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<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">
|
||||
4.5 การค้นหาข้อมูลส่วนตัว การเลือกคอลัมน์แสดงผลข้อมูล
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลในหัวข้อต่างๆ ในหน้าข้อมูลส่วนตัวที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาของแต่ละหัวข้อและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้า
|
||||
นี้ลงไประบบจะแสดงข้อมูลที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/5_select/4-81.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">
|
||||
รูปภาพที่ 4 – 81 แสดงตารางการค้นหาข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากการกรอกค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตารางที่ต้องการข้อมูลและหากหัวคอลัมน์
|
||||
แสดงข้อมูลไม่ครบและต้องการให้คอลัมน์แสดงผลเพิ่มขึ้นและลดลงหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/5_select/4-82.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">
|
||||
รูปภาพที่ 4 – 82 แสดงตารางการเลือกคอลัมน์แสดงข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูล <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
282
src/modules/01_manual/components/4_ registration/46_window.vue
Normal file
282
src/modules/01_manual/components/4_ registration/46_window.vue
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<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">
|
||||
4.6 การปรับหน้าต่างแสดงผลหน้าข้อมูลส่วนตัว
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 20px; margin-left: 10px;">
|
||||
- หากต้องการให้หน้าแสดงผลหน้าข้อมูลส่วนตัวของพนักงานแสดงข้อมูลเต็มจอให้ใช้เมาส์คลิก
|
||||
<i class="q-icon mdi mdi-backburger"
|
||||
style="color: #747474;
|
||||
background-color: #DADADA;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อให้แถบเมนูด้านข้างของหน้าจอพับเก็บเข้าด้านข้าง และระบบจะแสดง
|
||||
ข้อมูลของพนักงานเต็มจอ และหากต้องการให้ระบบแสดงแถบเมนูเหมือนเดิมให้ใช้เมาส์ทำการคลิก
|
||||
<i class="q-icon mdi mdi-backburger"
|
||||
style="color: #747474;
|
||||
background-color: #DADADA;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อให้แถบเมนูแสดงเหมือนเดิม
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-83.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">
|
||||
รูปภาพที่ 4 – 83 แสดงการพับแถบเมนูด้ายซ้ายเพื่อให้ข้อมูลแสดงเต็มจอ
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-84.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">
|
||||
รูปภาพที่ 4 – 84 แสดงแถบหัวข้อเมนูตาราง
|
||||
</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">
|
||||
- หากต้องการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ และวัติแบบย่อให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-file-eye-outline" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อดาวน์โหลดข้อมูลของพนักงาน
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-85.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">
|
||||
รูปภาพที่ 4 – 85 แสดงหน้าดาวน์โหลดไฟล์เอกสารของพนักงาน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ข้อความสำหรับคลิกเลือกเพื่อดาวน์โหลดชนิดของเอกสารที่ต้องการดาวน์โหลด โดยระบบแสดงการเลือกการดาวน์โหลดไฟล์เอกสาร ก.พ.7/ก.ก.1 และ
|
||||
ประวัติแบบย่อของพนักงาน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- และหากต้องการทำการบันทึกการออกจากราชการของพนักงานให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-home-export-outline" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
จากนั้นระบบจะทำการแสดงตาราง “ประเภทการพ้นราชการ” ให้ทำการบันทึกข้อมูลให้ครบตามที่ระบบแนะนำ หลังจากกรอกข้อมูลเสร็จแล้วให้ทำการคลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูล และถ้าหากต้องการยกเลิกการเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: red;
|
||||
background-color: #FFE5E6;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อยกเลิกการบันทึกข้อมูล
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/04_regist/6_window/4-86.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">
|
||||
รูปภาพที่ 4 – 86 แสดงตารางการเพิ่มข้อมูลประเภทการพ้นราชการ
|
||||
</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 ช่องสำหรับคลิกเลือกวัน เดือน ปีที่ออกคำสั่ง
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
105
src/modules/01_manual/components/5_recruitment/51_main.vue
Normal file
105
src/modules/01_manual/components/5_recruitment/51_main.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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">
|
||||
5.1 การเข้าสู่หน้าระบบสรรหา
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อต้องการเข้าหน้าระบบสรรหาเพื่อจัดการรอบการสอบ รอบคัดเลือก หรือการตั้งค่าเว็บสรรหาให้ทำการคลิกแถบเมนู “สรรหา” ทางด้านซ้ายของระบบ ดังรูป </div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/1_main/5-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 336.54px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพ 5 – 1 แสดงการเข้าหน้าระบบสรรหา
|
||||
</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/05_recruitment/1_main/5-2.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 402.12px;
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพ 5 – 2 แสดงการเข้าหน้าตั้งค่าเว็บสรรหา
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
622
src/modules/01_manual/components/5_recruitment/52_setting.vue
Normal file
622
src/modules/01_manual/components/5_recruitment/52_setting.vue
Normal file
|
|
@ -0,0 +1,622 @@
|
|||
<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">
|
||||
5.2 การตั้งค่าเว็บไซต์ระบบสรรหา
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 20px; margin-left: 10px;">
|
||||
- เมื่อต้องการตั้งค่าเว็บไซต์ระบบสรรหาให้ใช้เมาส์คลิก
|
||||
|
||||
<span
|
||||
style="
|
||||
background-color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px 0 2px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-plus" style=" color: #ffffff;" size="xs"/>
|
||||
เพิ่มโลโก้
|
||||
</span>
|
||||
|
||||
เพื่อเพิ่มโลโก้ของระบบ และหากยืนยันการใช้รูปภาพให้ทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0 5px;
|
||||
margin-left: 0px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cloud-upload" style=" margin: 0 2px 0 2px;color: #ffffff;" size="xs"/>
|
||||
อัปโหลดไฟล์
|
||||
</span>
|
||||
เพื่อให้โลโก้แสดงที่ระบบสรรหา และหากต้องการเพิ่มหรือเปลี่ยนรูปภาพแบนเนอร์หน้าหลักให้ใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #2196f3;
|
||||
border: 1px solid #2196f3;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-plus" style=" color: #ffffff;" size="xs"/>
|
||||
เพิ่มแบนเนอร์
|
||||
</span>
|
||||
<br>และหากยืนยันการใช้รูปภาพให้ทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #2196f3;
|
||||
border: 1px solid #2196f3;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-cloud-upload" style=" margin: 0 2px 0 2px;color: #ffffff;" size="xs"/>
|
||||
อัปโหลดแบนเนอร์
|
||||
</span>
|
||||
เพื่อให้รูปภาพแบนเนอร์หน้าหลักแสดงที่ระบบสรรหาดังรูป
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-3.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">
|
||||
รูปภาพ 5 – 3 แสดงการเพิ่มโลโก้เว็บไซต์และแบนเนอร์หน้าหลัก
|
||||
</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"/>
|
||||
ที่ “รายละเอียดเว็บ” จากนั้นทำการกรอกข้อมูลรายละเอียดให้ครบ จากนั้นทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูล แต่หากจะยกเลิกการแก้ไขหรือเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-undo" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อยกเลิกการแก้ไขหรือเพิ่ม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-4.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">
|
||||
รูปภาพ 5 – 4 แสดงการเพิ่มข้อมูลรายละเอียดเว็บ
|
||||
</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 ช่องสำหรับกรอกข้อมูลเว็บโดยย่อ
|
||||
|
||||
</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"/>
|
||||
ที่ “ข้อมูลเกี่ยวกับเรา” จากนั้นทำการเพิ่มข้อความหรือข้อมูลที่ต้องการ โดยสามารถทำการจัดรูปแบบ ตัวหนังสือหรือรูปแบบฟอนต์จากในระบบได้เลย จากนั้นทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูล แต่หากจะยกเลิกการแก้ไขหรือเพิ่มข้อมูลให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-undo" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อยกเลิกการแก้ไขหรือเพิ่ม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-5.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">
|
||||
รูปภาพ 5 – 5 แสดงการเพิ่มข้อมูลเกี่ยวกับเรา
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-6.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">
|
||||
รูปภาพ 5 – 6 แสดงการเพิ่มข้อมูลที่อยู่ของสำนักงาน
|
||||
</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 ช่องสำหรับกรอกข้อมูลเบอร์โทรของสำนักงาน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- หากต้องการเพิ่มข้อมูลส่วนราชการให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-pencil-outline" style="margin: 0 5px; color: #02A998;" size="xs"/>
|
||||
ที่ตาราง “ส่วนราชการ” จากนั้นทำการกรอกข้อมูลส่วนราชการให้ครบตามที่ระบบแนะนำ หลังจากที่ทำการกรอก
|
||||
ข้อมูลเสร็จแล้วให้ทำกาใช้เมาส์คลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการเพิ่มและบันทึกข้อมูล และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก
|
||||
<i class="q-icon mdi mdi-close"
|
||||
style="color: red;
|
||||
background-color: #FFE5E6;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อยกเลิกการบันทึกข้อมูล
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-7.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">
|
||||
รูปภาพที่ 5 – 7 แสดงตารางการเพิ่มข้อมูลส่วนราชการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับเพิ่มชื่อส่วนราชการที่ต้องการเพิ่มข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับเพิ่มลิงค์เว็บไซต์ของส่วนราชการที่ทำการเพิ่ม
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลเพิ่มส่วนราชการที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูล
|
||||
ที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-8.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">
|
||||
รูปภาพที่ 5 – 8 แสดงตารางการค้นหาข้อมูลเพิ่มส่วนราชการ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลเพิ่มส่วนราชการสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลส่วนราชการจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “ส่วนราชการ” ที่ต้องการและ
|
||||
หากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อ
|
||||
คอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-9.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">
|
||||
รูปภาพที่ 5 – 9 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลส่วนราชการ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลส่วนราชการ <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลส่วนราชการ <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลส่วนราชการตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div 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"/>
|
||||
เพื่อยืนยันการเพิ่มและบันทึกข้อมูล และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้เมาส์คลิก <i class="q-icon mdi mdi-close"
|
||||
style="color: red;
|
||||
background-color: #FFE5E6;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อยกเลิกการบันทึกข้อมูล
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-7.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">
|
||||
รูปภาพที่ 5 – 10 แสดงตารางการเพิ่มข้อมูลหน่วยงาน </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับเพิ่มชื่อหน่วยงานที่ต้องการเพิ่มข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับเพิ่มลิงค์เว็บไซต์ของหน่วยงานที่ทำการเพิ่ม
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลหน่วยงานทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูลที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-11.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">
|
||||
รูปภาพที่ 5 – 11 แสดงตารางการค้นหาข้อมูลหน่วยงาน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลหน่วยงานสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหน่วยงานจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “หน่วยงาน” ที่ต้องการ และหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/2_setting/5-12.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">
|
||||
รูปภาพที่ 5 – 12 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลหน่วยงาน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลหน่วยงาน <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลหน่วยงาน <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลหน่วยงานตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,885 @@
|
|||
<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">
|
||||
5.3 สอบแข่งขัน
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
จัดการรอบสอบการแข่งขัน
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- การเข้าสู่หน้าจัดการรอบสอบแข่งขันให้ใช้เมาส์คลิก “สอบแข่งขัน” จากนั้นระบบจะแสดงเมนูย่อยให้ใช้เมาส์ทำการคลิกที่ “จัดการรอบสอบแข่งขัน” อีกทีเพื่อเข้าสู่หน้าจัดการรอบ
|
||||
สอบแข่งขันต่างๆ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-13.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 336.54px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 13 แสดงการเข้าสู่หน้าจัดการรอบสอบแข่งขัน
|
||||
</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-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบสอบแข่งขัน” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-14.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">
|
||||
รูปภาพที่ 5 – 14 แสดงตารางการเพิ่มข้อมูลเพิ่มรอบสอบแข่งขัน
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับกรอกวันที่สมัคร <br>
|
||||
หมายเลข 8 ช่องสำหรับกรอกวันที่ชำระเงิน <br>
|
||||
หมายเลข 9 ช่องสำหรับกรอกวันที่ประกาศผล <br>
|
||||
หมายเลข 10 ช่องสำหรับเพิ่มรูปภาพประกอบ <br>
|
||||
หมายเลข 11 ช่องสำหรับเพิ่มเอกสารประกอบ
|
||||
|
||||
</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"/>
|
||||
เพื่อทำการแก้ไขข้อมูลหลังจากแก้ไขข้อมูลเสร็จเรียบร้อยแล้วให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-content-save-outline" style="margin: 0 5px; color: #01435F;" size="xs"/>
|
||||
เพื่อยืนยันการบันทึกข้อมูล แต่หากจะลบข้อมูลรอบสอบแข่งขันรายการใดรายหารหนึ่งให้ทำการคลิกที่
|
||||
<q-icon name="mdi-delete" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
และทำการยืนยันการลบข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-15.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">
|
||||
รูปภาพที่ 5 – 15 แสดงตารางการแก้ไขและการลบรายการสอบแข่งขัน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ไอคอนสำหรับคลิกเพื่อแก้ไขข้อมูลรอบสอบแข่งขัน <br>
|
||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อลบรอบสอบการแข่งขัน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลรายการสอบแข่งขันที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูล
|
||||
ที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-16.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">
|
||||
รูปภาพที่ 5 – 16 แสดงตารางการค้นหาข้อมูลรายการสอบแข่งขัน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลรายการสอบแข่งขันสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายการสอบแข่งขันจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “จัดการรอบสอบแข่งขัน” ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-17.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">
|
||||
รูปภาพที่ 5 – 17 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลจัดการรอบสอบแข่งขัน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลจัดการรอบสอบแข่งขัน <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลจัดการรอบสอบแข่งขัน <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลจัดการรอบสอบแข่งขันตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- หากต้องการดูข้อมูลประวัติการนำเข้าข้อมูลรายการสอบแข่งขันให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-history" style="margin: 0 5px; color: #31ccec;" size="xs"/>
|
||||
ในรายชื่อการสอบแข่งขันในช่องตาราง “จัดการรอบสอบแข่งขัน” ที่ต้องการดูประวัติการนำ
|
||||
เข้าข้อมูลจากนั้นระบบจะแสดงตาราง “ประวัติการนำเข้าข้อมูล” และหากต้องการยกเลิกการดูประวัติการนำเข้าข้อมูลให้ทำการใช้เมาส์คลิก <i class="q-icon mdi mdi-close"
|
||||
style="color: red;
|
||||
background-color: #FFE5E6;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อออกจากหน้าหรือยกเลิกการดูประวัติการนำเข้าข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-18.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">
|
||||
รูปภาพที่ 5 – 18 แสดงตารางประวัติการนำเข้าข้อมูล
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาประวัติการนำเข้าข้อมูลที่ทำการบันทึกก่อนหน้านี้ให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบจะแสดงข้อมูล
|
||||
ที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-19.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">
|
||||
รูปภาพที่ 5 – 19 แสดงตารางประวัติการนำเข้าข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลประวัติการนำเข้าข้อมูลสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงประวัติการการนำเข้าข้อมูลจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “ประวัติการนำเข้าข้อมูล”
|
||||
ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-20.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">
|
||||
รูปภาพที่ 5 – 20 แสดงตารางการเลือกหัวข้อคอลัมน์แสดงประวัติการนำเข้าข้อมูล
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์ประวัติการนำเข้าข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับเลือกหัวคอลัมน์ประวัติการนำเข้าข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงข้อมูลประวัติการนำเข้าข้อมูลตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- การดาวน์โหลดไฟล์รายชื่อผู้มีสิทธิ์สอบทั้งหมด ให้ทำการใช้เมาส์ดับเบิ้ลคลิกที่
|
||||
<i class="q-icon mdi mdi-download"
|
||||
style="color: #02a998;
|
||||
background-color: #e8f4f3;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
รายการสอบที่ต้องการ จากนั้นทำการคลิก ระบบแสดงเมนูย่อย ทำการเลือก “ส่งออกข้อมูล
|
||||
ผู้มีสิทธิ์สอบ” จากนั้นนำไฟล์อัปโหลดเพื่อแสดงข้อมูลต่อไป
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-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">
|
||||
รูปภาพที่ 5 – 21 แสดงไฟล์รายชื่อผู้มีสิทธิ์สอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ชื่อไฟล์ต้องแสดงว่า “รายชื่อผู้มีสิทธิ์สอบ” <br>
|
||||
หมายเลข 2 แสดงรายชื่อผู้มีสิทธิ์สอบในรอบที่ทำการเลือกโหลดไฟล์ออกมา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถทำการดาวน์โหลดไฟล์รายชื่อผู้มีสิทธิ์สอบโดยการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-clipboard-arrow-down" style="margin: 0 5px; color: #3f51b5;" size="xs"/>
|
||||
ในคอลัมน์“จำนวนผู้สอบทั้งหมด” เพื่อทำการดาวน์โหลดไฟล์ หลังจากการคลิกระบบจะทำการโหลด
|
||||
ไฟล์รายชื่อผู้มีสิทธิ์สอบในรูปแบบไฟล์ pdf
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-23.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">
|
||||
รูปภาพที่ 5 – 23 แสดงตารางการอัปโหลดไฟล์รายชื่อผู้สมัครสอบ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องคอลัมน์ของ “จำนวนผู้สอบทั้งหมด” <br>
|
||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รายชื่อผู้มีสิทธิ์สอบ <br>
|
||||
หมายเลข 3 ตัวเลขแสดงจำนวนรายชื่อผู้สมัครสอบสอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการนำเข้าไฟล์ผลคะแนนสอบให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-file-excel-outline" style="margin: 0 5px; color: #4caf50;" size="xs"/>
|
||||
ที่ช่องคอลัมน์ “จำนวนผู้สอบทั้งหมด” จากนั้นทำการเลือกไฟล์ผลคะแนนสอบ ไฟล์ xlsx จากนั้นทำการใช้
|
||||
เมาส์คลิก
|
||||
<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/05_recruitment/3_managecompet/5-24.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">
|
||||
รูปภาพที่ 5 – 24 แสดงตารางการอัปโหลดไฟล์ผลคะแนนสอบ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องคอลัมน์ของ “จำนวนที่บันทึกผลสอบ” <br>
|
||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อนำเข้าไฟล์ผลคะแนนสอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถทำการดาวน์โหลดไฟล์รายชื่อผู้สอบแข่งขันได้โดยการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-clipboard-arrow-down" style="margin: 0 5px; color: #3f51b5;" size="xs"/>
|
||||
ในคอลัมน์ “จำนวนที่บันทึกผลสอบ” เพื่อทำการดาวน์โหลดไฟล์ หลังจากการคลิกระบบจะทำการ
|
||||
โหลดไฟล์รายชื่อผู้สอบแข่งขันได้ในรูปแบบไฟล์ pdf
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-25.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">
|
||||
รูปภาพที่ 5 – 25 แสดงตารางการดาวน์โหลดไฟล์รายชื่อผู้สอบแข่งขันได้
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องคอลัมน์ของ “จำนวนที่บันทึกผลสอบ” <br>
|
||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รายชื่อผู้สอบแข่งขันได้ <br>
|
||||
หมายเลข 3 ตัวเลขแสดงจำนวนรายชื่อที่บันทึกผลสอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถทำการคลิกรายชื่อการสอบแข่งขันเพื่อดูรายชื่อผู้สมัครสอบทั้งหมดได้โดยการดับเบิ้ลคลิกที่รายการสอบแข่งขันที่ต้องการดูข้อมูล จากนั้นระบบจะแสดงข้อมูลรายชื่อของ
|
||||
ผู้สมัครสอบแข่งขันและแสดงผลสรูปจำนวนผู้สมัครสอบ ผู้ที่สอบผ่านและสอบไม่ผ่านให้
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-26.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">
|
||||
รูปภาพที่ 5 – 26 แสดงตารางรายชื่อผู้สมัครสอบแข่งขัน
|
||||
</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 ช่องสำหรับเลือกหัวคอลัมน์แสดงข้อมูล
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลที่เกี่ยวข้องกับผู้สมัครให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับผู้สมัครหรือตำแหน่งที่สมัครลงไประบบจะแสดงข้อมูลที่ทำ
|
||||
การค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-27.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">
|
||||
รูปภาพที่ 5 – 27 แสดงตารางการค้นหาข้อมูลของผู้สมัครสอบแข่งขัน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลที่เกี่ยวข้องกับผู้สมัครสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลผู้สมัครจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “รายชื่อผู้สมัครสอบแข่งขัน”
|
||||
ที่ต้องการ และหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียว
|
||||
เหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-28.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">
|
||||
รูปภาพที่ 5 – 28 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลรายชื่อผู้สมัครสอบแข่งขัน
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลรายชื่อผู้สมัครสอบแข่งขัน <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลรายชื่อผู้สมัครสอบแข่งขัน <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลรายชื่อผู้สมัครสอบแข่งขันตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- สามารถคลิกเข้าดูรายละเอียดข้อมูลผู้สมัครสอบได้โดยการดับเบิ้ลคลิกที่รายชื่อผู้สมัครสอบที่ต้องการ จากนั้นระบบจะแสดงรายละเอียดข้อมูลทั่วไป ผลคะแนนสอบและผลการสอบ
|
||||
ของผู้สมัครให้ และหากต้องการดาวน์โหลดไฟล์ข้อมูลผู้สมัครให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
||||
จากนั้นระบบจะทำการดาวน์โหลดไฟล์ หรือหากทำการดาวน์โหลดไฟล์ข้อมูลของผู้สมัครเสร็จแล้ว
|
||||
ต้องการออกจากหน้าแสดงข้อมูลผู้สมัครให้ทำการคลิก
|
||||
<q-icon name="mdi-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับออกไปก่อนหน้านี้
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-29.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">
|
||||
รูปภาพที่ 5 – 29 แสดงตารางการแสดงข้อมูลผู้สมัครสอบแข่งขัน
|
||||
</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 ปุ่มสำหรับคลิกเพื่อดาวน์โหลดข้อมูลของผู้สมัครสอบแข่งขัน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- สามารถทำการดาวน์โหลดไฟล์ข้อมูลผู้มีสิทธิ์สอบ ข้อมูลผู้สอบผ่านภาค ก. และข้อมูลผู้สอบแข่งขันโดยใช้เมาส์คลิก
|
||||
<i class="q-icon mdi mdi-download"
|
||||
style="color: #02a998;
|
||||
background-color: #e8f4f3;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 2px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
จากนั้นทำการเลือกการส่งออกข้อมูลของผู้สมัครหลังจากคลิกเลือกแล้วระบบจะทำการดาวน์โหลดไฟล์
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/3_managecompet/5-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">
|
||||
รูปภาพที่ 5 – 30 แสดงตารางการส่งออกข้อมูลผู้สมัครสอบแข่งขัน
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเลือกข้อมูลเอกสารที่ต้องการดาวน์โหลด โดยมีส่งออกข้อมูลผู้มีสิทธิ์สอบ, ส่งออกข้อมูลผู้สอบผ่านภาค ก. และส่งออกข้อมูลผู้สอบแข่งขัน
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
<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">
|
||||
5.3 สอบแข่งขัน
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
สถิติสมัครสอบแข่งขัน
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- การเข้าสู่หน้าสถิติการสมัครสอบแข่งขันให้ใช้เมาส์คลิก “สอบแข่งขัน” จากนั้นระบบจะแสดงเมนูย่อยให้ใช้เมาส์ทำการคลิกที่ “สถิติสมัครสอบแข่งขัน” อีกที่เพื่อเข้าสู่หน้าข้อมูลสถิติ
|
||||
การสอบแข่งในต่างๆ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-31.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 224.92px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 31 แสดงการเข้าสู่หน้าสถิติสมัครสอบแข่งขัน
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การเลือกแสดงข้อมูลของรอบการสอบตามที่ต้องการ ให้ใช้เมาส์คลิกช่องรอบการสอบเพื่อทำการเลือกรอบการสอบเพื่อแสดงข้อมูลสถิติสมัครสอบแข่งขันที่ต้องการทราบข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-32.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">
|
||||
รูปภาพที่ 5 – 32 แสดงการเลือกรอบการทดสอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ตำแหน่งแสดงชื่อหน้าสถิติสมัครสอบแข่งขัน <br>
|
||||
หมายเลข 2 ช่องสำหรับเลือกรอบการสอบสมัครสอบแข่งขันสำหรับแสดงข้อมูลสถิติ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ ออกมาในรูปแบบไฟล์ xlsx เพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล
|
||||
คลิกเลือก Inspect >> Data ระบบจะแสดงข้อมูลออกมาในรูปแบบตาราง ให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #2196f3;
|
||||
border: 1px solid #2196f3;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
Download CSV
|
||||
</span>
|
||||
และหากต้องการให้หน้าต่างแสดงข้อมูลเต็มจอให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="chevron_left" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
หรือหากต้องการยกเลิกการดูข้อมูลให้ทำการคลิก
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
เพื่อออกจากหน้าต่างแสดงผลข้อมูลในรูปแบบตาราง
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-33.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">
|
||||
รูปภาพที่ 5 – 33 แสดงการเลือกรอบการทดสอบ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกขยายหน้าจอข้อมูลและปุ่มสำหรับคลิกออกจากหน้าดูข้อมูล <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลจากรูปแบบกราฟมาเป็นข้อมูลแบบตารางข้อมูล <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์ข้อมูลออกมาในรูปแบบไฟล์ xlsx
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การดาวน์โหลดข้อมูลสถิติต่างๆ ออกมาในรูปแบบไฟล์รูปภาพเพื่อเอาข้อมูลไปต่อยอดการใช้งานโดยให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-dots-vertical" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
มุมขวาบนในช่องข้อมูลสถิติที่ต้องการดาวน์ไฟล์ข้อมูล
|
||||
คลิกเลือก Share >>Link >> Direct link rendered image จากนั้นระบบจะทำการดาวน์โหลดข้อมูลสถิติที่ทำการเลือกข้อมูดาวน์โหลดออกมาในรูปแบบไฟล์รูปภาพ และหากต้องการ
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: hsl(0, 0%, 18%);" size="xs"/>
|
||||
เพื่อออกจากหน้าต่างการดาวน์โหลดข้อมูล
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/4_staticompet/5-34.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">
|
||||
รูปภาพที่ 5 – 34 แสดงการดาวน์โหลดข้อมูลสถิติออกเป็นมาเป็นข้อมูลรูปภาพ
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
|
||||
ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลสถิติเป็นไฟล์รูปภาพ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
466
src/modules/01_manual/components/5_recruitment/55_qualifiers.vue
Normal file
466
src/modules/01_manual/components/5_recruitment/55_qualifiers.vue
Normal file
|
|
@ -0,0 +1,466 @@
|
|||
<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">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
จัดการรอบคัดเลือก
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อต้องการเข้าหน้าระบบสรรหาเพื่อจัดการรอบการสอบ รอบคัดเลือก หรือการตั้งค่าเว็บสรรหาให้ทำการคลิกแถบเมนู “สรรหา” ทางด้านซ้ายของระบบ ดังรูป
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-35.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 315.39px;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 5 – 35 แสดงการเข้าสู่หน้าจัดการรอบคัดเลือก
|
||||
</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-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-36.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">
|
||||
รูปภาพที่ 5 – 36 แสดงเพิ่มข้อมูลเพิมรอบคัดเลือก
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือก <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงิน <br>
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบ <br>
|
||||
หมายเลข 10 ช่องสำหรับคลิกเลือกรหัสส่วนราชการ <br>
|
||||
หมายเลข 11 ช่องสำหรับคลิกเลือกหน่วยงาน <br>
|
||||
หมายเลข 12 ปุ่มสำหรับคลิกเพื่อย้อนกลับหรือคลิกเพื่อยกเลิกการเพิ่มข้อมูลรอบคัดเลือก
|
||||
|
||||
</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-delete" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
เพื่อลบตำแหน่งที่ต้องการสมัครคัดเลือกออก และทำการเลือกวิธีการชำระเงินสมัครสอบคัดเลือกด้วยการคลิก
|
||||
<q-icon name="mdi-radiobox-marked" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
||||
เลือกในช่องวิธีการชำระเงินที่ต้องการในตาราง “เลือกวิธีการชำระเงิน”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-37.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">
|
||||
รูปภาพที่ 5 – 37 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
||||
</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 ช่องสำหรับคลิกเลือกวิธีการชำระเงินการสมัครสอบคัดเลือก
|
||||
|
||||
</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;
|
||||
border: 1px solid #00aa86;
|
||||
border-radius: 2px;
|
||||
"
|
||||
size="xs"/>
|
||||
“รูปภาพประกอบ” และช่อง “เอกสารประกอบ” หรือหากต้องการเพิ่มรายละเอียดข้อมูลการ
|
||||
สมัครสอบคัดเลือกเพิ่มเติมให้ทำการกรอกข้อมูลที่ตาราง “รายละเอียด” โดยสามารถจัดเรียงรูปแบบฟอนต์จากในระบบได้ หรือหากต้องการกรอกรายละเอียดหมายเหตุก็ทำการคลิกกรอก
|
||||
ได้ที่ตารางหมายเหตุ หลังจากที่ได้ทำการกรอกข้อมูลเพิ่มรอบคัดเลือกเสร็จสิ้นหมดแล้ว ให้ทำการใช้เมาส์คลิก
|
||||
<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/05_recruitment/5_qualifiers/5-38.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">
|
||||
รูปภาพที่ 5 – 38 แสดงตารางการเพิ่มตำแหน่งที่ต้องการสมัครคัดเลือก
|
||||
</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 ช่องสำหรับกรอกข้อมูลหมายเหตุการณ์สมัครคัดเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการลบรายการรอบสอบคัดเลือก ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-delete" style="margin: 0 5px; color: hsl(0, 100%, 50%);" size="xs"/>
|
||||
และยืนยันการลบข้อมูลรายการสอบสมัครคัดเลือก ดังรูป
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-39.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">
|
||||
รูปภาพที่ 5 – 39 แสดงการลบรายการข้อมูลสมัครสอบคัดเลือก
|
||||
</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 row">
|
||||
<div
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- และหากต้องการโพสต์เพื่อประกาศข่าวไม่มีการสมัครสอบใดๆ ให้ทำการใช้เมาส์คลิก
|
||||
|
||||
<div class="q-toggle__inner relative-position non-selectable q-toggle__inner--falsy" aria-hidden="true"
|
||||
style="font-size: 24px; display: inline-block; padding: 0 0.3em !important ; height: 0.45em;">
|
||||
<div class="q-toggle__track"></div>
|
||||
<div class="q-toggle__thumb absolute flex flex-center no-wrap" style="top: -0.07em;" ></div>
|
||||
</div>
|
||||
ที่ “ประกาศข่าวทั่วไป” ให้เป็น
|
||||
<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.45em;">
|
||||
<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-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-40.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">
|
||||
รูปภาพที่ 5 – 40 แสดงการเพิ่มข้อมูลประกาศข่าวทั่วไป
|
||||
</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 ช่องสำหรับเพิ่มเอกสารประกอบประกาศข่าวทั่วไป
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการค้นหาข้อมูลรายการสอบคัดเลือกหรือประกาศข่าวทั่วไปที่ทำการบันทึกให้ทำการคลิก
|
||||
<q-icon name="mdi-magnify" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ที่ช่องค้นหาและทำการกรอกข้อมูลที่เกี่ยวข้องกับบันทึกก่อนหน้านี้ลงไประบบ
|
||||
จะแสดงข้อมูลที่ทำการค้นหา แต่หากต้องการยกเลิกการดูข้อมูลที่ทำการค้นหาให้ทำการใช้เมาส์คลิกที่
|
||||
<q-icon name="mdi-close" style="margin: 0 5px; color: #AFAFAF;" size="xs"/>
|
||||
ในช่องกรอกข้อมูลค้นหาเพื่อยกเลิกค้นหาข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-41.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">
|
||||
รูปภาพที่ 5 – 41 แสดงตารางการค้นหาข้อมูลจัดการรอบคัดเลือก
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับกรอกข้อมูลรายการรอบคัดเลือกขันสำหรับการค้นหา <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลรายการรอบคัดเลือกจากการกรอกข้อมูลเพื่อค้นหา
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการให้ตารางแสดงคอลัมน์ข้อมูลตามที่ต้องการให้ใช้เมาส์คลิก
|
||||
<q-icon name="mdi-menu-down" style="margin: 0 5px; color: #AFAFAF;" size="sm"/>
|
||||
ในช่องคอลัมน์เพื่อทำการเลือกหัวข้อคอลัมน์แสดงข้อมูลของตาราง “จัดการรอบคัดเลือก” ที่ต้องการและหากต้องการให้ตารางแสดงหัวข้อคอลัมน์เพิ่มขึ้นหรือให้ตารางทำการแสดงหัวข้อคอลัมน์เหมือนเดิมให้ทำการใช้เมาส์คลิกที่รายชื่อหัวข้อตารางให้กลับมาเป็นสีเขียวเหมือนเดิมหัวข้อคอลัมน์ก็จะแสดงเหมือนเดิม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/5_qualifiers/5-42.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">
|
||||
รูปภาพที่ 5 – 42 แสดงตารางการเลือกคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกหัวคอลัมน์แสดงข้อมูลจัดการรอบคัดเลือก <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงข้อมูลหัวคอลัมน์ที่ใช้ในการเลือกแสดงข้อมูลจัดการรอบคัดเลือก <br>
|
||||
หมายเลข 3 ช่องสำหรับแสดงตารางข้อมูลจัดการรอบคัดเลือกตามคอลัมน์ที่ทำการเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<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">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
จัดการรอบคัดเลือกคนพิการ
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
- การเพิ่มรอบการคัดเลือกคนพิการให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-plus" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ที่หน้า “จัดการรอบคัดเลือกคนพิการ” จากนั้นทำการกรอกข้อมูลเพื่อเพิ่มรอบสอบการคัดเลือกคนพิการให้ครบตาม
|
||||
ที่ระบบแนะนำ หรือหากต้องการแก้ไขข้อมูลในภายหน้าให้ทำการดับเบิ้ลคลิกที่รายชื่อสมัครสอบคัดเลือกที่ต้องการแก้ไขข้อมูล และถ้าหากต้องการยกเลิกการเพิ่มหรือบันทึกข้อมูลให้ใช้
|
||||
เมาส์คลิก
|
||||
<q-icon name="mdi-arrow-left" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เพื่อย้อนกลับไปยังหน้าแรก “จัดการรอบคัดเลือก” หรือยกเลิกการเพิ่มข้อมูล
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/6_disabilities/5-43.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">
|
||||
รูปภาพที่ 5 – 43 แสดงตารางการเพิ่มข้อมูลการคัดเลือกคนพิการ
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับคลิกเลือกวันที่สมัครสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 8 ช่องสำหรับคลิกเลือกวันที่ชำระเงินสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกวันที่ประกาศผลสอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 10 ช่องสำหรับคลิกเพิ่มรูปภาพประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ <br>
|
||||
หมายเลข 11 ช่องสำหรับคลิกเพิ่มเอกสารประกอบการประกาศสมัครสอบรอบคัดเลือกคนพิการ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
533
src/modules/01_manual/components/5_recruitment/57_selection.vue
Normal file
533
src/modules/01_manual/components/5_recruitment/57_selection.vue
Normal file
|
|
@ -0,0 +1,533 @@
|
|||
<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">
|
||||
5.4 คัดเลือก
|
||||
<span class="text-dark" style="font-weight: bold; font-size: 15px;">
|
||||
จัดการรายชื่อคัดเลือก
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:20px;
|
||||
margin-left: 10px">
|
||||
- หากต้องการที่จะจัดการรายชื่อผู้สมัครคัดเลือกเป็นการยืนยันการสมัครคัดเลือกหรือการตรวจสอบข้อมูลการคัดเลือก การยืนยันการโอนชำระเงินต่างๆ ให้ทำการใช้เมาส์ดับเบิ้ลคลิก
|
||||
ที่รายการสอบคัดเลือก เพื่อให้ระบบแสดงรายชื่อผู้สมัครสอบคัดเลือก และแสดงสถานะการสมัครสอบคัดเลือกของผู้สมัคร
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-44.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">
|
||||
รูปภาพที่ 5 – 44 แสดงตารางการจัดการรายชื่อคัดเลือก
|
||||
</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>
|
||||
หมายเลข 7 ช่องสำหรับแสดงตัวเลขจำนวนผู้สมัครคัดเลือกทั้งหมด <br>
|
||||
หมายเลข 8 ช่องสำหรับแสดงตัวเลขจำนวนผู้มีสิทธิ์เข้ารับคัดเลือกทั้งหมด <br>
|
||||
หมายเลข 9 ช่องสำหรับแสดงตัวเลขจำนวนผู้เข้ารับการคัดเลือก <br>
|
||||
หมายเลข 10 ช่องสำหรับแสดงตัวเลขผู้ที่ผ่านการสอบ <br>
|
||||
หมายเลข 11 ช่องสำหรับแสดงตัวเลขผู้ที่ไม่ผ่านการสอบ <br>
|
||||
หมายเลข 12 ช่องสำหรับแสดงตัวเลขผู้สมัครคัดเลือกเพศชาย <br>
|
||||
หมายเลข 13 ช่องสำหรับแสดงตัวเลขผู้สมัครคัดเลือกเพศหญิง <br>
|
||||
หมายเลข 14 ช่องสำหรับคลิกเลือกแสดงข้อมูลสถานะของผู้สมัครสอบคัดเลือก <br>
|
||||
หมายเลข 15 ช่องสำหรับเลือกไฟล์อัปโหลดไฟล์จัดที่นั่งสอบ และเลือกไฟล์อัปโหลดไฟล์คะแนนสอบ <br>
|
||||
หมายเลข 16 ปุ่มสำหรับคลิกอัปโหลดไฟล์จัดที่นั่งสอบ และปุ่มสำหรับคลิกอัปโหลดไฟล์คะแนนสอบ <br>
|
||||
หมายเลข 17 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์ข้อมูลผู้สมัครสอบคัดเลือก <br>
|
||||
หมายเลข 18 ช่องสำหรับแสดงข้อมูลรายชื่อผู้สมัครสอบคัดเลือก <br>
|
||||
หมายเลข 19 ช่องสำหรับค้นหารายชื่อผู้สมัครรายบุคคล <br>
|
||||
หมายเลข 20 ช่องสำหรับเลือกหัวคอลัมน์แสดงข้อมูลตาราง <br>
|
||||
หมายเลข 21 ปุ่มสำหรับคลิกเปิด-ปิดแสดงตารางสรุปจำนวนผู้สมัครคัดเลือก
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การเลือกวันที่เพื่อดูสรุปจำนวนผู้สมัครคัดเลือกในแต่ละวันหรือวันที่ที่ทำการเลือก ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
เลือกวันที่ในช่องปฏิทินโดยเลือกวันที่ เดือน ปี จากนั้นทำการเมาส์คลิก “ดาวน์โหลดข้อมูลผู้สมัครสอบ” จากนั้นระบบจะทำการดาวน์โหลดไฟล์ xlsx ข้อมูลของผู้สมัครในวันที่ที่ทำการเลือก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-45.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">
|
||||
รูปภาพที่ 5 – 45 แสดงตารางการเลือกวันที่เพื่อดูสรุปจำนวนผู้สมัครคัดเลือก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องสำหรับคลิกเพื่อเลือกวันที่ <br>
|
||||
หมายเลข 2 ช่องสำหรับคลิกเลือกวันที่ เดือน ปี
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- เมื่อต้องการตั้งค่าเว็บไซต์ระบบสรรหาให้ใช้เมาส์คลิก
|
||||
|
||||
<span
|
||||
style="
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid #00aa86;
|
||||
color: #2196f3;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px 0 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
ตรวจสอบข้อมูลสมัครสอบ
|
||||
</span>
|
||||
|
||||
จากนั้นระบบจะแสดงข้อมูลของผู้สมัครสามารถทำการแก้ไขข้อมูลได้ และหลังจากทำการแก้ไขข้อมูลเสร็จสิ้นแล้ว ให้ทำการกดคลิก
|
||||
<i class="q-icon mdi mdi-content-save-outline"
|
||||
style="color: #2196f3;
|
||||
background-color: #d5e4f07e;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 4px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อบันทึกข้อมูลแก้ไข หรือหาตรวจสอบข้อมูลของผู้สมัครเสร็จเรียบร้อยแล้วให้ทำการคลิกปุ่ม
|
||||
<i class="q-icon mdi mdi-check"
|
||||
style="color: #02A998;
|
||||
background-color: hwb(174 82% 2% / 0.624);
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 20px;
|
||||
padding: 4px; /* เพิ่มขนาดพื้นที่ว่างในไอคอน */
|
||||
">
|
||||
</i>
|
||||
เพื่อยืนยันการตรวจสอบคุณสมบัติข้อมูลของผู้สมัครเรียบร้อย
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-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">
|
||||
รูปภาพที่ 5 – 46 แสดงตารางการตรวจสอบคุณสมบัติผู้สมัครสอบคัดเลือก
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูล ในกรณีแก้ไขข้อมูลของผู้สมัครสอบ <br>
|
||||
หมายเลข 2 ปุ่มสำหรับยืนยันการตรวจสอบข้อมูลของผู้สมัครสอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div style="margin-top: 50px; margin-left: 10px;">
|
||||
- การตรวจสอบหลักฐานชำระเงินให้ทำการใชเมาส์คลิก
|
||||
|
||||
<span
|
||||
style="
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid #00aa86;
|
||||
color: #2196f3;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px 0 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
ตรวจสอบหลักฐานชำระเงิน
|
||||
</span>
|
||||
|
||||
ที่คอลัมน์สถานะของผู้สมัคร จากนั้นทำการตรวจสอบข้อมูลพร้อมตรวจสอบหลักบานการโอนเงิน หากตรวจสอบเสร็จสิ้นแล้วให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #00aa86;
|
||||
border: 1px solid #00aa86;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
"
|
||||
>
|
||||
<q-icon name="mdi-check" style="margin: 0 1px 0 5px; color: #ffffff;" size="xs"/>
|
||||
ตรวจสอบข้อมูล
|
||||
</span>
|
||||
เพื่อยืนยันการตรวจสอบการชำระเงินเสร็จแล้ว
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-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">
|
||||
รูปภาพที่ 5 – 47 แสดงตารางการตรวจสอบการชำระเงินของผู้สมัครสอบคัดเลือก
|
||||
</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-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ในรายการจากนั้นระบบแสดงเมนูย่อย แล้วทำการคลิก “ดาวน์โหลดจัดการรายชื่อผู้สมัคร” จากนั้นระบบจะทำการดาวน์โหลดไฟล์ xlsx ให้ แล้วทำการกรอกเลขที่นั่งสอบจากนั้นกดบันทึกไฟล์ และนำไปอัปโหลดในระบบ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-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">
|
||||
รูปภาพที่ 5 – 48 แสดงตารางการเพิ่มเลขที่นั่งสอบ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ชื่อไฟล์การดาวน์โหลดจัดการรายชื่อผู้สมัคร <br>
|
||||
หมายเลข 2 ช่องสำหรับการกรอกเลขที่นั่งสอบของผู้สมัครและทำการบันทึกก่อนนำไฟล์อัปโหลดเข้าระบบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การจัดที่นั่งสอบให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
“ดาวน์โหลดจัดการรายชื่อผู้สมัคร” ที่ตารางแสดงรายชื่อผู้สมัคร ระบบจะทำการดาวน์โหลดไฟล์ xlsx จากนั้นทำการเปิดไฟล์ และกรอก
|
||||
ข้อมูลเลขที่นั่งสอบของผู้สมัครให้ครบ จากนั้นทำการบันทึก จากนั้นทำการคลิกอัปโหลดไฟล์ที่นั่งสอบในช่อง “อัปโหลดที่นั่งสอบ” จากนั้นคลิก
|
||||
<q-icon name="mdi-upload" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
||||
เพื่ออัปโหลดไฟล์
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-49.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">
|
||||
รูปภาพที่ 5 – 49 แสดงตารางการจัดที่นั่งสอบ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์จัดการรายชื่อผู้สมัคร <br>
|
||||
หมายเลข 2 ช่องสำหรับอัปโหลดไฟล์จัดที่นั่งสอบ
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่ออัปโหลดไฟล์ที่นั่งสอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การดาวน์โหลดไฟล์ข้อมูลผู้สมัครสอบคัดเลือกเพื่ออัปโหลดคะแนนสอบ ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
ในรายการจากนั้นระบบแสดงเมนูย่อย แล้วทำการคลิก “ดาวน์โหลด
|
||||
จัดการรายชื่อผู้สมัคร” จากนั้นระบบจะทำการดาวน์โหลดไฟล์ xlsx ให้ โดยไฟล์ที่โหลดมาต้องมีข้อมูลผู้สมัครรวมถึงเลขที่นั่งสอบที่ทำการกรอกก่อนหน้านี้ด้วย จากนั้นทำการกรอกข้อมูล
|
||||
คะแนนแล้วทำการบันทึกไฟล์ และอัปโหลดเข้าระบบ
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-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">
|
||||
รูปภาพที่ 5 – 50 แสดงตารางการเพิ่มเลขที่นั่งสอบ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ชื่อไฟล์การดาวน์โหลดจัดการรายชื่อผู้สมัคร <br>
|
||||
หมายเลข 2 ช่องสำหรับการกรอกคะแนนสอบของผู้สมัครและทำการบันทึกก่อนนำไฟล์อัปโหลดเข้าระบบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p
|
||||
style="margin-top:50px;
|
||||
margin-left: 10px">
|
||||
- การสรุปคะแนนสอบให้ทำการใช้เมาส์คลิก
|
||||
<q-icon name="mdi-download" style="margin: 0 5px; color: #00aa86;" size="xs"/>
|
||||
“ดาวน์โหลดข้อมูลผู้สมัคร” ที่ตารางแสดงรายชื่อผู้สมัคร ระบบจะทำการดาวน์โหลดไฟล์ xlsx จากนั้นทำการเปิดไฟล์ และกรอกข้อมูลคะแนนสอบของผู้สมัครให้ครบ จากนั้นทำการบันทึก จากนั้นทำการคลิกอัปโหลดไฟล์คะแนนสอบในช่อง “อัปโหลดคะแนนสอบ” จากนั้นคลิกปุ่ม
|
||||
<q-icon name="mdi-upload" style="margin: 0 5px; color: #2196f3;" size="xs"/>
|
||||
เพื่ออัปโหลดไฟล์
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/05_recruitment/7_selection/5-51.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">
|
||||
รูปภาพที่ 5 – 51 แสดงตารางการอัปโหลดคะแนนสอบ
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ปุ่มสำหรับคลิกดาวน์โหลดไฟล์จัดการรายชื่อผู้สมัคร <br>
|
||||
หมายเลข 2 ช่องสำหรับอัปโหลดไฟล์คะแนนสอบ <br>
|
||||
หมายเลข 3 ปุ่มสำหรับคลิกเพื่ออัปโหลดไฟล์คะแนนสอบ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
interface Pagination {
|
||||
rowsPerPage: number;
|
||||
}
|
||||
|
||||
interface DataOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export type { Pagination, DataOption };
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
interface DataSumCalendarObject {
|
||||
id: number;
|
||||
monthFull: String;
|
||||
count: number;
|
||||
color: String;
|
||||
}
|
||||
|
||||
interface DataListsObject {
|
||||
id: number;
|
||||
count: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export type { DataSumCalendarObject, DataListsObject };
|
||||
|
|
@ -1,14 +1,448 @@
|
|||
const ManualHomePage = () => import("@/modules/01_manual/views/Main.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");
|
||||
const Mainuser = () => import("@/modules/01_manual/components/1_login/04_newuser.vue");
|
||||
const Mainlogout = () => import("@/modules/01_manual/components/1_login/05_logout.vue");
|
||||
const Mainnoti = () => import("@/modules/01_manual/components/1_login/06_noti.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");
|
||||
const Dataofficer = () => import("@/modules/01_manual/components/2_data/24_Officer.vue");
|
||||
const Dataemployee = () => import("@/modules/01_manual/components/2_data/25_Employee.vue");
|
||||
const Datacalendar = () => import("@/modules/01_manual/components/2_data/26_Calendar.vue");
|
||||
const Datalnsignia = () => import("@/modules/01_manual/components/2_data/27_Insignia.vue");
|
||||
|
||||
|
||||
const Structuremain = () => import("@/modules/01_manual/components/3_Structure/31_Main.vue");
|
||||
const Structureposition = () => import("@/modules/01_manual/components/3_Structure/32_Position.vue");
|
||||
const Structurestructure = () => import("@/modules/01_manual/components/3_Structure/33_Structure.vue");
|
||||
const Structureorganchart = () => import("@/modules/01_manual/components/3_Structure/34_organchart.vue");
|
||||
const Structurechartstru = () => import("@/modules/01_manual/components/3_Structure/35_chartstru.vue");
|
||||
const Structureaccount2 = () => import("@/modules/01_manual/components/3_Structure/36_account2.vue");
|
||||
const Structurereport = () => import("@/modules/01_manual/components/3_Structure/37_report.vue");
|
||||
const Structurechartemploy = () => import("@/modules/01_manual/components/3_Structure/38_chartemploy.vue");
|
||||
|
||||
|
||||
const registmain = () => import("@/modules/01_manual/components/4_ registration/41_main.vue");
|
||||
const registfind = () => import("@/modules/01_manual/components/4_ registration/42_find.vue");
|
||||
const registdetail = () => import("@/modules/01_manual/components/4_ registration/43_detail.vue");
|
||||
const registedit = () => import("@/modules/01_manual/components/4_ registration/44_edit.vue");
|
||||
const registselect = () => import("@/modules/01_manual/components/4_ registration/45_select.vue");
|
||||
const registwindow = () => import("@/modules/01_manual/components/4_ registration/46_window.vue");
|
||||
|
||||
|
||||
|
||||
const recruitmain = () => import("@/modules/01_manual/components/5_recruitment/51_main.vue");
|
||||
const recruitsetting = () => import("@/modules/01_manual/components/5_recruitment/52_setting.vue");
|
||||
|
||||
const recruitmanagecompet = () => import("@/modules/01_manual/components/5_recruitment/53_managecompet.vue");
|
||||
const recruitstaticompet = () => import("@/modules/01_manual/components/5_recruitment/54_staticompet.vue");
|
||||
|
||||
const recruitqualifiers = () => import("@/modules/01_manual/components/5_recruitment/55_qualifiers.vue");
|
||||
const recruitdisabilities = () => import("@/modules/01_manual/components/5_recruitment/56_disabilities.vue");
|
||||
const recruitselection = () => import("@/modules/01_manual/components/5_recruitment/57_selection.vue");
|
||||
|
||||
|
||||
|
||||
|
||||
/****** 1 ********/
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/manual",
|
||||
name: "manual",
|
||||
component: ManualHomePage,
|
||||
component: Mainlogin,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [1],
|
||||
Role: "metadata",
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
{
|
||||
path: "/login/log",
|
||||
name: "mainLog",
|
||||
component: MainLog,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/login/password",
|
||||
name: "mainpassword",
|
||||
component: Mainpass,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/login/newuser",
|
||||
name: "mainnewuser",
|
||||
component: Mainuser,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/login/logout",
|
||||
name: "mainlogout",
|
||||
component: Mainlogout,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/login/noti",
|
||||
name: "mainnoti",
|
||||
component: Mainnoti,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
/****** 2 ********/
|
||||
|
||||
|
||||
{
|
||||
path: "/Datamain",
|
||||
name: "Datamain",
|
||||
component: Datamain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Data/about",
|
||||
name: "Dataabout",
|
||||
component: Dataabout,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: "/Data/gov",
|
||||
name: "Datagov",
|
||||
component: Datagov,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: "/Data/officer",
|
||||
name: "Dataofficer",
|
||||
component: Dataofficer,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Data/employee",
|
||||
name: "Dataemployee",
|
||||
component: Dataemployee,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Data/calendar",
|
||||
name: "Datacalendar",
|
||||
component: Datacalendar,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Data/insignia",
|
||||
name: "Datalnsignia",
|
||||
component: Datalnsignia,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
/****** 3 ********/
|
||||
|
||||
|
||||
{
|
||||
path: "/Structuremain",
|
||||
name: "Structuremain",
|
||||
component: Structuremain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Position",
|
||||
name: "Structureposition",
|
||||
component: Structureposition,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Structure",
|
||||
name: "Structurestructure",
|
||||
component: Structurestructure,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Organchart",
|
||||
name: "Structureorganchart",
|
||||
component: Structureorganchart,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Chartstru",
|
||||
name: "Structurechartstru",
|
||||
component: Structurechartstru,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Account2",
|
||||
name: "Structureaccount2",
|
||||
component: Structureaccount2,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Report",
|
||||
name: "Structurereport",
|
||||
component: Structurereport,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Structure/Chartemploy",
|
||||
name: "Structurechartemploy",
|
||||
component: Structurechartemploy,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
/****** 4 ********/
|
||||
|
||||
{
|
||||
path: "/Registrationmain",
|
||||
name: "registmain",
|
||||
component: registmain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: "/Registration/find",
|
||||
name: "registfind",
|
||||
component: registfind,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: "/Registration/detail",
|
||||
name: "registdetail",
|
||||
component: registdetail,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Registration/edit",
|
||||
name: "registedit",
|
||||
component: registedit,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Registration/select",
|
||||
name: "registselect",
|
||||
component: registselect,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Registration/window",
|
||||
name: "registwindow",
|
||||
component: registwindow,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
/****** 5 ********/
|
||||
|
||||
{
|
||||
path: "/Recruitmain",
|
||||
name: "recruitmain",
|
||||
component: recruitmain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Recruit/setting",
|
||||
name: "recruitsetting",
|
||||
component: recruitsetting,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Recruit/managecompet",
|
||||
name: "recruitmanagecompet",
|
||||
component: recruitmanagecompet,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: "/Recruit/staticompet",
|
||||
name: "recruitstaticompet",
|
||||
component: recruitstaticompet,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Recruit/qualifiers",
|
||||
name: "recruitqualifiers",
|
||||
component: recruitqualifiers,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Recruit/disabilities",
|
||||
name: "recruitdisabilities",
|
||||
component: recruitdisabilities,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Recruit/selection",
|
||||
name: "recruitselection",
|
||||
component: recruitselection,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
}
|
||||
|
||||
];
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import LoginPage from "@/modules/01_manual/components/01_login.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<LoginPage />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue