| | |
| | | :collapse-transition="false" |
| | | mode="vertical" |
| | | > |
| | | <sidebar-item |
| | | v-for="route in routes" |
| | | :key="route.path" |
| | | class="el-scrollbar-menu" |
| | | :item="route" |
| | | :base-path="route.path" |
| | | /> |
| | | <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />--> |
| | | <!-- <sidebar-item--> |
| | | <!-- v-for="route in routes"--> |
| | | <!-- :key="route.path"--> |
| | | <!-- class="el-scrollbar-menu"--> |
| | | <!-- :item="route"--> |
| | | <!-- :base-path="route.path"--> |
| | | <!-- />--> |
| | | <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> |
| | | |
| | | </el-menu> |
| | | </el-scrollbar> |
| | | <div style="position: absolute;bottom: 20px;left: 30px;"> |
| | | <div><el-button type="text">新凯迪制造V1.0.01</el-button></div> |
| | | <div> |
| | | <el-button type="text">新凯迪制造V1.0.01</el-button> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | import SidebarItem from './SidebarItem' |
| | | import variables from '@/styles/variables.scss' |
| | | import { LoginMenu } from '@/api/user' |
| | | import axios from 'axios' |
| | | import { setCookie } from '@/utils/auth' |
| | | |
| | | export default { |
| | | components: { SidebarItem, Logo }, |
| | |
| | | routers: [] |
| | | } |
| | | }, |
| | | async created() { |
| | | const { data: res } = await LoginMenu() |
| | | this.routers = res |
| | | this.routers.unshift({ name: '系统首页' }) |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'permission_routes', |
| | | 'sidebar' |
| | | ]), |
| | | routes() { |
| | | const newArr = [] |
| | | this.routers.forEach(item => { |
| | | if (item.name) { |
| | | newArr.push(item.name) |
| | | if (item.children) { |
| | | item.children.forEach(it => { |
| | | if (it.name) { |
| | | newArr.push(it.name) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | const arr = this.$router.options.routes |
| | | const arr2 = [] |
| | | arr.forEach((item, index) => { |
| | | if (newArr.includes(item.name) && item.children.length === 1) { |
| | | arr2.push(item) |
| | | } else if (newArr.includes(item.name) && item.children.length > 1) { |
| | | const a = [] |
| | | item.children.forEach((it, ind) => { |
| | | if (newArr.includes(it.name)) { |
| | | a.push(it) |
| | | } |
| | | }) |
| | | item.children = a |
| | | arr2.push(item) |
| | | } |
| | | }) |
| | | return arr2 |
| | | return this.$router.options.routes |
| | | }, |
| | | activeMenu() { |
| | | const route = this.$route |
| | | const { meta, path } = route |
| | | // if set path, the sidebar will highlight the path you set |
| | | setCookie('ruleCode', meta.code)// 将编码规则code存到cookie里面 |
| | | if (meta.activeMenu) { |
| | | return meta.activeMenu |
| | | } |
| | |
| | | } |
| | | </script> |
| | | <style lang="scss"> |
| | | $main_color :#42b983; |
| | | .el-button--text, .el-button--text.is-disabled, .el-button--text.is-disabled:focus, .el-button--text.is-disabled:hover, .el-button--text:active{ |
| | | color: white ; |
| | | font-size: 18px ; |
| | | $main_color: #42b983; |
| | | .el-button--text, .el-button--text.is-disabled, .el-button--text.is-disabled:focus, .el-button--text.is-disabled:hover, .el-button--text:active { |
| | | color: white; |
| | | font-size: 18px; |
| | | } |
| | | .el-button--text:focus{ |
| | | color: white; |
| | | } |
| | | #app .sidebar-container .el-submenu .el-menu-item { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | #app .sidebar-container .el-submenu .el-menu-item.is-active{ |
| | | #app .sidebar-container .el-submenu .el-menu-item.is-active { |
| | | background: $main_color !important; |
| | | color: #fff !important; |
| | | } |
| | | #app .sidebar-container .el-submenu .el-menu-item:hover{ |
| | | |
| | | #app .sidebar-container .el-submenu .el-menu-item:hover { |
| | | background: $main_color !important; |
| | | //color: #fff !important; |
| | | } |
| | | |
| | | .el-submenu__title{ |
| | | .el-submenu__title { |
| | | font-weight: bolder; |
| | | } |
| | | |
| | | .sub-el-icon::before{ |
| | | .sub-el-icon::before { |
| | | color: $main_color; |
| | | } |
| | | .svg-icon{ |
| | | |
| | | .svg-icon { |
| | | color: $main_color; |
| | | } |
| | | .submenu-title-noDropdown{ |
| | | |
| | | .submenu-title-noDropdown { |
| | | font-weight: bolder; |
| | | } |
| | | .router-link-exact-active>.submenu-title-noDropdown{ |
| | | |
| | | .router-link-exact-active > .submenu-title-noDropdown { |
| | | color: $main_color !important; |
| | | } |
| | | |
| | | .el-menu-item.is-active{ |
| | | .el-menu-item.is-active { |
| | | color: $main_color !important; |
| | | } |
| | | |
| | | .el-button--text:hover{ |
| | | .el-button--text:hover { |
| | | color: #ffffff; |
| | | cursor: default; |
| | | } |