升级顶部导航栏

src/api/cpd.js

@@ -0,0 +1,9 @@
+import axios from '@/utils/request'
+
+import config from '@/common/config'
+
+let base = config.getMallmBasePath(); 
+
+
+export const getNoticeMsg = params => { return axios.get(`${base}/mallm/cpd/index/toHandleOrdersCount`, { params: params }); };
+ 

src/components/NoticeMsgBar/index.vue

@@ -0,0 +1,124 @@
+<template v-loadding="load.list">
+
+      <el-dropdown trigger="hover"  class="avatar-container"  @command="handleNoticeMsgClick">
+         <div class="avatar-wrapper">
+           <el-badge :value="noticeMsg.totalNum" class="item">
+              <img class="user-avatar" src="../../assets/image/platform/module-notice.png">
+           </el-badge>
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="toPay" >待付款订单(<font color=red>{{noticeMsg.toPayNum}}</font>)</el-dropdown-item>
+          <el-dropdown-item command="toSend" >待发货订单(<font color=red>{{noticeMsg.toSendNum}}</font>)</el-dropdown-item>
+          <el-dropdown-item command="toRece" >待收货订单(<font color=red>{{noticeMsg.hadSendNum}}</font>)</el-dropdown-item>
+          <!--<el-dropdown-item command="hadFinish" >已完成订单(<font color=red>{{noticeMsg.hadFinishNum}}</font>)</el-dropdown-item>-->
+          <!-- <el-dropdown-item command="hadCancel" >已取消订单(<font color=red>{{noticeMsg.hadCancelNum}}</font>)</el-dropdown-item>-->
+          <el-dropdown-item command="toApprova" >待审核订单(<font color=red>{{noticeMsg.toApprovaNum}}</font>)</el-dropdown-item>
+          <!-- <el-dropdown-item command="hadApprova" >已审核订单(<font color=red>{{noticeMsg.hadApprovaNum}}</font>)</el-dropdown-item> -->
+          <el-dropdown-item command="doGetNoticeMsg" >刷新 </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+</template>
+
+<script>
+	import {
+		getNoticeMsg
+	} from '@/api/cpd'
+export default {
+  computed: {
+    noticeMsg() {
+      return this.$store.getters.noticeMsg
+    }
+  },
+  data(){
+    return {
+      load:{list:false},
+      commandLinks:[
+        {command:'toPay',path:'/mallm/OrderCenter/orders/OrdersMng',query:null,params:null},
+        {command:'toSend',path:'/mallm/OrderCenter/orders/OrdersDeliver',query:null,params:null},
+        {command:'toRece',path:'/mallm/OrderCenter/orders/OrdersReceiptConfirm',query:null,params:null},
+        {command:'hadFinish',path:'/mallm/OrderCenter/orders/OrdersMng',query:null,params:null},
+        {command:'hadCancel',path:'/mallm/OrderCenter/orders/OrdersMng',query:null,params:null},
+        {command:'toApprova',path:'/mallm/OrderCenter/orders/OrdersMngBizFlow',query:null,params:null},
+        {command:'hadApprova',path:'/mallm/OrderCenter/orders/OrdersMngBizFlow',query:null,params:null},
+        {command:'hadclose',path:'/mallm/OrderCenter/orders/OrdersMng',query:null,params:null},
+      ]
+    }
+  },
+  methods: {
+    doGetNoticeMsg(){
+      this.load.list=true;
+       getNoticeMsg({}).then(res=>{
+         this.load.list=false;
+           var tips = res.data.tips;
+           if(tips.isOk){
+             this.$message.success("刷新数据成功")
+             this.$store.dispatch("setNoticeMsg",res.data.data)
+           }else{
+             this.$message.error(tips.msg)
+           }
+         })
+    },
+
+    doGetNoticeMsgNoTips(){
+      this.load.list=true;
+       getNoticeMsg({}).then(res=>{
+         this.load.list=false;
+           var tips = res.data.tips;
+           if(tips.isOk){
+             this.$store.dispatch("setNoticeMsg",res.data.data)
+           }else{
+             this.$message.error(tips.msg)
+           }
+         })
+    },
+    handleNoticeMsgClick(command) {
+       if(command=='doGetNoticeMsg'){
+        this.doGetNoticeMsg();
+       }else{
+         if(this.commandLinks.some(c=>c.command==command)){
+          var link=this.commandLinks.find(c=>c.command==command)
+          if(link==null || !link.path){
+            return;
+          }
+          this.$store.dispatch("FindRouter",link.path).then(res=>{
+            if(res==null){
+              this.$message.error("该链接已不存在或者您无权限访问")
+              return
+            }else{
+              this.$router.push({path:res.fullPath,query:res.query,params:res.params});
+            }
+          })
+         }else{
+
+         }
+       }
+    }
+  },
+  mounted(){
+    this.doGetNoticeMsgNoTips()
+  }
+}
+</script>
+
+<style rel="stylesheet/scss"  lang="scss" scoped>
+.avatar-container {
+  height: 50px;
+  .avatar-wrapper {
+    cursor: pointer;
+    margin-top: 8px;
+    position: relative;
+    .user-avatar {
+      height: 30px;
+      border-radius: 10px;
+    }
+    .el-icon-caret-bottom {
+      position: absolute;
+      right: -20px;
+      top: 25px;
+      font-size: 12px;
+    }
+  }
+}
+</style>
+
+

