แก้ไขตาม task
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bf8fb777cf
commit
90a47d43ad
26 changed files with 2652 additions and 228 deletions
|
|
@ -217,7 +217,7 @@ onMounted(async () => {
|
|||
if (keycloak.tokenParsed) {
|
||||
await fetchroleUser(keycloak.tokenParsed.role);
|
||||
}
|
||||
|
||||
|
||||
await getDataNotification();
|
||||
myEventHandler(null, false);
|
||||
window.addEventListener("resize", (e: any) => {
|
||||
|
|
@ -440,8 +440,20 @@ const clickDelete = (id: string) => {
|
|||
<!-- header -->
|
||||
<q-header flat class="bg-grey-2 text-dark" height-hint="7">
|
||||
<q-toolbar style="padding: 0 2%">
|
||||
<q-btn 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
|
||||
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-space />
|
||||
|
|
@ -457,11 +469,24 @@ const clickDelete = (id: string) => {
|
|||
</q-btn>
|
||||
-->
|
||||
<!-- Notification -->
|
||||
<q-btn round dense flat size="13px" class="q-mx-md bg-grey-3" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
|
||||
:disable="notiList.length === 0">
|
||||
<q-btn
|
||||
round
|
||||
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-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length
|
||||
}}</q-badge>
|
||||
<q-badge
|
||||
rounded
|
||||
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]">
|
||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||
<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
|
||||
|
|
@ -484,8 +509,14 @@ const clickDelete = (id: string) => {
|
|||
date2Thai(n.timereceive)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"
|
||||
@click="clickDelete(n.id)"></q-btn>
|
||||
<q-btn
|
||||
size="sm"
|
||||
unelevated
|
||||
dense
|
||||
icon="mdi-close"
|
||||
class="mybtn q-mx-xs"
|
||||
@click="clickDelete(n.id)"
|
||||
></q-btn>
|
||||
</q-item>
|
||||
<q-separator color="grey-2" />
|
||||
</q-list>
|
||||
|
|
@ -509,7 +540,10 @@ const clickDelete = (id: string) => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</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">
|
||||
<q-avatar size="72px" color="grey-4">
|
||||
<q-icon name="mdi-account" color="grey-7" />
|
||||
|
|
@ -518,7 +552,14 @@ const clickDelete = (id: string) => {
|
|||
<div class="text-subtitle2 q-mt-md q-mb-xs text-center">
|
||||
{{ fullname }}
|
||||
</div>
|
||||
<q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /><!-- -->
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="ออกจากระบบ"
|
||||
push
|
||||
size="sm"
|
||||
v-close-popup
|
||||
@click="doLogout"
|
||||
/><!-- -->
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
|
|
@ -531,7 +572,13 @@ const clickDelete = (id: string) => {
|
|||
<q-list dense v-for="op in options" :key="op.label">
|
||||
<q-item clickable>
|
||||
<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 class="q-py-sm">{{
|
||||
op.label
|
||||
|
|
@ -543,8 +590,16 @@ const clickDelete = (id: string) => {
|
|||
</div>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
<q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round
|
||||
@click="toggleBtnRight" aria-label="Menu">
|
||||
<q-btn
|
||||
size="13px"
|
||||
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-btn>
|
||||
</q-toolbar>
|
||||
|
|
@ -552,47 +607,99 @@ const clickDelete = (id: string) => {
|
|||
<!-- end header -->
|
||||
|
||||
<!-- 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 -->
|
||||
<template v-slot:mini>
|
||||
<q-scroll-area class="fit mini-slot cursor-pointer">
|
||||
<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-separator color="grey-9" />
|
||||
<!-- เมนูย่อย ตอนย่อ -->
|
||||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<q-item clickable v-ripple :active="link === menuItem.label" @click="link = menuItem.label"
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === menuItem.label"
|
||||
@click="link = menuItem.label"
|
||||
active-class="text-primary menuActiveMini text-weight-medium"
|
||||
v-if="menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6 || menuItem.key == 7 || menuItem.key == 8">
|
||||
v-if="
|
||||
menuItem.key == 3 ||
|
||||
menuItem.key == 5 ||
|
||||
menuItem.key == 6 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 8 ||
|
||||
menuItem.key == 9
|
||||
"
|
||||
>
|
||||
<div class="row items-center no-wrap">
|
||||
<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>
|
||||
<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
|
||||
<q-tooltip
|
||||
anchor="center right"
|
||||
self="center left"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ menuItem.label }}
|
||||
</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">
|
||||
<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 ชั้น -->
|
||||
<div v-if="menuItem.key == 5">
|
||||
<q-item dense clickable v-if="subMenu.key !== 5.1">
|
||||
<q-item-section>{{ subMenu.label }}
|
||||
<q-item-section
|
||||
>{{ subMenu.label }}
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right" />
|
||||
</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-item v-for="subMenu2 in subMenu.children" :key="subMenu2.label"
|
||||
:to="{ name: `${subMenu2.path}` }" dense class="q-pl-md text-body2"
|
||||
active-class="text-primary active-item text-weight-medium" clickable>
|
||||
<q-item
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.label"
|
||||
: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-label>{{
|
||||
subMenu2.label
|
||||
|
|
@ -603,9 +710,14 @@ const clickDelete = (id: string) => {
|
|||
</q-menu>
|
||||
</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-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -613,9 +725,13 @@ const clickDelete = (id: string) => {
|
|||
</div>
|
||||
<!-- เมนูย่อย 1 ชั้น -->
|
||||
<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-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -625,14 +741,25 @@ const clickDelete = (id: string) => {
|
|||
</q-list>
|
||||
</q-menu>
|
||||
</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-avatar size="md" font-size="20px">
|
||||
<q-icon :name="menuItem.icon" />
|
||||
</q-avatar>
|
||||
</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 }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
|
|
@ -647,9 +774,16 @@ const clickDelete = (id: string) => {
|
|||
<q-scroll-area class="fit">
|
||||
<q-toolbar class="q-py-md">
|
||||
<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-md">
|
||||
<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">
|
||||
<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>
|
||||
|
|
@ -661,16 +795,27 @@ const clickDelete = (id: string) => {
|
|||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<!-- เมนูย่อย -->
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up" v-if="menuItem.key == 3 ||
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
class="menuSub"
|
||||
expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up"
|
||||
v-if="
|
||||
menuItem.key == 3 ||
|
||||
menuItem.key == 5 ||
|
||||
menuItem.key == 6 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 8
|
||||
">
|
||||
menuItem.key == 8 ||
|
||||
menuItem.key == 9
|
||||
"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<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>{{ menuItem.label }}</q-item-section>
|
||||
</template>
|
||||
|
|
@ -678,20 +823,38 @@ const clickDelete = (id: string) => {
|
|||
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
||||
<div v-if="menuItem.key == 5">
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
||||
<q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1"
|
||||
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-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu.label"
|
||||
v-if="subMenu.key !== 5.1"
|
||||
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-label class="font-400 subLabel">{{ subMenu2.label }}
|
||||
<q-item-label class="font-400 subLabel"
|
||||
>{{ subMenu2.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-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-label>{{ subMenu.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -699,9 +862,16 @@ const clickDelete = (id: string) => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- เมนูย่อย 1 ชั้น -->
|
||||
<q-item v-else dense 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
|
||||
v-else
|
||||
dense
|
||||
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-label class="font-400">{{
|
||||
subMenu.label
|
||||
|
|
@ -711,15 +881,26 @@ const clickDelete = (id: string) => {
|
|||
</q-expansion-item>
|
||||
|
||||
<!-- เมนูปกติ -->
|
||||
<q-item class="text-weight-medium menu" :active="activeMenu(menuItem.path)"
|
||||
active-class="text-primary active-item text-weight-bold menuActive" :to="{ name: `${menuItem.path}` }"
|
||||
clickable v-ripple dense exact v-else>
|
||||
<q-item
|
||||
class="text-weight-medium menu"
|
||||
:active="activeMenu(menuItem.path)"
|
||||
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-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-item-section>
|
||||
|
||||
|
|
@ -734,16 +915,37 @@ const clickDelete = (id: string) => {
|
|||
</q-drawer>
|
||||
|
||||
<!-- drawer page registry/:id -->
|
||||
<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScroll()" v-model="drawerR" :width="220"
|
||||
:breakpoint="1023">
|
||||
<q-drawer
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-if="tabScroll()"
|
||||
v-model="drawerR"
|
||||
:width="220"
|
||||
:breakpoint="1023"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item v-for="(tabItem, index) in tabList" :key="index" :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
|
||||
v-for="(tabItem, index) in tabList"
|
||||
:key="index"
|
||||
: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-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
|
||||
}}</span></q-item-label>
|
||||
<q-item-label
|
||||
><q-icon size="11px" name="mdi-circle-medium" /><span
|
||||
class="q-pl-xs"
|
||||
>{{ tabItem.label }}</span
|
||||
></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -751,16 +953,37 @@ const clickDelete = (id: string) => {
|
|||
</q-drawer>
|
||||
|
||||
<!-- drawer page placement2/detail/:id -->
|
||||
<q-drawer side="right" class="bg-grey-2" show-if-above v-if="tabScrollPlacement()" v-model="drawerR" :width="220"
|
||||
:breakpoint="1023">
|
||||
<q-drawer
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-if="tabScrollPlacement()"
|
||||
v-model="drawerR"
|
||||
:width="220"
|
||||
:breakpoint="1023"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item v-for="(tabItem, index) in tabListPlacement" :key="index" :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
|
||||
v-for="(tabItem, index) in tabListPlacement"
|
||||
:key="index"
|
||||
: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-label><q-icon size="11px" name="mdi-circle-medium" /><span class="q-pl-xs">{{ tabItem.label
|
||||
}}</span></q-item-label>
|
||||
<q-item-label
|
||||
><q-icon size="11px" name="mdi-circle-medium" /><span
|
||||
class="q-pl-xs"
|
||||
>{{ tabItem.label }}</span
|
||||
></q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue