xcx

src/components/breadCrumb/index.vue

@@ -3,7 +3,8 @@
     <span>当前页面路径：</span>
     <el-breadcrumb separator="/">
       <el-breadcrumb-item v-for="(item,index) in list" :key="index">
-        <router-link :to="{name:item.pathName,query:{}}">{{item.title}}</router-link>
+        <router-link v-if="index==0" :to="{name:'',query:{}}">{{item.MenuName}}</router-link>
+        <router-link v-if="index!=0" :to="{name:item.Url,query:{}}">{{item.MenuName}}</router-link>
       </el-breadcrumb-item>
     </el-breadcrumb>
   </div>

src/components/siderBar/index.vue

@@ -10,16 +10,16 @@
           <template v-for="(item,index) in menu">
             <el-submenu v-if="item.children.length" :index="String(index)" :key="index">
               <template slot="title">
-                <span>{{item.title}}</span>
+                <span>{{item.MenuName}}</span>
               </template>
               <el-menu-item-group>
                 <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex" :index="String(index)+'-'+String(subIndex)">
-                  <router-link :to="{name:subItem.pathName,query:{}}" active-class="active">{{subItem.title}}</router-link>
+                  <router-link :to="{name:subItem.Url,query:{}}" active-class="active">{{subItem.MenuName}}</router-link>
                 </el-menu-item>
               </el-menu-item-group>
             </el-submenu>
             <el-menu-item v-else :index="String(index)" :key="index">
-              <span slot="title">{{item.title}}</span>
+              <span slot="title">{{item.MenuName}}</span>
             </el-menu-item>
           </template>
         </el-menu>

src/main.js

@@ -11,10 +11,12 @@ import router from './router'
 import Ajax from './util/ajax'
 import api from './util/api'
 import store from './store'
+import Vuex from 'vuex'
 
 Vue.use(ElementUI)
 Vue.use(Cookies)
 Vue.use(VueAMap)
+Vue.use(Vuex)
 
 VueAMap.initAMapApiLoader({
   key: 'f0d1d4f82432504003ebf46e5e36ff03',

src/pages/system/index.vue

@@ -30,132 +30,187 @@
 <script>
 import breadCrumb from '@/components/breadCrumb/index'
 import siderBar from '@/components/siderBar/index'
+import routerData from '@/router/router'
+
+import { mapState, mapMutations } from 'vuex'
 
 export default {
   name: '',
   data () {
     return {
-      breadCrumb: [{
-        title: '导航1',
-        pathName: ''
-      }, {
-        title: '导航2',
-        pathName: ''
-      }, {
-        title: '导航3',
-        pathName: ''
-      }, {
-        title: '导航4',
-        pathName: ''
-      }, {
-        title: '导航5',
-        pathName: ''
-      }],
-      pageMenu: [{
-        title: '系统设置',
-        pathName: '',
-        children: [{
-          title: '用户管理',
-          pathName: 'userManager',
-          children: [],
-        }, {
-          title: '角色管理',
-          pathName: 'roleManager',
-          children: [],
-        }],
-      }, {
-        title: '案场管理',
-        pathName: '',
-        children: [{
-          title: '案场信息',
-          pathName: 'caseInfo',
-          children: [],
-        }, {
-          title: '钥匙管理',
-          pathName: 'keyManager',
-          children: [],
-        }, {
-          title: '案场区域管理',
-          pathName: 'caseAreaManager',
-          children: [],
-        }, {
-          title: '案场桌位管理',
-          pathName: 'caseTableManager',
-          children: [],
-        }],
-      }, {
-        title: '商品管理',
-        pathName: '',
-        children: [{
-          title: '商品类型管理',
-          pathName: 'goodsTypeManager',
-          children: [],
-        }, {
-          title: '商品规格管理',
-          pathName: 'goodsSpecManager',
-          children: [],
-        }],
-      }, {
-        title: 'CMS管理',
-        pathName: '',
-        children: [{
-          title: '轮播图管理',
-          pathName: 'bannerManager',
-          children: [],
-        }, {
-          title: '售楼处项目专题',
-          pathName: 'majorProjects',
-          children: [],
-        }, {
-          title: '首页消息',
-          pathName: 'indexMsg',
-          children: [],
-        }, {
-          title: '资讯管理',
-          pathName: 'newsManager',
-          children: [],
-        }],
-      }, {
-        title: '渠道管理',
-        pathName: '',
-        children: [{
-          title: '渠道列表',
-          pathName: 'channelList',
-          children: [],
-        }],
-      }, {
-        title: '课程管理',
-        pathName: '',
-        children: [{
-          title: '全龄生活5A',
-          pathName: 'fiveA',
-          children: [],
-        }, {
-          title: '课程标签',
-          pathName: 'courseTag',
-          children: [],
-        }],
-      }, {
-        title: '数据统计',
-        pathName: '',
-        children: [{
-          title: '前台用户列表',
-          pathName: 'frontEndUserList',
-          children: [],
-        }],
-      }]
+      pageMenu: [
+        // {
+        //   title: '系统设置',
+        //   pathName: '',
+        //   children: [{
+        //     title: '用户管理',
+        //     pathName: 'userManager',
+        //     children: [],
+        //   }, {
+        //     title: '角色管理',
+        //     pathName: 'roleManager',
+        //     children: [],
+        //   }],
+        // }, {
+        //   title: '案场管理',
+        //   pathName: '',
+        //   children: [{
+        //     title: '案场信息',
+        //     pathName: 'caseInfo',
+        //     children: [],
+        //   }, {
+        //     title: '钥匙管理',
+        //     pathName: 'keyManager',
+        //     children: [],
+        //   }, {
+        //     title: '案场区域管理',
+        //     pathName: 'caseAreaManager',
+        //     children: [],
+        //   }, {
+        //     title: '案场桌位管理',
+        //     pathName: 'caseTableManager',
+        //     children: [],
+        //   }],
+        // }, {
+        //   title: '商品管理',
+        //   pathName: '',
+        //   children: [{
+        //     title: '商品类型管理',
+        //     pathName: 'goodsTypeManager',
+        //     children: [],
+        //   }, {
+        //     title: '商品规格管理',
+        //     pathName: 'goodsSpecManager',
+        //     children: [],
+        //   }],
+        // }, {
+        //   title: 'CMS管理',
+        //   pathName: '',
+        //   children: [{
+        //     title: '轮播图管理',
+        //     pathName: 'bannerManager',
+        //     children: [],
+        //   }, {
+        //     title: '售楼处项目专题',
+        //     pathName: 'majorProjects',
+        //     children: [],
+        //   }, {
+        //     title: '首页消息',
+        //     pathName: 'indexMsg',
+        //     children: [],
+        //   }, {
+        //     title: '资讯管理',
+        //     pathName: 'newsManager',
+        //     children: [],
+        //   }],
+        // }, {
+        //   title: '渠道管理',
+        //   pathName: '',
+        //   children: [{
+        //     title: '渠道列表',
+        //     pathName: 'channelList',
+        //     children: [],
+        //   }],
+        // }, {
+        //   title: '课程管理',
+        //   pathName: '',
+        //   children: [{
+        //     title: '全龄生活5A',
+        //     pathName: 'fiveA',
+        //     children: [],
+        //   }, {
+        //     title: '课程标签',
+        //     pathName: 'courseTag',
+        //     children: [],
+        //   }],
+        // }, {
+        //   title: '数据统计',
+        //   pathName: '',
+        //   children: [{
+        //     title: '前台用户列表',
+        //     pathName: 'frontEndUserList',
+        //     children: [],
+        //   }],
+        // }
+      ]
     }
   },
+  computed: {
+    ...mapState({
+      breadCrumb: x => x.app.breadcrumb,
+    })
+  },
   components: {
     breadCrumb,
     siderBar,
   },
+  created () {
+    this.getMenuData()
+    this.updateBread({ routerData, Url: this.$route.name })
+  },
   methods: {
-    calcMenuData () {
-      console.log()
+    ...mapMutations([
+      'updateBread',
+    ]),
+    getMenuData () { // 获取用户角色权限内菜单
+      let menuData = [{
+        MenuId: '1',
+        MenuName: '系统',
+        Icon: '',
+        FatherID: '-1',
+        Url: 'system',
+        IsShow: 1
+      }, {
+        MenuId: '2',
+        MenuName: '系统设置',
+        Icon: '',
+        FatherID: '1',
+        Url: 'systemSet',
+        IsShow: 1
+      }, {
+        MenuId: '3',
+        MenuName: '用户管理',
+        Icon: '',
+        FatherID: '2',
+        Url: 'userManager',
+        IsShow: 1
+      }, {
+        MenuId: '4',
+        MenuName: '角色管理',
+        Icon: '',
+        FatherID: '2',
+        Url: 'roleManager',
+        IsShow: 1
+      }, {
+        MenuId: '5',
+        MenuName: '新增用户',
+        Icon: '',
+        FatherID: '3',
+        Url: 'addUser',
+        IsShow: 0
+      }, {
+        MenuId: '6',
+        MenuName: '编辑用户',
+        Icon: '',
+        FatherID: '3',
+        Url: 'editUser',
+        IsShow: 0
+      }]
+      this.$store.state.app.menusRaw = menuData // 写入权限菜单数据
+      this.creatSlideMenu([...menuData])
+    },
+    creatSlideMenu (arr) { // 创建左侧菜单
+      for (var n = 0; n < arr.length; n++) {
+        arr[n].children = []
+        for (var a = 0; a < arr.length; a++) {
+          if (arr[n].MenuId === arr[a].FatherID) {
+            arr[n].children.push(arr[a])
+          }
+        }
+      }
+      this.pageMenu = arr[0].children
     }
-  },
-  mounted () { }
+  }
 }
 </script>
 

src/router/index.js

@@ -6,10 +6,9 @@ import store from './../store/index'
 Vue.use(Router)
 
 const flatten = (parent, data) => {
-  console.log(parent)
-  return data.reduce((acc, { path, name, component, title, children }) => {
+  return data.reduce((acc, { path, name, component, MenuName, children }) => {
     const pth = [parent, path].join('/').replace('//', '/')
-    const item = { path: pth, name, component, title, children: [] }
+    const item = { path: pth, name, component, MenuName, children: [] }
 
     if (children && children.length) {
       return acc.concat(item, flatten(pth, children))
@@ -24,21 +23,19 @@ const routes = routerData.reduce((acc, r) => {
   const { children, ...rest } = r
 
   if (children && children.length) {
-    return acc.concat({ ...rest, children: flatten([], children) })
+    return acc.concat({ ...rest, children: flatten('', children) })
   }
 
   return acc.concat(r)
 }, [])
 
-// console.log(routes)
-
 const router = new Router({
   routes,
   linkActiveClass: 'active',
 })
 
 router.beforeEach((to, from, next) => {
-  store.commit('updateBread', { routerData, name: to.name })
+  store.commit('updateBread', { routerData, Url: to.name })
   next()
 })
 

src/store/app.js

@@ -1,15 +1,14 @@
 
 function flatten (parent, data = [], menusRaw = []) {
-  console.log(parent)
   return data.reduce((acc, { name, children }) => {
     const menu = menusRaw.filter(x => x.Url === name)[0]
     if (!menu) return acc
 
-    const title = menu.MenuName
-    const item = { name, title, parent }
+    const MenuName = menu.MenuName
+    const item = { Url: name, MenuName, parent }
 
     if (children && children.length) {
-      const p = parent.concat({ name, title })
+      const p = parent.concat({ Url: name, MenuName })
       return acc.concat(item, flatten(p, children, menusRaw))
     }
 
@@ -19,44 +18,21 @@ function flatten (parent, data = [], menusRaw = []) {
 
 export default {
   state: {
-    menusRaw: [{
-      MenuId: '1',
-      MenuName: '菜单1',
-      Icon: 'menu1',
-      FatherID: '-1',
-      Url: 'system',
-      IsShow: 1
-    }, {
-      MenuId: '2',
-      MenuName: '菜单1-1',
-      Icon: 'menu2',
-      FatherID: '1',
-      Url: 'systemSet',
-      IsShow: 1
-    }, {
-      MenuId: '3',
-      MenuName: '菜单1-1-1',
-      Icon: '',
-      FatherID: '2',
-      Url: 'userManager',
-      IsShow: 1
-    }],
+    menusRaw: [],
     menus: [],
     breadcrumb: [],
   },
   mutations: {
-    updateBread (state, { routerData, name }) {
+    updateBread (state, { routerData, Url }) {
       // 扁平 routerData
       // 同时构造出 含有 title 的 parent 数据
       const routeList = flatten([], routerData, state.menusRaw)
 
       // 过滤出与 name 相同的 route 节点
-      const currentRoute = routeList.filter(x => x.name === name)[0]
-
-      // console.log(currentRoute, routeList, routerData, state.menusRaw)
+      const currentRoute = routeList.filter(x => x.Url === Url)[0]
 
       // 获取 面包屑
-      state.breadcrumb = currentRoute.parent
+      if (currentRoute) state.breadcrumb = currentRoute.parent.slice(1).concat(currentRoute)
     }
   }
 }