<template>
|
<div class="sticky top0 layout">
|
<div class="header relative" style="align-items: flex-end">
|
<div @click="$router.push('/home')" class="title">
|
<img src="@/assets/logo.png" alt="" />
|
<span> 射洪市 两客一危 监管平台 </span>
|
</div>
|
<div></div>
|
|
</div>
|
<div style="display: flex;justify-content: space-between;">
|
<div class="menu w100 bgColor1">
|
<template v-for="(item, index) in routesList">
|
<template v-if="!item.meta || !item.meta.title">
|
<template v-for="(item2, index2) in item.children">
|
<div
|
v-if="!item2.meta.hide"
|
:key="index2"
|
@click="pushPath(item2.path)"
|
class="flex a-center j-center h100 br--18 w--160 menuItemHover pointer"
|
:class="item2.path == $route.path && 'bgColor2'"
|
>
|
<img
|
v-if="item2.meta.icon"
|
:src="require(`@/assets/routerIcon/${item2.meta.icon}.png`)"
|
class="w--40 h--40 mr--12 shrink0"
|
/>
|
<div class="color1">
|
{{ item2.meta.title }}
|
</div>
|
</div>
|
</template>
|
</template>
|
<div
|
v-else
|
:key="index"
|
:class="$route.path.includes('systemManage') && 'bgColor2'"
|
class="h100 w--160 br--18 menuItemHover dropdown"
|
@mouseenter="routerDropdown(true)"
|
@mouseleave="routerDropdown(false)"
|
>
|
<div class="flex a-center j-center h100">
|
<img
|
:src="require(`@/assets/routerIcon/${item.meta.icon}.png`)"
|
class="w--40 h--40 mr--12 shrink0"
|
/>
|
<div class="color1">
|
{{ item.meta.title }}
|
</div>
|
</div>
|
<div v-if="routerIsOpen" class="dropdown-menu positionTwo">
|
<template v-for="(item2, index2) in item.children">
|
<div
|
v-if="!item2.meta.hide"
|
:key="index2"
|
@click="pushPath(item.path + '/' + item2.path)"
|
class="dropdown-item flex a-center"
|
>
|
{{ item2.meta.title }}
|
</div>
|
</template>
|
</div>
|
</div>
|
</template>
|
</div>
|
<div class="flex a-center"
|
style="background: #3367ce;justify-content: space-between;padding:0 60px 0 30px;">
|
<div class="flex a-center" style="padding-right: 20px;">
|
<el-tooltip
|
:content="$store.state.userInfo.nickName"
|
placement="bottom"
|
effect="light"
|
:show-after="0"
|
:hide-after="2000"
|
>
|
<img
|
src="@/assets/header/photo.png"
|
class="w--32 h--32 shrink0 mr--10"
|
style="border-radius: 50%"
|
/>
|
</el-tooltip>
|
</div>
|
<div
|
class="dropdown"
|
@mouseenter="toggleDropdown(true)"
|
@mouseleave="toggleDropdown(false)"
|
>
|
<img src="@/assets/header/more.png" class="w--16 h--16" />
|
<div v-if="isOpen" class="dropdown-menu">
|
<div
|
@click="clickItem(item)"
|
class="dropdown-item"
|
v-for="item in menuItems"
|
:key="item.text"
|
>
|
<i :class="item.icon"></i> {{ item.text }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main">
|
<router-view></router-view>
|
</div>
|
<ResetPassword
|
v-if="passwordVisible"
|
:row="row"
|
:dialogVisible="passwordVisible"
|
@close="(passwordVisible = false), (row = {})"
|
@confirm="passwordConfirm"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import routes from "@/router/router";
|
import { mapMutations } from "vuex";
|
import ResetPassword from "@/view/systemManage/user/components/resetPassWord.vue";
|
import { updatePwd } from "@/view/systemManage/user/service";
|
import { getRoleInfo } from "../view/systemManage/role/service";
|
export default {
|
components: {
|
ResetPassword,
|
},
|
data() {
|
return {
|
routesList: [],
|
isOpen: false,
|
routerIsOpen: false,
|
menuItems: [{ text: "密码设置" }, { text: "退出登录" }],
|
passwordVisible: false,
|
row: {},
|
showNickname: false,
|
};
|
},
|
created() {
|
console.log(this.$store.state.permissions,this.$router.options.routes);
|
|
if (localStorage.getItem("userInfo")) {
|
this.routesList = this.filterRoutes(this.$router.options.routes)
|
} else {
|
this.routesList = routes;
|
}
|
},
|
methods: {
|
...mapMutations(["clearToken"]),
|
// 过滤路由函数
|
filterRoutes(routes) {
|
const permissions = this.$store.state.permissions || [];
|
return routes.filter((route) => {
|
// 如果路由有children，递归过滤
|
if (route.children && route.children.length > 0) {
|
const filteredChildren = this.filterRoutes(route.children);
|
route.children = filteredChildren;
|
|
// 如果过滤后children为空，且父路由有menuId需要权限，则过滤掉该路由
|
if (
|
filteredChildren.length === 0 &&
|
route.meta &&
|
route.meta.menuId &&
|
!permissions.includes(route.meta.menuId)
|
) {
|
return false;
|
}
|
// 如果过滤后children不为空，保留该父路由
|
if (filteredChildren.length > 0) {
|
return true;
|
}
|
}
|
|
// 处理没有children的路由
|
// 1. 如果路由没有menuId，保留
|
if (!route.meta || !route.meta.menuId) {
|
return true;
|
}
|
// 2. 如果路由有menuId，检查权限
|
return permissions.includes(route.meta.menuId);
|
});
|
},
|
passwordConfirm(form) {
|
updatePwd(form).then(() => {
|
this.row = {};
|
this.passwordVisible = false;
|
this.msgsuccess("修改密码成功");
|
});
|
},
|
clickItem(item) {
|
switch (item.text) {
|
case "密码设置":
|
this.row = this.$store.state.userInfo;
|
this.passwordVisible = true;
|
break;
|
case "退出登录":
|
this.clearToken();
|
window.location.replace(`/`);
|
break;
|
default:
|
break;
|
}
|
},
|
pushPath(path) {
|
this.$router.push(path);
|
if (this.routerIsOpen) this.routerIsOpen = false;
|
},
|
toggleDropdown(state) {
|
this.isOpen = state;
|
},
|
routerDropdown(state) {
|
this.routerIsOpen = state;
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.layout {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.main {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
|
.bgColor1 {
|
background-color: #3367ce;
|
}
|
|
.bgColor2 {
|
background: #2b5ab6;
|
}
|
|
.color1 {
|
color: #fff;
|
}
|
|
.color2 {
|
// color: rgba(0, 0, 0, .6);
|
color: #fff;
|
}
|
|
.header {
|
height: 80px;
|
background: #3367ce;
|
background-image: url("../assets/title.png");
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.title {
|
display: flex;
|
justify-content: center;
|
font-weight: 600;
|
font-size: 30px;
|
align-items: center;
|
position: absolute;
|
top: 48%;
|
left: 48.5%;
|
transform: translate(-50%, -50%);
|
// color: rgba(0, 0, 0, .8);
|
color: #fff;
|
|
img {
|
width: 50px;
|
height: 50px;
|
margin-right: 25px;
|
}
|
|
span {
|
letter-spacing: 4px;
|
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); // 新增字体阴影
|
}
|
}
|
}
|
|
.menu {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 220px;
|
}
|
|
.menuItemHover {
|
flex: 1;
|
max-width: 160px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
|
.menuItemHover:hover {
|
border-radius: 18px;
|
background: #2b5ab6;
|
}
|
|
.dropdown {
|
position: relative;
|
display: inline-block;
|
cursor: pointer;
|
}
|
|
.positionTwo {
|
transform: unset !important;
|
width: 160px !important;
|
}
|
|
.dropdown-menu {
|
position: absolute;
|
top: 100%;
|
left: 0;
|
transform: translateX(-50%);
|
background: white;
|
border: 1px solid #ccc;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
z-index: 1000;
|
border-radius: 8px;
|
}
|
|
.dropdown-item {
|
padding: 8px 16px;
|
white-space: nowrap;
|
/* 防止文本换行 */
|
}
|
|
.dropdown-item:hover {
|
background-color: #f0f0f0;
|
/* 添加 hover 效果 */
|
}
|
</style>
|
