|
|
@@ -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>
|