Browse Source

升级顶部导航栏

master
陈裕财 4 years ago
parent
commit
3a9d8d126d
  1. 9
      src/api/cpd.js
  2. 124
      src/components/NoticeMsgBar/index.vue
  3. 3
      src/store/getters.js
  4. 4
      src/store/index.js
  5. 41
      src/store/modules/noticeMsg.js
  6. 94
      src/store/modules/permission.js
  7. 102
      src/views/layout/components/Navbar.vue

9
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 }); };

124
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>

3
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

4
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
})

41
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

94
src/store/modules/permission.js

@ -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,7 +31,30 @@ 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
@ -36,9 +62,15 @@ function hasPermission( roles,menus ,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
}
@ -49,7 +81,51 @@ function filterAsyncRouter(asyncRouterMap, roles,menus ) {
})
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
}
}
return true
}
return false
})
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,8 +144,10 @@ 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 {
accessedRouters = filterAsyncRouter(asyncRouterMap, roles,menus)
@ -78,8 +156,14 @@ const permission = {
commit('SET_ADDED', true)
resolve()
})
},
FindRouter({ commit ,state}, fullPath){
return new Promise(resolve => {
resolve(findRouteInner(state.routers,fullPath))
})
}
}
},
}
export default permission

102
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>
<error-log v-if="false" 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>
<el-tooltip class="hidden-md-and-down" effect="dark" :content="$t('navbar.theme')" placement="bottom">
<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 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>
<span class="username">{{userInfo.username}}</span>
</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}}
<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">
<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">
@ -76,21 +73,26 @@
</el-dropdown-item>
<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 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>
</el-form-item>
</el-form>
</div>
</el-dropdown-item>
<el-dropdown-item divided>
<span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
</el-dropdown-item>
</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 {
@ -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;
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;

Loading…
Cancel
Save