184 lines
5 KiB
Vue
184 lines
5 KiB
Vue
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar'
|
|
import { ref } from 'vue'
|
|
// import keycloak from '@/plugins/keycloak'
|
|
import { useRoute } from 'vue-router'
|
|
import { menuList, options, notiList } from '../interface/main/index'
|
|
import keycloak from '@/plugins/keycloak'
|
|
|
|
const route = useRoute()
|
|
|
|
const $q = useQuasar()
|
|
const miniState = ref<boolean>(false)
|
|
const active = ref<number>(0)
|
|
const drawerL = ref<boolean>(false)
|
|
const fullname = ref<string>('')
|
|
const notiTrigger = ref<boolean>(false)
|
|
|
|
const toggleBtnLeft = () => {
|
|
if (window.innerWidth < 1024) {
|
|
drawerL.value = !drawerL.value
|
|
} else {
|
|
miniState.value = !miniState.value
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
|
|
* ปกติ path จะ active เมื่อ path นั้นมีค่า ตรงตัวมันเช่น /main
|
|
* แต่จะไม่ active เมื่อ path นั้น มี child path /main/อื่นๆ
|
|
* @param path string
|
|
*/
|
|
const activeMenu = (path: string) => {
|
|
if (path == 'dashboard' && route.fullPath == '/') return true
|
|
const bool = route.fullPath.includes(path)
|
|
return bool
|
|
}
|
|
|
|
/**
|
|
* logout keycloak
|
|
* confirm ก่อนออกจากระบบ
|
|
*/
|
|
const doLogout = () => {
|
|
$q.dialog({
|
|
title: 'ยืนยันการออกจากระบบ',
|
|
message: `ต้องการออกจากระบบใช้หรือไม่?`,
|
|
cancel: 'ยกเลิก',
|
|
ok: 'ยืนยัน',
|
|
persistent: true
|
|
}).onOk(() => {
|
|
keycloak.logout()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* ดิงชื่อผู้ใช้งานจาก keycloak
|
|
*/
|
|
// if (keycloak.tokenParsed != null) {
|
|
// fullname.value = keycloak.tokenParsed.name
|
|
// }
|
|
</script>
|
|
|
|
<!-- โครงเว็บ -->
|
|
<template>
|
|
<!-- แบบเก่า design แรก -->
|
|
<!-- <q-layout view="lHh Lpr lff"> -->
|
|
<!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด -->
|
|
<q-layout view="lHh LpR lff" class="bgColor text-dark">
|
|
<!-- header -->
|
|
<q-header flat class="bg-white text-white row justify-center header" height-hint="7">
|
|
<q-toolbar style="padding:0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
|
|
<q-toolbar-title shrink class="row items-center no-wrap">
|
|
<q-btn flat class="bg-white" dense round>
|
|
<q-avatar size="35px">
|
|
<img src="../assets/logo.png" />
|
|
</q-avatar>
|
|
</q-btn>
|
|
<div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
|
|
<div class="col-12 textline1">
|
|
ระบบทรัพยากรบุคคล
|
|
</div>
|
|
<div class="text-caption textline2">
|
|
กรุงเทพมหานคร
|
|
</div>
|
|
</div>
|
|
</q-toolbar-title>
|
|
<q-space/>
|
|
<q-btn v-if="$q.screen.gt.xs" class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" size="12px" label="ออกจากระบบ" flat v-close-popup @click="doLogout" />
|
|
<q-btn v-else class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" flat v-close-popup @click="doLogout" />
|
|
</q-toolbar>
|
|
</q-header>
|
|
<!-- end header -->
|
|
<q-page-container class="row justify-center">
|
|
<q-page style="padding:1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
|
|
<router-view :key="$route.fullPath" />
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style>
|
|
.bgColor {
|
|
/* background-image: url("../assets/bg.png");
|
|
background-size: cover;
|
|
background-size: 100%; */
|
|
background: #F6F9FA;
|
|
}
|
|
|
|
.tabNative {
|
|
color: grey;
|
|
padding-left: 8%;
|
|
border-radius: 100px 0px 0px 100px;
|
|
}
|
|
|
|
.tabActive {
|
|
padding-left: 8%;
|
|
background: #e4f2ff;
|
|
border-radius: 100px 0px 0px 100px;
|
|
}
|
|
|
|
.q-card {
|
|
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
|
|
}
|
|
.q-card--bordered {
|
|
border: 1px solid #92b4c847;
|
|
box-shadow: none !important;
|
|
}
|
|
.q-stepper{
|
|
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
|
|
}
|
|
.q-menu {
|
|
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
|
}
|
|
|
|
.toptitle {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.q-field--outlined .q-field__control {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.q-field--outlined .q-field__control:before,.q-field .q-field__control:before{
|
|
border-color: #c8d3db;
|
|
}
|
|
.q-field--outlined .q-icon {
|
|
color: #7474747f;
|
|
}
|
|
/* custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #d6dee1;
|
|
border-radius: 20px;
|
|
border: 6px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #a8bbbf;
|
|
}
|
|
|
|
.header{
|
|
border-bottom: 1px solid #92b4c847;
|
|
height: 50px;
|
|
}
|
|
.textline1{
|
|
font-size: 0.90rem;
|
|
line-height:1.2rem !important;
|
|
font-weight: 500;
|
|
}
|
|
.textline2{
|
|
line-height:1rem !important;
|
|
font-weight: 400;
|
|
color: #96a9ad;
|
|
}
|
|
</style>
|