123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- <!--
- * @Description:
- * @Version: 1.0
- * @Autor: zhuyijun
- * @Date: 2021-11-21 18:27:01
- * @LastEditTime: 2021-11-21 22:36:07
- -->
- <template>
- <!-- 头部区域 -->
- <el-container class="home-container">
- <el-header>
- <div>
- <img src="../assets/heima.png"
- alt="电商后台管理系统">
- <span>电商后台管理系统</span>
- </div>
- <el-button type="info"
- @click="logout">注销</el-button>
- </el-header>
- <!-- 页面主题区 -->
- <el-container>
- <!-- 侧边栏 -->
- <el-aside :width="isCollapse ?'64px':'200px'">
- <div class="toggle-button"
- @click="toggleCollapse">|||</div>
- <!-- 侧边栏菜单区
- :router="true" 可以将index当做路径
- -->
- <el-menu background-color="
- #333744"
- text-color="#fff"
- active-text-color="#409EFF"
- unique-opened
- :collapse="isCollapse"
- :collapse-transition="false"
- :router="true"
- :default-active="activePath">
- <!-- 一级菜单 -->
- <el-submenu :index="'/'+item.path"
- v-for="item in menuList"
- :key="item.id+''">
- <!-- 一级菜单模板区 -->
- <template slot="title">
- <!-- 图标 -->
- <i :class="iconsObj[item.id+'']"></i>
- <span> {{item.authName}}</span>
- </template>
- <!-- 二级菜单 -->
- <el-menu-item :index="'/'+subItem.path"
- v-for="subItem in item.children"
- :key="subItem.id+''"
- @click="saveNavState('/'+subItem.path)">
- <!-- 二级菜单模板区 -->
- <template slot="title">
- <!-- 图标 -->
- <i class="el-icon-menu"></i>
- <span>{{subItem.authName}}</span>
- </template>
- </el-menu-item>
- </el-submenu>
- </el-menu>
- </el-aside>
- <!-- 右侧主体 -->
- <el-main>
- <!-- 路由占位符 -->
- <router-view></router-view>
- </el-main>
- </el-container>
- </el-container>
- </template>
- <script>
- export default ({
- data () {
- return {
- menuList: {},
- iconsObj: {
- '125': 'el-icon-s-custom',
- '103': 'el-icon-s-management',
- '101': 'el-icon-s-shop',
- '102': 'el-icon-tickets',
- '145': 'el-icon-data-line'
- },
- isCollapse: false,
- activePath: ''
- }
- },
- created () {
- this.getMenuList()
- this.activePath = window.sessionStorage.getItem('activePath')
- },
- methods: {
- logout () {
- window.sessionStorage.clear()
- this.$router.push('/login')
- },
- // 获取所有的菜单
- async getMenuList () {
- const { data: res } = await this.$http.get('menus')
- if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
- // this.$message.success(res.meta.msg)
- this.menuList = res.data
- // console.log(res)
- },
- // 折叠和展开
- toggleCollapse () {
- this.isCollapse = !this.isCollapse
- },
- saveNavState (activePath) {
- window.sessionStorage.setItem('activePath', activePath)
- this.activePath = activePath
- }
- }
- })
- </script>
- <style lang="less" scoped>
- .home-container {
- height: 100%;
- }
- .el-header {
- background-color: #373d41;
- display: flex;
- justify-content: space-between;
- padding-left: 0;
- align-items: center;
- color: #fff;
- font-size: 20px;
- }
- .el-header > div {
- display: flex;
- align-items: center;
- }
- .el-header > div > span {
- margin-left: 15px;
- }
- .el-aside {
- background-color: #333744;
- text-align: center;
- margin-left: 0;
- }
- .el-aside .el-menu {
- border-right: none;
- }
- .el-main {
- background-color: #eaedf1;
- }
- .el-submenu i {
- margin-right: 10px;
- }
- .toggle-button {
- background-color: #4a5064;
- font-size: 10px;
- line-height: 24px;
- color: #fff;
- text-align: center;
- letter-spacing: 0.2em;
- cursor: pointer;
- }
- </style>
|