acl_tousu_ui/src/components/permissions/index.vue

<template>
  <div class="contartant">
    <div class="banner">
      <span>
        投 诉 管 理 系 统
      </span>
      <div class="content">
            <div class="userImg">
                <i class="el-icon-s-custom"></i>
            </div>
            <span class="name">{{userName }}</span>
          </div>
    </div>
    <div class="nav" :style="isCollapse?'width:60px':'width:220px'">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          @select="handleSelect"
        >
          <el-submenu v-for="(item,ind) in navList" :index="item.index" :key="ind">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <!-- <router-link  v-for="(it,i) in item.children"  :key="i" :to="it.url">
                <el-menu-item :index="it.name">{{it.name}}</el-menu-item>
              </router-link> -->
              <el-menu-item v-for="(it,i) in item.children"  :key="i" :index="it.index" @click="navLike(it)">{{it.name}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
      <div class="isfold" :style="isCollapse?'width:60px':'width:220px'" @click="isfoldFun">
          <i :class="isfold?'el-icon-d-arrow-right ifont':'el-icon-d-arrow-left ifont'" ></i>
      </div>
    </div>
    <div class="content" :style="isCollapse?`width: calc(100% - 60px)`:`width: calc(100% - 220px)`">
      <div class="tagContainer">
        <span class="marginRight5">{{(activeMenuName=='操作日志'|| activeMenuName=='登录日志')?'日志管理':'权限管理'}}</span>
        /<span class="fontBlur pointer marginLeft5">{{activeMenuName}}</span>
      </div>
      <div class="list">
        <!-- <keep-alive> -->
          <router-view />
        <!-- </keep-alive> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Permissions",
  components: {},
  data() {
    return {
      isfold: false,
      isCollapse:false,
      userName:'',
      navList: [
        {
          name: '权限管理',
          icon: 'el-icon-s-tools',
          index: '0',
          children: [
            {
              name: '角色介绍',
              url:'/permissions/role',
              index: '0-0'
            },
            {
              name: '模块介绍',
              url:'/permissions/module',
              index: '0-1'
            },
            {
              name: '用户管理',
              url:'/permissions/user',
              index: '0-2'
            },
          ]
        },
        {
          name: '日志管理',
          icon: 'el-icon-s-order',
          id:'1',
          children: [
            {
              name: '操作日志',
              url:'/permissions/operate',
              index: '1-0'
            },
            {
              name: '登录日志',
              url:'/permissions/login',
              index: '1-1'
            },
          ]
        },
      ],
      activeMenu: "0-0",
      activeMenuName: "角色介绍",
    };
  },

  created() {
    this.$router.push({
          path:'/permissions/role',
          query: {
              token: sessionStorage.getItem('Authorization-Token'),
              fromSystem: sessionStorage.getItem('Authorization-fromSystem'),
          }
      })
    this.userName  = sessionStorage.getItem('userNameData')
    this.init();
  },
  methods: {
    init() {},
    handleSelect(val){
      this.activeMenu = val
    },
    isfoldFun () {
      this.isfold = !this.isfold
      this.isCollapse = !this.isCollapse
    },
    navLike(val){
      this.activeMenuName = val.name
      this.$router.push({
          path:val.url,
          query: {
              token: sessionStorage.getItem('Authorization-Token'),
              fromSystem: sessionStorage.getItem('Authorization-fromSystem'),
          }
      })
    }
  },
};
</script>
<style lang="less" scoped>
@import "../../common/less/public.less";
@import "../../common/less/layout.less";

</style>