Quellcode durchsuchen

fix:添加跳转控制台

刘恒 vor 1 Jahr
Ursprung
Commit
e2601a00f0
3 geänderte Dateien mit 145 neuen und 67 gelöschten Zeilen
  1. BIN
      src/assets/image/title.png
  2. 21 12
      src/http/moudules/menu.js
  3. 124 55
      src/views/NavBar/NavBar.vue

BIN
src/assets/image/title.png


+ 21 - 12
src/http/moudules/menu.js

@@ -4,7 +4,7 @@ import axios from '../axios'
  * 菜单管理模块
  */
 
- // 保存
+// 保存
 export const save = (data) => {
     return axios({
         url: '/menu/save',
@@ -26,7 +26,7 @@ export const findNavTree = (params) => {
         url: '/menu/findNavTree',
         method: 'get',
         params,
-     
+
     })
 }
 // 查找导航菜单树
@@ -79,7 +79,7 @@ export const quotationSave = (data) => {
         data
     })
 }
-export const quotationUpdate= (data) => {
+export const quotationUpdate = (data) => {
     return axios({
         url: '/sys/quotation/update/sysQuotationTheme',
         method: 'post',
@@ -88,49 +88,58 @@ export const quotationUpdate= (data) => {
 }
 export const quotationDetail = (id) => {
     return axios({
-        url: '/sys/quotation/get/'+id,
+        url: '/sys/quotation/get/' + id,
         method: 'get'
     })
 }
 
-export const quotationDelete= (data) => {
+export const quotationDelete = (data) => {
     return axios({
         url: '/sys/quotation/delete/sysQuotationTheme',
         method: 'post',
         data
     })
 }
-export const quotationList= (data) => {
+export const quotationList = (data) => {
     return axios({
         url: '/sys/quotation/list',
         method: 'post',
         data
     })
 }
-export const quotationBatch= (data) => {
+export const quotationBatch = (data) => {
     return axios({
         url: '/sys/quotation/batch',
         method: 'post',
         data
     })
 }
-export const findTree= (id,managementSource) => {
+export const findTree = (id, managementSource) => {
     return axios({
-        url: '/sys/quotation/findTree?deptId='+id+'&managementSource='+managementSource,
+        url: '/sys/quotation/findTree?deptId=' + id + '&managementSource=' + managementSource,
         method: 'get',
     })
 }
-export const findUserList= (data) => {
+export const findUserList = (data) => {
     return axios({
         url: '/sys/quotation/findUserList',
         method: 'post',
         data
     })
 }
-export const quotationConfig= (data) => {
+export const quotationConfig = (data) => {
     return axios({
         url: '/sys/quotation/config',
         method: 'post',
         data
     })
-}
+}
+
+export const getConfig = (data) => {
+    return axios({
+        url: '/sysUserLinkSys/authorizeByUserId?userId=' + data.userId,
+        method: 'get',
+
+    })
+}
+

+ 124 - 55
src/views/NavBar/NavBar.vue

@@ -3,21 +3,48 @@
     <!-- logo -->
     <div
       class="logo flex a-c j-c"
-      style='background-color:#fff;'
-      :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
+      style="background-color: #fff"
+      :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'"
       @click="$router.push('/')"
     >
-      <img style="margin-right:0" v-if="collapse" src="@/assets/image/new_logo.png" />
-      <div v-if="!collapse" class="flex j-c a-c" >
-        <img src="@/assets/image/new_logo.png" />
-        <span>{{appName}}</span>
-      </div>
+      <img
+        style="margin-right: 0"
+        v-if="collapse"
+        src="@/assets/image/new_logo.png"
+      />
+      <el-dropdown>
+        <div v-if="!collapse" class="flex j-c a-c">
+          <img src="@/assets/image/new_logo.png" />
+          <span>{{ appName }}</span>
+          <i class="el-icon-caret-bottom"></i>
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <div class="flex">
+              <img
+                src="@/assets/image/new_logo.png"
+                style="width: 30px; height: 30px; margin-right: 5px"
+              />
+              <span>{{ appName }}</span>
+            </div>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="showConfig">
+            <div class="flex" @click="toConfig">
+              <img
+                src="@/assets/image/title.png"
+                style="width: 30px; height: 30px; margin-right: 5px"
+              />
+              <span>晋掌柜控制台</span>
+            </div>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
     <!-- 导航菜单 -->
     <el-menu
       ref="navmenu"
       :default-active="menuIndex"
-      :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
+      :class="collapse ? 'menu-bar-collapse-width' : 'menu-bar-width'"
       :collapse="collapse"
       :collapse-transition="false"
       :unique-opened="true"
@@ -29,24 +56,31 @@
       active-text-color="#fff"
     >
       <!-- 导航菜单树组件,动态加载菜单 -->
-      <menu-tree v-for="item in leftTree" :key="item.id" :menu="item"></menu-tree>
+      <menu-tree
+        v-for="item in leftTree"
+        :key="item.id"
+        :menu="item"
+      ></menu-tree>
     </el-menu>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
 import MenuTree from "@/components/MenuTree";
+import CryptoJS from "crypto-js";
+import Cookies from "js-cookie";
+
 export default {
   components: {
-    MenuTree
+    MenuTree,
   },
   computed: {
     ...mapState({
-      appName: state => state.app.appName,
-      themeColor: state => state.app.themeColor,
-      collapse: state => state.app.collapse,
-      navTree: state => state.menu.navTree,
-      leftTree: state => state.menu.leftTree
+      appName: (state) => state.app.appName,
+      themeColor: (state) => state.app.themeColor,
+      collapse: (state) => state.app.collapse,
+      navTree: (state) => state.menu.navTree,
+      leftTree: (state) => state.menu.leftTree,
     }),
     mainTabs: {
       get() {
@@ -54,7 +88,7 @@ export default {
       },
       set(val) {
         this.$store.commit("updateMainTabs", val);
-      }
+      },
     },
     mainTabsActiveName: {
       get() {
@@ -62,34 +96,64 @@ export default {
       },
       set(val) {
         this.$store.commit("updateMainTabsActiveName", val);
-      }
-    }
+      },
+    },
   },
   watch: {
-    $route: "handleRoute"
+    $route: "handleRoute",
+  },
+  data() {
+    return {
+      menuIndex:
+        this.$route.meta.index !== 0
+          ? this.$route.meta.index
+          : this.leftTree[0].id,
+      showConfig: false,
+    };
   },
-data(){
-  return{
-    menuIndex: this.$route.meta.index!==0?this.$route.meta.index:this.leftTree[0].id
-  }
-},
   created() {
     this.handleRoute(this.$route);
-
+    this.getConfig();
   },
   methods: {
+    toConfig() {
+      // let token=
+      // console.log(Cookies.get("token"));
+      let token = CryptoJS.AES.encrypt(
+        Cookies.get("token"),
+        "token"
+      ).toString();
+
+      window.location.href =
+        process.env.CONSOLE_BASE_URL + "/#/index?token=" + token;
+    },
+    getConfig() {
+      // console.log();
+      let userId = JSON.parse(localStorage.getItem("user_data")).id;
+      // console.log(userId);
+      this.$api.menu
+        .getConfig({
+          userId: userId,
+        })
+        .then((res) => {
+          // console.log(res);
+          if (res.code === 200) {
+            this.showConfig = res.data;
+          }
+        });
+    },
     handleopen() {},
     handleclose() {},
     handleselect(a, b) {},
     // 路由操作处理
     handleRoute(route) {
       // tab标签页选中, 如果不存在则先添加
-      var tab = this.mainTabs.filter(item => item.name === route.name)[0];
+      var tab = this.mainTabs.filter((item) => item.name === route.name)[0];
       if (!tab) {
         tab = {
           name: route.name,
           title: route.name,
-          icon: route.meta.icon
+          icon: route.meta.icon,
         };
         this.mainTabs = this.mainTabs.concat(tab);
       }
@@ -99,8 +163,8 @@ data(){
         this.$refs.navmenu.activeIndex = "" + route.meta.index;
         this.$refs.navmenu.initOpenedMenu();
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -122,8 +186,12 @@ data(){
     position: absolute;
     top: 0px;
     height: 60px;
-    line-height: 60px;
+    // line-height: 60px;
+    display: flex;
+    align-items: center;
     background: #545c64;
+    padding: 10px;
+    box-sizing: border-box;
     cursor: pointer;
     img {
       // width: 40px;
@@ -144,34 +212,35 @@ data(){
   }
   .menu-bar-collapse-width {
     width: 65px;
-    
-
   }
   /* 滚动条的整体部分,可自定义宽度、颜色等 */
   .menu-bar-width::-webkit-scrollbar {
-  width: 10px; /* 或者更宽 */
-  background-color: #f9f9fd; /* 滚动条的背景色 */
-}
-/* 滚动条上的“滑块” */
-.menu-bar-width::-webkit-scrollbar-thumb {
-  border-radius: 6px; /* 圆角 */
-  background-color: #d1d1e0; /* 滑块的背景色 */
-  border: 3px solid #f9f9fd; /* 滑块边框 */
-}
-/* 滚动条上的“滑道” */
-.menu-bar-width::-webkit-scrollbar-track {
-  border-radius: 6px; /* 圆角 */
-  box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滑道的阴影效果 */
-}
-/* 当鼠标悬停在滚动条上时,改变滑块的颜色 */
-.menu-bar-width::-webkit-scrollbar-thumb:hover {
-  background-color: #a0a0a5;
-}
+    width: 10px; /* 或者更宽 */
+    background-color: #f9f9fd; /* 滚动条的背景色 */
+  }
+  /* 滚动条上的“滑块” */
+  .menu-bar-width::-webkit-scrollbar-thumb {
+    border-radius: 6px; /* 圆角 */
+    background-color: #d1d1e0; /* 滑块的背景色 */
+    border: 3px solid #f9f9fd; /* 滑块边框 */
+  }
+  /* 滚动条上的“滑道” */
+  .menu-bar-width::-webkit-scrollbar-track {
+    border-radius: 6px; /* 圆角 */
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 滑道的阴影效果 */
+  }
+  /* 当鼠标悬停在滚动条上时,改变滑块的颜色 */
+  .menu-bar-width::-webkit-scrollbar-thumb:hover {
+    background-color: #a0a0a5;
+  }
 
-/* 当滚动条在点击状态时,改变滑块的颜色 */
-.menu-bar-width::-webkit-scrollbar-thumb:active {
-  background-color: #888;
-}
+  /* 当滚动条在点击状态时,改变滑块的颜色 */
+  .menu-bar-width::-webkit-scrollbar-thumb:active {
+    background-color: #888;
+  }
+  .title img {
+    width: 30px;
+    height: 30px;
+  }
 }
-
 </style>