<template>
|
<div>
|
<el-header>
|
<div class="hearderLogo">
|
<img @click="goHome" src="../../../assets/img/logo_y.png" />
|
<!-- <span>垂直商业赋能平台</span> -->
|
</div>
|
<div class="menu">
|
<el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal"
|
@select="handleSelect" background-color="transparent" text-color="#ffffff">
|
<el-menu-item v-for="item in menuList" :key="item.id" :index="item.id">
|
{{item.name}}</el-menu-item>
|
</el-menu>
|
</div>
|
<div class="userSet custom-badge-style" v-if="userInfo">
|
<div class="msg-style" @click="handleMsgDialog">
|
<el-badge :value="noReadMsgCount ? noReadMsgCount : null" :max="99">
|
<span>消息</span>
|
</el-badge>
|
</div>
|
<div class="sep">|</div>
|
<div class="user-dropdown-style">
|
<el-dropdown trigger="hover" @command="handleCommand" :hide-on-click="false">
|
<span>{{userInfo ? userInfo.userName : ''}}</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="1">修改密码</el-dropdown-item>
|
<el-dropdown-item command="2">按钮设置</el-dropdown-item>
|
<el-dropdown-item command="3" v-if="isShowItem" :disabled="count ? true : false">
|
<span>切换到供应链管理平台</span>
|
<span v-if="count">({{count}})</span>
|
</el-dropdown-item>
|
<el-dropdown-item command="4">退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<change-password :show.sync="show"></change-password>
|
<el-drawer title="表格按钮设置" :visible.sync="drawer">
|
<setting v-if='drawer' @close='drawer=false' />
|
</el-drawer>
|
</el-header>
|
</div>
|
</template>
|
<script>
|
let timer;
|
import Cookie from 'js-cookie'
|
import { mapActions, mapState } from 'vuex'
|
import changePassword from '@/views/layout/components/changePassword.vue'
|
import setting from './setting.vue'
|
import { systemLogout } from '@api/oauth/index'
|
// import config from '@/app.config.js'
|
import store from '@/store'
|
export default {
|
name: 'headerComponents',
|
components: { changePassword, setting },
|
data() {
|
return {
|
drawer: false,
|
show: false,
|
msgNum: 0,//消息条数
|
count: 0
|
}
|
},
|
props: {
|
menuList: {
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
watch: {
|
$route: {
|
handler: function () {
|
this.handleSelect(this.activeMenu)
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
...mapState(['userInfo', 'noReadMsgCount', 'systemAuthIds']),
|
activeMenu() {
|
return this.getActiveMenu().id
|
},
|
isShowItem() {
|
let ids = Cookie.get('systemAuthIds') ? Cookie.get('systemAuthIds').split(",") : null;
|
if (ids && ids.length) {
|
let isE = ids.find((val) => val === process.env.VUE_APP_GYL_CLIENT_ID);
|
if (isE) {
|
return true;
|
} else {
|
return false;
|
}
|
} else {
|
return false;
|
}
|
},
|
},
|
created() {
|
},
|
destroyed() {
|
clearInterval(timer)
|
},
|
methods: {
|
...mapActions(['clearLoginInfo']),
|
/*
|
*回到首页
|
*/
|
goHome() {
|
this.$router.push('/dash/home')
|
},
|
recursion(parentId) {
|
const m = this.$store.state.userTreeFlat.filter(k => {
|
return k.id === parentId
|
})
|
if (m.length) {
|
const v = this.$store.state.userTree.filter(k => {
|
return k.id === m[0].id
|
})
|
if (v.length) {
|
return m[0]
|
} else {
|
return this.recursion(m[0].parentId)
|
}
|
}
|
},
|
getActiveMenu() {
|
const menu = this.$store.state.userTreeFlat.filter(v => {
|
return v.url === this.$route.path
|
})
|
if (menu && menu.length) {
|
const recursion = this.recursion(menu[0].parentId)
|
return recursion ? this.recursion(menu[0].parentId) : menu[0]
|
}
|
return { id: '' }
|
},
|
handleCommand(val) {
|
switch (val) {
|
case '1':
|
this.show = true
|
break
|
case '2':
|
this.drawer = true
|
break
|
case '3':
|
this.countDown();
|
break
|
case '4':
|
this.handleLogout()
|
break
|
default:
|
break
|
}
|
},
|
handleLogout() {
|
this.$confirm('是否确认退出登录?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.systemLogout() // 退出登录
|
})
|
},
|
/**
|
* 退出登录
|
*/
|
systemLogout() {
|
try {
|
// const param = {
|
// lient_id: config.client_id,
|
// logout_type: 'slo'
|
// }
|
systemLogout().then(res => {
|
this.clearLoginInfo()
|
this.$router.replace('/')
|
})
|
} catch (error) {
|
console.log(error)
|
}
|
},
|
handleSelect(key, path) {
|
const arr = this.menuList.filter((v) => {
|
return v.id === key
|
})
|
if (arr && arr.length) {
|
if (arr[0].children.length) {
|
this.$emit('handleSubMenu', arr[0].children)
|
if (
|
this.$route.name !== arr[0].children[0].id &&
|
key !== this.activeMenu
|
) {
|
const path = this.foundPath(arr[0].children[0])
|
this.$router.push(path)
|
}
|
} else {
|
this.$router.push(arr[0].url)
|
this.$emit('handleSubMenu', [])
|
}
|
}
|
},
|
foundPath(obj) {
|
if (obj.children && obj.children.length) {
|
return this.foundPath(obj.children[0])
|
} else {
|
return obj.url
|
}
|
},
|
/**
|
* 消息loading弹窗
|
*/
|
handleMsgDialog() {
|
this.$emit("handleMsgDialog", true)
|
},
|
/**
|
* 倒计时
|
*/
|
countDown() {
|
if (this.count > 0) {
|
return;
|
}
|
const TIME_COUNT = 3
|
if (!this.timer) {
|
this.count = TIME_COUNT
|
this.timer = setInterval(() => {
|
if (this.count > 1 && this.count <= TIME_COUNT) { //限制倒计时区间
|
this.count--
|
} else {
|
clearInterval(this.timer) //删除定时器
|
this.timer = null
|
//系统切换
|
let _url = null;
|
if (window.location.hostname === 'localhost') {
|
_url = `${process.env.VUE_APP_GYL_LOCAL_PATH}/#/dashboard/analysis`;
|
} else {
|
_url = `${process.env.VUE_APP_GYL_PATH}/#/dashboard/analysis`;
|
}
|
window.open(_url, '_self');
|
}
|
}, 1000)
|
}
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
$h: 68px;
|
$color: #c2a16c;
|
.el-header {
|
width: 100%;
|
height: $h !important;
|
background-color: #1f1c1c;
|
color: #ffffff;
|
font-size: 16px;
|
font-weight: 400;
|
padding: 0 20px;
|
margin: 0 auto;
|
display: flex;
|
z-index: 999;
|
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
|
.hearderLogo {
|
// width: 236px;
|
height: $h;
|
display: flex;
|
align-items: center;
|
margin-right: 20px;
|
img {
|
width: 100%;
|
// border-radius: 100%;
|
align-items: center;
|
cursor: pointer;
|
}
|
span {
|
font-size: 18px;
|
color: #ffffff;
|
align-items: center;
|
}
|
}
|
.menu {
|
flex: 1;
|
height: $h;
|
.el-menu--horizontal {
|
border-bottom: none;
|
.el-menu-item {
|
// min-width: 130px;
|
line-height: $h;
|
font-size: 16px;
|
font-weight: 400;
|
height: $h;
|
text-align: center;
|
}
|
.el-menu-item.is-active {
|
color: #d0261e;
|
background-color: $color !important;
|
border-bottom: none;
|
font-weight: 600;
|
}
|
.el-menu-item:hover {
|
background-color: $color !important;
|
color: #ffffff !important;
|
font-weight: 600;
|
}
|
}
|
}
|
.el-dropdown {
|
span {
|
line-height: $h;
|
display: inline-block;
|
padding: 0 15px;
|
color: #ffffff;
|
}
|
span {
|
font-size: 14px;
|
}
|
span:hover {
|
// background-color: $color;
|
cursor: pointer;
|
}
|
}
|
}
|
@media (min-width: 809px) {
|
.el-header .hearderLogo {
|
width: 130px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 70px;
|
padding: 0 2px;
|
}
|
}
|
}
|
@media (min-width: 1024px) {
|
.el-header .hearderLogo {
|
width: 130px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 80px;
|
padding: 0 5px;
|
}
|
}
|
} /*>=1024的设备*/
|
|
@media (min-width: 1100px) {
|
.el-header .hearderLogo {
|
width: 160px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 90px;
|
padding: 0 8px;
|
}
|
}
|
} /*>=1100的设备*/
|
@media (min-width: 1280px) {
|
.el-header .hearderLogo {
|
width: 170px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 100px;
|
padding: 0 20px;
|
}
|
}
|
} /*>=1280的设备*/
|
|
@media (min-width: 1366px) {
|
.el-header .hearderLogo {
|
width: 205px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 110px;
|
padding: 0 20px;
|
}
|
}
|
}
|
@media (min-width: 1440px) {
|
.el-header .hearderLogo {
|
width: 210px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 110px;
|
padding: 0 20px;
|
}
|
}
|
}
|
|
@media (min-width: 1680px) {
|
.el-header .hearderLogo {
|
width: 236px;
|
}
|
.menu {
|
.el-menu--horizontal .el-menu-item {
|
min-width: 130px;
|
padding: 0 20px;
|
}
|
}
|
}
|
.header-style {
|
width: 100%;
|
height: 60px;
|
overflow: hidden;
|
.hearderLogo {
|
float: left;
|
}
|
.userSet {
|
float: right;
|
}
|
}
|
.userSet {
|
.msg-style {
|
padding-right: 15px;
|
cursor: pointer;
|
position: relative;
|
top: 2px;
|
line-height: 68px;
|
}
|
.user-dropdown-style {
|
position: relative;
|
top: 2px;
|
}
|
> div {
|
display: inline-block;
|
}
|
}
|
.sep {
|
color: rgb(162, 163, 169) !important;
|
padding-left: 5px;
|
}
|
.el-dropdown-menu {
|
width: 198px;
|
.el-dropdown-menu__item.is-disabled {
|
cursor: not-allowed !important;
|
pointer-events: auto !important;
|
}
|
}
|
</style>
|
