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

แก้คำผิด

Browse source
This commit is contained in:
Warunee Tamkoo 2024-07-11 09:33:49 +07:00
parent 8ea824664d
commit d156c9e3c0
1 changed files with 867 additions and 615 deletions
Download patch file Download diff file Expand all files Collapse all files

584
src/views/MainLayout.vue
View file

@ -1,44 +1,56 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue" import { ref, onMounted, onUnmounted, watch } from "vue";
import keycloak from "@/plugins/keycloak" import keycloak from "@/plugins/keycloak";
import { useRoute } from "vue-router" import { useRoute } from "vue-router";
import { useDataStore } from "@/stores/data" import { useDataStore } from "@/stores/data";
import { storeToRefs } from "pinia" import { storeToRefs } from "pinia";
import { scroll, useQuasar } from "quasar" import { scroll, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http" import http from "@/plugins/http";
import config from "@/app.config" import config from "@/app.config";
import type { ScrollType, notiType, optionType } from "../interface/request/main/main" import type {
import { menuList } from "../interface/request/main/main" ScrollType,
import checkPermission from "@/plugins/checkPermission" notiType,
optionType,
} from "../interface/request/main/main";
import { menuList } from "../interface/request/main/main";
import checkPermission from "@/plugins/checkPermission";
// import { useroleUserDataStore } from "@/stores/roleUser"; // import { useroleUserDataStore } from "@/stores/roleUser";
const { setVerticalScrollPosition } = scroll const { setVerticalScrollPosition } = scroll;
const store = useDataStore() const store = useDataStore();
const route = useRoute() const route = useRoute();
const link = ref<string>("") const link = ref<string>("");
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, dialogRemove, success, messageError, date2Thai, dialogConfirm } = mixin const {
showLoader,
hideLoader,
dialogRemove,
success,
messageError,
date2Thai,
dialogConfirm,
} = mixin;
// const DataStore = useroleUserDataStore(); // const DataStore = useroleUserDataStore();
// const { fetchroleUser } = DataStore; // const { fetchroleUser } = DataStore;
const id = ref<string>("") const id = ref<string>("");
const $q = useQuasar() const $q = useQuasar();
const { loader } = storeToRefs(store) const { loader } = storeToRefs(store);
const { changeTab } = store const { changeTab } = store;
const miniState = ref<boolean>(false) const miniState = ref<boolean>(false);
const drawerR = ref<boolean>(false) const drawerR = ref<boolean>(false);
const rightActive = ref<boolean>(false) const rightActive = ref<boolean>(false);
const resize = ref<number>(0) const resize = ref<number>(0);
const active = ref<number>(0) const active = ref<number>(0);
const drawerL = ref<boolean>(false) const drawerL = ref<boolean>(false);
const fullname = ref<string>("") const fullname = ref<string>("");
const role = ref<string[]>([]) const role = ref<string[]>([]);
const notiTrigger = ref<boolean>(false) const notiTrigger = ref<boolean>(false);
const notiList = ref<notiType[]>([]) const notiList = ref<notiType[]>([]);
const options = ref<optionType[]>([ const options = ref<optionType[]>([
{ {
icon: "mdi-account-cog", icon: "mdi-account-cog",
@ -58,59 +70,64 @@ const options = ref<optionType[]>([
value: "op3", value: "op3",
color: "indigo", color: "indigo",
}, },
]) ]);
async function fetchmsgNoread() { async function fetchmsgNoread() {
await http await http
.get(config.API.msgNoread()) .get(config.API.msgNoread())
.then((res) => { .then((res) => {
totalNoti.value = res.data.result totalNoti.value = res.data.result;
}) })
.catch((err) => { .catch((err) => {
messageError($q, err) messageError($q, err);
}) });
} }
const statusLoad = ref<boolean>(false) const statusLoad = ref<boolean>(false);
const getDataNotification = async (index: number, type: string) => { const getDataNotification = async (index: number, type: string) => {
const thaiOptions: Intl.DateTimeFormatOptions = { const thaiOptions: Intl.DateTimeFormatOptions = {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
} };
await http await http
.get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`) .get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`)
.then((res: any) => { .then((res: any) => {
const response = res.data.result.data const response = res.data.result.data;
totalInbox.value = res.data.result.total totalInbox.value = res.data.result.total;
let list: notiType[] = [] let list: notiType[] = [];
if (type === "DEL") { if (type === "DEL") {
notiList.value = [] notiList.value = [];
} }
response.map((e: any) => { response.map((e: any) => {
list.push({ list.push({
id: e.id, id: e.id,
sender: e.createdFullName == "" || e.createdFullName == null ? "เจ้าหน้าที่"[0] : e.createdFullName[0], sender:
e.createdFullName == "" || e.createdFullName == null
? "เจ้าหน้าที่"[0]
: e.createdFullName[0],
body: e.body ?? "", body: e.body ?? "",
timereceive: `${date2Thai(e.receiveDate)} ${new Date(e.receiveDate).toLocaleTimeString("th-TH", thaiOptions)} น.`, timereceive: `${date2Thai(e.receiveDate)} ${new Date(
e.receiveDate
).toLocaleTimeString("th-TH", thaiOptions)} น.`,
isOpen: e.isOpen, isOpen: e.isOpen,
}) });
}) });
notiList.value.push(...list) notiList.value.push(...list);
statusLoad.value = totalInbox.value === 0 ? true : false statusLoad.value = totalInbox.value === 0 ? true : false;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e) messageError($q, e);
}) })
.finally(() => {}) .finally(() => {});
} };
/** /**
* toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
*/ */
const toggleBtnRight = () => { const toggleBtnRight = () => {
drawerR.value = !drawerR.value drawerR.value = !drawerR.value;
} };
/** /**
* toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
@ -118,21 +135,21 @@ const toggleBtnRight = () => {
*/ */
const toggleBtnLeft = () => { const toggleBtnLeft = () => {
if (window.innerWidth < 1024) { if (window.innerWidth < 1024) {
drawerL.value = !drawerL.value drawerL.value = !drawerL.value;
} else { } else {
miniState.value = !miniState.value miniState.value = !miniState.value;
}
} }
};
/** /**
* Event onScroll นำ ตำแหน่ง top ที่ scroll * Event onScroll นำ ตำแหน่ง top ที่ scroll
* ใช้ function updateScroll * ใช้ function updateScroll
*/ */
const onScroll = (scroll: ScrollType) => { const onScroll = (scroll: ScrollType) => {
const { position } = scroll const { position } = scroll;
updateScroll(position) updateScroll(position);
} };
/** /**
* updateScroll เป็น function active แทปด้านขวา * updateScroll เป็น function active แทปด้านขวา
@ -140,10 +157,10 @@ const onScroll = (scroll: ScrollType) => {
const updateScroll = (position: number) => { const updateScroll = (position: number) => {
// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
if (position === void 0) { if (position === void 0) {
position = document.documentElement.scrollTop || document.body.scrollTop position = document.documentElement.scrollTop || document.body.scrollTop;
} }
let last let last;
/** /**
* ถ้า last ไม่เท่ากับ undifind * ถ้า last ไม่เท่ากับ undifind
@ -151,20 +168,20 @@ const updateScroll = (position: number) => {
* และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
*/ */
if (last !== void 0) { if (last !== void 0) {
changeTab(last) changeTab(last);
const tocEl = document.getElementById("tab--" + last) const tocEl = document.getElementById("tab--" + last);
if (tocEl) { if (tocEl) {
tocEl.scrollIntoView({ block: "nearest" }) tocEl.scrollIntoView({ block: "nearest" });
}
} }
} }
};
/** /**
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
*/ */
const activeBtn = () => { const activeBtn = () => {
return route.name == "registryDetail" && rightActive.value return route.name == "registryDetail" && rightActive.value;
} };
/** /**
* เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
@ -176,22 +193,22 @@ onMounted(async () => {
// if (keycloak.tokenParsed) { // if (keycloak.tokenParsed) {
// await fetchroleUser(keycloak.tokenParsed.role); // await fetchroleUser(keycloak.tokenParsed.role);
// } // }
await fetchmsgNoread() await fetchmsgNoread();
// await getDataNotification(1, "NOMAL"); // await getDataNotification(1, "NOMAL");
myEventHandler(null, false) myEventHandler(null, false);
window.addEventListener("resize", (e: any) => { window.addEventListener("resize", (e: any) => {
myEventHandler(e, true) myEventHandler(e, true);
}) });
}) });
/** /**
* เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
*/ */
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", (e: any) => { window.removeEventListener("resize", (e: any) => {
myEventHandler(e, true) myEventHandler(e, true);
}) });
}) });
/** /**
* @param e event ของ resize * @param e event ของ resize
@ -205,24 +222,24 @@ onUnmounted(() => {
*/ */
const myEventHandler = (e: any, setSCroll: boolean) => { const myEventHandler = (e: any, setSCroll: boolean) => {
if (setSCroll) { if (setSCroll) {
resize.value = e.target.innerWidth resize.value = e.target.innerWidth;
} else { } else {
resize.value = window.innerWidth resize.value = window.innerWidth;
} }
if (resize.value < 1024) { if (resize.value < 1024) {
if (!rightActive.value) { if (!rightActive.value) {
rightActive.value = true rightActive.value = true;
} }
} else { } else {
if (rightActive.value) { if (rightActive.value) {
if (drawerR.value) { if (drawerR.value) {
rightActive.value = true rightActive.value = true;
} else { } else {
rightActive.value = false rightActive.value = false;
}
} }
} }
} }
};
/** /**
* ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
@ -231,10 +248,10 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
* @param path string * @param path string
*/ */
const activeMenu = (path: string) => { const activeMenu = (path: string) => {
const bool = route.name === path const bool = route.name === path;
return bool return bool;
} };
/** /**
* logout keycloak * logout keycloak
@ -249,66 +266,69 @@ const doLogout = () => {
}), }),
"ยืนยันการออกจากระบบ", "ยืนยันการออกจากระบบ",
"ต้องการออกจากระบบใช่หรือไม่?" "ต้องการออกจากระบบใช่หรือไม่?"
) );
} };
/** /**
* ดิงชื่อผู้ใช้งานจาก keycloak * ดิงชื่อผู้ใช้งานจาก keycloak
*/ */
if (keycloak.tokenParsed != null) { if (keycloak.tokenParsed != null) {
fullname.value = keycloak.tokenParsed.name fullname.value = keycloak.tokenParsed.name;
role.value = keycloak.tokenParsed.role role.value = keycloak.tokenParsed.role;
} }
const clickDelete = async (id: string, index: number) => { const clickDelete = async (id: string, index: number) => {
dialogRemove($q, async () => { dialogRemove($q, async () => {
showLoader() showLoader();
await http await http
.delete(config.API.msgId(id)) .delete(config.API.msgId(id))
.then(() => { .then(() => {
notiList.value.splice(index, 1) notiList.value.splice(index, 1);
success($q, "ลบข้อมูลสำเร็จ") success($q, "ลบข้อมูลสำเร็จ");
totalInbox.value-- totalInbox.value--;
}) })
.catch((e) => { .catch((e) => {
messageError($q, e) messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
notiList.value.length === 7 && getDataNotification(1, "DEL") notiList.value.length === 7 && getDataNotification(1, "DEL");
hideLoader() hideLoader();
}) });
}) });
} };
const totalInbox = ref<number>(0) const totalInbox = ref<number>(0);
const totalNoti = ref<number>(0) const totalNoti = ref<number>(0);
const page = ref<number>(0) const page = ref<number>(0);
function onLoad(index: any, done: any) { function onLoad(index: any, done: any) {
if (notiList.value.length < totalInbox.value || (notiList.value.length === 0 && totalInbox.value === 0)) { if (
page.value++ notiList.value.length < totalInbox.value ||
(notiList.value.length === 0 && totalInbox.value === 0)
) {
page.value++;
setTimeout(() => { setTimeout(() => {
done() done();
getDataNotification(page.value, "NOMAL") getDataNotification(page.value, "NOMAL");
}, 1500) }, 1500);
} }
} }
const handleButtonClick = () => { const handleButtonClick = () => {
const currentPath = route.name const currentPath = route.name;
const queryParams = { role: "admin" } // Replace with your query parameters const queryParams = { role: "admin" }; // Replace with your query parameters
const queryString = new URLSearchParams(queryParams).toString() const queryString = new URLSearchParams(queryParams).toString();
// Assuming config.generatePopupPath() returns a base URL // Assuming config.generatePopupPath() returns a base URL
const popupBasePath = config.generatePopupPath(currentPath) const popupBasePath = config.generatePopupPath(currentPath);
console.log(currentPath) console.log(currentPath);
if (popupBasePath) { if (popupBasePath) {
const popupPath = `${popupBasePath}?${queryString}` const popupPath = `${popupBasePath}?${queryString}`;
window.open(popupPath, "_blank") // Opens in a new tab/window window.open(popupPath, "_blank"); // Opens in a new tab/window
} else { } else {
console.log("No manual available for this page:", currentPath) console.log("No manual available for this page:", currentPath);
}
} }
};
watch( watch(
() => notiTrigger.value, () => notiTrigger.value,
@ -317,12 +337,12 @@ watch(
const updatedNotifications = notiList.value.map((item) => ({ const updatedNotifications = notiList.value.map((item) => ({
...item, ...item,
isOpen: true, isOpen: true,
})) }));
notiList.value = updatedNotifications notiList.value = updatedNotifications;
fetchmsgNoread() fetchmsgNoread();
} }
} }
) );
</script> </script>
<!-- โครงเว็บ --> <!-- โครงเว็บ -->
@ -334,8 +354,20 @@ watch(
<!-- header --> <!-- header -->
<q-header flat class="bg-grey-2 text-dark" height-hint="7"> <q-header flat class="bg-grey-2 text-dark" height-hint="7">
<q-toolbar style="padding: 0 2%"> <q-toolbar style="padding: 0 2%">
<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu"> <q-btn
<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" /> size="13px"
class="bg-grey-3"
flat
dense
round
@click="toggleBtnLeft"
aria-label="Menu"
>
<q-icon
:name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
size="20px"
color="grey-7"
/>
</q-btn> </q-btn>
<q-space /> <q-space />
@ -350,40 +382,100 @@ watch(
<q-icon name="mdi-magnify" size="20px" color="grey-7" /> <q-icon name="mdi-magnify" size="20px" color="grey-7" />
</q-btn> </q-btn>
--> -->
<q-btn round dense flat size="13px" class="bg-grey-3" :color="totalNoti === 0 ? 'grey-6' : 'grey-8'" @click="handleButtonClick()" style="margin-right: 10px"> <q-btn
round
dense
flat
size="13px"
class="bg-grey-3"
:color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
@click="handleButtonClick()"
style="margin-right: 10px"
>
<q-icon name="mdi-book-open-variant" size="18px" color="grey-7" /> <q-icon name="mdi-book-open-variant" size="18px" color="grey-7" />
<q-tooltip>คู่มือ</q-tooltip> <q-tooltip>คู่มือ</q-tooltip>
</q-btn> </q-btn>
<!-- Notification --> <!-- Notification -->
<q-btn round dense flat size="13px" class="bg-grey-3" :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"> <q-btn
round
dense
flat
size="13px"
class="bg-grey-3"
:color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
>
<q-icon name="mdi-bell" size="18px" color="grey-7" /> <q-icon name="mdi-bell" size="18px" color="grey-7" />
<q-badge rounded color="negative" text-color="white" floating v-if="totalNoti !== 0">{{ totalNoti }}</q-badge> <q-badge
rounded
color="negative"
text-color="white"
floating
v-if="totalNoti !== 0"
>{{ totalNoti }}</q-badge
>
<q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px"> <q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
<div class="q-px-md q-py-sm row col-12 items-center"> <div class="q-px-md q-py-sm row col-12 items-center">
<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div> <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
<q-space /> <q-space />
<div class="text-grey-5" style="font-size: 12px">ทั้งหมด {{ totalInbox }} ข้อความ</div> <div class="text-grey-5" style="font-size: 12px">
ทั้งหมด {{ totalInbox }} ข้อความ
</div>
</div> </div>
<q-infinite-scroll @load="onLoad" :offset="250" v-if="statusLoad === false"> <q-infinite-scroll
<div v-for="(n, index) in notiList" :key="index" class="caption q-pa-xs"> @load="onLoad"
<q-item v-ripple :class="!n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'" dense> :offset="250"
v-if="statusLoad === false"
>
<div
v-for="(n, index) in notiList"
:key="index"
class="caption q-pa-xs"
>
<q-item
v-ripple
:class="
!n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'
"
dense
>
<q-item-section avatar top style="min-width: 40px"> <q-item-section avatar top style="min-width: 40px">
<q-avatar color="primary" size="22px" text-color="white"> <q-avatar color="primary" size="22px" text-color="white">
<span class="text-weight-medium text-uppercase">{{ n.body[0] }}</span> <span class="text-weight-medium text-uppercase">{{
n.body[0]
}}</span>
</q-avatar> </q-avatar>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption class="text-black">{{ n.body }}</q-item-label> <q-item-label caption class="text-black">{{
<q-item-label caption class="row items-center text-grey-7">{{ n.timereceive }}</q-item-label> n.body
}}</q-item-label>
<q-item-label
caption
class="row items-center text-grey-7"
>{{ n.timereceive }}</q-item-label
>
</q-item-section> </q-item-section>
<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs" @click="clickDelete(n.id, index)"></q-btn> <q-btn
size="sm"
unelevated
dense
icon="mdi-close"
class="mybtn q-mx-xs"
@click="clickDelete(n.id, index)"
></q-btn>
</q-item> </q-item>
</div> </div>
<q-separator color="grey-2" /> <q-separator color="grey-2" />
<template v-slot:loading v-if="notiList.length < totalInbox || (notiList.length === 0 && totalInbox === 0)"> <template
v-slot:loading
v-if="
notiList.length < totalInbox ||
(notiList.length === 0 && totalInbox === 0)
"
>
<div class="row justify-center q-my-md"> <div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" /> <q-spinner-dots color="primary" size="40px" />
</div> </div>
@ -392,8 +484,13 @@ watch(
<div class="q-pa-md" v-else> <div class="q-pa-md" v-else>
<q-banner rounded class="bg-amber-1 text-center"> <q-banner rounded class="bg-amber-1 text-center">
<div class="text-yellow-10"> <div class="text-yellow-10">
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" /> <q-icon
ไมมีข้อมูล name="mdi-alert-box"
class="q-mx-xs"
size="sm"
color="yellow-10"
/>
ไม่มีข้อมูล
</div> </div>
</q-banner> </q-banner>
</div> </div>
@ -410,12 +507,17 @@ watch(
</q-avatar> </q-avatar>
</q-item-section> </q-item-section>
<q-item-section class="text-left gt-xs"> <q-item-section class="text-left gt-xs">
<q-item-label class="text-caption text-weight-medium">{{ fullname }}</q-item-label> <q-item-label class="text-caption text-weight-medium">{{
fullname
}}</q-item-label>
<!-- <q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label> --> <!-- <q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label> -->
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
<div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px"> <div
class="row justify-center"
style="border-top: solid 3px #1bb19b !important; width: 273.797px"
>
<div class="column items-center col-12 q-py-md" color="grey-3"> <div class="column items-center col-12 q-py-md" color="grey-3">
<q-avatar size="72px" color="grey-4"> <q-avatar size="72px" color="grey-4">
<q-icon name="mdi-account" color="grey-7" /> <q-icon name="mdi-account" color="grey-7" />
@ -424,20 +526,39 @@ watch(
<div class="text-subtitle2 q-mt-md q-mb-xs text-center"> <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
{{ fullname }} {{ fullname }}
</div> </div>
<div id="#logout"><q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!-- --></div> <div id="#logout">
<q-btn
color="primary"
label="ออกจากระบบ"
push
size="sm"
v-close-popup
@click="doLogout"
/><!-- -->
</div>
</div> </div>
<div class="column col-12"> <div class="column col-12">
<q-separator /> <q-separator />
<div class="column q-pb-md justify-center"> <div class="column q-pb-md justify-center">
<div class="text-overline text-grey q-px-md q-pt-sm">เลือกโหมด</div> <div class="text-overline text-grey q-px-md q-pt-sm">
เลือกโหมด
</div>
<!-- <q-option-group v-model="group" :options="options" color="primary"/> --> <!-- <q-option-group v-model="group" :options="options" color="primary"/> -->
<q-list dense v-for="op in options" :key="op.label"> <q-list dense v-for="op in options" :key="op.label">
<q-item clickable> <q-item clickable>
<q-item-section avatar> <q-item-section avatar>
<q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" /> <q-avatar
:color="op.color"
text-color="white"
:icon="op.icon"
size="20px"
font-size="12px"
/>
</q-item-section> </q-item-section>
<q-item-section class="q-py-sm">{{ op.label }}</q-item-section> <q-item-section class="q-py-sm">{{
op.label
}}</q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
@ -445,7 +566,16 @@ watch(
</div> </div>
</q-btn-dropdown> </q-btn-dropdown>
</div> </div>
<q-btn size="13px" class="bg-blue-1" v-if="activeBtn()" flat dense round @click="toggleBtnRight" aria-label="Menu"> <q-btn
size="13px"
class="bg-blue-1"
v-if="activeBtn()"
flat
dense
round
@click="toggleBtnRight"
aria-label="Menu"
>
<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" /> <q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
</q-btn> </q-btn>
</q-toolbar> </q-toolbar>
@ -453,12 +583,25 @@ watch(
<!-- end header --> <!-- end header -->
<!-- drawer --> <!-- drawer -->
<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260" :breakpoint="1023" :mini="miniState"> <q-drawer
side="left"
class="text-white"
style="background: #273238"
v-model="drawerL"
show-if-above
:width="260"
:breakpoint="1023"
:mini="miniState"
>
<!-- ส่วนของเมนู mini --> <!-- ส่วนของเมนู mini -->
<template v-slot:mini> <template v-slot:mini>
<q-scroll-area class="fit mini-slot cursor-pointer"> <q-scroll-area class="fit mini-slot cursor-pointer">
<q-toolbar class="q-py-md"> <q-toolbar class="q-py-md">
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" /> <q-img
src="@/assets/logo.png"
spinner-color="white"
style="height: 32px; max-width: 32px"
/>
</q-toolbar> </q-toolbar>
<q-separator color="grey-9" /> <q-separator color="grey-9" />
<!-- เมนูย่อย ตอนย่อ --> <!-- เมนูย่อย ตอนย่อ -->
@ -489,23 +632,63 @@ watch(
> >
<div class="row items-center no-wrap"> <div class="row items-center no-wrap">
<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" /> <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" /> <q-icon
name="mdi-dots-vertical"
size="13px"
color="grey-6"
/>
</div> </div>
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]"> <q-tooltip
anchor="center right"
self="center left"
:offset="[10, 10]"
>
{{ menuItem.label }} {{ menuItem.label }}
</q-tooltip> </q-tooltip>
<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000"> <q-menu
anchor="top right"
self="top left"
:offset="[5, 0]"
style="background: #273238; z-index: 9000"
>
<q-list class="text-white q-py-sm"> <q-list class="text-white q-py-sm">
<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }"> <div
v-for="(subMenu, i) in menuItem.children"
:key="i"
:to="{ name: `${subMenu.path}` }"
>
<!-- เมนูย่อย 2 ชั้น --> <!-- เมนูย่อย 2 ชั้น -->
<div v-if="menuItem.key == 2 || menuItem.key == 7 || menuItem.key == 12 || menuItem.key == 13"> <div
<q-item dense clickable v-if="subMenu.key !== 2.0 && subMenu.key !== 7.1 && subMenu.key !== 12.0 && subMenu.key !== 13.0"> v-if="
<q-item-section>{{ subMenu.label }} </q-item-section> menuItem.key == 2 ||
menuItem.key == 7 ||
menuItem.key == 12 ||
menuItem.key == 13
"
>
<q-item
dense
clickable
v-if="
subMenu.key !== 2.0 &&
subMenu.key !== 7.1 &&
subMenu.key !== 12.0 &&
subMenu.key !== 13.0
"
>
<q-item-section
>{{ subMenu.label }}
</q-item-section>
<q-item-section side> <q-item-section side>
<q-icon name="keyboard_arrow_right" /> <q-icon name="keyboard_arrow_right" />
</q-item-section> </q-item-section>
<q-menu anchor="top end" self="top start" :offset="[5, 0]" style="background: #273238; z-index: 9000"> <q-menu
anchor="top end"
self="top start"
:offset="[5, 0]"
style="background: #273238; z-index: 9000"
>
<q-list class="text-white q-py-sm"> <q-list class="text-white q-py-sm">
<q-item <q-item
v-for="subMenu2 in subMenu.children" v-for="subMenu2 in subMenu.children"
@ -517,14 +700,23 @@ watch(
clickable clickable
> >
<q-item-section> <q-item-section>
<q-item-label>{{ subMenu2.label }}</q-item-label> <q-item-label>{{
subMenu2.label
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-menu> </q-menu>
</q-item> </q-item>
<q-item v-else dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }"> <q-item
v-else
dense
class="q-pl-md q-pr-xl text-body2"
active-class="text-primary active-item text-weight-medium"
clickable
:to="{ name: `${subMenu.path}` }"
>
<q-item-section> <q-item-section>
<q-item-label>{{ subMenu.label }}</q-item-label> <q-item-label>{{ subMenu.label }}</q-item-label>
</q-item-section> </q-item-section>
@ -532,7 +724,13 @@ watch(
</div> </div>
<!-- เมนูย่อย 1 ชั้น --> <!-- เมนูย่อย 1 ชั้น -->
<div v-else> <div v-else>
<q-item dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }"> <q-item
dense
class="q-pl-md q-pr-xl text-body2"
active-class="text-primary active-item text-weight-medium"
clickable
:to="{ name: `${subMenu.path}` }"
>
<q-item-section> <q-item-section>
<q-item-label>{{ subMenu.label }}</q-item-label> <q-item-label>{{ subMenu.label }}</q-item-label>
</q-item-section> </q-item-section>
@ -542,13 +740,25 @@ watch(
</q-list> </q-list>
</q-menu> </q-menu>
</q-item> </q-item>
<q-item clickable v-ripple :to="{ name: `${menuItem.path}` }" :active="link === menuItem.label" @click="link = menuItem.label" active-class="text-primary menuActiveMini" v-else> <q-item
clickable
v-ripple
:to="{ name: `${menuItem.path}` }"
:active="link === menuItem.label"
@click="link = menuItem.label"
active-class="text-primary menuActiveMini"
v-else
>
<q-item-section avatar> <q-item-section avatar>
<q-avatar size="md" font-size="20px"> <q-avatar size="md" font-size="20px">
<q-icon :name="menuItem.icon" /> <q-icon :name="menuItem.icon" />
</q-avatar> </q-avatar>
</q-item-section> </q-item-section>
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]"> <q-tooltip
anchor="center right"
self="center left"
:offset="[10, 10]"
>
{{ menuItem.label }} {{ menuItem.label }}
</q-tooltip> </q-tooltip>
</q-item> </q-item>
@ -563,9 +773,18 @@ watch(
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<q-toolbar class="q-py-md"> <q-toolbar class="q-py-md">
<q-toolbar-title shrink class="row items-center no-wrap"> <q-toolbar-title shrink class="row items-center no-wrap">
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" /> <q-img
src="@/assets/logo.png"
spinner-color="white"
style="height: 40px; max-width: 40px"
/>
<div class="row q-ml-sm"> <div class="row q-ml-sm">
<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">ระบบ<span class="text-primary">บริหารทรัพยากรบุคคล</span></div> <div
style="color: #ffffff; letter-spacing: 1px"
class="text-body2 text-weight-bolder"
>
ระบบ<span class="text-primary">บริหารทรัพยากรบุคคล</span>
</div>
<div class="text-caption text-white">ของกรุงเทพมหานคร</div> <div class="text-caption text-white">ของกรุงเทพมหานคร</div>
</div> </div>
</q-toolbar-title> </q-toolbar-title>
@ -597,19 +816,35 @@ watch(
> >
<template v-slot:header> <template v-slot:header>
<q-item-section avatar> <q-item-section avatar>
<q-avatar :icon="menuItem.icon" size="md" font-size="20px" /> <q-avatar
:icon="menuItem.icon"
size="md"
font-size="20px"
/>
</q-item-section> </q-item-section>
<q-item-section>{{ menuItem.label }}</q-item-section> <q-item-section>{{ menuItem.label }}</q-item-section>
</template> </template>
<!-- เมนูย่อย 2 ชั้น (สรรหา) --> <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
<div v-if="menuItem.key == 2 || menuItem.key == 7 || menuItem.key == 12 || menuItem.key == 13"> <div
v-if="
menuItem.key == 2 ||
menuItem.key == 7 ||
menuItem.key == 12 ||
menuItem.key == 13
"
>
<div v-for="(subMenu, i) in menuItem.children" :key="i"> <div v-for="(subMenu, i) in menuItem.children" :key="i">
<q-expansion-item <q-expansion-item
switch-toggle-side switch-toggle-side
dense-toggle dense-toggle
:label="subMenu.label" :label="subMenu.label"
v-if="subMenu.key !== 2.0 && subMenu.key !== 7.1 && subMenu.key !== 12.0 && subMenu.key !== 13.0" v-if="
subMenu.key !== 2.0 &&
subMenu.key !== 7.1 &&
subMenu.key !== 12.0 &&
subMenu.key !== 13.0
"
class="expan2" class="expan2"
dense dense
> >
@ -623,11 +858,20 @@ watch(
:to="{ name: `${subMenu2.path}` }" :to="{ name: `${subMenu2.path}` }"
> >
<q-item-section> <q-item-section>
<q-item-label class="font-400 subLabel">{{ subMenu2.label }} </q-item-label> <q-item-label class="font-400 subLabel"
>{{ subMenu2.label }}
</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-expansion-item> </q-expansion-item>
<q-item v-else dense class="menuSubHover" active-class="text-primary active-item text-weight-bold menuSubAct" clickable :to="{ name: `${subMenu.path}` }"> <q-item
v-else
dense
class="menuSubHover"
active-class="text-primary active-item text-weight-bold menuSubAct"
clickable
:to="{ name: `${subMenu.path}` }"
>
<q-item-section> <q-item-section>
<q-item-label>{{ subMenu.label }} </q-item-label> <q-item-label>{{ subMenu.label }} </q-item-label>
</q-item-section> </q-item-section>
@ -646,7 +890,9 @@ watch(
:to="{ name: `${subMenu.path}` }" :to="{ name: `${subMenu.path}` }"
> >
<q-item-section> <q-item-section>
<q-item-label class="font-400">{{ subMenu.label }}</q-item-label> <q-item-label class="font-400">{{
subMenu.label
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-expansion-item> </q-expansion-item>
@ -665,7 +911,13 @@ watch(
> >
<q-item-section avatar> <q-item-section avatar>
<q-avatar size="md" font-size="20px"> <q-avatar size="md" font-size="20px">
<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" /> <q-icon
:name="
menuItem.key === active
? menuItem.activeIcon
: menuItem.icon
"
/>
</q-avatar> </q-avatar>
</q-item-section> </q-item-section>