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>
|