src/store/getters.js

@@ -20,6 +20,7 @@ const getters = {
   addRouters: state => state.permission.addRouters,
   errorLogs: state => state.errorLog.logs,
   added: state => state.permission.added,
-  isLoadOk:state=>state.user.isLoadOk
+  isLoadOk:state=>state.user.isLoadOk,
+  noticeMsg:state=>state.noticeMsg.noticeMsg
 }
 export default getters

src/store/index.js

@@ -5,6 +5,7 @@ import errorLog from './modules/errorLog'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
 import user from './modules/user'
+import noticeMsg from './modules/noticeMsg'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -15,7 +16,8 @@ const store = new Vuex.Store({
     errorLog,
     permission,
     tagsView,
-    user
+    user,
+    noticeMsg,
   },
   getters
 })

src/store/modules/noticeMsg.js

@@ -0,0 +1,41 @@
+const noticeMsg = {
+  state: { 
+    noticeMsg:{ 
+       toPayNum:0,
+       toSendNum:0,
+       toReceNum:0,
+       toApprovaNum:0,
+       hadApprovaNum:0,
+       hadFinishNum:0,
+       hadCloseNum:0,
+       hadCancelNum:0,
+       totalNum:0,
+    },
+     
+  },
+
+  mutations: {
+     
+    SET_NOTICE_MSG:(state,noticeMsg)=>{
+      state.noticeMsg = noticeMsg
+    },
+     
+  },
+
+  actions: {
+     setNoticeMsg({ commit }, noticeMsg){ 
+      return new Promise((resolve, reject) => {
+        commit("SET_NOTICE_MSG",noticeMsg)
+        localStorage.setItem("noticeMsg",JSON.stringify(noticeMsg));
+        resolve(noticeMsg)
+      })
+     }
+ 
+  }
+} 
+var noticeMsgLocal=localStorage.getItem("noticeMsg");
+if(noticeMsgLocal){
+   
+  noticeMsg.state.noticeMsg=Object.assign( noticeMsg.state.noticeMsg,JSON.parse(noticeMsgLocal))
+}
+export default noticeMsg

src/store/modules/permission.js

@@ -7,7 +7,7 @@ import { asyncRouterMap, constantRouterMap } from '@/router'
  * @param menus 我拥有的菜单
  * @param route
  */
