225 lines
7.2 KiB
Vue
225 lines
7.2 KiB
Vue
<!-- 上导航栏 -->
|
||
<template>
|
||
<div class="header-container">
|
||
|
||
<div class="l-content">
|
||
|
||
<el-button @click="handleMenu" :icon=" icon" size="medium" style="padding: 5px;width: 30px;height: 60px;background-color:transparent;"></el-button>
|
||
|
||
<!-- tag -->
|
||
<div class="tags" >
|
||
|
||
<el-tag v-for="(item,index) in tags"
|
||
:key="item.path"
|
||
:closable="true"
|
||
:effect="$route.name === item.name ? 'dark' : 'plain'"
|
||
@click="changeMenu(item)"
|
||
@close="handledClose(item,index)"
|
||
style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
|
||
{{ item.label }}
|
||
</el-tag>
|
||
|
||
</div>
|
||
<!--
|
||
<el-breadcrumb separator="">
|
||
<el-breadcrumb-item :to="{ path: '/' }">
|
||
<el-button size="small" >首页</el-button>
|
||
</el-breadcrumb-item>
|
||
<el-breadcrumb-item><a href="/">
|
||
<el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
|
||
|
||
</el-button>
|
||
</a></el-breadcrumb-item>
|
||
</el-breadcrumb> -->
|
||
|
||
|
||
<!-- <span class="text">首页</span> -->
|
||
|
||
</div>
|
||
<!-- 用户信息 登录注册 -->
|
||
<div class="r-content">
|
||
<!--练习的弹出框 -->
|
||
<el-dialog
|
||
title="修改个人信息"
|
||
:visible.sync="dialogVisible"
|
||
width="30%">
|
||
<span></span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 右侧登录页面设计 -->
|
||
<el-dropdown>
|
||
<span class="el-dropdown-link">
|
||
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
|
||
<span class="text">用户信息</span>
|
||
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
|
||
</span>
|
||
|
||
<el-dropdown-menu slot="dropdown">
|
||
<!-- <el-dropdown-item>-->
|
||
<!-- <!– 点击后改变弹出框生效情况 –>-->
|
||
<!-- <el-button style='width: 150px;' @click="dialogVisible = true">修改个人信息</el-button>-->
|
||
<!-- </el-dropdown-item>-->
|
||
|
||
<!-- <el-dropdown-item> -->
|
||
<!-- <el-button style='width: 150px;' @click = "UserManagement">用户管理</el-button>-->
|
||
<!-- </el-dropdown-item>-->
|
||
|
||
<el-dropdown-item>
|
||
<el-button style='width: 150px;' @click="logout">退出登录</el-button>
|
||
</el-dropdown-item>
|
||
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState,mapMutations} from 'vuex'
|
||
import http from "@/utils/request";
|
||
export default {
|
||
name: "CommonTag",
|
||
data(){
|
||
return{
|
||
dialogVisible:false,//用户登录页面
|
||
// 折叠按钮
|
||
icon:"el-icon-arrow-left",
|
||
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
|
||
tags: state => state.tab.tabsList
|
||
})
|
||
|
||
},
|
||
methods:{
|
||
|
||
// 折叠方法
|
||
handleMenu(){
|
||
this.$store.commit('collapseMenu')
|
||
this.icon = this.icon === 'el-icon-arrow-left' ? 'el-icon-arrow-right' : 'el-icon-arrow-left';
|
||
},
|
||
|
||
logout(){
|
||
this.$store.commit('logout')
|
||
this.$notify.info({
|
||
title: '注意',
|
||
message: '已退出'
|
||
})
|
||
this.$router.push('/login')
|
||
location.reload();
|
||
},
|
||
|
||
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
|
||
...mapMutations(['closeTag']),
|
||
//点击tag跳转的功能
|
||
changeMenu(item){
|
||
// console.log(item)
|
||
this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
|
||
},
|
||
//点击tag x删除
|
||
handledClose(item,index){ //index是获取的索引
|
||
//点击tag删除 tabsList里面的数据
|
||
// 方法1
|
||
// this.$store.commit('closeTag')
|
||
// 方法2,调用store中的Mutations
|
||
this.closeTag(item)
|
||
const length=this.tags.length
|
||
// console.log("tags长度：",this.tags.length)
|
||
// console.log( this.$router)
|
||
|
||
//删除之后的跳转逻辑
|
||
//一）当前页与删除页不同（item.name和当前展示路由不一致），直接删除路由列表里面的对于name，就不能再打开，没有人性化调整的必要
|
||
if(item.name!== this.$route.name){
|
||
return
|
||
}
|
||
//二）当前页=删除页——删除的是最后一页(页面转到路由列表中的前一个)
|
||
if(index===length){
|
||
if(length===0){
|
||
item={
|
||
path: "/market_entities",
|
||
name: "market_entities",
|
||
label: "市场主体分析",
|
||
}
|
||
this.$router.push(item)
|
||
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
|
||
}
|
||
else{
|
||
this.$router.push({
|
||
name:this.tags[index-1].name
|
||
})
|
||
}
|
||
}
|
||
|
||
//三）当前页=删除页——删除的是中间一页(跳转后一个，因为已经删除了，跳转的还是后面那个)
|
||
else{
|
||
this.$router.push({
|
||
name:this.tags[index].name
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
|
||
// 跳转用户管理
|
||
UserManagement(){//点击标题跳转大屏
|
||
this.$router.push('/UserManagement');
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
|
||
.header-container{
|
||
padding: 0 30px;
|
||
background-color: #33333325;
|
||
height: 60px;
|
||
display: flex;//相邻的两个内容一行显示
|
||
justify-content: space-between;
|
||
|
||
.text{
|
||
color:rgba(0, 0, 0, 0.719);
|
||
font-size: 13px;
|
||
margin-left: 5px;//左间距
|
||
margin-bottom: 10px;//下间距
|
||
|
||
}
|
||
.l-content{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: end; // 中间
|
||
}
|
||
.r-content{
|
||
margin-top: 5px;//下间距
|
||
align-items: top; // 中间
|
||
.el-button.is-circle {
|
||
border-radius: 100%;
|
||
padding: 3px;//边框和内部距离
|
||
}
|
||
|
||
.el-button {//按钮边框
|
||
background: #ffffff00;
|
||
border: 1px solid #00040e;
|
||
color: #000104;
|
||
font-size: 16px;
|
||
border-radius: 20px;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |