You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
11 KiB
295 lines
11 KiB
<template>
|
|
<div style="position: sticky;top: 0;z-index: 1002;">
|
|
<header class="navbar">
|
|
<div class="container">
|
|
<!-- <button v-show="$store.state.app.device === 'mobile'" :aria-expanded="isShowMenuMobile" class="navbar-toggler" @click="isShowMenuMobile = !isShowMenuMobile">-->
|
|
<!-- <span class="navbar-toggler-icon" />-->
|
|
<!-- </button>-->
|
|
<div class="navbar-brand">
|
|
<router-link to="/">
|
|
<img class="navbar-brand__img" :src="brandImg" alt="">
|
|
</router-link>
|
|
</div>
|
|
<div v-show="$route.path !== '/dashboard'" class="toggle-sidebar" @click="toggleIframeSidebarOpened">
|
|
<i v-show="isIframeSidebarOpened" class="el-icon-s-fold" />
|
|
<i v-show="!isIframeSidebarOpened" class="el-icon-s-unfold" />
|
|
</div>
|
|
<div class="navbar-module">
|
|
<svg-icon icon-class="modules" class-name="modules__toggler" @click="isShowMenuMobile = !isShowMenuMobile" />
|
|
|
|
<transition name="fade">
|
|
<el-button v-if="isMenuScroll && scrollOffset > 0 && device === 'desktop'" class="navbar-module__scroll--lf" type="primary" icon="el-icon-caret-left" circle size="mini" @click="menuScroll('prev')" />
|
|
</transition>
|
|
<el-menu
|
|
id="navbar-menu"
|
|
text-color="hsla(0,0%,100%,.7)"
|
|
background-color="var(--theme-color)"
|
|
active-text-color="#fff"
|
|
:default-active="activeMenu"
|
|
mode="horizontal"
|
|
>
|
|
<Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
|
|
</el-menu>
|
|
<transition name="fade">
|
|
<el-button v-if="isMenuScroll && (scrollOffset < scrollMaxWidth) && device === 'desktop'" class="navbar-module__scroll--rt" type="primary" icon="el-icon-caret-right" circle size="mini" @click="menuScroll('next')" />
|
|
</transition>
|
|
|
|
</div>
|
|
<div class="navbar-nav flex-row order-md-last d-flex">
|
|
|
|
<div class="tool d-flex">
|
|
<template v-if="isFullscreen">
|
|
<div class="tool-item fullscreen" @click="fullscreen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
|
|
<path stroke-width="2" d="M 4 8 l 4 0 l 0 -4 M 16 4 l 0 4 l 4 0 M 20 16 l -4 0 l 0 4 M 8 20 l 0 -4 l -4 0" />
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="tool-item fullscreen" @click="fullscreen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
|
|
<path stroke-width="2" d="M 4 8 l 0 -4 l 4 0 M 16 4 l 4 0 l 0 4 M 20 16 l 0 4 l -4 0 M 8 20 l -4 0 l 0 -4" />
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
<theme-picker class="tool-item" />
|
|
<!-- <el-badge :is-dot="device === 'mobile'" :max="99" :value="12" class="tool-item">-->
|
|
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>-->
|
|
<!-- </el-badge>-->
|
|
</div>
|
|
<div class="nav-item">
|
|
<el-dropdown @command="userCommandHandle">
|
|
<a class="nav-link d-flex lh-1 text-reset p-0 nav-info">
|
|
<img class="avatar avatar-sm" style="" src="@/assets/face.png" alt="">
|
|
<div class="d-none d-xl-block ps-2">
|
|
<div>{{ name }}</div>
|
|
<div class="mt-1 small department" style="color: #eee;">{{ (department && department.name) ? department.name : '暂无部门' }}</div>
|
|
</div>
|
|
</a>
|
|
|
|
<el-dropdown-menu slot="dropdown" size="mini">
|
|
<el-dropdown-item command="attendance">
|
|
<SvgIcon icon-class="attendance" />
|
|
<span style="padding-left: 8px;">考勤打卡</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item command="password">
|
|
<SvgIcon icon-class="password" />
|
|
<span style="padding-left: 8px;">修改密码</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item divided command="debugger">
|
|
<SvgIcon icon-class="debugger" />
|
|
<span style="padding-left: 8px;">错误日志</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item divided command="logout">
|
|
<SvgIcon icon-class="logout" />
|
|
<span style="padding-left: 8px;">退出</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<header class="navbar-expand-md">
|
|
<!-- <div v-if="$store.state.app.device === 'desktop'" id="navbar-menu" class="navbar-collapse">-->
|
|
<!-- <el-menu-->
|
|
<!-- style="width: 100%;padding: 0 10px;"-->
|
|
<!-- :text-color="variables.menuText"-->
|
|
<!-- :background-color="variables.menuBg"-->
|
|
<!-- :active-text-color="variables.menuActiveText"-->
|
|
<!-- :default-active="activeMenu"-->
|
|
<!-- mode="horizontal"-->
|
|
<!-- >-->
|
|
<!-- <Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />-->
|
|
<!-- </el-menu>-->
|
|
<!-- </div>-->
|
|
|
|
<div id="navbar-menu-mobile" class="navbar-collapse collapse" :style="{ zIndex: zIndex }">
|
|
<transition name="fade-transform-y">
|
|
<div v-show="isShowMenuMobile" class="navbar">
|
|
<el-menu
|
|
unique-opened
|
|
style="width: 100%;padding: 0 6px;"
|
|
text-color="hsla(0,0%,100%,.7)"
|
|
background-color="transparent"
|
|
active-text-color="#fff"
|
|
:default-active="activeMenu"
|
|
@select="isShowMenuMobile = false"
|
|
>
|
|
<Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
|
|
</el-menu>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import variables from '@/styles/variables.scss'
|
|
import { mapGetters } from 'vuex'
|
|
import Item from './Item.vue'
|
|
import SvgIcon from '@/components/SvgIcon/index.vue'
|
|
import ThemePicker from '@/components/ThemePicker/index.vue'
|
|
import { PopupManager } from 'element-ui/lib/utils/popup'
|
|
import Cookies from 'js-cookie'
|
|
import { debounce } from '@/utils'
|
|
export default {
|
|
components: {
|
|
ThemePicker,
|
|
Item,
|
|
SvgIcon
|
|
},
|
|
data() {
|
|
return {
|
|
isMenuScroll: false,
|
|
scrollOffset: 0,
|
|
scrollMaxWidth: 0,
|
|
brandImg: (process.env.ENV === 'staging' || process.env.NODE_ENV === 'development') ? require('@/assets/title.png') : require('@/assets/title1.png'),
|
|
zIndex: PopupManager.nextZIndex(),
|
|
isFullscreen: false,
|
|
isShowMenuMobile: false,
|
|
isIframeSidebarOpened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true
|
|
}
|
|
},
|
|
computed: {
|
|
variables() {
|
|
return variables
|
|
},
|
|
...mapGetters([
|
|
'sidebar',
|
|
'avatar',
|
|
'name',
|
|
'permission_routes',
|
|
'department',
|
|
'device'
|
|
]),
|
|
activeMenu() {
|
|
const route = this.$route
|
|
const {
|
|
meta,
|
|
path
|
|
} = route
|
|
// if set path, the sidebar will highlight the path you set
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu
|
|
}
|
|
return path
|
|
}
|
|
},
|
|
watch: {
|
|
isShowMenuMobile(newVal) {
|
|
if (newVal) {
|
|
this.zIndex = PopupManager.nextZIndex()
|
|
}
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
document.addEventListener('fullscreenchange', this.handleFullscreen)
|
|
this.menuIsOverflow()
|
|
},
|
|
beforeDestroy() {
|
|
document.removeEventListener('fullscreenchange', this.handleFullscreen)
|
|
},
|
|
methods: {
|
|
menuScroll(type = 'prev') {
|
|
const offset = 80
|
|
const container = document.querySelector('#navbar-menu')
|
|
const scrollTo = (to) => {
|
|
container.scrollTo(to, 0)
|
|
}
|
|
if (type === 'prev') {
|
|
if ((container.scrollLeft - offset) > 0) {
|
|
scrollTo((container.scrollLeft - offset), 0)
|
|
} else {
|
|
scrollTo(0, 0)
|
|
}
|
|
} else {
|
|
if ((container.scrollLeft + offset) < this.scrollMaxWidth) {
|
|
scrollTo((container.scrollLeft + offset), 0)
|
|
} else {
|
|
scrollTo(container.scrollWidth, 0)
|
|
}
|
|
}
|
|
},
|
|
menuScrollListener: debounce(function(event) {
|
|
this.scrollOffset = event.target.scrollLeft
|
|
}),
|
|
menuIsOverflow() {
|
|
const handle = () => {
|
|
const container = document.querySelector('#navbar-menu')
|
|
this.isMenuScroll = container.scrollWidth > container.clientWidth
|
|
this.scrollMaxWidth = container.scrollWidth - container.clientWidth
|
|
if (this.isMenuScroll && this.device === 'desktop') {
|
|
container.addEventListener('scroll', e => this.menuScrollListener(e))
|
|
}
|
|
}
|
|
const $watch = this.$watch(() => this.permission_routes, (newVal) => {
|
|
if (newVal && newVal instanceof Array && newVal.length > 0) {
|
|
this.$nextTick(() => {
|
|
setTimeout(handle, 500)
|
|
$watch()
|
|
})
|
|
}
|
|
}, {
|
|
deep: true,
|
|
immediate: true
|
|
})
|
|
},
|
|
toggleIframeSidebarOpened() {
|
|
const iframe = document.querySelector('#iframe-cpn')
|
|
if (iframe && !document.querySelector('.sidebar-container')) {
|
|
iframe.contentWindow.toggleSideBar()
|
|
this.isIframeSidebarOpened = Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true
|
|
} else {
|
|
this.$store.commit('app/TOGGLE_SIDEBAR')
|
|
this.isIframeSidebarOpened = this.$store.getters.sidebar.opened
|
|
}
|
|
},
|
|
handleFullscreen() {
|
|
this.isFullscreen = document.fullscreenElement !== null
|
|
},
|
|
fullscreen() {
|
|
if (!document.fullscreenElement) {
|
|
// 请求全屏
|
|
document.documentElement.requestFullscreen()
|
|
} else {
|
|
// 退出全屏
|
|
document.exitFullscreen()
|
|
}
|
|
},
|
|
|
|
async userCommandHandle(command) {
|
|
switch (command) {
|
|
case 'logout':
|
|
await this.logout()
|
|
break
|
|
case 'attendance':
|
|
this.$router.push('/oa/?to=/attendance')
|
|
break
|
|
case 'debugger':
|
|
this.$router.push('/error')
|
|
break
|
|
case 'password':
|
|
this.$router.push('/info')
|
|
break
|
|
}
|
|
},
|
|
async logout() {
|
|
await this.$store.dispatch('user/logout')
|
|
await this.$store.commit('permission/SET_ROUTES', [])
|
|
await this.$store.commit('permission/RESET_ADD_ROUTES')
|
|
await this.$store.commit('app/SET_LAYOUT', {})
|
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import url('~@/styles/navbar.css');
|
|
|
|
</style>
|