From 02c0fe95de11fe9e692144a9a15b6d96bb991b66 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期二, 08 十一月 2022 18:38:33 +0800
Subject: [PATCH] nav
---
src/components/navMenu.vue | 181 ++++++++++++++++++++++++++-------------------
1 files changed, 104 insertions(+), 77 deletions(-)
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 29a68b1..800d365 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,33 +1,22 @@
<template>
- <div>
- <div class="leftTopWrapper">
- <div class="logo">
- <img src="../assets/img/www.terra-it.cn.png" alt="" />
- </div>
- <div class="menu">
- <el-menu
- active-text-color="#ffd04b"
- class="el-menu-vertical-demo"
- :default-active="activeIndex"
- background-color="#586884"
- text-color="#fff"
- @select="handleselect"
- >
- <customElMenu :menuData="menuList"></customElMenu>
- </el-menu>
- </div>
+ <div class="topMenu">
+ <div class="logo">
+ <img src="../assets/img/www.terra-it.cn.png" alt="" />
</div>
- <div class="leftBotWrapper">
+ <div class="rightWrapper">
+ <div class="menu">
+ <ul>
+ <li v-for="item in menuList" :key="item.id">
+ {{ item.cnName }}
+ </li>
+ </ul>
+ </div>
<div class="userInfo">
<img src="../assets/img/user.png" alt="" />
<span>admin</span>
<span @click="logOut">娉ㄩ攢</span>
<span @click="switchLang"> 鍒囨崲璇█</span>
- </div>
- <div class="btnBox">
- <div><img src="../assets/img/leftBtn.png" alt="" /></div>
- <div><img src="../assets/img/rightBtn.png" alt="" /></div>
</div>
</div>
</div>
@@ -37,7 +26,7 @@
import { logout } from "@/api/api";
import { removeToken, getToken } from "@/utils/auth";
import customElMenu from "../components/customElMenu.vue";
-import { queryMenuTree, updateMenuTree, queryMaxId } from "../api/api";
+import { queryMenuTree, getPerms } from "../api/api";
export default {
name: "navMenu",
@@ -65,9 +54,23 @@
};
},
mounted() {
+ this.getUserPerms();
this.getMenuTree();
},
- computed: {},
+ computed: {
+ // 鎴戜滑浣跨敤璁＄畻灞炴�ф潵鑾峰彇鍒板綋鍓嶇偣鍑荤殑鑿滃崟鐨勮矾鐢辫矾寰勶紝鐒跺悗璁剧疆default-active涓殑鍊�
+ // 浣垮緱鑿滃崟鍦ㄨ浇鍏ユ椂灏辫兘瀵瑰簲楂樹寒
+ // activeIndex() {
+ // const route = this.$route;
+ // const { meta, path } = route;
+ // // if set path, the sidebar will highlight the path you set
+ // // 鍙互鍦ㄨ矾鐢遍厤缃枃浠朵腑璁剧疆鑷畾涔夌殑璺敱璺緞鍒癿eta.activeMenu灞炴�т腑锛屾潵鎺у埗鑿滃崟鑷畾涔夐珮浜樉绀�
+ // if (meta.activeMenu) {
+ // return meta.activeMenu;
+ // }
+ // return path;
+ // },
+ },
methods: {
getMenuTree() {
//鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
@@ -79,9 +82,10 @@
if (res.code == 200) {
if (res.result.length != 0) {
let menuLists = res.result.filter((value) => {
- return value.type == 1;
+ return value.pid == 1;
});
- this.menuList = this.treeData(menuLists);
+ // console.log(menuLists);
+ this.menuList = menuLists;
} else {
alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
}
@@ -114,7 +118,7 @@
})
.then(async () => {
const data = await logout({ token: getToken() });
- console.log(data);
+ // console.log(data);
if (data.code != 200) {
return this.$message.error("閫�鍑虹櫥褰曞け璐�");
}
@@ -149,7 +153,17 @@
this.$store.commit("changeLang", "en"); //浼犻�掔偣鍑荤殑鑺傜偣
}
},
- handleselect(index, indexPath) {
+ handleselect(index, indexPath, e) {
+ // console.log(e.$attrs.perms);
+ this.$store.commit("currentPerms", e.$attrs.perms.perms);
+ if (Window.ws != null) {
+ Window.ws.close();
+ Window.ws.onclose = () => {
+ console.log("鏈嶅姟鍣ㄥ叧闂�");
+ };
+ Window.ws = null;
+ }
+
if (index.indexOf("http") != -1) {
this.$router.push("/databaseMonitoring");
this.$store.commit("getIframe", index);
@@ -157,69 +171,82 @@
this.$router.push(index);
}
},
+ getUserPerms() {
+ getPerms().then((res) => {
+ if (res.code == 200) this.$store.commit("getPermsEntity", res.result);
+ });
+ },
},
watch: {
$route() {
- this.activeIndex = this.$route.path;
+ let str = this.$route.path;
+ if (str[0] == "/") {
+ this.activeIndex = str.slice(1);
+ }
},
+ },
+ created() {
+ let str = this.$route.path;
+ if (str[0] == "/") {
+ this.activeIndex = str.slice(1);
+ }
},
};
</script>
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
-.leftTopWrapper {
+.topMenu {
width: 100%;
- .logo {
- // background-color: rgb(139, 0, 0);
- width: 249px;
- height: 52px;
- img {
- width: 100%;
- }
- }
- .menu {
- height: 740px;
- margin-top: 22px;
- overflow: auto;
-
- .el-menu {
- width: 234px;
- border-right: none;
- /deep/ .el-submenu {
- margin-bottom: 10px;
- .el-submenu__title {
- background-color: transparent !important;
- }
- }
- .faSub {
- background-color: #586884;
- }
- }
- }
-}
-.leftBotWrapper {
- width: 258px;
- position: absolute;
- left: 19px;
- bottom: 17px;
+ height: 100%;
+ background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78));
display: flex;
justify-content: space-between;
- align-items: center;
- .userInfo {
- // width: 138px;
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #fcfcfc;
- display: flex;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
+
+ .logo {
+ width: 500px;
+ height: 100%;
+ position: relative;
+ img {
+ width: 70%;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ }
}
- .btnBox {
- width: 65px;
+ .rightWrapper {
+ width: 70%;
+ height: 100%;
display: flex;
- justify-content: space-between;
+ .menu {
+ height: 100%;
+ width: 80%;
+ background-color: rgb(120, 121, 120);
+ ul {
+ display: flex;
+ justify-content: space-around;
+ li {
+ width: 120px;
+ height: 120px;
+ background: #bfa;
+ }
+ }
+ }
+ .userInfo {
+ background-color: pink;
+
+ // width: 138px;
+ font-size: 16px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #fcfcfc;
+ // display: flex;
+ // justify-content: space-between;
+ // align-items: center;
+ // cursor: pointer;
+ }
}
}
</style>
--
Gitblit v1.9.3