vue-el-admin 通用说明

一、 router=>config 菜单(menu)

多级菜单样式，id用来控制权限

{
    id:'1000',
    text: '时间带',
    icon: timer_icon,
    children: [
      { 
        id:'1001',
        text: '汇总', 
        path: '/timer_total1', 
        view: 'timer/total1' 
      },
      { 
        id:'1002',
        text: '单店', 
        path: '/timer_store', 
        view: 'timer/store' 
      },
    ],
  },
  {
    id:'2000',
    text: '鲜食',
    icon: fresh_icon,
    children: [
      { 
        id:'2001',
        text: '汇总', 
        path: '/fresh_total', 
        view: 'fresh/total' 
      },
      { 
        id:'2002',
        text: '分类', 
        path: '/fresh_category', 
        view: 'fresh/category' 
      },
      { 
        id:'2003',
        text: '单品', 
        path: '/fresh_product', 
        view: 'fresh/product' 
      },
    ],
  },

修改菜单图标样式

1、引入图片

import timer_icon from '@/assets/timer.png'
import fresh_icon from '@/assets/fresh.png'
import setting_icon from '@/assets/setting.png'
import system_icon from '@/assets/system.png'

2、设置菜单图片

id:'1000',
text: '时间带',
icon: timer_icon, //菜单图片

3、显示菜单图片 （SidebarMenu 文件中）

<img v-if="menu.icon" class="menu_icon" :src="menu.icon"/>

二、Sidebar 菜单侧边栏

修改宽度及背景

.Sidebar {
  position: relative;
  min-height: 100vh;
  min-width: 200px; //最小宽度
  background: #242536;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  &:not(.is-collapse) {
    width: 200px; //默认宽度
  }
  > i {
    position: absolute;
    display: inline-block;
    top: 0;
    right: -50px;
    font-size: 24px;
    line-height: $topbarHeight;
    padding: 0 10px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    &:hover {
      color: rgba(0, 0, 0, 0.8);
    }
  }
}

二、SidebarMenu 明细菜单栏

可单独修改菜单背景 等

背景 文字颜色、展开效果等

<el-menu
    :default-active="$route.path"
    :collapse="collapse"
    :collapse-transition="false"
    :text-color="variables.menuTextColor"
    :background-color="variables.menuBackgroundColor"
    router
    unique-opened
  >

展示菜单图片

<img v-if="menu.icon" class="menu_icon" :src="menu.icon"/>

权限设置

1、权限列表 根据 菜单(menu)中id对应

data() {
    return {
      listAuth:['1000','1001','1002','2000','2001','2002','2003','8001','8002'],
    }
  },

2、权限过滤

computed: {
    //menus:()=> menus,
    menus()
    {
      console.log('设置菜单权限')
    
      let uMenus = []
      if(!this.listAuth || this.listAuth.length == 0)
      {
        return uMenus
      }
      
      for (let menu of menus) 
      {
        //0 开头全部要
        if(menu.id.substring(0,1) == '0')
        {
          uMenus.push(menu)
          continue;
        }

        if(this.listAuth.find(a=>a === menu.id))
        {
          if(menu.children)
          {
            let childs = []
            
            for (let child of menu.children) 
            {
              if(this.listAuth.find(a=>a === child.id))
              {
                childs.push(child)
              }
            }
            menu.children = childs
          }
          
          uMenus.push(menu)
        }
      }
    
      return uMenus
    }, //=> menus,
  },

四、SidebarLogo 菜单头部图标

五、UserLinks 用户名称 退出登录、修改密码等

六、Breadcrumb 顶部路径栏

七、layout.vue 布局页面

注：用户缓存

1、缓存文件路径 store=> modules=>account

2、用户登录时，缓存用户信息，同时缓存时间

 storage.setUserInfo(userInfo)
  state.userInfo = userInfo

  //保存 用户登录时间
  let timespan = Date.parse(new Date())
  storage.setUserInfoTime(timespan.toString());
  console.log("保存用户信息")

3、获取用户信息时、判断缓存是否失效

userInfo: function (state) {
    if (!state.userInfo) {
      //获取内存用户信息
      let uInfo =  storage.getUserInfo()
      if(uInfo)
      {
        //获取用户登录时间
        let strtime =  storage.getUserInfoTime()
        if(strtime)
        {
          //计算过期时间
          let vaildtime = Number(strtime) + useValidTime
          let timespan = Date.parse(new Date())
          console.log(vaildtime + ',' + timespan)
          if(timespan < vaildtime)
          {
            console.log("用户未过期")
            state.userInfo = uInfo;
            return state.userInfo;
          }
        }
        console.log("用户已过期")
        clearUserInfo()
      }
    }
    return state.userInfo
  },

4、登录打开时，校验用户是否失效

 created: function () {
    that = this
    if(this.userInfo)
    {
      this.$router.replace(homePath)
      return
    }
    this.isShow = true
  },
  computed: {
    userInfo () {
      return this.$store.getters['account/userInfo'];
    }
  },