<!-- -->
|
<template>
|
<div class="navtab">
|
<div class="flex heard-title align-center justify-between">
|
<div class="flex align-end">
|
<svg-icon
|
style="font-size: 20px"
|
class="svgicon margin-right pointer"
|
@click="toggleSideBar"
|
iconClass="align-right"
|
classNames="alignSvg"
|
:class="{ isActive: isCollapse }"
|
/>
|
<p class="title">智能化立体库管理系统</p>
|
</div>
|
|
<div class="technical">
|
<el-dropdown class="right-menu">
|
<div class="avatar-wrapper flex align-center">
|
<img src="../../assets/heard/heard.jpg" class="user-avatar" />
|
<span class="margin-left pointer text-overflow">{{ userinfo.userName }}</span>
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item> {{ userinfo.deptName }} </el-dropdown-item>
|
<el-dropdown-item divided @click.native="logout">
|
<p>退出登录</p>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<div class="Breadcrumb">
|
<tags-view />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
//例如：import 《组件名称》 from '《组件路径》';
|
import { mapGetters } from 'vuex';
|
import TagsView from './TagsView/index';
|
import { getCache } from '@/utils/sessionStorage';
|
import ResizeMixin from '@/mixins/layout';
|
export default {
|
//name放入模板名,方便在其他地方引用
|
name: '',
|
//import引入的组件需要注入到对象中才能使用
|
components: { TagsView },
|
mixins: [ResizeMixin],
|
data() {
|
//这里存放数据
|
return {
|
userinfo: getCache('userInfo')
|
};
|
},
|
//监听属性 类似于data概念
|
computed: {
|
...mapGetters(['sidebar']),
|
isCollapse() {
|
return this.sidebar;
|
}
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted() {},
|
//方法集合
|
methods: {
|
toggleSideBar() {
|
this.$store.dispatch('setting/togglesidebar');
|
},
|
async logout() {
|
await this.$store.dispatch('user/logout');
|
this.$store.dispatch('permission/generateRoutes', []);
|
this.$router.push({ path: '/login' });
|
}
|
},
|
//监控data中的数据变化
|
watch: {},
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
activated() {}
|
};
|
</script>
|
<style lang="scss" scoped>
|
/* @import url(); 引入公共css类 */
|
.navtab {
|
width: 100%;
|
height: 80px;
|
border-bottom: 1px solid #d6e2e9;
|
box-shadow: 0 0 4px #345;
|
.isActive {
|
transform: rotate(180deg);
|
}
|
.Breadcrumb {
|
display: flex;
|
align-items: center;
|
.svgicon {
|
padding: 0 15px;
|
}
|
}
|
.technical {
|
display: flex;
|
align-items: center;
|
width: 11%;
|
justify-content: flex-end;
|
.right-menu {
|
margin-right: 15px;
|
.avatar-wrapper {
|
margin: auto;
|
display: flex;
|
.user-avatar {
|
cursor: pointer;
|
width: 24px;
|
height: 24px;
|
border-radius: 10px;
|
}
|
}
|
}
|
.full {
|
cursor: pointer;
|
}
|
}
|
.heard-title {
|
height: 50px;
|
padding-left: 10px;
|
background-color: rgb(255, 255, 255);
|
border-radius: 0px !important;
|
.title {
|
// padding: 13px 10px 10px;
|
font-size: 20px;
|
}
|
}
|
}
|
</style>
|
