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 |  435 ++++++++++++++++++++++++++----------------------------
 1 files changed, 210 insertions(+), 225 deletions(-)

diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 63723ba..800d365 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,267 +1,252 @@
 <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"
-          background-color="#3B4D6E"
-          class="el-menu-vertical-demo"
-          default-active="2"
-          text-color="#fff"
-          router
-          @open="handleOpen"
-          @close="handleClose"
-          @select="handleselect"
-        >
-          <el-submenu index="3" class="faSub">
-            <template slot="title">
-              <span>{{ $t('synthesis.synthesis') }}</span>
-            </template>
-            <el-menu-item index="Synthesis">{{
-              $t('synthesis.synthesis')
-            }}</el-menu-item>
-            <el-menu-item index="Thematic">{{
-              $t('synthesis.themaic')
-            }}</el-menu-item>
-            <el-menu-item index="Archive">{{
-              $t('synthesis.archive')
-            }}</el-menu-item>
-          </el-submenu>
-          <el-submenu index="1" class="faSub">
-            <template slot="title">
-              <span>{{ $t('dataManage.dataManage') }}</span>
-            </template>
-            <el-menu-item index="catalogueManage">{{
-              $t('dataManage.catalogueManage')
-            }}</el-menu-item>
-            <el-menu-item index="dataUpdata">{{
-              $t('dataManage.dataUpdata')
-            }}</el-menu-item>
-            <el-menu-item index="metadataManage">{{
-              $t('dataManage.metadataManage')
-            }}</el-menu-item>
-            <el-menu-item index="dataLoading">{{
-              $t('dataManage.dataLoading')
-            }}</el-menu-item>
-            <el-menu-item index="SpatialData">{{
-              $t('dataManage.SpatialData')
-            }}</el-menu-item>
-            <el-menu-item index="versionManage">{{
-              $t('dataManage.versionManage')
-            }}</el-menu-item>
-            <el-menu-item index="dictionaryManage">{{
-              $t('dataManage.dictionaryManage')
-            }}</el-menu-item>
-            <el-menu-item index="styleManage">{{
-              $t('dataManage.styleManage')
-            }}</el-menu-item>
-          </el-submenu>
-          <el-submenu index="2" class="faSub">
-            <template slot="title">
-              <span>{{ $t('operatManage.operatManage') }}</span>
-            </template>
-            <el-submenu index="2-2">
-              <template slot="title">{{
-                $t('operatManage.systemLayout')
-              }}</template>
-              <el-menu-item index="menuSettings">{{
-                $t('operatManage.menuSettings')
-              }}</el-menu-item>
-              <el-menu-item index="parameterConfiguration">{{
-                $t('operatManage.parameterConfiguration')
-              }}</el-menu-item>
-              <el-menu-item index="rests">{{
-                $t('operatManage.rests')
-              }}</el-menu-item>
-            </el-submenu>
-            <el-menu-item index="authorityManagement">{{
-              $t('operatManage.authorityManagement')
-            }}</el-menu-item>
-            <el-menu-item index="safetyManagement">{{
-              $t('operatManage.safetyManagement')
-            }}</el-menu-item>
-            <el-submenu index="2-5">
-              <template slot="title">{{
-                $t('operatManage.operationMonitoring')
-              }}</template>
-              <el-menu-item index="eventlogManage">{{
-                $t('operatManage.ResourceLog')
-              }}</el-menu-item>
-              <el-menu-item index="logLog">{{
-                $t('operatManage.logLog')
-              }}</el-menu-item>
-              <el-menu-item index="operationLog">{{
-                $t('operatManage.operationLog')
-              }}</el-menu-item>
-              <el-menu-item index="databaseMonitoring">{{
-                $t('operatManage.databaseMonitoring')
-              }}</el-menu-item>
-              <el-menu-item index="systemMonitoring">{{
-                $t('operatManage.systemMonitoring')
-              }}</el-menu-item>
-              <el-menu-item index="blackwhiteList"
-                >{{ $t('operatManage.blackwhiteList') }}
-              </el-menu-item>
-              <el-menu-item index="tokentool">{{
-                $t('operatManage.tokentool')
-              }}</el-menu-item>
-            </el-submenu>
-          </el-submenu>
-
-          <el-submenu index="4" class="faSub">
-            <template slot="title">
-              <span>{{ $t('userManage.userManage') }}</span>
-            </template>
-            <el-menu-item index="userInfoManage">{{
-              $t('userManage.userInfoManage')
-            }}</el-menu-item>
-            <el-menu-item index="orgManage">{{
-              $t('userManage.orgManage')
-            }}</el-menu-item>
-            <el-menu-item index="userAuditing">{{
-              $t('userManage.userAuditing')
-            }}</el-menu-item>
-            <el-menu-item index="roleManage">{{
-              $t('userManage.roleManage')
-            }}</el-menu-item>
-            <el-menu-item index="groupManage">{{
-              $t('userManage.groupManage')
-            }}</el-menu-item>
-            <el-menu-item index="authorityManage">{{
-              $t('userManage.authorityManage')
-            }}</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> -->
-        </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>娉ㄩ攢</span>
+        <span @click="logOut">娉ㄩ攢</span>
         &nbsp;
         <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>
 </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',
+  name: "navMenu",
   //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
+  components: {
+    customElMenu,
+  },
   data() {
     return {
-      lang: 'en',
+      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.getUserPerms();
+    this.getMenuTree();
+  },
+  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.pid == 1;
+            });
+            // console.log(menuLists);
+            this.menuList = 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 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 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() {
-      if (this.lang == 'en') {
+      //褰撳墠en
+      if (this.lang == "en") {
+        //璇█鎹㈡垚zh
+        this.lang = "zh";
+        //鑿滃崟鎹负zh
+        this.$store.commit("changeLang", "zh");
+        //i18鎹㈡垚zh
         this.$i18n.locale = this.lang;
-        this.lang = 'zh';
-      } else {
+      }
+      //褰撳墠zh
+      else {
+        this.lang = "en";
         this.$i18n.locale = this.lang;
-        this.lang = 'en';
+        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绫�
-.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