changes
This commit is contained in:
Viet An
@@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<nav class="navbar is-fixed-top has-shadow px-3" role="navigation">
|
||||
<nav
|
||||
class="navbar is-fixed-top has-shadow px-3"
|
||||
role="navigation"
|
||||
>
|
||||
<div class="navbar-brand mr-5">
|
||||
<span class="navbar-item">
|
||||
<SvgIcon v-bind="{ name: 'dot.svg', size: 18, type: 'primary' }" />
|
||||
<span class="fsb-20 has-text-primary">HRM</span>
|
||||
<span class="fsb-18 has-text-primary">HRM</span>
|
||||
</span>
|
||||
<a
|
||||
role="button"
|
||||
@@ -20,19 +23,39 @@
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-menu" id="navMenu">
|
||||
<div class="navbar-start" style="min-width: 650px">
|
||||
<template v-for="(v, i) in leftmenu" :key="i" :id="v.code">
|
||||
<a class="navbar-item px-2" v-if="!v.submenu" @click="changeTab(v)">
|
||||
<div
|
||||
class="navbar-menu"
|
||||
id="navMenu"
|
||||
>
|
||||
<div
|
||||
class="navbar-start"
|
||||
style="min-width: 650px"
|
||||
>
|
||||
<template
|
||||
v-for="(v, i) in leftmenu"
|
||||
:key="i"
|
||||
:id="v.code"
|
||||
>
|
||||
<a
|
||||
class="navbar-item px-2"
|
||||
v-if="!v.submenu"
|
||||
@click="changeTab(v)"
|
||||
>
|
||||
<span
|
||||
:class="`fs-15 ${currentTab.code === v.code ? 'activetab' : ''}`"
|
||||
style="font-weight: 600; padding: 3px 4px"
|
||||
style="font-weight: 500; padding: 3px 5px"
|
||||
>
|
||||
{{ v[lang] }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable" v-else>
|
||||
<a class="navbar-item px-2" @click="changeTab(v)">
|
||||
<div
|
||||
class="navbar-item has-dropdown is-hoverable"
|
||||
v-else
|
||||
>
|
||||
<a
|
||||
class="navbar-item px-2"
|
||||
@click="changeTab(v)"
|
||||
>
|
||||
<span
|
||||
:class="`icon-text ${currentTab.code === v.code ? 'activetab' : ''}`"
|
||||
style="padding: 3px 4px"
|
||||
@@ -62,144 +85,88 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" @click="changeTab(tabConfig)" v-if="tabConfig">
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"
|
||||
></SvgIcon>
|
||||
<a
|
||||
v-if="!$store.login"
|
||||
@click="openLogInModal"
|
||||
class="navbar-item fs-14 px-2"
|
||||
>
|
||||
<span
|
||||
class="px-2 py-1"
|
||||
style="border-radius: 6px; border: 1px solid #204853"
|
||||
>Đăng nhập</span
|
||||
>
|
||||
</a>
|
||||
<a class="navbar-item" @click="openProfile()" v-if="avatar">
|
||||
<a
|
||||
class="navbar-item"
|
||||
@click="changeTab(tabConfig)"
|
||||
v-if="tabConfig"
|
||||
>
|
||||
<SvgIcon v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"></SvgIcon>
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item"
|
||||
@click="openProfile()"
|
||||
v-if="avatar && $store.login"
|
||||
>
|
||||
<Avatarbox v-bind="avatar"></Avatarbox>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-if="showModal"
|
||||
v-bind="showModal"
|
||||
@close="showModal = undefined"
|
||||
/>
|
||||
</nav>
|
||||
</template>
|
||||
<script setup>
|
||||
import { watch } from 'vue';
|
||||
import { watch } from "vue";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const emit = defineEmits(['changetab', 'langChanged']);
|
||||
const emit = defineEmits(["changetab", "langChanged"]);
|
||||
const { $find, $filter, $findIndex, $store } = useNuxtApp();
|
||||
const lang = ref($store.lang);
|
||||
// let menu = $filter($store.common, { category: 'topmenu' });
|
||||
// console.log('menu', menu);
|
||||
const menu = [
|
||||
{
|
||||
id: 1,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'dashboard',
|
||||
vi: 'Dashboard',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Dashboard',
|
||||
component: 'DashboardMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'hrm',
|
||||
vi: 'Quản lý nhân sự',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'HRM',
|
||||
component: 'HRMMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'rollcall',
|
||||
vi: 'Chấm công',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Rollcall',
|
||||
component: 'RollcallMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'salary',
|
||||
vi: 'Tính lương',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Salary',
|
||||
component: 'SalaryMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'kpi_efficiency',
|
||||
vi: 'KPI & Hiệu suất',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Kpi',
|
||||
component: 'KpiMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
category: 'topmenu',
|
||||
classify: 'left',
|
||||
code: 'employee',
|
||||
vi: 'Cổng nhân viên',
|
||||
link: null,
|
||||
detail: {
|
||||
base: 'Employee',
|
||||
component: 'EmployeeMaster',
|
||||
},
|
||||
index: 0,
|
||||
},
|
||||
];
|
||||
if ($store.rights.length > 0) {
|
||||
menu = menu.filter((v) => $findIndex($store.rights, { setting: v.id }) >= 0);
|
||||
}
|
||||
// if (menu.length === 0) {
|
||||
// $snackbar(
|
||||
// $store.lang === 'vi'
|
||||
// ? 'Bạn không có quyền truy cập'
|
||||
// : 'You do not have permission to access.',
|
||||
// );
|
||||
|
||||
// if ($store.rights.length > 0) {
|
||||
// menu = menu.filter((v) => $findIndex($store.rights, { setting: v.id }) >= 0);
|
||||
// }
|
||||
// menu.map((v) => {
|
||||
// let arr = $filter($store.common, { category: 'submenu', classify: v.code });
|
||||
// if ($store.rights.length > 0) {
|
||||
// arr = arr.filter((x) => $findIndex($store.rights, { setting: x.id }) >= 0);
|
||||
// }
|
||||
// v.submenu = arr.length > 0 ? arr : null;
|
||||
// });
|
||||
const leftmenu = $filter(menu, { category: 'topmenu', classify: 'left' });
|
||||
let currentTab = ref(leftmenu.length > 0 ? leftmenu[0] : undefined);
|
||||
|
||||
const showModal = ref();
|
||||
function openLogInModal() {
|
||||
showModal.value = {
|
||||
component: "LogIn",
|
||||
width: "400px",
|
||||
height: "176px",
|
||||
title: "Đăng nhập",
|
||||
};
|
||||
}
|
||||
|
||||
let leftmenu = ref(
|
||||
!$store.login
|
||||
? $store.menu.slice(0, -1)
|
||||
: $store.login.fullname === "User"
|
||||
? $store.menu.filter((m) => m.view)
|
||||
: $store.menu,
|
||||
);
|
||||
let currentTab = ref(leftmenu.value.length > 0 ? leftmenu.value[0] : undefined);
|
||||
const subTab = ref();
|
||||
const tabConfig = $find(menu, { code: 'configuration' });
|
||||
const tabConfig = $find($store.menu, { code: "configuration" });
|
||||
const avatar = ref();
|
||||
const isAdmin = ref();
|
||||
const handleClick = function () {
|
||||
const target = document.getElementById('burger');
|
||||
target.classList.toggle('is-active');
|
||||
const target1 = document.getElementById('navMenu');
|
||||
target1.classList.toggle('is-active');
|
||||
const target = document.getElementById("burger");
|
||||
target.classList.toggle("is-active");
|
||||
const target1 = document.getElementById("navMenu");
|
||||
target1.classList.toggle("is-active");
|
||||
};
|
||||
const closeMenu = function () {
|
||||
if (!document) return;
|
||||
const target = document.getElementById('burger');
|
||||
const target1 = document.getElementById('navMenu');
|
||||
const target = document.getElementById("burger");
|
||||
const target1 = document.getElementById("navMenu");
|
||||
if (!target) return;
|
||||
if (target.classList.contains('is-active')) {
|
||||
target.classList.remove('is-active');
|
||||
target1.classList.remove('is-active');
|
||||
if (target.classList.contains("is-active")) {
|
||||
target.classList.remove("is-active");
|
||||
target1.classList.remove("is-active");
|
||||
}
|
||||
};
|
||||
function changeTab(tab, subtab) {
|
||||
@@ -208,35 +175,31 @@ function changeTab(tab, subtab) {
|
||||
}
|
||||
currentTab.value = tab;
|
||||
subTab.value = subtab;
|
||||
emit('changetab', tab, subtab);
|
||||
emit("changetab", tab, subtab);
|
||||
closeMenu();
|
||||
let query = subtab
|
||||
? { tab: tab.code, subtab: subtab.code }
|
||||
: { tab: tab.code };
|
||||
let query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
|
||||
router.push({ query: query });
|
||||
}
|
||||
function openProfile() {
|
||||
let modal = {
|
||||
component: 'user/Profile',
|
||||
width: '1100px',
|
||||
height: '360px',
|
||||
title: $store.lang === 'vi' ? 'Thông tin cá nhân' : '"User profile"',
|
||||
component: "user/Profile",
|
||||
width: "1100px",
|
||||
height: "360px",
|
||||
title: $store.lang === "vi" ? "Thông tin cá nhân" : '"User profile"',
|
||||
};
|
||||
$store.commit('showmodal', modal);
|
||||
$store.commit("showmodal", modal);
|
||||
}
|
||||
let found = route.query.tab
|
||||
? $find(menu, { code: route.query.tab })
|
||||
: undefined;
|
||||
let found = route.query.tab ? $find($store.menu, { code: route.query.tab }) : undefined;
|
||||
if (found || currentTab.value) changeTab(found || currentTab.value);
|
||||
onMounted(() => {
|
||||
if (!$store.login) return;
|
||||
avatar.value = {
|
||||
image: null,
|
||||
text: $store.login.fullname.substring(0, 1).toUpperCase(),
|
||||
size: 'two',
|
||||
type: 'findata',
|
||||
size: "two",
|
||||
type: "findata",
|
||||
};
|
||||
isAdmin.value = $store.login.type__code === 'admin';
|
||||
isAdmin.value = $store.login.type__code === "admin";
|
||||
});
|
||||
watch(
|
||||
() => $store.login,
|
||||
@@ -245,10 +208,10 @@ watch(
|
||||
avatar.value = {
|
||||
image: null,
|
||||
text: $store.login.fullname.substring(0, 1).toUpperCase(),
|
||||
size: 'two',
|
||||
type: 'findata',
|
||||
size: "two",
|
||||
type: "findata",
|
||||
};
|
||||
isAdmin.value = $store.login.type__code === 'admin';
|
||||
isAdmin.value = $store.login.type__code === "admin";
|
||||
lang.value = $store.lang;
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user