From e3196bc81327e82748c7683c5cad9849b4b228b6 Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期三, 26 十月 2022 14:36:58 +0800
Subject: [PATCH] 菜单
---
src/components/navMenu.vue | 264 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 177 insertions(+), 87 deletions(-)
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 62d2345..3bbe467 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="leftMenu">
<div class="leftTopWrapper">
<div class="logo">
<img src="../assets/img/www.terra-it.cn.png" alt="" />
@@ -7,71 +7,13 @@
<div class="menu">
<el-menu
active-text-color="#ffd04b"
- background-color="#3B4D6E"
class="el-menu-vertical-demo"
- default-active="2"
+ :default-active="activeIndex"
+ background-color="#586884"
text-color="#fff"
- router
- @open="handleOpen"
- @close="handleClose"
@select="handleselect"
>
- <el-submenu index="1" class="faSub">
- <template slot="title">
- <span>鏁版嵁绠＄悊</span>
- </template>
- <el-menu-item index="catalogueManage">鐩綍绠＄悊</el-menu-item>
- <el-menu-item index="dataUpdata">鏁版嵁涓婁紶</el-menu-item>
- <el-menu-item index="metadataManage">鍏冩暟鎹鐞�</el-menu-item>
- <el-menu-item index="dataLoading">鏁版嵁鍏ュ簱</el-menu-item>
- <el-menu-item index="SpatialData">绌洪棿鏁版嵁绠＄悊</el-menu-item>
- <el-menu-item index="versionManage">鐗堟湰绠＄悊</el-menu-item>
- <el-menu-item index="dictionaryManage">瀛楀吀绠＄悊</el-menu-item>
- <el-menu-item index="styleManage">鏍峰紡绠＄悊</el-menu-item>
- </el-submenu>
- <el-submenu index="2" class="faSub">
- <template slot="title">
- <span>杩愮淮绠＄悊</span>
- </template>
- <el-menu-item index="userManagement">鐢ㄦ埛绠＄悊</el-menu-item>
- <el-submenu index="2-2">
- <template slot="title">绯荤粺閰嶇疆</template>
- <el-menu-item index="menuSettings">鑿滃崟璁剧疆</el-menu-item>
- <el-menu-item index="parameterConfiguration"
- >鍙傛暟閰嶇疆</el-menu-item
- >
- <el-menu-item index="rests">鍏朵粬</el-menu-item>
- </el-submenu>
- <el-menu-item index="authorityManagement">鏉冮檺绠＄悊</el-menu-item>
- <el-menu-item index="safetyManagement">瀹夊叏绠＄悊</el-menu-item>
- <el-submenu index="2-5">
- <template slot="title">杩愯鐩戞帶</template>
- <el-menu-item index="systemMonitoring">绯荤粺鐩戞帶</el-menu-item>
- <el-menu-item index="logLog">鐧诲綍鏃ュ織</el-menu-item>
- <el-menu-item index="operationLog">鎿嶄綔鏃ュ織</el-menu-item>
- <!-- <el-menu-item index="databaseMonitoring">鏁版嵁搴撶洃鎺�</el-menu-item> -->
- </el-submenu>
- </el-submenu>
- <el-submenu index="3" class="faSub">
- <template slot="title">
- <span>缁煎悎灞曠ず</span>
- </template>
- <el-menu-item index="Synthesis" >缁煎悎灞曠ず</el-menu-item>
- <el-menu-item index="Thematic">涓撻鍦板浘</el-menu-item>
- <el-menu-item index="Archive">璧勬枡棣�</el-menu-item>
- </el-submenu>
- <!-- <el-submenu index="4" class="faSub">
- <template slot="title">鏁版嵁璐ㄦ</template>
- <el-menu-item index="4-1">鏁版嵁璐ㄦ</el-menu-item>
- </el-submenu> -->
- <!-- <el-submenu index="5" class="faSub">
- <template slot="title">鏁版嵁浜ゆ崲</template>
- <el-menu-item index="5-1">鏁版嵁鍒嗗彂</el-menu-item>
- </el-submenu> -->
- <!-- <el-submenu index="6" class="faSub">
- <template slot="title">鏈嶅姟绠＄悊</template>
- <el-menu-item index="6-1">鏁版嵁鏈嶅姟娉ㄥ唽寮�鍚�</el-menu-item>
- </el-submenu> -->
+ <customElMenu :menuData="menuList"></customElMenu>
</el-menu>
</div>
</div>
@@ -79,7 +21,9 @@
<div class="userInfo">
<img src="../assets/img/user.png" alt="" />
<span>admin</span>
- <span>娉ㄩ攢</span>
+ <span @click="logOut">娉ㄩ攢</span>
+
+ <span @click="switchLang"> 鍒囨崲璇█</span>
</div>
<div class="btnBox">
<div><img src="../assets/img/leftBtn.png" alt="" /></div>
@@ -90,41 +34,185 @@
</template>
<script>
+import { logout } from "@/api/api";
+import { removeToken, getToken } from "@/utils/auth";
+import customElMenu from "../components/customElMenu.vue";
+import { queryMenuTree, getPerms } from "../api/api";
+
export default {
name: "navMenu",
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+ components: {
+ customElMenu,
+ },
+ data() {
+ return {
+ oriData: [], //鍘熷鏍戞暟鎹�
+ dirData: [], //el鏍戞暟鎹�
+ newData: [], //鎷栧姩鍚庢暟鎹�
+ lang: "zh",
+ activeIndex: "/",
+ menuList: [],
+ editTitle: "",
+ showPopover: false,
+ showEditInfoWrapper: false,
+ showEdit: false,
+ editMenu: false,
+ editCatalogue: false,
+ editUnit: false,
+ itemdetail: {},
+ formLabelWidth: "70px",
+ };
+ },
+ mounted() {
+ this.getMenuTree();
+ this.getUserPerms();
+ },
+ 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: {
- handleOpen(key, keyPath) {
- if (
- keyPath[1] != "dataLoading" &&
- keyPath[1] != "2-2" &&
- keyPath[1] != "2-5"
- )
- this.$router.push(keyPath[1]);
+ getMenuTree() {
+ //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
+ // queryMaxId().then((res) => {
+ // this.id = res.data;
+ // });
+ // 鑾峰彇鐩綍鏍戞暟鎹�
+ queryMenuTree().then((res) => {
+ if (res.code == 200) {
+ if (res.result.length != 0) {
+ let menuLists = res.result.filter((value) => {
+ return value.type == 1;
+ });
+ this.menuList = this.treeData(menuLists);
+ } else {
+ alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
+ }
+ } else {
+ console.log("鎺ュ彛鎶ラ敊");
+ }
+ });
},
- handleClose(key, keyPath) {
- if (
- keyPath[1] != "dataLoading" &&
- keyPath[1] != "2-5" &&
- keyPath[1] != "2-2"
- )
- this.$router.push(keyPath[1]);
- },
- handleselect(index) {
- if (index != null) {
- this.$emit("shwoMapView", false);
+ treeData(source) {
+ let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+ // console.log(cloneData);
+ if (cloneData.length != 0) {
+ return cloneData.filter((father) => {
+ // 寰幆鎵�鏈夐」
+ let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
+ // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+ return father.pid == 1; // 杩斿洖涓�绾ц彍鍗�
+ });
+ } else {
+ alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
}
},
- showChange() {
- this.$emit("shwoMapView", true);
+ logOut() {
+ this.$confirm("纭鏄惁閫�鍑虹櫥褰�?", "鎻愮ず", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = await logout({ token: getToken() });
+ console.log(data);
+ if (data.code != 200) {
+ return this.$message.error("閫�鍑虹櫥褰曞け璐�");
+ }
+ removeToken();
+ this.$router.push("/login");
+ this.$message({
+ message: "閫�鍑虹櫥褰曟垚鍔�",
+ type: "success",
+ });
+ })
+ .catch(() => {
+ this.$message({
+ type: "info",
+ message: "宸插彇娑�",
+ });
+ });
},
+ switchLang() {
+ //褰撳墠en
+ if (this.lang == "en") {
+ //璇█鎹㈡垚zh
+ this.lang = "zh";
+ //鑿滃崟鎹负zh
+ this.$store.commit("changeLang", "zh");
+ //i18鎹㈡垚zh
+ this.$i18n.locale = this.lang;
+ }
+ //褰撳墠zh
+ else {
+ this.lang = "en";
+ this.$i18n.locale = this.lang;
+ this.$store.commit("changeLang", "en"); //浼犻�掔偣鍑荤殑鑺傜偣
+ }
+ },
+ 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);
+ } else if (isNaN(Number(index))) {
+ this.$router.push(index);
+ }
+ },
+ getUserPerms() {
+ getPerms().then((res) => {
+ if (res.code == 200) this.$store.commit("getPermsEntity", res.result);
+ });
+ },
+ },
+ watch: {
+ $route() {
+ 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绫�
+.leftMenu {
+ // width: 300px;
+ height: 99%;
+ // background-color: #bfa;
+}
.leftTopWrapper {
width: 100%;
+ height: 100%;
.logo {
// background-color: rgb(139, 0, 0);
width: 249px;
@@ -134,12 +222,13 @@
}
}
.menu {
- height: 740px;
+ height: 90%;
margin-top: 22px;
overflow: auto;
-
+ // background-color: rgb(120, 121, 120);
.el-menu {
- width: 234px;
+ height: 100%;
+ width: 280px;
border-right: none;
/deep/ .el-submenu {
margin-bottom: 10px;
@@ -162,7 +251,7 @@
justify-content: space-between;
align-items: center;
.userInfo {
- width: 138px;
+ // width: 138px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
@@ -170,6 +259,7 @@
display: flex;
justify-content: space-between;
align-items: center;
+ cursor: pointer;
}
.btnBox {
width: 65px;
--
Gitblit v1.9.3