<template>
|
<view class="container">
|
<view class="main">
|
<view @click="activeRole(item)" v-for="(item,index) in roleList" :key="index" class="df-ac cell"
|
:class="item.active?'active':''">
|
|
<view class="df-ac prefix">
|
<u-icon name="account-fill" color="#2979ff" size="28"></u-icon>
|
<view class="label">{{item.roleName}}</view>
|
</view>
|
|
<view v-if="item.active" class="suffix">
|
<u-icon name="checkbox-mark" color="#2979ff" size="22"></u-icon>
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn">
|
<u-button @click="submit" type="primary" text="确认"></u-button>
|
</view>
|
|
|
</view>
|
</template>
|
|
<script>
|
import store from "@/store/index.js"
|
import {
|
dynamicMenu,
|
getRoleListByIds,
|
} from "@/api/system/role.js"
|
export default {
|
data() {
|
return {
|
roleList: [],
|
selectRole: {},
|
}
|
},
|
created() {
|
this.getUserRole()
|
|
console.log(this.activeRoleId)
|
},
|
mounted() {
|
|
},
|
onLoad(option) {
|
|
},
|
onShow() {
|
|
},
|
methods: {
|
//获取当前角色的所有权限列表
|
async getUserRole() {
|
const res = await getRoleListByIds({
|
roleIds: this.userInfo.role_id
|
})
|
|
let data = res.data
|
data.forEach(e => {
|
if (e.id == this.activeRoleId) {
|
e.active = true
|
} else {
|
e.active = false
|
}
|
})
|
|
this.roleList = res.data
|
},
|
|
//启用角色
|
activeRole(item) {
|
this.selectRole = item
|
this.roleList.forEach(role => {
|
if (role.id == item.id) {
|
role.active = true
|
} else {
|
role.active = false
|
}
|
})
|
},
|
|
async submit() {
|
//保存当前激活的角色
|
store.commit("setActiveRoleId", this.selectRole.id)
|
|
//获取角色菜单
|
const res = await dynamicMenu(this.selectRole.id)
|
|
console.log(res, "--------------")
|
this.$u.func.showToast("切换角色成功")
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
background-color: #fafafa;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.main {
|
|
.cell {
|
background-color: #ffffff;
|
margin: 20rpx 0;
|
padding: 30rpx 20rpx;
|
justify-content: space-between;
|
height: 30rpx;
|
|
.label {
|
font-size: 28rpx;
|
}
|
}
|
}
|
|
.submit-btn {
|
padding: 30rpx;
|
position: relative;
|
top: 50%;
|
}
|
|
|
}
|
|
.df-ac {
|
display: flex;
|
align-items: center;
|
}
|
|
.active {
|
background-color: #e8effb !important;
|
}
|
</style>
|
