แก้ไข ทะเบียนประวัติลูกจ้าง >> Active menu
This commit is contained in:
parent
7374a6a417
commit
32b8d8ca92
1 changed files with 91 additions and 291 deletions
|
|
@ -275,6 +275,8 @@ const activeMenu = (path: string) => {
|
||||||
return false;
|
return false;
|
||||||
if (path == "registry" && route.fullPath.includes(`/registry-employee/edit`))
|
if (path == "registry" && route.fullPath.includes(`/registry-employee/edit`))
|
||||||
return false;
|
return false;
|
||||||
|
if (path == "registry" && route.fullPath.includes(`/registry-employee/add`))
|
||||||
|
return false;
|
||||||
|
|
||||||
if (path == "registry" && route.fullPath == "/") return false;
|
if (path == "registry" && route.fullPath == "/") return false;
|
||||||
// if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
|
// if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
|
||||||
|
|
@ -436,20 +438,8 @@ const clickDelete = (id: string) => {
|
||||||
<!-- 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
|
<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
|
||||||
size="13px"
|
<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
|
||||||
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 />
|
||||||
|
|
@ -465,24 +455,11 @@ const clickDelete = (id: string) => {
|
||||||
</q-btn>
|
</q-btn>
|
||||||
-->
|
-->
|
||||||
<!-- Notification -->
|
<!-- Notification -->
|
||||||
<q-btn
|
<q-btn round dense flat size="13px" class="q-mx-md bg-grey-3" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
|
||||||
round
|
:disable="notiList.length === 0">
|
||||||
dense
|
|
||||||
flat
|
|
||||||
size="13px"
|
|
||||||
class="q-mx-md bg-grey-3"
|
|
||||||
:color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
|
|
||||||
:disable="notiList.length === 0"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-bell" size="18px" color="grey-7" />
|
<q-icon name="mdi-bell" size="18px" color="grey-7" />
|
||||||
<q-badge
|
<q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length
|
||||||
rounded
|
}}</q-badge>
|
||||||
v-show="notiList.length > 0"
|
|
||||||
color="negative"
|
|
||||||
text-color="white"
|
|
||||||
floating
|
|
||||||
>{{ notiList.length }}</q-badge
|
|
||||||
>
|
|
||||||
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
|
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
|
||||||
<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>
|
||||||
|
|
@ -505,14 +482,8 @@ const clickDelete = (id: string) => {
|
||||||
date2Thai(n.timereceive)
|
date2Thai(n.timereceive)
|
||||||
}}</q-item-label>
|
}}</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
<q-btn
|
<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"
|
||||||
size="sm"
|
@click="clickDelete(n.id)"></q-btn>
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
icon="mdi-close"
|
|
||||||
class="mybtn q-mx-xs"
|
|
||||||
@click="clickDelete(n.id)"
|
|
||||||
></q-btn>
|
|
||||||
</q-item>
|
</q-item>
|
||||||
<q-separator color="grey-2" />
|
<q-separator color="grey-2" />
|
||||||
</q-list>
|
</q-list>
|
||||||
|
|
@ -536,10 +507,7 @@ const clickDelete = (id: string) => {
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</template>
|
</template>
|
||||||
<div
|
<div class="row justify-center" style="border-top: solid 3px #1bb19b !important; width: 273.797px">
|
||||||
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" />
|
||||||
|
|
@ -548,14 +516,7 @@ const clickDelete = (id: string) => {
|
||||||
<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>
|
||||||
<q-btn
|
<q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!-- -->
|
||||||
color="primary"
|
|
||||||
label="ออกจากระบบ"
|
|
||||||
push
|
|
||||||
size="sm"
|
|
||||||
v-close-popup
|
|
||||||
@click="doLogout"
|
|
||||||
/><!-- -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column col-12">
|
<div class="column col-12">
|
||||||
|
|
@ -568,13 +529,7 @@ const clickDelete = (id: string) => {
|
||||||
<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
|
<q-avatar :color="op.color" text-color="white" :icon="op.icon" size="20px" font-size="12px" />
|
||||||
: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">{{
|
<q-item-section class="q-py-sm">{{
|
||||||
op.label
|
op.label
|
||||||
|
|
@ -586,16 +541,8 @@ const clickDelete = (id: string) => {
|
||||||
</div>
|
</div>
|
||||||
</q-btn-dropdown>
|
</q-btn-dropdown>
|
||||||
</div>
|
</div>
|
||||||
<q-btn
|
<q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round
|
||||||
size="13px"
|
@click="toggleBtnRight" aria-label="Menu">
|
||||||
class="bg-blue-1"
|
|
||||||
v-if="activeBtn() || activeBtnPlacement()"
|
|
||||||
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>
|
||||||
|
|
@ -603,92 +550,47 @@ const clickDelete = (id: string) => {
|
||||||
<!-- end header -->
|
<!-- end header -->
|
||||||
|
|
||||||
<!-- drawer -->
|
<!-- drawer -->
|
||||||
<q-drawer
|
<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260"
|
||||||
side="left"
|
:breakpoint="1023" :mini="miniState">
|
||||||
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
|
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
|
||||||
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" />
|
||||||
<!-- เมนูย่อย ตอนย่อ -->
|
<!-- เมนูย่อย ตอนย่อ -->
|
||||||
<q-list padding>
|
<q-list padding>
|
||||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||||
<div v-if="role.includes(menuItem.role)">
|
<div v-if="role.includes(menuItem.role)">
|
||||||
<q-item
|
<q-item clickable v-ripple :active="link === menuItem.label" @click="link = menuItem.label"
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
:active="link === menuItem.label"
|
|
||||||
@click="link = menuItem.label"
|
|
||||||
active-class="text-primary menuActiveMini text-weight-medium"
|
active-class="text-primary menuActiveMini text-weight-medium"
|
||||||
v-if="menuItem.key == 3 || menuItem.key == 5"
|
v-if="menuItem.key == 3 || menuItem.key == 5">
|
||||||
>
|
|
||||||
<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
|
<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
|
||||||
name="mdi-dots-vertical"
|
|
||||||
size="13px"
|
|
||||||
color="grey-6"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<q-tooltip
|
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
||||||
anchor="center right"
|
|
||||||
self="center left"
|
|
||||||
:offset="[10, 10]"
|
|
||||||
>
|
|
||||||
{{ menuItem.label }}
|
{{ menuItem.label }}
|
||||||
</q-tooltip>
|
</q-tooltip>
|
||||||
<q-menu
|
<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
|
||||||
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
|
<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
|
||||||
v-for="(subMenu, i) in menuItem.children"
|
|
||||||
:key="i"
|
|
||||||
:to="{ name: `${subMenu.path}` }"
|
|
||||||
>
|
|
||||||
<!-- เมนูย่อย 2 ชั้น -->
|
<!-- เมนูย่อย 2 ชั้น -->
|
||||||
<div v-if="menuItem.key == 5">
|
<div v-if="menuItem.key == 5">
|
||||||
<q-item dense clickable v-if="subMenu.key !== 5.1">
|
<q-item dense clickable v-if="subMenu.key !== 5.1">
|
||||||
<q-item-section
|
<q-item-section>{{ subMenu.label }}
|
||||||
>{{ subMenu.label }}
|
|
||||||
</q-item-section>
|
</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
|
<q-menu anchor="top end" self="top start" :offset="[5, 0]"
|
||||||
anchor="top end"
|
style="background: #273238; z-index: 9000">
|
||||||
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" :key="subMenu2.label"
|
||||||
v-for="subMenu2 in subMenu.children"
|
:to="{ name: `${subMenu2.path}` }" dense class="q-pl-md text-body2"
|
||||||
:key="subMenu2.label"
|
active-class="text-primary active-item text-weight-medium" clickable>
|
||||||
:to="{ name: `${subMenu2.path}` }"
|
|
||||||
dense
|
|
||||||
class="q-pl-md text-body2"
|
|
||||||
active-class="text-primary active-item text-weight-medium"
|
|
||||||
clickable
|
|
||||||
>
|
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label>{{
|
<q-item-label>{{
|
||||||
subMenu2.label
|
subMenu2.label
|
||||||
|
|
@ -699,14 +601,9 @@ const clickDelete = (id: string) => {
|
||||||
</q-menu>
|
</q-menu>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
||||||
<q-item
|
<q-item v-else dense class="q-pl-md q-pr-xl text-body2"
|
||||||
v-else
|
active-class="text-primary active-item text-weight-medium" clickable
|
||||||
dense
|
:to="{ name: `${subMenu.path}` }">
|
||||||
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>
|
||||||
|
|
@ -714,13 +611,9 @@ const clickDelete = (id: string) => {
|
||||||
</div>
|
</div>
|
||||||
<!-- เมนูย่อย 1 ชั้น -->
|
<!-- เมนูย่อย 1 ชั้น -->
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<q-item
|
<q-item dense class="q-pl-md q-pr-xl text-body2"
|
||||||
dense
|
active-class="text-primary active-item text-weight-medium" clickable
|
||||||
class="q-pl-md q-pr-xl text-body2"
|
:to="{ name: `${subMenu.path}` }">
|
||||||
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>
|
||||||
|
|
@ -730,25 +623,14 @@ const clickDelete = (id: string) => {
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
</q-item>
|
</q-item>
|
||||||
<q-item
|
<q-item clickable v-ripple :to="{ name: `${menuItem.path}` }" :active="link === menuItem.label"
|
||||||
clickable
|
@click="link = menuItem.label" active-class="text-primary menuActiveMini" v-else>
|
||||||
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
|
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
||||||
anchor="center right"
|
|
||||||
self="center left"
|
|
||||||
:offset="[10, 10]"
|
|
||||||
>
|
|
||||||
{{ menuItem.label }}
|
{{ menuItem.label }}
|
||||||
</q-tooltip>
|
</q-tooltip>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
@ -763,16 +645,9 @@ const clickDelete = (id: string) => {
|
||||||
<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
|
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
|
||||||
src="@/assets/logo.png"
|
|
||||||
spinner-color="white"
|
|
||||||
style="height: 40px; max-width: 40px"
|
|
||||||
/>
|
|
||||||
<div class="row q-ml-md">
|
<div class="row q-ml-md">
|
||||||
<div
|
<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">
|
||||||
style="color: #ffffff; letter-spacing: 1px"
|
|
||||||
class="text-body2 text-weight-bolder"
|
|
||||||
>
|
|
||||||
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
|
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-caption text-white"> กรุงเทพมหานคร</div>
|
<div class="text-caption text-white"> กรุงเทพมหานคร</div>
|
||||||
|
|
@ -784,26 +659,16 @@ const clickDelete = (id: string) => {
|
||||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||||
<!-- เมนูย่อย -->
|
<!-- เมนูย่อย -->
|
||||||
<div v-if="role.includes(menuItem.role)">
|
<div v-if="role.includes(menuItem.role)">
|
||||||
<q-expansion-item
|
<q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down"
|
||||||
group="somegroup"
|
expanded-icon="mdi-chevron-up" v-if="menuItem.key == 3 ||
|
||||||
class="menuSub"
|
|
||||||
expand-icon="mdi-chevron-down"
|
|
||||||
expanded-icon="mdi-chevron-up"
|
|
||||||
v-if="
|
|
||||||
menuItem.key == 3 ||
|
|
||||||
menuItem.key == 5 ||
|
menuItem.key == 5 ||
|
||||||
menuItem.key == 6 ||
|
menuItem.key == 6 ||
|
||||||
menuItem.key == 7 ||
|
menuItem.key == 7 ||
|
||||||
menuItem.key == 8
|
menuItem.key == 8
|
||||||
"
|
">
|
||||||
>
|
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<q-item-section avatar>
|
<q-item-section avatar>
|
||||||
<q-avatar
|
<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
|
||||||
: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>
|
||||||
|
|
@ -811,38 +676,20 @@ const clickDelete = (id: string) => {
|
||||||
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
||||||
<div v-if="menuItem.key == 5">
|
<div v-if="menuItem.key == 5">
|
||||||
<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 dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1"
|
||||||
switch-toggle-side
|
class="expan2" dense>
|
||||||
dense-toggle
|
<q-item dense class="menuSubHover"
|
||||||
:label="subMenu.label"
|
active-class="text-primary active-item text-weight-bold menuSubAct" clickable
|
||||||
v-if="subMenu.key !== 5.1"
|
v-for="subMenu2 in subMenu.children" :key="subMenu2.key" :to="{ name: `${subMenu2.path}` }">
|
||||||
class="expan2"
|
|
||||||
dense
|
|
||||||
>
|
|
||||||
<q-item
|
|
||||||
dense
|
|
||||||
class="menuSubHover"
|
|
||||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
|
||||||
clickable
|
|
||||||
v-for="subMenu2 in subMenu.children"
|
|
||||||
:key="subMenu2.key"
|
|
||||||
:to="{ name: `${subMenu2.path}` }"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label class="font-400 subLabel"
|
<q-item-label class="font-400 subLabel">{{ subMenu2.label }}
|
||||||
>{{ subMenu2.label }}
|
|
||||||
</q-item-label>
|
</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-expansion-item>
|
</q-expansion-item>
|
||||||
<q-item
|
<q-item v-else dense class="menuSubHover"
|
||||||
v-else
|
active-class="text-primary active-item text-weight-bold menuSubAct" clickable
|
||||||
dense
|
:to="{ name: `${subMenu.path}` }">
|
||||||
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>
|
||||||
|
|
@ -850,16 +697,9 @@ const clickDelete = (id: string) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- เมนูย่อย 1 ชั้น -->
|
<!-- เมนูย่อย 1 ชั้น -->
|
||||||
<q-item
|
<q-item v-else dense class="menuSubHover"
|
||||||
v-else
|
active-class="text-primary active-item text-weight-bold menuSubAct" clickable
|
||||||
dense
|
v-for="(subMenu, j) in menuItem.children" :key="j" :to="{ name: `${subMenu.path}` }">
|
||||||
class="menuSubHover"
|
|
||||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
|
||||||
clickable
|
|
||||||
v-for="(subMenu, j) in menuItem.children"
|
|
||||||
:key="j"
|
|
||||||
:to="{ name: `${subMenu.path}` }"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label class="font-400">{{
|
<q-item-label class="font-400">{{
|
||||||
subMenu.label
|
subMenu.label
|
||||||
|
|
@ -869,26 +709,15 @@ const clickDelete = (id: string) => {
|
||||||
</q-expansion-item>
|
</q-expansion-item>
|
||||||
|
|
||||||
<!-- เมนูปกติ -->
|
<!-- เมนูปกติ -->
|
||||||
<q-item
|
<q-item class="text-weight-medium menu" :active="activeMenu(menuItem.path)"
|
||||||
class="text-weight-medium menu"
|
active-class="text-primary active-item text-weight-bold menuActive" :to="{ name: `${menuItem.path}` }"
|
||||||
:active="activeMenu(menuItem.path)"
|
clickable v-ripple dense exact v-else>
|
||||||
active-class="text-primary active-item text-weight-bold menuActive"
|
|
||||||
:to="{ name: `${menuItem.path}` }"
|
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
dense
|
|
||||||
exact
|
|
||||||
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
|
<q-icon :name="menuItem.key === active
|
||||||
:name="
|
? menuItem.activeIcon
|
||||||
menuItem.key === active
|
: menuItem.icon
|
||||||
? menuItem.activeIcon
|
" />
|
||||||
: menuItem.icon
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</q-avatar>
|
</q-avatar>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
|
|
||||||
|
|
@ -903,37 +732,16 @@ const clickDelete = (id: string) => {
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
|
|
||||||
<!-- drawer page registry/:id -->
|
<!-- drawer page registry/:id -->
|
||||||
<q-drawer
|
<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScroll()" v-model="drawerR" :width="220"
|
||||||
side="right"
|
:breakpoint="1023">
|
||||||
class="bg-grey-2"
|
|
||||||
show-if-above
|
|
||||||
v-if="tabScroll()"
|
|
||||||
v-model="drawerR"
|
|
||||||
:width="220"
|
|
||||||
:breakpoint="1023"
|
|
||||||
>
|
|
||||||
<q-scroll-area class="fit">
|
<q-scroll-area class="fit">
|
||||||
<q-list padding>
|
<q-list padding>
|
||||||
<q-item
|
<q-item v-for="(tabItem, index) in tabList" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
|
||||||
v-for="(tabItem, index) in tabList"
|
active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTab(tabItem.tag)" clickable
|
||||||
:key="index"
|
v-ripple dense exact @click="tagClick(tabItem.tag)">
|
||||||
:id="'tab--' + tabItem.tag"
|
|
||||||
class="tabNative"
|
|
||||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
|
||||||
:active="activeTab(tabItem.tag)"
|
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
dense
|
|
||||||
exact
|
|
||||||
@click="tagClick(tabItem.tag)"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label
|
<q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
|
||||||
><q-icon size="11px" name="mdi-circle-medium" /><span
|
}}</span></q-item-label>
|
||||||
class="q-pl-xs"
|
|
||||||
>{{ tabItem.label }}</span
|
|
||||||
></q-item-label
|
|
||||||
>
|
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
|
|
@ -941,37 +749,16 @@ const clickDelete = (id: string) => {
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
|
|
||||||
<!-- drawer page placement2/detail/:id -->
|
<!-- drawer page placement2/detail/:id -->
|
||||||
<q-drawer
|
<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScrollPlacement()" v-model="drawerR" :width="220"
|
||||||
side="right"
|
:breakpoint="1023">
|
||||||
class="bg-grey-2"
|
|
||||||
show-if-above
|
|
||||||
v-if="tabScrollPlacement()"
|
|
||||||
v-model="drawerR"
|
|
||||||
:width="220"
|
|
||||||
:breakpoint="1023"
|
|
||||||
>
|
|
||||||
<q-scroll-area class="fit">
|
<q-scroll-area class="fit">
|
||||||
<q-list padding>
|
<q-list padding>
|
||||||
<q-item
|
<q-item v-for="(tabItem, index) in tabListPlacement" :key="index" :id="'tab--' + tabItem.tag" class="tabNative"
|
||||||
v-for="(tabItem, index) in tabListPlacement"
|
active-class="text-blue-7 active-item text-weight-medium tabActive" :active="activeTabPlacement(tabItem.tag)"
|
||||||
:key="index"
|
clickable v-ripple dense exact @click="tagClickPlacement(tabItem.tag)">
|
||||||
:id="'tab--' + tabItem.tag"
|
|
||||||
class="tabNative"
|
|
||||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
|
||||||
:active="activeTabPlacement(tabItem.tag)"
|
|
||||||
clickable
|
|
||||||
v-ripple
|
|
||||||
dense
|
|
||||||
exact
|
|
||||||
@click="tagClickPlacement(tabItem.tag)"
|
|
||||||
>
|
|
||||||
<q-item-section>
|
<q-item-section>
|
||||||
<q-item-label
|
<q-item-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
|
||||||
><q-icon size="11px" name="mdi-circle-medium" /><span
|
}}</span></q-item-label>
|
||||||
class="q-pl-xs"
|
|
||||||
>{{ tabItem.label }}</span
|
|
||||||
></q-item-label
|
|
||||||
>
|
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
|
|
@ -993,6 +780,7 @@ const clickDelete = (id: string) => {
|
||||||
.menu .q-item__section--avatar {
|
.menu .q-item__section--avatar {
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
|
@ -1009,36 +797,44 @@ const clickDelete = (id: string) => {
|
||||||
.menuActiveMini {
|
.menuActiveMini {
|
||||||
background: #212a2f;
|
background: #212a2f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuSub .q-item {
|
.menuSub .q-item {
|
||||||
border-radius: 0 100px 100px 0;
|
border-radius: 0 100px 100px 0;
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expan2 .q-item {
|
.expan2 .q-item {
|
||||||
padding-left: 10%;
|
padding-left: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subLabel {
|
.subLabel {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-400 {
|
.font-400 {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expan2 .menuSubHover {
|
.expan2 .menuSubHover {
|
||||||
padding-left: 30%;
|
padding-left: 30%;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuSubHover {
|
.menuSubHover {
|
||||||
padding-left: 25%;
|
padding-left: 25%;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuSub .q-expansion-item__content {
|
.menuSub .q-expansion-item__content {
|
||||||
background: #212a2f;
|
background: #212a2f;
|
||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabNative {
|
.tabNative {
|
||||||
color: grey;
|
color: grey;
|
||||||
padding-left: 8%;
|
padding-left: 8%;
|
||||||
|
|
@ -1054,10 +850,12 @@ const clickDelete = (id: string) => {
|
||||||
.q-card {
|
.q-card {
|
||||||
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-card--bordered {
|
.q-card--bordered {
|
||||||
border: 1px solid #ededed;
|
border: 1px solid #ededed;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-menu {
|
.q-menu {
|
||||||
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
@ -1075,6 +873,7 @@ const clickDelete = (id: string) => {
|
||||||
.q-field--outlined .q-field__control:before {
|
.q-field--outlined .q-field__control:before {
|
||||||
border-color: #c8d3db;
|
border-color: #c8d3db;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnManu {
|
.btnManu {
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
border-radius: 0px 100px 100px 0px;
|
border-radius: 0px 100px 100px 0px;
|
||||||
|
|
@ -1083,6 +882,7 @@ const clickDelete = (id: string) => {
|
||||||
.q-field--outlined .q-icon {
|
.q-field--outlined .q-icon {
|
||||||
color: #7474747f;
|
color: #7474747f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-card__actions .q-btn--rectangle {
|
.q-card__actions .q-btn--rectangle {
|
||||||
padding: 0 14px !important;
|
padding: 0 14px !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue