manual v2
This commit is contained in:
kanyarat
parent
e63ba4b3cd
commit
2cf968ae7e
74 changed files with 913 additions and 21656 deletions
239
src/modules/01_manual/MainPage.vue
Normal file
239
src/modules/01_manual/MainPage.vue
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import MarkdownIt, { type Token } from "markdown-it";
|
||||
|
||||
// @ts-expect-error
|
||||
import mditFigureWithPCaption from "markdown-it-image-figures";
|
||||
import mditAnchor from "markdown-it-anchor";
|
||||
import { useManualStore } from "@/stores/manual";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useQuasar } from "quasar";
|
||||
const md = new MarkdownIt().use(mditAnchor).use(mditFigureWithPCaption, {
|
||||
figcaption: "alt",
|
||||
});
|
||||
|
||||
const quasar = useQuasar();
|
||||
const route = useRoute();
|
||||
const manual = useManualStore();
|
||||
const { toc } = storeToRefs(manual);
|
||||
|
||||
const text = ref("");
|
||||
const parsed = ref<Token[]>([]);
|
||||
const chapter = ref(0);
|
||||
const found = ref(false);
|
||||
const active = ref("");
|
||||
|
||||
function onScroll() {
|
||||
let current = "";
|
||||
document.querySelectorAll("h2").forEach((v) => {
|
||||
if (
|
||||
window.top &&
|
||||
window.top.scrollY + window.innerHeight / 2 > v.offsetTop
|
||||
) {
|
||||
current = v.id;
|
||||
}
|
||||
});
|
||||
active.value = current;
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
if (window.innerWidth > 1024) {
|
||||
toc.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function scrollTo(id: string) {
|
||||
const pos = document.getElementById(id)?.offsetTop;
|
||||
await nextTick(() => {
|
||||
if (window.innerWidth < 1024) toc.value = false;
|
||||
});
|
||||
if (pos)
|
||||
window.scrollTo({
|
||||
top: pos,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener("scroll", onScroll);
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
if (typeof route.params.name === "string") {
|
||||
const res = await fetch(`/${route.params.name}.md`);
|
||||
if (res && res.ok) {
|
||||
text.value = await res.text();
|
||||
found.value = true;
|
||||
chapter.value = +route.params.name.slice(8, 9) - 1;
|
||||
parsed.value = md.parse(text.value, {});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("scroll", onScroll);
|
||||
window.removeEventListener("resize", onResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="found" style="display: flex" class="markdown">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e1e1e9;
|
||||
padding: 1rem;
|
||||
"
|
||||
v-html="md.render(text.replaceAll('images/', '/images/'))"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<q-drawer
|
||||
v-if="toc"
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-model="toc"
|
||||
:width="250"
|
||||
:behavior="$q.screen.width > 1024 ? 'desktop' : 'mobile'"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<template v-for="(token, idx) in parsed">
|
||||
<q-item
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="active === token.attrGet('id')"
|
||||
@click="scrollTo(token.attrGet('id') || '')"
|
||||
v-if="token.tag === 'h2' && token.type === 'heading_open'"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<q-icon size="11px" name="mdi-circle-medium" />
|
||||
<span class="q-pl-xs">{{ parsed[idx + 1].content }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toc {
|
||||
top: 4rem;
|
||||
}
|
||||
.active {
|
||||
color: red;
|
||||
}
|
||||
.markdown {
|
||||
counter-set: h1 v-bind(chapter);
|
||||
counter-reset: h1;
|
||||
}
|
||||
.markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
|
||||
line-height: 1.5;
|
||||
padding-block: 1rem !important;
|
||||
}
|
||||
|
||||
.markdown :deep(h1) {
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.markdown :deep(h2) {
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.markdown :deep(h3) {
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.markdown :deep(h1:before) {
|
||||
counter-increment: h1;
|
||||
content: counter(h1) ". ";
|
||||
}
|
||||
|
||||
.markdown :deep(h2:before) {
|
||||
counter-increment: h2;
|
||||
content: counter(h1) "." counter(h2) ". ";
|
||||
}
|
||||
|
||||
.markdown :deep(h3:before) {
|
||||
counter-increment: h3;
|
||||
content: counter(h1) "." counter(h2) "." counter(h3) ". ";
|
||||
}
|
||||
|
||||
.markdown :deep(h4:before) {
|
||||
counter-increment: h4;
|
||||
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
|
||||
}
|
||||
|
||||
.markdown :deep(blockquote) {
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown :deep(blockquote > p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown :deep(img) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown :deep(p img) {
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.markdown :deep(figure) {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown :deep(figure img) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.markdown :deep(p:has(img:only-child) img) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown :deep(.abc) {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.markdown :deep(h1) {
|
||||
text-align: left;
|
||||
margin-top: -1rem;
|
||||
margin-inline: -1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.markdown :deep(figcaption) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.markdown :deep(h2) {
|
||||
text-align: left;
|
||||
margin-block: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 0px 16px;
|
||||
color: #02a998;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,359 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div></div>
|
||||
<div class="col-12">
|
||||
<!-- <div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
การเข้าสู่ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12 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>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
<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: rgba(217, 217, 217, 0.33);
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
color: #0909098c}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import Mainlogin1 from "../1_login/01_Main.vue";
|
||||
import login from "../1_login/02_login.vue";
|
||||
import Password from "../1_login/03_Password.vue";
|
||||
import newuser from "../1_login/04_newuser.vue";
|
||||
import logout from "../1_login/05_logout.vue";
|
||||
import noti from "../1_login/06_noti.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 20px"
|
||||
>
|
||||
คู่มือการเข้าสู่ระบบ
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="Mainlogin"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<Mainlogin1 />
|
||||
</div>
|
||||
<div
|
||||
id="login"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<login />
|
||||
</div>
|
||||
<div
|
||||
id="Password"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<Password />
|
||||
</div>
|
||||
<div
|
||||
id="newuser"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<newuser />
|
||||
</div>
|
||||
<div
|
||||
id="logout"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<logout />
|
||||
</div>
|
||||
<div
|
||||
id="noti"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<noti />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">ระบบข้อมูลหลัก</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล
|
||||
ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล ให้กดเลือกแถบเมนู “ข้อมูลหลัก”
|
||||
ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 495px;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 1 เมนูข้อมูลหลัก
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- เมื่อกดเลือกเมนู “ข้อมูลหลัก” ระบบปรากฏหน้าจัดการข้อมูลหลักดังรูปภาพ
|
||||
</div>
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-2.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 2 หน้าจัดการข้อมูลหลัก
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
margin-left: 0px;
|
||||
"
|
||||
>
|
||||
จากรูปที่ 2 - 2 แต่ละหมายเลขมีรายละเอียด ดังนี้ <br>
|
||||
<div style="margin-left: 50px;">
|
||||
หมายเลข 1 แถบเมนูหลักในหน้าจัดการข้อมูลหลัก <br>
|
||||
หมายเลข 2 สรุปจำนวนข้อมูล <br>
|
||||
หมายเลข 3 แถบเมนูย่อยของแต่ละเมนูหลัก <br>
|
||||
หมายเลข 4 แถบเมนูเพิ่ม ลบหรือแก้ไขข้อมูล <br>
|
||||
หมายเลข 5 รายละเอียดของเมนูย่อย <br>
|
||||
หมายเลข 6 ดูประวัติแก้ไข <br>
|
||||
หมายเลข 7 ช่องค้นหา เพื่อสืบค้นข้อมูลที่ต้องการ <br>
|
||||
หมายเลข 8 คอลัมน์ กดเลือกรายการเพื่อให้ข้อมูลที่เลือกถูกซ่อน <br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="col-12 "
|
||||
style="margin-top: 50px; margin-left: 10px; align-items: center"
|
||||
>
|
||||
- เมื่อกดไอคอน
|
||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000;"/>
|
||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะถูกซ่อนดังรูปภาพ และเมื่อกดไอคอน
|
||||
<q-icon name="mdi-pin" style="margin: 0 5px; color: #000000; transform: rotate(90deg);"/>
|
||||
แถบเมนูจัดการข้อมูลหลักและสรุปจำนวนข้อมูลจะกลับมาแสดงเหมือนเดิม ดังรูปภาพที่ 2 – 2 ที่หมายเลข1 และ หมายเลข2
|
||||
</div>
|
||||
|
||||
<q-img
|
||||
src="@/assets/manual/02_data/1_main/2-3.png"
|
||||
style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #97b2de;
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 2 - 3 ซ่อนแถบเมนูและสรุปจำนวนข้อมูล
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
|
@ -1,985 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,381 +0,0 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,374 +0,0 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -1,596 +0,0 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -1,454 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import MainData from "../2_data/21_Main.vue";
|
||||
import About from "../2_data/22_About.vue";
|
||||
import gov from "../2_data/23_Gov.vue";
|
||||
import officer from "../2_data/24_Officer.vue";
|
||||
import employee from "../2_data/25_Employee.vue";
|
||||
import calender from "../2_data/26_Calendar.vue";
|
||||
import insignia from "../2_data/27_Insignia.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบข้อมูลหลัก
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="MainData"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<MainData />
|
||||
</div>
|
||||
<div
|
||||
id="About"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<About />
|
||||
</div>
|
||||
<div
|
||||
id="gov"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<gov />
|
||||
</div>
|
||||
<div
|
||||
id="officer"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<officer />
|
||||
</div>
|
||||
<div
|
||||
id="employee"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<employee />
|
||||
</div>
|
||||
<div
|
||||
id="calender"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<calender />
|
||||
</div>
|
||||
<div
|
||||
id="insignia"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<insignia />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div class="col-12" style="margin-top: 20px; margin-left: 10px">
|
||||
- เมื่อเข้าสู่ระบบทรัพยากรบุคคล ปรากฏหน้าจอหน้าแรกของระบบทรัพยาการบุคคล
|
||||
ให้กดเลือกแถบเมนู “ข้อมูลหลัก” ดังรูปภาพ
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/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>
|
||||
|
|
@ -1,418 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,398 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,311 +0,0 @@
|
|||
<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 scoped>
|
||||
.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>
|
||||
|
|
@ -1,686 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,345 +0,0 @@
|
|||
<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 scoped>
|
||||
.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>
|
||||
|
|
@ -1,390 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import structuremain from "./31_Main.vue";
|
||||
import position from "./32_Position.vue";
|
||||
import structure from "./33_Structure.vue";
|
||||
import organchart from "./34_organchart.vue";
|
||||
import chartstru from "./35_chartstru.vue";
|
||||
import account2 from "./36_account2.vue";
|
||||
import report from "./37_report.vue";
|
||||
import chartemploy from "./38_chartemploy.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบโครงสร้างอัตรากำลัง
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="structuremain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<structuremain />
|
||||
</div>
|
||||
<div
|
||||
id="position"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<position />
|
||||
</div>
|
||||
<div
|
||||
id="structure"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<structure />
|
||||
</div>
|
||||
<div
|
||||
id="organchart"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<organchart />
|
||||
</div>
|
||||
<div
|
||||
id="chartstru"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<chartstru />
|
||||
</div>
|
||||
<div
|
||||
id="account2"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<account2 />
|
||||
</div>
|
||||
<div
|
||||
id="report"
|
||||
name="7"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<report />
|
||||
</div>
|
||||
<div
|
||||
id="chartemploy"
|
||||
name="8"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<chartemploy />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
<!--
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบทะเบียนประวัติ
|
||||
</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,530 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,483 +0,0 @@
|
|||
<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>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,138 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import registrationmain from "./41_main.vue";
|
||||
import registrationFind from "./42_find.vue";
|
||||
import registrationDetail from "./43_detail.vue";
|
||||
import registrationEdit from "./44_edit.vue";
|
||||
import registrationSelect from "./45_select.vue";
|
||||
import registrationWindow from "./46_window.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบทะเบียนประวัติ
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="registrationmain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationmain />
|
||||
</div>
|
||||
<div
|
||||
id="registrationFind"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationFind />
|
||||
</div>
|
||||
<div
|
||||
id="registrationDetail"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationDetail />
|
||||
</div>
|
||||
<div
|
||||
id="registrationEdit"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationEdit />
|
||||
</div>
|
||||
<div
|
||||
id="registrationSelect"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationSelect />
|
||||
</div>
|
||||
<div
|
||||
id="registrationWindow"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<registrationWindow />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ระบบการสรรหาบุคคล
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<div 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,613 +0,0 @@
|
|||
<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 mdi-plus"
|
||||
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>
|
||||
|
|
@ -1,879 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,488 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,533 +0,0 @@
|
|||
<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,87 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import recruitmain from "@/modules/01_manual/components/5_recruitment/51_main.vue";
|
||||
import recruitSetting from "@/modules/01_manual/components/5_recruitment/52_setting.vue";
|
||||
import recruitManage from "@/modules/01_manual/components/5_recruitment/53_managecompet.vue";
|
||||
import recruitstati from "@/modules/01_manual/components/5_recruitment/54_staticompet.vue";
|
||||
import recruitQualifiers from "@/modules/01_manual/components/5_recruitment/55_qualifiers.vue";
|
||||
import recruitDisabilities from "@/modules/01_manual/components/5_recruitment/56_disabilities.vue";
|
||||
import recruitSelection from "@/modules/01_manual/components/5_recruitment/57_selection.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบจัดการระบบสรรหา
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="recruitmain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitmain />
|
||||
</div>
|
||||
<div
|
||||
id="recruitSetting"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitSetting />
|
||||
</div>
|
||||
<!-- <div
|
||||
id="recruitManage"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
สอบแข่งขัน
|
||||
</div> -->
|
||||
<div
|
||||
id="recruitManage"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitManage />
|
||||
</div>
|
||||
<div
|
||||
id="recruitstati"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitstati />
|
||||
</div>
|
||||
<div
|
||||
id="recruitQualifiers"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitQualifiers />
|
||||
</div>
|
||||
<div
|
||||
id="recruitDisabilities"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitDisabilities />
|
||||
</div>
|
||||
<div
|
||||
id="recruitSelection"
|
||||
name="7"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitSelection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,736 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const rightDrawerOpen = ref(false);
|
||||
const text = ref("");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="row col-12">
|
||||
<div class="col-12">
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
|
||||
</div> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="
|
||||
background-color: #ecebeb;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
padding: 10px 16px 10px 16px;
|
||||
"
|
||||
>
|
||||
<div class="custom-topic text-dark">
|
||||
<div style="font-size: 16px; font-weight: 700">
|
||||
ออกคำสั่ง
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-12 q-pa-md"
|
||||
style="border-radius: 0px 0px 8px 8px"
|
||||
>
|
||||
<!-- <div 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/07_commands/1_main/7-1.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: 255px;
|
||||
height: 380px;
|
||||
border: 1px solid #97B2DE;
|
||||
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 7 – 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/07_commands/1_main/7-2.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 1px solid #97B2DE;
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 7 – 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 สถานะ “บัญชีแนบท้าย” หมายถึง อยู่ในหน้าเพิ่มไฟล์คำสั่งและบัญชีแนบท้าย/ขั้นตอนที่ 4 <br>
|
||||
หมายเลข 10 สถานะ “เลือกผู้รับสำเนา” หมายถึง อยู่ในหน้าเลือกรายชื่อส่งสำเนา/ขั้นตอนที่ 3 <br>
|
||||
หมายเลข 11 สถานะ “จัดทำร่างคำสั่ง” หมายถึง อยู่ในหน้ากรอกรายละเอียดการออกคำสั่ง/ขั้นตอนที่ 1 <br>
|
||||
หมายเลข 12 สถานะ “รอผู้มีอำนาจลงนาม” หมายถึง รอคลิก “ออกคำสั่ง” /ขั้นตอนที่ 4
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ประเภทคำสั่งปัจจุบันมีทั้งหมด 24 คำสั่ง ได้แก่
|
||||
<br />
|
||||
<div style="margin-left: 20px;">
|
||||
1.) C-PM-01 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้
|
||||
<br />
|
||||
2.) C-PM-02 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้ได้รับคัดเลือก
|
||||
<br />
|
||||
3.) C-PM-03 คำสั่งแต่งตั้ง: สำหรับข้าราชการ กทม. เดิม
|
||||
<br />
|
||||
4.) C-PM-04 คำสั่งย้าย: สำหรับข้าราชการ กทม. เดิม
|
||||
<br />
|
||||
5.) C-PM-05 คำสั่งแต่งตั้ง
|
||||
<br />
|
||||
6.) C-PM-06 คำสั่งเลื่อน
|
||||
<br />
|
||||
7.) C-PM-07 คำสั่งย้าย
|
||||
<br />
|
||||
8.) C-PM-08 คำสั่งบรรจุและแต่งตั้งข้าราชการฯ กลับเข้ารับราชการ
|
||||
<br />
|
||||
9.) C-PM-09 คำสั่งบรรจุและแต่งตั้งผู้ออกไปรับราชการทหารกลับเข้ารับราชการ
|
||||
<br />
|
||||
10.) C-PM-10 คำสั่งแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
|
||||
<br />
|
||||
11.) C-PM-11 คำสั่งให้ข้าราชการที่มีผลการทดลองปฏิบัติหน้าที่ราชการไม่ต่ำกว่ามาตรฐาน
|
||||
ที่กำหนดรับราชการต่อไป
|
||||
<br />
|
||||
12.) C-PM-12 คำสั่งให้ข้าราชการออกจากราชการเพราะผลการทดลองปฏิบัติหน้าที่
|
||||
ราชการต่ำกว่ามาตรฐานที่กำหนด
|
||||
<br />
|
||||
13.) C-PM-13 คำสั่งให้โอนข้าราชการกรุงเทพมหานครสามัญ
|
||||
<br />
|
||||
14.) C-PM-14 คำสั่งรับโอนข้าราชการกรุงเทพมหานครสามัญ
|
||||
<br />
|
||||
15.) C-PM-15 คำสั่งให้ช่วยราชการ
|
||||
<br />
|
||||
16.) C-PM-16 คำสั่งส่งตัวกลับ
|
||||
<br />
|
||||
17.) C-PM-17 คำสั่งอนุญาตให้ข้าราชการลาออกจากราชการ
|
||||
<br />
|
||||
18.) C-PM-18 คำสั่งให้ออกจากราชการ
|
||||
<br />
|
||||
19.) C-PM-19 คำสั่งปลดออกจากราชการ
|
||||
<br />
|
||||
20.) C-PM-20 คำสั่งไล่ออกจากราชการ
|
||||
<br />
|
||||
21.) C-PM-21 คำสั่งแต่งตั้งลูกจ้างชั่วคราวเป็นลูกจ้างประจำ
|
||||
<br />
|
||||
22.) C-PM-22 คำสั่งปรับระดับชั้นงาน
|
||||
<br />
|
||||
23.) C-PM-23 คำสั่งให้ลูกจ้างออกจากราชการ
|
||||
<br />
|
||||
24.) C-PM-24 คำสั่งย้ายลูกจ้างประจำ
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" >
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ตัวอย่างการการออกคำสั่ง C-PM-01 คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้ รายชื่อจะ
|
||||
สามารถออกคำสั่งได้ต่อเมื่อระบบ “สรรหา” ส่งรายชื่อมาออกคำสั่งเสร็จแล้วเท่านั้น หากไม่ได้ทำการส่งรายชื่อออกคำสั่ง ในระบ “ออกคำสั่ง” จะไม่มีรายชื่อเพื่อดำเนินการต่อ หากทำการกรอกข้อมูลเสร็จสิ้นตามระบบแนะนำเสร็จแล้ว ทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
บันทึก
|
||||
</span>
|
||||
และยืนยันการบันทึกข้อมูล เพื่อไปยังขั้นตอนที่ 2
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/07_commands/1_main/7-3.png"
|
||||
style="
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 1px solid #97B2DE;
|
||||
|
||||
|
||||
|
||||
"
|
||||
/>
|
||||
<div class="text-center text-grey-6" style="margin-top: 20px">
|
||||
รูปภาพที่ 7 – 3 กรอกรายละเอียดการออกคำสั่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 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 ปุ่มสำหรับคลิกบันทึกข้อมูลการออกคำสั่ง
|
||||
</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-checkbox-marked"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อเลือกรายชื่อออกคำสั่ง หากทำการคลิกเลือกรายชื่อสำเร็จ ให้ทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
บันทึก
|
||||
</span>
|
||||
และยืนยันการบันทึกข้อมูลเพื่อบันทึกรายชื่อที่เลือก หรือหากยกเลิกการเลือกรายชื่อให้ทำการคลิก
|
||||
<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>
|
||||
ระบบจะแสดงหน้าขั้นตอนที่ 2 หน้าเลือกรายชื่อ โดยไม่มีรายชื่อที่เลือก หากทำการเลือกรายชื่อเสร็จแล้ว ให้ทำการกรอกข้อมูลเงินเดือนทุกครั้ง โดยการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-cash-multiple"
|
||||
style="margin: 0 5px; color:rgb(49, 204, 236)"
|
||||
size="xs"
|
||||
/>
|
||||
จากนั้นทำการกรอกข้อมูลเงินเดือน หากไม่ทำการกรอกข้อมูลเงินเดือน ในส่วนของการออกคำสั่ง รายงานการออกคำสั่งจะไม่ปรากฏเงินเดือน หรือการต้องการลบรายชื่อผู้สอบแข่งขันได้ที่ทำการเลือกรายชื่อ ให้ทำการคลิก
|
||||
<q-icon
|
||||
name="mdi-delete"
|
||||
style="margin: 0 5px; color:hsl(0, 100%, 50%)"
|
||||
size="xs"
|
||||
/>
|
||||
รายชื่อที่ต้องการลบ และยืนยันการลบข้อมูล รายชื่อที่ถูกลบจะปรากฏอยู่ในตารางการเพิ่มรายชื่อ หากจะเพิ่มรายชื่อใหม่ก็ทำการคลิก
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
แล้วเพิ่มรายชื่อเข้ามาใหม่ได้
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/07_commands/1_main/7-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">
|
||||
รูปภาพที่ 7 – 4 เลือกรายชื่อออกรายงานคำสั่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 2 การเลือกรายชื่อ <br>
|
||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเลือกรายชื่อ<br>
|
||||
หมายเลข 3 ตารางแสดงรายชื่อที่ทำการเลือกรายชื่อมา<br>
|
||||
หมายเลข 4 ไอคอนสำหรับคลิกเพื่อจัดเรียงรายชื่อขึ้น-ลง<br>
|
||||
หมายเลข 5 ไอคอนสำหรับคลิกเพื่อกรอกข้อมูลเงินเดือน<br>
|
||||
หมายเลข 6 ไอคอนสำหรับคลิกเพื่อลบรายชื่อออกจากการออกคำสั่งแต่งตั้ง<br>
|
||||
หมายเลข 7 ช่องสำหรับคลิกกรอกข้อมูลเพื่อค้นหารายชื่อ<br>
|
||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อย้อนกลับไปขั้นตอนกรอกรายละเอียดก่อนหน้านี้<br>
|
||||
หมายเลข 9 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลการเลือกรายชื่อ
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ขั้นตอนที่ 3 การเลือกรายชื่อส่งสำเราคำสั่ง เพิ่มรายชื่อตามหน่วยงาน ให้ทำการใช้เมาส์คลิก
|
||||
<q-icon
|
||||
name="mdi-plus"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
จากนั้นทำการเลือกรายชื่อที่ต้องการเพิ่มเพื่อส่งสำเนาคำสั่ง หากเลือกรายชื่อเสร็จแล้ว รายชื่อจะปรากฏในหน้าตารางของ ขั้นตอนที่ 3 เลือกรายชื่อออกคำสั่ง ให้ทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
บันทึก
|
||||
</span>
|
||||
และยืนยันการบันทึกข้อมูล หรือหากต้องการลบรายชื่อ ให้ทำการใช้เมาส์คลิก
|
||||
<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/07_commands/1_main/7-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">
|
||||
รูปภาพที่ 7 – 5 แสดงรายชื่อหน่วยงานส่งสำเนาคำสั่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 3 การเลือกรายชื่อส่งสำเนาคำสั่ง <br>
|
||||
หมายเลข 2 ไอคอนสำหรับคลิกเพื่อเพิ่มรายชื่อส่งสำเนาคำสั่ง<br>
|
||||
หมายเลข 3 ช่องตารางแสดงรายชื่อที่เลือกส่งสำเราคำสั่ง<br>
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกช่องทางการส่งสำเนาคำสั่ง<br>
|
||||
หมายเลข 5 ไอคอนสำหรับคลิกเพื่อลบรายชื่อการส่งสำเนาคำสั่ง<br>
|
||||
หมายเลข 6 ช่องสำหรับคลิกเพื่อกรอกข้อมูลค้นหารายชื่อส่งสำเนาคำสั่ง<br>
|
||||
หมายเลข 7 ปุ่มสำหรับคลิกเพื่อกลับไปเลือกรายชื่อ ขั้นตอนที่ 2<br>
|
||||
หมายเลข 8 ปุ่มสำหรับคลิกเพื่อบันทึกข้อมูลรายชื่อส่งสำเนาคำสั่ง
|
||||
|
||||
|
||||
</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-checkbox-marked"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
เพื่อเลือกรายชื่อส่งสำเนาคำสั่ง หากทำการคลิกเลือกรายชื่อเสร็จสิ้นแล้ว ให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
บันทึก
|
||||
</span>
|
||||
และยืนยันการบันทึกข้อมูลการเพิ่มรายชื่อส่งสำเนาคำสั่ง และหากต้องการยกเลิกการเลือกรายชื่อ ให้คลิก
|
||||
<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>
|
||||
ระบบจะแสดงหน้าก่อนหน้านี้ หรือหน้าขั้นตอนที่ 3 เลือกรายชื่อส่งสำเนาคำสั่ง
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/07_commands/1_main/7-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">
|
||||
รูปภาพที่ 7 – 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">
|
||||
<p style="margin-top: 50px; margin-left: 10px">
|
||||
- ขั้นตอนที่ 4 รายละเอียดคำสั่งและแนบท้าย ให้ทำการคลิกเลือก “วันที่ลงนาม” ในตาราง “รายละเอียด” และทำการคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
บันทึก
|
||||
</span>
|
||||
เพื่อให้เอกสารคำสั่งลงวันที่ลงนามในเอกสาร จากนั้นทำการคลิกในหัวข้อ “คำสั่ง” และ “เอกสารแนบท้าย” และทำการดาวน์โหลดไฟล์ PDF ต่อไปทำการเอาไฟล์คำสั่ง PDF ที่ทำการดาวน์โหลดมาอัปโหลดลงในตาราง “คำสั่ง” ไฟล์คำสั่งและไฟล์เอกสารแนบท้าย จากนั้นและคลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
บันทึก
|
||||
</span>
|
||||
หากทำการคลิกบันทึกเสร็จแล้ว ระบบจะปรากฏไอคอน
|
||||
<q-icon
|
||||
name="mdi-eye"
|
||||
style="margin: 0 5px; color: #00aa86"
|
||||
size="xs"
|
||||
/>
|
||||
สำหรับดูเอกสารที่อัปโหลด และไอคอน
|
||||
<q-icon
|
||||
name="mdi-download"
|
||||
style="margin: 0 5px; color: red"
|
||||
size="xs"
|
||||
/>
|
||||
สำหรับดาวน์โหลดเอกสาร หากบันทึกและตรวจสอบเอกสารเสร็จสิ้นหมดแล้ว ให้ทำการใช้เมาส์คลิก
|
||||
<span
|
||||
style="
|
||||
background-color: #01435F;
|
||||
border: 1px solid #01435F;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
border-radius: 2px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
|
||||
"
|
||||
>
|
||||
ออกคำสั่ง
|
||||
</span>
|
||||
เลือก “ออกคำสั่งทันที” หากทำการคลิกออกคำสั่งเสร็จแล้ว จะไม่สามารถแก้ไขเอกสารคำสั่งได้อีก และหากคลิกออกคำสั่งเสร็จสิ้นแล้ว รายชื่อผู้สอบแข่งขันจะปรากฏในทะเบียนประวัติ ข้าราชการ กทม. สามัญ
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-img
|
||||
src="@/assets/manual/07_commands/1_main/7-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">
|
||||
รูปภาพที่ 7 – 7 คำสั่งและแนบท้ายรายงานออกคำสั่ง
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
หมายเลข 1 ช่องแสดงขั้นตอนการออกคำสั่ง ขั้นตอนที่ 4 การเลือกรายชื่อส่งสำเนาคำสั่ง <br>
|
||||
หมายเลข 2 ช่องสำหรับแสดงตัวอย่างเอกสารคำสั่ง <br>
|
||||
หมายเลข 3 ช่องสำหรับกรอกเลขที่คำสั่ง <br>
|
||||
หมายเลข 4 ช่องสำหรับคลิกเลือกปีที่ออกคำสั่ง <br>
|
||||
หมายเลข 5 ไอคอนสำหรับคลิกเพื่อดูตัวอย่างเอกสารเต็มจอ <br>
|
||||
หมายเลข 6 ไอคอนสำหรับคลิกเพื่อเลื่อนดูหน้าตัวอย่างเอกสารซ้าย-ขวา <br>
|
||||
หมายเลข 7 ไอคอนสำหรับดาวน์โหลดเอกสารคำสั่ง (ไฟล์ PDF, xlsx) <br>
|
||||
หมายเลข 8 ไอคอนสำหรับดาวน์โหลดเอกสารแนบท้าย (ไฟล์ PDF, xlsx) <br>
|
||||
หมายเลข 9 ช่องสำหรับคลิกเลือกไฟล์คำสั่งเพื่ออัปโหลด <br>
|
||||
หมายเลข 10 ไอคอนสำหรับดูเอกสารที่อัปโหลด และไอคอนดาวน์โหลดเอกสารที่อัปโหลด <br>
|
||||
หมายเลข 11 ช่องสำหรับคลิกเลือกไฟล์เอกสารแนบท้ายเพื่ออัปโหลด <br>
|
||||
หมายเลข 12 ไอคอนสำหรับดูเอกสารแนบท้ายที่อัปโหลด และไอคอนดาวน์โหลดเอกสารที่อัปโหลด <br>
|
||||
หมายเลข 13 ปุ่มสำหรับคลิกบันทึกเพื่ออัปโหลดเอกสารคำสั่งและเอกสารแนบท้าย <br>
|
||||
หมายเลข 14 ปุ่มสำหรับคลิกเพื่อย้อนไปขั้นตอนที่ 3 เลือกรายชื่อส่งสำเนา <br>
|
||||
หมายเลข 15 ปุ่มสำหรับคลิกเพื่อออกคำสั่งเอกสาร
|
||||
|
||||
</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/07_commands/1_main/7-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">
|
||||
รูปภาพที่ 7 – 8 ตัวอย่างเอกสารรายงานคำสั่ง
|
||||
</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/07_commands/1_main/7-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">
|
||||
รูปภาพที่ 7 – 9 ตัวอย่างเอกสารแนบท้ายคำสั่ง
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</q-card>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,843 +0,0 @@
|
|||
<template>
|
||||
<div :class="$style.div">
|
||||
<div :class="$style.inner">
|
||||
<div :class="$style.groupChild" />
|
||||
</div>
|
||||
<div :class="$style.child" />
|
||||
<div :class="$style.item" />
|
||||
<div :class="$style.rectangleDiv" />
|
||||
<img :class="$style.image1Icon" alt="" src="/image-1@2x.png" />
|
||||
<div :class="$style.child1" />
|
||||
<div :class="$style.rectangleParent">
|
||||
<div :class="$style.groupItem" />
|
||||
<div :class="$style.caption">ค้นหา</div>
|
||||
<img :class="$style.vectorIcon" alt="" src="/vector.svg" />
|
||||
</div>
|
||||
<div :class="$style.rectangleGroup">
|
||||
<div :class="$style.groupInner" />
|
||||
<div :class="$style.groupParent">
|
||||
<div :class="$style.rectangleContainer">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">โครงสร้างอัตรากำลัง</div>
|
||||
</div>
|
||||
<div :class="$style.groupDiv">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">ทะเบียนประวัติ</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent1">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">ทะเบียนประวัติลูกจ้าง</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent2">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">สรรหาบุคคล</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent3">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">ออกคำสั่ง</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent4">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">บรรจุ แต่งตั้ง ย้าย โอน</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent5">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">พ้นจากราชการ</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent6">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">เครื่องราชอิสริยาภรณ์</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent7">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">การลา</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent8">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div10">วินัย</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent9">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">ความสามารถพิเศษ</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent10">
|
||||
<div :class="$style.groupChild12" />
|
||||
<div :class="$style.div12">ข้อมูลหลัก</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent11">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div10">ปฏิบัติราชการพิเศษ</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent12">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div10">บันทึกวันที่ไม่ได้รับเงินเดือนฯ</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent13">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">อื่นๆ</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent14">
|
||||
<div :class="$style.groupChild1" />
|
||||
<div :class="$style.div1">เอกสารหลักฐาน</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.captionParent">
|
||||
<div :class="$style.caption1">
|
||||
<span>ระบบ</span>
|
||||
<span :class="$style.span">ทรัพยากรบุคคล</span>
|
||||
</div>
|
||||
<div :class="$style.caption2">Support</div>
|
||||
<div :class="$style.lineDiv" />
|
||||
</div>
|
||||
<div :class="$style.div17">เราจะช่วยคุณได้อย่างไร</div>
|
||||
<div :class="$style.div18">ข้อมูลหลัก</div>
|
||||
<img :class="$style.rectangleIcon" alt="" src="/rectangle-3464303@2x.png" />
|
||||
<div :class="$style.groupContainer">
|
||||
<div :class="$style.parent">
|
||||
<div :class="$style.div19">ขอบเขตของระบบข้อมูล</div>
|
||||
<div :class="$style.wrapper">
|
||||
<div :class="$style.div20">
|
||||
<ul :class="$style.ul">
|
||||
<li :class="$style.li">
|
||||
ระบบจัดการข้อมูลหลักเกี่ยวกับทรัพยากรบุคคลมีขอบเขตที่รวมถึงข้อมูลทั้งหมดที่เกี่ยวข้องกับพนักงานในองค์กร
|
||||
ข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้าง
|
||||
</li>
|
||||
</ul>
|
||||
<p :class="$style.p">
|
||||
หน่วยงาน, ข้อมูลข้าราชการ ข้อมูลลูกจ้าง, วันลา, และข้อมูลอื่นๆ
|
||||
ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.frameParent">
|
||||
<div :class="$style.container">
|
||||
<div :class="$style.div21">
|
||||
<ul :class="$style.ul">
|
||||
<li :class="$style.li">
|
||||
<span :class="$style.span1"
|
||||
>การเข้าถึงและบริหารจัดการข้อมูล</span
|
||||
>
|
||||
<span :class="$style.span2"> : </span>
|
||||
<span
|
||||
>การตรวจสอบและรักษาความปลอดภัยในการเข้าถึงข้อมูล การสร้าง,
|
||||
การอัปเดต, การลบข้อมูลตามความเหมาะสม
|
||||
และการจัดการสิทธิ์ในการเข้าถึงข้อมูลของบุคคลในองค์กร</span
|
||||
>
|
||||
</li>
|
||||
<li :class="$style.li">
|
||||
<span :class="$style.span1">การดูแลรักษาความเสถียร :</span>
|
||||
<span :class="$style.span4">
|
||||
การควบคุมฐานข้อมูล
|
||||
หรือระบบให้มีประสิทธิภาพและเสถียรภาพตลอดเวลา</span
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<span :class="$style.span1">การสำรองข้อมูล :</span>
|
||||
<span :class="$style.span2"> </span>
|
||||
<span :class="$style.span4"
|
||||
>การสำรองข้อมูลเพื่อป้องกันข้อมูลไม่สูญหายในกรณีของภัยคุกคามหรือปัญหาทางเทคนิคที่อาจเกิดขึ้น</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.div22">ขั้นตอนการดูแลระบบ</div>
|
||||
</div>
|
||||
<div :class="$style.frameChild" />
|
||||
<div :class="$style.frameItem" />
|
||||
<div :class="$style.group">
|
||||
<div :class="$style.div23">คำถามที่พบบ่อย</div>
|
||||
<div :class="$style.rectangleParent15">
|
||||
<div :class="$style.groupChild17" />
|
||||
<img :class="$style.layer1Icon" alt="" src="/layer-1.svg" />
|
||||
<div :class="$style.div24">
|
||||
วิธีเข้าถึงและปรับปรุงข้อมูลส่วนตัวของพนักงานคืออย่างไร?
|
||||
</div>
|
||||
<div :class="$style.div25">
|
||||
<ul :class="$style.ul">
|
||||
<li :class="$style.li">
|
||||
พนักงานสามารถเข้าถึงและปรับปรุงข้อมูลส่วนตัวของตนได้ผ่านระบบส่วนบุคคลบนพอร์ทัลล์ของพนักงาน
|
||||
การเข้าถึงข้อมูลส่วนตัวจะต้องผ่านการ
|
||||
</li>
|
||||
</ul>
|
||||
<p :class="$style.p">ตรวจสอบตัวตนและการสอบถามเพื่อความปลอดภัย</p>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent16">
|
||||
<div :class="$style.groupChild18" />
|
||||
<img :class="$style.layer1Icon" alt="" src="/layer-11.svg" />
|
||||
<div :class="$style.div24">
|
||||
มีข้อมูลที่สูญหายหรือข้อมูลที่ถูกลบโดยไม่ตั้งใจหรือไม่?
|
||||
</div>
|
||||
<div :class="$style.div27">
|
||||
<ul :class="$style.ul">
|
||||
ทางเรามีมาตรการความปลอดภัยที่เข้มงวดเพื่อป้องกันการสูญหายข้อมูล
|
||||
และมีการบันทึกการเข้าถึงและการดำเนินการกับข้อมูลทุกครั้ง
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.rectangleParent17">
|
||||
<div :class="$style.groupChild19" />
|
||||
<img :class="$style.layer1Icon" alt="" src="/layer-12.svg" />
|
||||
<div :class="$style.div24">
|
||||
มีมาตรการความปลอดภัยในการจัดเก็บและใช้ข้อมูลบุคคลหรือไม่?
|
||||
</div>
|
||||
<div :class="$style.div29">
|
||||
<ul :class="$style.ul">
|
||||
<li :class="$style.li">
|
||||
เรามีมาตรการความปลอดภัยที่เข้มงวดเพื่อป้องกันการเข้าถึงข้อมูลบุคคลภายนอกโดยไม่ได้รับอนุญาต
|
||||
มีการใช้เทคโนโลยีการเข้ารหัสและระบบการ
|
||||
</li>
|
||||
</ul>
|
||||
<p :class="$style.p">ตรวจสอบตัวตนเพื่อปกป้องข้อมูล</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Frame",
|
||||
});
|
||||
</script>
|
||||
<style module>
|
||||
.groupChild {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 0px;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: 0px 4px 20px rgba(224, 235, 240, 0.4);
|
||||
width: 1920px;
|
||||
height: 89px;
|
||||
}
|
||||
.inner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1920px;
|
||||
height: 89px;
|
||||
}
|
||||
.child {
|
||||
position: absolute;
|
||||
top: 396px;
|
||||
left: calc(50% - 422px);
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-white);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
border: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1166px;
|
||||
height: 709px;
|
||||
}
|
||||
.item {
|
||||
position: absolute;
|
||||
top: 396px;
|
||||
left: calc(50% - 422px);
|
||||
border-radius: var(--br-5xs) var(--br-5xs) 0px 0px;
|
||||
background-color: var(--color-lightseagreen);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
border: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1166px;
|
||||
height: 59px;
|
||||
}
|
||||
.rectangleDiv {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: calc(50% - 960px);
|
||||
background-color: var(--color-darkslategray-100);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
border: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1920px;
|
||||
height: 262px;
|
||||
}
|
||||
.image1Icon {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 0px;
|
||||
width: 1921px;
|
||||
height: 261px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.child1 {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 0px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#273238 15.1%,
|
||||
#273238 30.73%,
|
||||
rgba(39, 50, 56, 0.91) 41.67%,
|
||||
rgba(39, 50, 56, 0.87) 50%,
|
||||
rgba(39, 50, 56, 0.69) 66.67%,
|
||||
rgba(39, 50, 56, 0.33) 77.08%,
|
||||
rgba(39, 50, 56, 0) 88.02%
|
||||
);
|
||||
width: 1920px;
|
||||
height: 261px;
|
||||
}
|
||||
.groupItem {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0%;
|
||||
bottom: 0%;
|
||||
left: calc(50% - 608.5px);
|
||||
border-radius: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid var(--input-outline-default);
|
||||
box-sizing: border-box;
|
||||
width: 1217px;
|
||||
}
|
||||
.caption {
|
||||
position: absolute;
|
||||
top: 25.81%;
|
||||
left: 6.14%;
|
||||
line-height: 150%;
|
||||
}
|
||||
.vectorIcon {
|
||||
position: absolute;
|
||||
height: 38.71%;
|
||||
width: 2%;
|
||||
top: 30.65%;
|
||||
right: 95.64%;
|
||||
bottom: 30.65%;
|
||||
left: 2.37%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
max-height: 100%;
|
||||
}
|
||||
.rectangleParent {
|
||||
position: absolute;
|
||||
height: 5.17%;
|
||||
top: 18.08%;
|
||||
bottom: 76.75%;
|
||||
left: calc(50% - 608px);
|
||||
width: 1217px;
|
||||
color: rgba(116, 116, 116, 0.52);
|
||||
font-family: var(--font-noto-sans);
|
||||
}
|
||||
.groupInner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: calc(50% - 145.5px);
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 291px;
|
||||
height: 554px;
|
||||
}
|
||||
.groupChild1 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border-radius: var(--br-8xs);
|
||||
background-color: var(--color-whitesmoke-100);
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
opacity: 0;
|
||||
}
|
||||
.div1 {
|
||||
position: absolute;
|
||||
top: 10.1px;
|
||||
left: 26px;
|
||||
line-height: 24px;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
width: 161px;
|
||||
height: 24.52px;
|
||||
}
|
||||
.rectangleContainer {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.groupDiv {
|
||||
position: absolute;
|
||||
top: 99px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent1 {
|
||||
position: absolute;
|
||||
top: 148px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent2 {
|
||||
position: absolute;
|
||||
top: 198px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent3 {
|
||||
position: absolute;
|
||||
top: 247px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent4 {
|
||||
position: absolute;
|
||||
top: 296px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent5 {
|
||||
position: absolute;
|
||||
top: 345px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent6 {
|
||||
position: absolute;
|
||||
top: 394px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent7 {
|
||||
position: absolute;
|
||||
top: 443px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.div10 {
|
||||
position: absolute;
|
||||
top: 10.1px;
|
||||
left: 26px;
|
||||
line-height: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.rectangleParent8 {
|
||||
position: absolute;
|
||||
top: 493px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent9 {
|
||||
position: absolute;
|
||||
top: 689px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.groupChild12 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border-radius: var(--br-8xs);
|
||||
background-color: rgba(0, 137, 226, 0.04);
|
||||
border: 1px solid #fafafa;
|
||||
box-sizing: border-box;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.div12 {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 26px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
height: 24.52px;
|
||||
}
|
||||
.rectangleParent10 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
color: #0089e2;
|
||||
}
|
||||
.rectangleParent11 {
|
||||
position: absolute;
|
||||
top: 738px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent12 {
|
||||
position: absolute;
|
||||
top: 787px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent13 {
|
||||
position: absolute;
|
||||
top: 836px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.rectangleParent14 {
|
||||
position: absolute;
|
||||
top: 885px;
|
||||
left: 0px;
|
||||
width: 274px;
|
||||
height: 44px;
|
||||
}
|
||||
.groupParent {
|
||||
position: absolute;
|
||||
top: 7.09px;
|
||||
left: 8px;
|
||||
width: 274px;
|
||||
height: 538.29px;
|
||||
overflow: auto;
|
||||
}
|
||||
.rectangleGroup {
|
||||
position: absolute;
|
||||
top: 396px;
|
||||
left: calc(50% - 744px);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
width: 291px;
|
||||
height: 554px;
|
||||
font-size: var(--body-2-light-size);
|
||||
}
|
||||
.span {
|
||||
color: var(--color-lightseagreen);
|
||||
}
|
||||
.caption1 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 14px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
width: 181px;
|
||||
height: 24px;
|
||||
}
|
||||
.caption2 {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #818181;
|
||||
}
|
||||
.lineDiv {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -1px;
|
||||
border-right: 2px solid var(--text-body-black);
|
||||
box-sizing: border-box;
|
||||
width: 2px;
|
||||
height: 38px;
|
||||
}
|
||||
.captionParent {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 205px;
|
||||
width: 195px;
|
||||
height: 48px;
|
||||
color: var(--color-darkslategray-100);
|
||||
}
|
||||
.div17 {
|
||||
position: absolute;
|
||||
top: 162px;
|
||||
left: 352px;
|
||||
font-size: 32px;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--color-white);
|
||||
}
|
||||
.div18 {
|
||||
position: absolute;
|
||||
top: 415px;
|
||||
left: 588px;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--color-white);
|
||||
}
|
||||
.rectangleIcon {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 142px;
|
||||
border-radius: 126px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.div19 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.li {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.ul {
|
||||
margin: 0;
|
||||
padding-left: var(--padding-2xl);
|
||||
}
|
||||
.p {
|
||||
margin: 0;
|
||||
}
|
||||
.div20 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 24px;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
width: 1032px;
|
||||
}
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
left: 0px;
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-whitesmoke-200);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
border: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1070px;
|
||||
height: 68px;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-inherit);
|
||||
font-family: var(--font-inherit);
|
||||
}
|
||||
.parent {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 27px;
|
||||
width: 1070px;
|
||||
height: 117px;
|
||||
}
|
||||
.span1 {
|
||||
font-weight: 600;
|
||||
font-family: var(--body-2-light);
|
||||
}
|
||||
.span2 {
|
||||
font-weight: 500;
|
||||
font-family: var(--body-2-light);
|
||||
}
|
||||
.span4 {
|
||||
font-family: var(--body-2-light);
|
||||
}
|
||||
.div21 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 26px;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
width: 1014px;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
left: 0px;
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-whitesmoke-200);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
border: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1070px;
|
||||
height: 116px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.div22 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
font-size: var(--font-size-lg);
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.frameParent {
|
||||
position: absolute;
|
||||
top: 187px;
|
||||
left: 27px;
|
||||
width: 1070px;
|
||||
height: 165px;
|
||||
font-size: var(--font-inherit);
|
||||
}
|
||||
.frameChild {
|
||||
position: absolute;
|
||||
top: 157.5px;
|
||||
left: -0.5px;
|
||||
border-top: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1121px;
|
||||
height: 1px;
|
||||
}
|
||||
.frameItem {
|
||||
position: absolute;
|
||||
top: 390.5px;
|
||||
left: 1.5px;
|
||||
border-top: 1px solid var(--color-whitesmoke-300);
|
||||
box-sizing: border-box;
|
||||
width: 1121px;
|
||||
height: 1px;
|
||||
}
|
||||
.div23 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 2px;
|
||||
font-size: var(--font-size-lg);
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-body-black);
|
||||
}
|
||||
.groupChild17 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: calc(50% - 535px);
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-whitesmoke-200);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
width: 1070px;
|
||||
height: 104px;
|
||||
}
|
||||
.layer1Icon {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 27px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.div24 {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 61px;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
width: 819px;
|
||||
}
|
||||
.div25 {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
left: 52px;
|
||||
font-size: var(--font-inherit);
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-family: var(--font-inherit);
|
||||
color: var(--text-body-black);
|
||||
display: inline-block;
|
||||
width: 970px;
|
||||
height: 51px;
|
||||
}
|
||||
.rectangleParent15 {
|
||||
position: absolute;
|
||||
top: 49px;
|
||||
left: calc(50% - 535px);
|
||||
width: 1070px;
|
||||
height: 104px;
|
||||
}
|
||||
.groupChild18 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: calc(50% - 535px);
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-whitesmoke-200);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
width: 1070px;
|
||||
height: 86px;
|
||||
}
|
||||
.div27 {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
left: 52px;
|
||||
font-size: var(--font-inherit);
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-family: var(--font-inherit);
|
||||
color: var(--text-body-black);
|
||||
display: inline-block;
|
||||
width: 978px;
|
||||
height: 25px;
|
||||
}
|
||||
.rectangleParent16 {
|
||||
position: absolute;
|
||||
top: 178px;
|
||||
left: calc(50% - 535px);
|
||||
width: 1070px;
|
||||
height: 86px;
|
||||
}
|
||||
.groupChild19 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: calc(50% - 535px);
|
||||
border-radius: var(--br-5xs);
|
||||
background-color: var(--color-whitesmoke-200);
|
||||
box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
|
||||
width: 1070px;
|
||||
height: 106px;
|
||||
}
|
||||
.div29 {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
left: 52px;
|
||||
font-size: var(--font-inherit);
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 24px;
|
||||
font-family: var(--font-inherit);
|
||||
color: var(--text-body-black);
|
||||
display: inline-block;
|
||||
width: 978px;
|
||||
height: 55px;
|
||||
}
|
||||
.rectangleParent17 {
|
||||
position: absolute;
|
||||
top: 289px;
|
||||
left: calc(50% - 535px);
|
||||
width: 1070px;
|
||||
height: 106px;
|
||||
}
|
||||
.group {
|
||||
position: absolute;
|
||||
top: 424px;
|
||||
left: 27px;
|
||||
width: 1070px;
|
||||
height: 395px;
|
||||
font-size: var(--body-2-light-size);
|
||||
color: var(--color-lightseagreen);
|
||||
}
|
||||
.groupContainer {
|
||||
position: absolute;
|
||||
top: 484px;
|
||||
left: 561px;
|
||||
width: 1122px;
|
||||
height: 621px;
|
||||
overflow: auto;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
.div {
|
||||
position: relative;
|
||||
background-color: #f7f9fa;
|
||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
height: 1200px;
|
||||
text-align: left;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--text-body-black);
|
||||
font-family: var(--body-2-light);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import commandsmain from "@/modules/01_manual/components/7_commands/71_main.vue"
|
||||
import ehrtry from "@/modules/01_manual/components/7_commands/72_try.vue"
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
<div
|
||||
class="toptitle text-dark col-12 row items-center"
|
||||
style="padding-top: 40px"
|
||||
>
|
||||
คู่มือการใช้งานระบบจัดการระบบสรรหา
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-xs">
|
||||
<div
|
||||
id="recruitmain"
|
||||
name="1"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<commandsmain />
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="recruitSetting"
|
||||
name="2"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<ehrtry />
|
||||
</div>
|
||||
<!-- <div
|
||||
id="recruitManage"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
สอบแข่งขัน
|
||||
</div> -->
|
||||
<div
|
||||
id="recruitManage"
|
||||
name="3"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitManage />
|
||||
</div>
|
||||
<div
|
||||
id="recruitstati"
|
||||
name="4"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitstati />
|
||||
</div>
|
||||
<div
|
||||
id="recruitQualifiers"
|
||||
name="5"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitQualifiers />
|
||||
</div>
|
||||
<div
|
||||
id="recruitDisabilities"
|
||||
name="6"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitDisabilities />
|
||||
</div>
|
||||
<div
|
||||
id="recruitSelection"
|
||||
name="7"
|
||||
class="row col-12 information"
|
||||
style="padding-bottom: 60px"
|
||||
>
|
||||
<recruitSelection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,502 +1,9 @@
|
|||
const viewLogin = () => import("@/modules/01_manual/components/1_login/view.vue")
|
||||
const Mainlogin = () => import("@/modules/01_manual/components/1_login/01_Main.vue");
|
||||
const MainLog = () => import("@/modules/01_manual/components/1_login/02_login.vue");
|
||||
const Mainpass = () => import("@/modules/01_manual/components/1_login/03_Password.vue");
|
||||
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 viewDatamain = () => import("@/modules/01_manual/components/2_data/view.vue")
|
||||
const Datamain = () => import("@/modules/01_manual/components/2_data/21_Main.vue");
|
||||
const Dataabout = () => import("@/modules/01_manual/components/2_data/22_About.vue");
|
||||
const Datagov = () => import("@/modules/01_manual/components/2_data/23_Gov.vue");
|
||||
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 viewStructure = () => import("@/modules/01_manual/components/3_Structure/view.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 viewRegist = () => import("@/modules/01_manual/components/4_registration/view.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 viewRecruit = () => import("@/modules/01_manual/components/5_recruitment/view.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");
|
||||
|
||||
|
||||
const employeehistorymain = () => import("@/modules/01_manual/components/6_employeehistory/61_main.vue");
|
||||
|
||||
|
||||
const commandsmain = () => import("@/modules/01_manual/components/7_commands/71_main.vue");
|
||||
const ehrtry = () => import("@/modules/01_manual/components/7_commands/72_try.vue");
|
||||
|
||||
|
||||
|
||||
/****** 1 ********/
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: viewLogin,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
path: "/manual/:name",
|
||||
name: "Manual",
|
||||
component: () => import("@/modules/01_manual/MainPage.vue"),
|
||||
},
|
||||
// {
|
||||
// path: "/manual",
|
||||
// name: "manual",
|
||||
// component: Mainlogin,
|
||||
// meta: {
|
||||
// Auth: true,
|
||||
// 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: viewDatamain,
|
||||
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: viewStructure,
|
||||
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: viewRegist,
|
||||
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: viewRecruit,
|
||||
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",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Commandsmain",
|
||||
name: "commandsmain",
|
||||
component: commandsmain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: "/Employeehistorymain",
|
||||
name: "employeehistorymain",
|
||||
component: employeehistorymain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
path: "/ehrtry",
|
||||
name: "ehrtry",
|
||||
component: ehrtry,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [10],
|
||||
Role: "order",
|
||||
},
|
||||
}
|
||||
];
|
||||
] satisfies RouteRecordRaw[];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue