add：初始化项目
This commit is contained in:
252
wms/nladmin-ui/src/layout/components/Navbar.vue
Normal file
252
wms/nladmin-ui/src/layout/components/Navbar.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<!-- <el-tooltip content="项目文档" effect="dark" placement="bottom">
|
||||
<Doc class="right-menu-item hover-effect" />
|
||||
</el-tooltip>-->
|
||||
|
||||
<el-tooltip :content="$t('common.fz')" effect="dark" placement="bottom">
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
<notice-icon class="right-menu-item" />
|
||||
<notice-icon-reader ref="noticeIconReader" />
|
||||
|
||||
<!-- <el-tooltip content="布局设置" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>-->
|
||||
|
||||
</template>
|
||||
<img :src="Avatar" class="user-avatar">
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
<span class="user-nickname">{{ user.person_name }}</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<span style="display:block;" @click="show = true">
|
||||
<el-dropdown-item>
|
||||
{{ $t('common.Layout_setting') }}
|
||||
</el-dropdown-item>
|
||||
</span>
|
||||
<router-link to="/user/center">
|
||||
<el-dropdown-item>
|
||||
{{ $t('common.Personal_center') }}
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<span style="display:block;" @click="open">
|
||||
<el-dropdown-item divided>
|
||||
{{ $t('common.Log_out') }}
|
||||
</el-dropdown-item>
|
||||
</span>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown class="right-menu-item" style="font-size: 14px" trigger="click" @command="langChange">
|
||||
<span class="el-dropdown-link" style="font-size: 18px">
|
||||
{{ language }} <i class="el-icon-caret-bottom" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
|
||||
<el-dropdown-item divided command="en">English</el-dropdown-item>
|
||||
<el-dropdown-item divided command="in">Indonesian</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import TopNav from '@/components/TopNav'
|
||||
|
||||
import Doc from '@/components/Doc'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import Avatar from '@/assets/images/avatar.png'
|
||||
import NoticeIcon from '@/views/system/notice/NoticeIcon.vue'
|
||||
import NoticeIconReader from '@/views/system/notice/NoticeIconReader.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NoticeIconReader,
|
||||
NoticeIcon,
|
||||
Breadcrumb,
|
||||
Hamburger,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search,
|
||||
Doc,
|
||||
TopNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Avatar: Avatar,
|
||||
dialogVisible: false,
|
||||
language: '简体中文'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initLang()
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'device',
|
||||
'user',
|
||||
'baseApi'
|
||||
]),
|
||||
show: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'showSettings',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
topNav: {
|
||||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initLang() {
|
||||
// 初始化语言
|
||||
let item = localStorage.getItem('lang')
|
||||
if (item === null) {
|
||||
item = 'zh'
|
||||
}
|
||||
localStorage.setItem('lang', item)
|
||||
this.setLang(item)
|
||||
},
|
||||
// 中英文切换
|
||||
langChange(command) {
|
||||
this.$i18n.locale = command
|
||||
localStorage.setItem('lang', command)
|
||||
this.setLang(command)
|
||||
location.reload()
|
||||
},
|
||||
setLang(command) {
|
||||
if (command === 'en') {
|
||||
this.language = 'English'
|
||||
} else if (command === 'zh') {
|
||||
this.language = '简体中文'
|
||||
} else if (command === 'in') {
|
||||
this.language = 'Indonesian'
|
||||
}
|
||||
},
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
open() {
|
||||
this.$confirm(this.$t('common.Tip13'), this.$t('common.Tips'), {
|
||||
confirmButtonText: this.$t('common.Confirm'),
|
||||
cancelButtonText: this.$t('common.Cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.logout()
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.topmenu-container {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
//margin-right: 10px;
|
||||
.avatar-wrapper {
|
||||
//margin-top: 5px;
|
||||
position: relative;
|
||||
.user-nickname {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user