-function hasPermission(  roles,menus ,route) {
+function hasPermission(  roles,menus ,route) { 
   if(route==null || route=='undefined'){
 	  return false;
   }
@@ -17,8 +17,11 @@ function hasPermission(  roles,menus ,route) {
 	  if(route.children && route.children.length){
 		  return true;
 	  }else{
+      if(!route.meta||!route.meta.menu){
+        return true
+      }
 		  if( route.meta && route.meta.menu && menus && menus.length ){
-			  return  menus.some(menu => menu.rpath==null?false:menu.rpath.indexOf(route.path) >= 0);
+			  return  menus.some(menu => menu.rpath==null?false:menu.rpath.indexOf(route.fullPath) >= 0);
 		  }else if( !route.meta || !route.meta.menu ){
 			  return true;
 		  }else{
@@ -28,17 +31,68 @@ function hasPermission(  roles,menus ,route) {
     return false
   }
 }
-
+function findRouteInner(routers,fullPath){
+  return findRouteByFullPath({children:routers},fullPath)
+}
+function findRouteByFullPath(router,fullPath){  
+  if(router==null){
+    return null;
+  }else{
+    if(router.children && router.children.length>0){
+      var routerFind=null;
+      router.children.forEach(i=>{
+        var r= findRouteByFullPath(i,fullPath) 
+        if(r){
+          routerFind=r;
+          return routerFind;
+        }
+      }) 
+      return routerFind;
+    }else{
+      if(router.fullPath==fullPath){
+        return router;
+      }
+    }
+  }
+}
 /**
  * 递归过滤异步路由表，返回符合用户角色权限的路由表
  * @param asyncRouterMap
  * @param roles
  */
-function filterAsyncRouter(asyncRouterMap, roles,menus ) {
-  const accessedRouters = asyncRouterMap.filter(route => {
+function filterAsyncRouter(asyncRouterMap, roles,menus) { 
+  const accessedRouters = asyncRouterMap.filter(route => { 
+    if(!route.fullPath){
+      route.fullPath=route.path;
+    }else{
+      route.fullPath=route.fullPath+"/"+route.path 
+    }
+    route.fullPath=route.fullPath.replace("//","/")
     if (hasPermission(roles,menus, route)) {
       if (route.children && route.children.length) {
-        route.children = filterAsyncRouter(route.children, roles,menus )
+        route.children = filterAsyncRouterWithParentRoute(route, roles,menus )
+        if(route.children==null  || route.children.length==0){
+        	return false
+        }
+      }
+      return true
+    }
+    return false
+  })
+  return accessedRouters
+}
+function filterAsyncRouterWithParentRoute(proute, roles,menus) {
+  
+  var accessedRouters = proute.children.filter(route => {
+    
+    if(!route.fullPath){
+      route.fullPath=proute.fullPath+"/"+route.path;
+      route.fullPath=route.fullPath.replace("//","/")
+    }
+    
+    if (hasPermission(roles,menus, route)) {
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouterWithParentRoute(route, roles,menus )
         if(route.children==null  || route.children.length==0){
         	return false
         }
@@ -50,6 +104,28 @@ function filterAsyncRouter(asyncRouterMap, roles,menus ) {
   return accessedRouters
 }
 
+function initRouter(proute) {
+  if(proute==null){
+    return;
+  }else{
+    if(!proute.fullPath){
+      if(proute.path){
+        proute.fullPath=proute.path
+      }else{
+        proute.fullPath=""
+      }
+    }
+    if(proute.children && proute.children.length>0){
+      proute.children.forEach(i=>{
+        if(!i.fullPath){
+          i.fullPath=proute.fullPath+"/"+i.path
+          i.fullPath=i.fullPath.replace("//","/")
+        }
+        initRouter(i)
+      })
+    } 
+  } 
+}
 const permission = {
   state: {
     routers: constantRouterMap,
@@ -68,18 +144,26 @@ const permission = {
   actions: {
     GenerateRoutes({ commit }, {roles,menus}) {
       return new Promise(resolve => {  
+        debugger
+        initRouter({children:asyncRouterMap})
         let accessedRouters 
-        if (roles.some(role => role.roleid==='superAdmin')) {
+        if (roles.some(role => role.roleid==='superAdmin'||role.roleid==='platformAdmin')) {
           accessedRouters = asyncRouterMap
-        } else {
+        } else { 
           accessedRouters = filterAsyncRouter(asyncRouterMap, roles,menus)
         }
         commit('SET_ROUTERS', accessedRouters)
         commit('SET_ADDED', true)
         resolve()
       })
+    },
+    FindRouter({ commit ,state}, fullPath){
+      return new Promise(resolve => {  
+        resolve(findRouteInner(state.routers,fullPath))
+      }) 
     }
-  }
+  },
+  
 }
 
 export default permission

src/views/layout/components/Navbar.vue

@@ -17,50 +17,47 @@
 				<el-button @click="showSelectShopMethod" type="primary" v-if="workShop.isSuperAdmin||workShop.isPlatFormAdmin">切换商户</el-button>
 			</div>
       -->
-     <error-log class="errLog-container right-menu-item hidden-sm-and-down"></error-log>
-		 
- 
-      <screenfull class="screenfull right-menu-item hidden-md-and-down"></screenfull> 
-      <lang-select class="international right-menu-item hidden-md-and-down"></lang-select>
+     
+     <error-log v-if="false" class="errLog-container right-menu-item hidden-sm-and-down"></error-log>
+
+
+      <screenfull v-if="false" class="screenfull right-menu-item"></screenfull>
+      <lang-select v-if="false" class="international right-menu-item hidden-sm-and-down"></lang-select>
 
-      <el-tooltip class="hidden-md-and-down"  effect="dark" :content="$t('navbar.theme')" placement="bottom">
+      <el-tooltip v-if="false" class="hidden-sm-and-down"  effect="dark" :content="$t('navbar.theme')" placement="bottom">
         <theme-picker class="theme-switch right-menu-item"></theme-picker>
       </el-tooltip>
-
-      <el-dropdown class="avatar-container right-menu-item" trigger="click">
+       <el-divider direction="vertical" class="divider"></el-divider>
+      <el-dropdown class="avatar-container right-menu-item" trigger="hover" style="max-width:300px;" @command="handleCommand">
         <div class="avatar-wrapper">
           <img v-if="userInfo && userInfo.headimgurl && userInfo.headimgurl!=null && userInfo.headimgurl!=='' " class="user-avatar" :src="userInfo.headimgurl">
           <img v-else class="user-avatar" src="../../../assets/image/user_img.gif">
-          <i class="el-icon-caret-bottom"></i>
-        </div> 
-        <el-dropdown-menu  slot="dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              {{$t('navbar.dashboard')}}
-            </el-dropdown-item>
-          </router-link> 
-          <el-dropdown-item divided>
-                                           用户名：{{userInfo.username}}
+          <span class="username">{{userInfo.username}}</span>
+        </div>
+        <el-dropdown-menu  slot="dropdown" style="width:400px;">
+          <el-dropdown-item divided command="updateUserInfo">
+                                <div>         用户名：{{userInfo.username}} <el-button style="float:right;"  type="text" icon="el-icon-setting">账户设置</el-button></div>
           </el-dropdown-item>
           <el-dropdown-item divided>
                                            公司：{{userInfo.branchName}}
-          </el-dropdown-item>  
-          <el-dropdown-item  divided> 
-          	<div style=" overflow-x:auto; height:150px;">
-      部门及岗位： <el-form>
-                       <el-form-item v-for="(item ,index) in deptPostsTree" :label="item.deptName" :key="index">
-                         <div v-if="item.children!=null && item.children.length>0">
+          </el-dropdown-item>
+          <el-dropdown-item  divided>
+          	<div style="height:250px;">
+                       <el-row v-for="(item ,index) in deptPostsTree" :label="item.deptName" :key="index">
+                          部门：{{item.deptName}}
+                           <br>
+                          岗位：
+
+                         <div v-if="item.children!=null && item.children.length>0" style="padding-left:40px;">
                        		<el-row  v-for="(post,idx) in item.children" :key="idx">
-                       		  <el-tag>{{post.postName}}</el-tag>
+                       		   {{post.postName}}
                        		</el-row>
                          </div>
-                       </el-form-item>
-                 </el-form>
-                 
+                       </el-row>
                </div>
           </el-dropdown-item>
-          <el-dropdown-item  divided> 
-          <div style=" overflow-x:auto; height:150px;">
+          <el-dropdown-item v-if="false" divided>
+          <div style=" overflow-x:auto; height:250px;">
       商户及门店： <el-form>
                        <el-form-item label-width="300"  v-for="item in shopLocationsTree" :label="item.shopName" :key="item.shopId">
                        		<el-row v-for="location in item.locations" :key="location.locationId">
@@ -74,23 +71,28 @@
                  </el-form>
                  </div>
           </el-dropdown-item>
-          <el-dropdown-item  divided> 
+          <el-dropdown-item  divided>
           <div style=" overflow-x:auto; height:150px;">
-  我拥有的角色：   <el-form>
-                       <el-form-item label="">
-                       		<el-row v-for="role in roles" :key="role.roleid"> 
-                       		   <el-tag v-if="role.roleid.indexOf('SCOPE')<0">{{role.rolename}}</el-tag>
-                       		</el-row> 
-                       </el-form-item>
-                 </el-form>
-                 </div>
-          </el-dropdown-item>
-          
-          <el-dropdown-item divided>
-            <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
+            我拥有的角色：
+                  <el-row style="padding-left:40px;" v-for="role in roles" :key="role.roleid">
+                       		   <span v-if="role.roleid.indexOf('SCOPE')<0">{{role.rolename}}</span>
+                       		</el-row>
+           </div>
           </el-dropdown-item>
-        </el-dropdown-menu> 
+        </el-dropdown-menu>
       </el-dropdown>
+      <el-divider direction="vertical" class="divider"></el-divider>
+      <!--喇叭标记-->
+      <notice-msg-bar class="avatar-container"></notice-msg-bar>
+      <el-divider direction="vertical" class="divider"></el-divider>
+      <el-link class="logout" @click="goToIndex" icon="el-icon-s-home">
+        <span style="font-size: 17px">首页</span>
+      </el-link>
+      <el-divider direction="vertical" class="divider"></el-divider>
+      <el-link class="logout" @click="logout" icon="el-icon-switch-button">
+        <span style="font-size: 17px">退出</span>
+      </el-link>
+      <el-divider direction="vertical" class="divider"></el-divider>
     </div>
   </el-menu>
 </template>
@@ -104,6 +106,7 @@ import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
 import LangSelect from '@/components/LangSelect'
 import ThemePicker from '@/components/ThemePicker';
+import NoticeMsgBar from '@/components/NoticeMsgBar'
 //import selectShopLocationBySysDept from '@/views/mdp/app/selectShopLocationBySysDept/selectShopLocationBySysDept';
 
 export default {
@@ -114,7 +117,8 @@ export default {
     Screenfull,
     LangSelect,
     ThemePicker,
-    TopModules
+    TopModules,
+    NoticeMsgBar, 
   },
   data:function(){
 	return {
@@ -235,7 +239,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>  
 @import './iconfont.css';
-.navbar { 
+.navbar {
   height: 50px;
   line-height: 50px;
   border-radius: 0px !important;
@@ -246,7 +250,7 @@ export default {
     float: left;
     padding: 0 10px;
   }
-  
+
   .modules-container {
     line-height: 58px;
     height: 50px;
@@ -270,6 +274,9 @@ export default {
       display: inline-block;
       margin: 0 8px;
     }
+    .divider{
+      vertical-align: 4px;
+    }
     .screenfull {
       height: 20px;
     }
@@ -279,16 +286,29 @@ export default {
     .theme-switch {
       vertical-align: 15px;
     }
+    .logout{
+      height: 50px;
+      vertical-align: top;
+      /*margin-right: 10px;*/
+      color: #fff;
+      font-size: 30px;
+    }
     .avatar-container {
       height: 50px;
-      margin-right: 30px;
       .avatar-wrapper {
         cursor: pointer;
-        margin-top: 5px;
-        position: relative;
-        .user-avatar { 
-          height: 40px;
-          border-radius: 10px;
+        .user-avatar {
+          height: 30px;
+          width:30px;
+          border-radius: 50%;
+        }
+
+        .username{
+          line-height: 35px;
+          vertical-align: top;
+          /*margin-right: 20px;*/
+          color: #fff;
+          font-size: 17px;
         }
         .el-icon-caret-bottom {
           position: absolute;
@@ -313,7 +333,7 @@ export default {
 
   .big{
     display:flex;
-    flex-direction:column; 
+    flex-direction:column;
     align-items:center;
     margin-right: 20px;
   }