权限控制
Caps
6 years ago
parent
b8f0ac37bb
commit
706a1fd627
@ -1,189 +1,275 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Layout :style="{minHeight: '100vh'}">
|
||||
<Sider collapsible :collapsed-width="78" v-model="isCollapsed">
|
||||
<div class="layout">
|
||||
<Layout :style="{minHeight: '100vh'}">
|
||||
<Sider collapsible :collapsed-width="78" v-model="isCollapsed">
|
||||
|
||||
<div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
|
||||
<Avatar size="36"></Avatar>
|
||||
<span>拓客营销</span>
|
||||
</div>
|
||||
<div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
|
||||
<Avatar size="36"></Avatar>
|
||||
<span>拓客营销</span>
|
||||
</div>
|
||||
|
||||
<Menu :active-name="selectedItemName" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister" :accordion="true">
|
||||
<Submenu :name="item.id" v-for="item in menuList" :key="item.id">
|
||||
<template slot="title">
|
||||
<Icon type="ios-paper" />
|
||||
{{item.name}}
|
||||
</template>
|
||||
<MenuItem :name="cItem.id" :to="cItem.url" v-for="cItem in item.subMenuList" :key="cItem.id">{{cItem.name}}</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<!-- <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
|
||||
<Content :style="{padding: '0 16px 16px'}">
|
||||
<Breadcrumb :style="{margin: '16px 0'}">
|
||||
<BreadcrumbItem>{{selectedMenu}}</BreadcrumbItem>
|
||||
<BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<Card>
|
||||
<div :style="{'height':mHeight + 'px'}">
|
||||
<router-view/>
|
||||
</div>
|
||||
</Card>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
<Menu :active-name="selectedItemName" :open-names="openName" theme="dark" width="auto"
|
||||
:class="menuitemClasses"
|
||||
@on-select="onSelectLister" :accordion="true">
|
||||
<Submenu :name="item.id" v-for="item in onePermissionList" :key="item.id">
|
||||
<template slot="title">
|
||||
<Icon type="ios-paper"/>
|
||||
{{item.name}}
|
||||
</template>
|
||||
<MenuItem :name="cItem.id" :to="cItem.resource" v-for="cItem in item.subMenuList"
|
||||
:key="cItem.id">
|
||||
{{cItem.name}}
|
||||
</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<!-- <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
|
||||
<Content :style="{padding: '0 16px 16px'}">
|
||||
<Breadcrumb :style="{margin: '16px 0'}">
|
||||
<BreadcrumbItem>{{selectedMenu}}</BreadcrumbItem>
|
||||
<BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<Card>
|
||||
<div :style="{'height':mHeight + 'px'}">
|
||||
<router-view/>
|
||||
</div>
|
||||
</Card>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
provide(){
|
||||
return{
|
||||
checkParamBlank:this.checkParamBlank,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
mHeight: 600,
|
||||
selectedItemName: '',
|
||||
selectedMenu: '',
|
||||
selectedSubMenu: '',
|
||||
menuList: [
|
||||
{
|
||||
id: 1,
|
||||
'name': '设置管理',
|
||||
'url': 'setting',
|
||||
subMenuList: [
|
||||
{
|
||||
'id': 2,
|
||||
'name': '账户管理',
|
||||
'url': '/account/manager'
|
||||
},
|
||||
{
|
||||
'id': 3,
|
||||
'name': '角色管理',
|
||||
'url': '/role/manager'
|
||||
import homeRequest from "../services/home/homeRequest";
|
||||
|
||||
export default {
|
||||
provide() {
|
||||
return {
|
||||
checkParamBlank: this.checkParamBlank,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
mHeight: 600,
|
||||
selectedItemName: 0,
|
||||
openName: [],
|
||||
selectedMenu: '',
|
||||
selectedSubMenu: '',
|
||||
//权限等级
|
||||
onePermissionLevel: 1,
|
||||
twoPermissionLevel: 2,
|
||||
threePermissionLevel: 3,
|
||||
//导航栏权限-1级权限
|
||||
onePermissionList: [],
|
||||
//2级权限
|
||||
twoPermissionList: [],
|
||||
//3级权限
|
||||
threePermissionList: [],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
'name': '门店推广',
|
||||
'url': 'shop',
|
||||
subMenuList: [
|
||||
{
|
||||
'id': 5,
|
||||
'name': '推广管理',
|
||||
'url': '/shop/increase/manager'
|
||||
created() {
|
||||
this.mHeight = window.screen.availHeight - 22;
|
||||
|
||||
//获取导航栏权限
|
||||
this.listOnePermission(this.onePermissionLevel);
|
||||
},
|
||||
computed: {
|
||||
rotateIcon() {
|
||||
return [
|
||||
'menu-icon',
|
||||
this.isCollapsed ? 'rotate-icon' : ''
|
||||
];
|
||||
},
|
||||
{
|
||||
'id': 6,
|
||||
'name': '推广数据',
|
||||
'url': '/shop/increase/data'
|
||||
menuitemClasses() {
|
||||
return [
|
||||
'menu-item',
|
||||
this.isCollapsed ? 'collapsed-menu' : ''
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
'name': '数据中心',
|
||||
'url': 'data',
|
||||
subMenuList: [
|
||||
{
|
||||
'id': 8,
|
||||
'name': '客户数据',
|
||||
'url': '/customer/view'
|
||||
methods: {
|
||||
onSelectLister(val) {
|
||||
for (let i = 0; i < this.onePermissionList.length; i++) {
|
||||
let item = this.onePermissionList[i];
|
||||
for (let k = 0; k < item.subMenuList.length; k++) {
|
||||
let cItem = item.subMenuList[k];
|
||||
if (cItem.id === val) {
|
||||
this.selectedMenu = item.name;
|
||||
this.selectedSubMenu = cItem.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
'id': 9,
|
||||
'name': '客户数据明细',
|
||||
'url': '/customer/data/detail'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.mHeight = window.screen.availHeight - 22;
|
||||
//对象属性空检查
|
||||
checkParamBlank: function (obj) {
|
||||
for (let param in obj) {
|
||||
obj[param] = this.checkBlank(obj[param]);
|
||||
}
|
||||
},
|
||||
//数据空检查
|
||||
checkBlank: function (data) {
|
||||
if (!data) {
|
||||
return "--";
|
||||
} else {
|
||||
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;
|
||||
},
|
||||
computed: {
|
||||
rotateIcon () {
|
||||
return [
|
||||
'menu-icon',
|
||||
this.isCollapsed ? 'rotate-icon' : ''
|
||||
];
|
||||
},
|
||||
menuitemClasses () {
|
||||
return [
|
||||
'menu-item',
|
||||
this.isCollapsed ? 'collapsed-menu' : ''
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelectLister (val) {
|
||||
for (let i = 0; i < this.menuList.length; i++) {
|
||||
let item = this.menuList[i];
|
||||
for (let k = 0; k < item.subMenuList.length; k++) {
|
||||
let cItem = item.subMenuList[k];
|
||||
if (cItem.id === val) {
|
||||
this.selectedMenu = item.name;
|
||||
this.selectedSubMenu = cItem.name;
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取二级权限
|
||||
listTwoPermission(level) {
|
||||
let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
|
||||
let that = this;
|
||||
that.twoPermissionList = [];
|
||||
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.twoPermissionList = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let row = data[i];
|
||||
that.twoPermissionList.push(row);
|
||||
}
|
||||
that.listThreePermission(that.threePermissionLevel);
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
//获取三级权限
|
||||
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>
|
||||
<style scoped>
|
||||
|
||||
.layout-con{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.menu-item span{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 69px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
transition: width .2s ease .2s;
|
||||
}
|
||||
.menu-item i{
|
||||
transform: translateX(0px);
|
||||
transition: font-size .2s ease, transform .2s ease;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
}
|
||||
.collapsed-menu span{
|
||||
width: 0px;
|
||||
transition: width .2s ease;
|
||||
}
|
||||
.collapsed-menu i{
|
||||
transform: translateX(5px);
|
||||
transition: font-size .2s ease .2s, transform .2s ease .2s;
|
||||
vertical-align: middle;
|
||||
font-size: 22px;
|
||||
}
|
||||
.layout-con {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 69px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
transition: width .2s ease .2s;
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
transform: translateX(0px);
|
||||
transition: font-size .2s ease, transform .2s ease;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.collapsed-menu span {
|
||||
width: 0px;
|
||||
transition: width .2s ease;
|
||||
}
|
||||
|
||||
.collapsed-menu i {
|
||||
transform: translateX(5px);
|
||||
transition: font-size .2s ease .2s, transform .2s ease .2s;
|
||||
vertical-align: middle;
|
||||
font-size: 22px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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,
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue