|
@@ -1,109 +1,125 @@
|
|
|
<template>
|
|
|
- <div class="sidebar" :style="collapse ? 'width:85px' : 'width:220px'">
|
|
|
- <div class="logo" v-if="!collapse">
|
|
|
- <img style="width: rem(90); height: rem(24)" src="@/assets/img/img_logo2.png" />
|
|
|
- <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
|
|
|
- </div>
|
|
|
- <div class="logo shrink" v-else>
|
|
|
- <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
|
|
|
- </div>
|
|
|
- <div class="menu-wrap no-scrollbar">
|
|
|
- <el-menu
|
|
|
- class="sidebar-el-menu"
|
|
|
- ref="sidebarelmenu"
|
|
|
- :default-active="onRoutes"
|
|
|
- :collapse="collapse"
|
|
|
- background-color="#171F32"
|
|
|
- text-color="#aaadba"
|
|
|
- active-text-color="#2887f2"
|
|
|
- unique-opened
|
|
|
- collapse-transition
|
|
|
- router
|
|
|
- :style="collapse ? 'width:84px' : 'width:220px'"
|
|
|
- >
|
|
|
- <menu-tree :menuList="menuList" :collapse="collapse" :openArray="openArray"></menu-tree>
|
|
|
- </el-menu>
|
|
|
- </div>
|
|
|
- <div class="footer">
|
|
|
- <img
|
|
|
- :class="[collapse ? 'expandhover' : 'packuphover']"
|
|
|
- :src="collapse ? btnCollpaseright : btnCollpaseleft"
|
|
|
- @click="collapseChage"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="sidebar"
|
|
|
+ :style="collapse ? 'width:85px' : 'width:220px'"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="logo"
|
|
|
+ v-if="!collapse"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="width: rem(90); height: rem(24)"
|
|
|
+ src="@/assets/img/img_logo2.png"
|
|
|
+ />
|
|
|
+ <div class="title"><span class="point"></span>{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="logo shrink"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <div class="text">{{ $store.getters['getThisDetai'].name || sessSetThisDetai }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-wrap no-scrollbar">
|
|
|
+ <el-menu
|
|
|
+ class="sidebar-el-menu"
|
|
|
+ ref="sidebarelmenu"
|
|
|
+ :default-active="onRoutes"
|
|
|
+ :collapse="collapse"
|
|
|
+ background-color="#171F32"
|
|
|
+ text-color="#aaadba"
|
|
|
+ active-text-color="#2887f2"
|
|
|
+ unique-opened
|
|
|
+ collapse-transition
|
|
|
+ router
|
|
|
+ :style="collapse ? 'width:84px' : 'width:220px'"
|
|
|
+ >
|
|
|
+ <menu-tree
|
|
|
+ :menuList="menuList"
|
|
|
+ :collapse="collapse"
|
|
|
+ :openArray="openArray"
|
|
|
+ ></menu-tree>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <img
|
|
|
+ :class="[collapse ? 'expandhover' : 'packuphover']"
|
|
|
+ :src="collapse ? btnCollpaseright : btnCollpaseleft"
|
|
|
+ @click="collapseChage"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import MenuTree from './MenuTree.vue';
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
|
|
|
- btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
|
|
|
- openList: []
|
|
|
- };
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ btnCollpaseright: require('@assets/img/btn_collpaseright.png'),
|
|
|
+ btnCollpaseleft: require('@assets/img/btn_collpaseleft.png'),
|
|
|
+ openList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ MenuTree
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ onRoutes () {
|
|
|
+ return this.$route.path;
|
|
|
},
|
|
|
- components: {
|
|
|
- MenuTree
|
|
|
- },
|
|
|
- computed: {
|
|
|
- onRoutes() {
|
|
|
- return this.$route.path;
|
|
|
- },
|
|
|
- collapse() {
|
|
|
- return this.$store.getters['getCollapse'];
|
|
|
- },
|
|
|
- menuList() {
|
|
|
- let list = this.$store.getters['getMenuList'];
|
|
|
- return list;
|
|
|
- },
|
|
|
- openArray() {
|
|
|
- return this.openList;
|
|
|
- },
|
|
|
- sessSetThisDetai() {
|
|
|
- let text = '';
|
|
|
- if (!!window.sessionStorage.getItem('setThisDetai')) {
|
|
|
- text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
|
|
|
- }
|
|
|
- return text;
|
|
|
- }
|
|
|
+ collapse () {
|
|
|
+ return this.$store.getters['getCollapse'];
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 侧边栏折叠
|
|
|
- collapseChage() {
|
|
|
- this.$store.dispatch('collapse', !this.collapse);
|
|
|
- },
|
|
|
- thisfindMen(arr, indexPath) {
|
|
|
- let status = [];
|
|
|
- arr.map((v) => {
|
|
|
- if (v.children) {
|
|
|
- v.children.map((s) => {
|
|
|
- if ('/' + s.linkPath === indexPath) {
|
|
|
- status.push(v.linkPath, s.linkPath);
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- if ('/' + v.linkPath === indexPath) {
|
|
|
- status.push(v.linkPath);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- return status;
|
|
|
- }
|
|
|
+ menuList () {
|
|
|
+ let list = this.$store.getters['getMenuList'];
|
|
|
+ return list;
|
|
|
},
|
|
|
- watch: {
|
|
|
- $route(newValue, oldValue) {
|
|
|
- this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);
|
|
|
- }
|
|
|
+ openArray () {
|
|
|
+ return this.openList;
|
|
|
},
|
|
|
- created() {
|
|
|
- this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);
|
|
|
+ sessSetThisDetai () {
|
|
|
+ let text = '';
|
|
|
+ if (!!window.sessionStorage.getItem('setThisDetai')) {
|
|
|
+ text = JSON.parse(window.sessionStorage.getItem('setThisDetai')).name;
|
|
|
+ }
|
|
|
+ return text;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 侧边栏折叠
|
|
|
+ collapseChage () {
|
|
|
+ this.$store.dispatch('collapse', !this.collapse);
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;
|
|
|
- // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));
|
|
|
+ thisfindMen (arr, indexPath) {
|
|
|
+ let status = [];
|
|
|
+ arr.map((v) => {
|
|
|
+ if (v.children) {
|
|
|
+ v.children.map((s) => {
|
|
|
+ if ('/' + s.linkPath === indexPath) {
|
|
|
+ status.push(v.linkPath, s.linkPath);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if ('/' + v.linkPath === indexPath) {
|
|
|
+ status.push(v.linkPath);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return status;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route (newValue, oldValue) {
|
|
|
+ this.openList = this.thisfindMen(this.$store.getters['getMenuList'], newValue.path);
|
|
|
}
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.openList = this.thisfindMen(this.$store.getters['getMenuList'], this.$route.path);
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0;
|
|
|
+ // console.log((this.$refs.sidebarelmenu.$children[0].$children[0].$el.style.paddingLeft = 0));
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -213,7 +229,7 @@ export default {
|
|
|
background: #2c354a !important;
|
|
|
border-radius: rem(32) 0px 0px rem(32);
|
|
|
color: rgb(39, 135, 241) !important;
|
|
|
- border-right: 2px solid #2787f1;
|
|
|
+ // border-right: 2px solid #2787f1;
|
|
|
.el-submenu__icon-arrow::before {
|
|
|
color: rgb(39, 135, 241);
|
|
|
}
|