zhenghuang
/
bsdgy-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

权限控制

Browse Source
master
Caps 6 years ago
parent b8f0ac37bb
commit 706a1fd627
3 changed files with 282 additions and 171 deletions
Show Stats Download Patch File Download Diff File

1
src/iview.js
Unescape Escape View File

@ -65,6 +65,7 @@ Vue.component('i-switch', Switch);
Vue.component('Modal', Modal); Vue.component('Modal', Modal);
Vue.component('Message', Message); Vue.component('Message', Message);
Vue.prototype.$Modal = Modal; Vue.prototype.$Modal = Modal;
Vue.prototype.$Message = Message;
Vue.component('Radio', Radio); Vue.component('Radio', Radio);
Vue.component('List', List); Vue.component('List', List);
Vue.component('Divider', Divider); Vue.component('Divider', Divider);

428
src/pages/Home.vue
Unescape Escape View File

@ -1,189 +1,275 @@
<template> <template>
<div class="layout"> <div class="layout">
<Layout :style="{minHeight: '100vh'}"> <Layout :style="{minHeight: '100vh'}">
<Sider collapsible :collapsed-width="78" v-model="isCollapsed"> <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
<div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;"> <div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
<Avatar size="36"></Avatar> <Avatar size="36"></Avatar>
<span>拓客营销</span> <span>拓客营销</span>
</div> </div>
<Menu :active-name="selectedItemName" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister" :accordion="true"> <Menu :active-name="selectedItemName" :open-names="openName" theme="dark" width="auto"
<Submenu :name="item.id" v-for="item in menuList" :key="item.id"> :class="menuitemClasses"
<template slot="title"> @on-select="onSelectLister" :accordion="true">
<Icon type="ios-paper" /> <Submenu :name="item.id" v-for="item in onePermissionList" :key="item.id">
{{item.name}} <template slot="title">
</template> <Icon type="ios-paper"/>
<MenuItem :name="cItem.id" :to="cItem.url" v-for="cItem in item.subMenuList" :key="cItem.id">{{cItem.name}}</MenuItem> {{item.name}}
</Submenu> </template>
</Menu> <MenuItem :name="cItem.id" :to="cItem.resource" v-for="cItem in item.subMenuList"
</Sider> :key="cItem.id">
<Layout> {{cItem.name}}
<!-- <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>--> </MenuItem>
<Content :style="{padding: '0 16px 16px'}"> </Submenu>
<Breadcrumb :style="{margin: '16px 0'}"> </Menu>
<BreadcrumbItem>{{selectedMenu}}</BreadcrumbItem> </Sider>
<BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem> <Layout>
</Breadcrumb> <!-- <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
<Card> <Content :style="{padding: '0 16px 16px'}">
<div :style="{'height':mHeight + 'px'}"> <Breadcrumb :style="{margin: '16px 0'}">
<router-view/> <BreadcrumbItem>{{selectedMenu}}</BreadcrumbItem>
</div> <BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem>
</Card> </Breadcrumb>
</Content> <Card>
</Layout> <div :style="{'height':mHeight + 'px'}">
</Layout> <router-view/>
</div> </div>
</Card>
</Content>
</Layout>
</Layout>
</div>
</template> </template>
<script> <script>
export default { import homeRequest from "../services/home/homeRequest";
provide(){
return{ export default {
checkParamBlank:this.checkParamBlank, provide() {
}; return {
}, checkParamBlank: this.checkParamBlank,
data() { };
return { },
isCollapsed: false, data() {
mHeight: 600, return {
selectedItemName: '', isCollapsed: false,
selectedMenu: '', mHeight: 600,
selectedSubMenu: '', selectedItemName: 0,
menuList: [ openName: [],
{ selectedMenu: '',
id: 1, selectedSubMenu: '',
'name': '设置管理', //权限等级
'url': 'setting', onePermissionLevel: 1,
subMenuList: [ twoPermissionLevel: 2,
{ threePermissionLevel: 3,
'id': 2, //导航栏权限-1级权限
'name': '账户管理', onePermissionList: [],
'url': '/account/manager' //2级权限
}, twoPermissionList: [],
{ //3级权限
'id': 3, threePermissionList: [],
'name': '角色管理',
'url': '/role/manager'
} }
]
}, },
{ created() {
id: 4, this.mHeight = window.screen.availHeight - 22;
'name': '门店推广',
'url': 'shop', //获取导航栏权限
subMenuList: [ this.listOnePermission(this.onePermissionLevel);
{ },
'id': 5, computed: {
'name': '推广管理', rotateIcon() {
'url': '/shop/increase/manager' return [
'menu-icon',
this.isCollapsed ? 'rotate-icon' : ''
];
}, },
{ menuitemClasses() {
'id': 6, return [
'name': '推广数据', 'menu-item',
'url': '/shop/increase/data' this.isCollapsed ? 'collapsed-menu' : ''
]
} }
]
}, },
{ methods: {
id: 7, onSelectLister(val) {
'name': '数据中心', for (let i = 0; i < this.onePermissionList.length; i++) {
'url': 'data', let item = this.onePermissionList[i];
subMenuList: [ for (let k = 0; k < item.subMenuList.length; k++) {
{ let cItem = item.subMenuList[k];
'id': 8, if (cItem.id === val) {
'name': '客户数据', this.selectedMenu = item.name;
'url': '/customer/view' this.selectedSubMenu = cItem.name;
}
}
}
}, },
{ //对象属性空检查
'id': 9, checkParamBlank: function (obj) {
'name': '客户数据明细', for (let param in obj) {
'url': '/customer/data/detail' obj[param] = this.checkBlank(obj[param]);
} }
] },
} //数据空检查
] checkBlank: function (data) {
} if (!data) {
}, return "--";
created() { } else {
this.mHeight = window.screen.availHeight - 22; return data;
}
},
//获取导航栏一级权限
listOnePermission(level) {
let that = this;
let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
let request = {
userId: userId,
level: level
};
homeRequest.listUserLoginPermissionApi(request, function (data) {
data = data.data;
if (data.code === '0001') {
that.$Message.error("查询用户权限出错");
return;
}
if (data.code === '0000') {
data = data.results;
for (let i = 0; i < data.length; i++) {
let row = data[i];
row.class = 'head-permission';
that.onePermissionList.push(row);
}
that.listTwoPermission(that.twoPermissionLevel);
}
this.selectedItemName = this.menuList[1].subMenuList[0].id; })
this.selectedMenu = this.menuList[1].name; },
this.selectedSubMenu = this.menuList[1].subMenuList[0].name; //获取二级权限
}, listTwoPermission(level) {
computed: { let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
rotateIcon () { let that = this;
return [ that.twoPermissionList = [];
'menu-icon', let request = {
this.isCollapsed ? 'rotate-icon' : '' userId: userId,
]; level: level
}, };
menuitemClasses () { homeRequest.listUserLoginPermissionApi(request, function (data) {
return [ data = data.data;
'menu-item', if (data.code === '0001') {
this.isCollapsed ? 'collapsed-menu' : '' that.$Message.error("查询用户权限出错");
] return;
} }
}, if (data.code === '0000') {
methods: { data = data.results;
onSelectLister (val) { that.twoPermissionList = [];
for (let i = 0; i < this.menuList.length; i++) { for (let i = 0; i < data.length; i++) {
let item = this.menuList[i]; let row = data[i];
for (let k = 0; k < item.subMenuList.length; k++) { that.twoPermissionList.push(row);
let cItem = item.subMenuList[k]; }
if (cItem.id === val) { that.listThreePermission(that.threePermissionLevel);
this.selectedMenu = item.name; }
this.selectedSubMenu = cItem.name;
} })
},
//获取三级权限
listThreePermission(level) {
let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
let that = this;
that.threePermissionList = [];
let request = {
userId: userId,
level: level
};
homeRequest.listUserLoginPermissionApi(request, function (data) {
data = data.data;
if (data.code === '0001') {
that.$Message.error("查询用户权限出错");
return;
}
if (data.code === '0000') {
data = data.results;
that.threePermissionList = [];
for (let i = 0; i < data.length; i++) {
let row = data[i];
that.threePermissionList.push(row);
}
//选中第一个权限
if (data && data.length > 0 && that.refreshFlag) {
let resource = '';
if (that.threePermissionList[0].resource) {
resource = that.threePermissionList[0].resource;
}
that.subMenuClick(0);
that.$router.push({path: resource});
//刷新标识
that.refreshFlag = false;
}
that.twoPermissionList.forEach(function (two) {
//把三级导航绑定给第二级导航栏
let three = that.threePermissionList.filter(function (data) {
return data.pid === two.id
});
two.subMenuList = three;
});
that.onePermissionList.forEach(function (one) {
//把二级导航绑定给第一级导航栏
let two = that.twoPermissionList.filter(function (data) {
return data.pid === one.id
});
one.subMenuList = two;
})
//展开第一个菜单
that.menuInit();
}
})
},
//导航栏点击
menuInit: function () {
let that = this;
that.selectedItemName = that.onePermissionList[0].subMenuList[0].id;
that.openName = ['1'];
},
//左侧二级权限展开-传入二级权限id
subMenuUnfold: function (twoPermissionId) {
},
//左侧三级权限点击-传入三级权限下标
subMenuClick: function (index) {
},
} }
}
},
//对象属性空检查
checkParamBlank: function(obj){
for(let param in obj){
obj[param] = this.checkBlank(obj[param]);
}
},
//数据空检查
checkBlank: function(data){
if(!data){
return "--";
}else{
return data;
}
} }
}
}
</script> </script>
<style scoped> <style scoped>
.layout-con{ .layout-con {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.menu-item span{
display: inline-block; .menu-item span {
overflow: hidden; display: inline-block;
width: 69px; overflow: hidden;
text-overflow: ellipsis; width: 69px;
white-space: nowrap; text-overflow: ellipsis;
vertical-align: bottom; white-space: nowrap;
transition: width .2s ease .2s; vertical-align: bottom;
} transition: width .2s ease .2s;
.menu-item i{ }
transform: translateX(0px);
transition: font-size .2s ease, transform .2s ease; .menu-item i {
vertical-align: middle; transform: translateX(0px);
font-size: 16px; transition: font-size .2s ease, transform .2s ease;
} vertical-align: middle;
.collapsed-menu span{ font-size: 16px;
width: 0px; }
transition: width .2s ease;
} .collapsed-menu span {
.collapsed-menu i{ width: 0px;
transform: translateX(5px); transition: width .2s ease;
transition: font-size .2s ease .2s, transform .2s ease .2s; }
vertical-align: middle;
font-size: 22px; .collapsed-menu i {
} transform: translateX(5px);
transition: font-size .2s ease .2s, transform .2s ease .2s;
vertical-align: middle;
font-size: 22px;
}
</style> </style>

24
src/services/home/homeRequest.js
Unescape Escape View File

@ -0,0 +1,24 @@
/**
* home请求数据
* @author wangyinjia
* @date 2020/2/24
*/
import http from '../CommonHttp'
/**
* 查询用户登录权限
* @param params
* @param call
* @returns {Promise<any | never>}
*/
export function listUserLoginPermissionApi(params, call) {
return http.get('/permission/user/login/list', params).then(call)
}
export default {
listUserLoginPermissionApi,
}
Write Preview
Loading…
Cancel
Save