一套系统中，必不可少的就是权限分配了，那么我们该如何实现权限分配这一功能呢？
首先，我们说一下需要的软件。
前端：HbuilderX
后端：IDEA
测试浏览器：火狐
接下来，我来给大家分享一些自己的经验。
一、补充后台代码，关于assign方法的，在接口，实现类，controller中都需要写(在之前的代码里都有写，如果需要的话可以翻之前的代码，在这里我就不多说了)。
二、我们在user_role.vue中设置一些事件。
1、首先我们需要设置分配角色的按钮，然后设置保存、返回、复选框等事件，代码如下：
<uni-nav-bar title="分配角色" leftText="返回" rightText="保存" @clickLeft="doBack" @clickRight="doSave"></uni-nav-bar>
<uni-table ref="roleTable" :border="true" type="selection" @selection-change="selectionChanged">2、其次我们需要在<script></script>中创建相应的函数，代码如下：
返回
/*返回*/
doBack(){
uni.navigateBack();
},保存
/*保存*/
doSave(){
},复选框
/*当表格行的状态变化时触发*/
selectionChanged(e){
console.log(e);
this.tableCheckIndex = e.detail.index;//将表格被选中项的索引赋值给变量
},三、获取角色的列表。
1、在UI中写一个表格，代码如下：
<uni-table ref="roleTable" :border="true" type="selection" @selection-change="selectionChanged">
<uni-tr>
<uni-th>角色名称</uni-th>
</uni-tr>
<uni-tr v-for="role in roleList">
<uni-td>{{role.name}}</uni-td>
</uni-tr>
</uni-table>2、在date中放入数据，代码如下：
data() {
return{
msg:null,//对话框的提示字符串
tableCheckIndex:[],//表格复选框被选中的索引列表
pageIndex:1,//页码
pageSize:6,//每页展示数据的条数
pageTotal:0, //数据总条数
uid:null,//用户id
roleList:null,//全部角色
userRoleList:null//用户所拥有的角色列表
}
},3、获取全部角色，代码如下：
methods: {
/*获取全部角色*/
requestRoleList(){
uni.request({
url:"http://localhost:8082/authrole/show",
data:{
pageIndex: this.pageIndex,
pageSize: this.pageSize
},
success: (res) => {
console.log(res.data.data);
this.roleList = res.data.data;
this.pageTotal = res.data.total;
this.requestUserRoles();//调用获取用户所拥有的角色列表的接口
}
})
},4、获取所有用户所用有的角色列表，代码如下：
/*获取所有用户所用有的角色列表*/
requestUserRoles(){
uni.request({
url: "http://localhost:8082/authrole/user_role_list?uid="+this.uid,
success: (res) => {
console.log(res.data.data);
this.userRoleList = res.data.data;
/*业务逻辑判断，比对所拥有的的角色，如果比对成功，就让该条记录的复选框选中。*/
for(var i = 0; i < this.roleList.length; i++){
for(var j = 0; j < this.userRoleList.length; j++){
if(this.roleList[i].id == this.userRoleList[j].id){
/*让该条记录的复选框被选中*/
this.$refs.roleTable.toggleRowSelection(i,true);
}
}
}
}
})
},四、处理页面参数。
1、接收页面传参，代码如下：
onLoad(options) {
this.uid=options.id;//接收页面传参
console.log("分配:用户id="+this.uid);
},2、调用请求列表函数，代码如下：
onShow() {
this.requestRoleList();//调用请求列表的函数，通过http请求微服务的用户列表
},五、保存所选角色，代码如下：
/*保存*/
doSave(){
var ids = [];
for(var i = 0; i < this.tableCheckIndex.length; i++){
ids[i] = this.roleList[this.tableCheckIndex[i]].id;
}
uni.request({
url: "http://localhost:8082/authuser/assign_role",
data:{
uid: this.uid,
roleIds: ids
},
success: (res) => {
if(res.data.code == 200){//授权成功
this.msg = res.data.data;
}else{//授权失败
this.msg = res.data.msg;
}
this.open();
}
})
},六、保存失败后设置弹窗。
1、UI中设置警告对话框，代码如下：
<!--弹出警告对话框-->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>2、设置弹出警告对话框，代码如下：
//弹出警告对话框
open() {
this.$refs.popup.open();
}七、在火狐浏览器测试。
1、测试前未选中。
2、测试并返回重新进入，发现我之前选中的教师及普通用户已被选中。
至此，功能实现，下面附上全部代码。
1、template中的代码。
<template>
<view>
<menuDraw></menuDraw> <!--使用导入的组件-->
<uni-nav-bar title="分配角色" leftText="返回" rightText="保存" @clickLeft="doBack" @clickRight="doSave"></uni-nav-bar>
<uni-table ref="roleTable" :border="true" type="selection" @selection-change="selectionChanged">
<uni-tr>
<uni-th>角色名称</uni-th>
</uni-tr>
<uni-tr v-for="role in roleList">
<uni-td>{{role.name}}</uni-td>
</uni-tr>
</uni-table>
<!--弹出警告对话框-->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="base" title="通知" :content="msg" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
<!-- 分页器 -->
<uni-pagination
:current="pageIndex"
:pageSize="pageSize"
:total="pageTotal"
@change="pageChanged"
/>
</view>
</template>2、script中的代码。
<script>
import menuDraw from "../template/menu_draw.vue";//第一步：导入外部文件
export default {
//组件的声明
components:{
menuDraw//声明组件
},
data() {
return{
msg:null,//对话框的提示字符串
tableCheckIndex:[],//表格复选框被选中的索引列表
pageIndex:1,//页码
pageSize:6,//每页展示数据的条数
pageTotal:0, //数据总条数
uid:null,//用户id
roleList:null,//全部角色
userRoleList:null//用户所拥有的角色列表
}
},
onLoad(options) {
this.uid=options.id;//接收页面传参
console.log("分配:用户id="+this.uid);
},
onShow() {
this.requestRoleList();//调用请求列表的函数，通过http请求微服务的用户列表
},
methods: {
/*获取全部角色*/
requestRoleList(){
uni.request({
url:"http://localhost:8082/authrole/show",
data:{
pageIndex: this.pageIndex,
pageSize: this.pageSize
},
success: (res) => {
console.log(res.data.data);
this.roleList = res.data.data;
this.pageTotal = res.data.total;
this.requestUserRoles();//调用获取用户所拥有的角色列表的接口
}
})
},
/*获取所有用户所用有的角色列表*/
requestUserRoles(){
uni.request({
url: "http://localhost:8082/authrole/user_role_list?uid="+this.uid,
success: (res) => {
console.log(res.data.data);
this.userRoleList = res.data.data;
/*业务逻辑判断，比对所拥有的的角色，如果比对成功，就让该条记录的复选框选中。*/
for(var i = 0; i < this.roleList.length; i++){
for(var j = 0; j < this.userRoleList.length; j++){
if(this.roleList[i].id == this.userRoleList[j].id){
/*让该条记录的复选框被选中*/
this.$refs.roleTable.toggleRowSelection(i,true);
}
}
}
}
})
},
//*当分页器被点击时触发*/
pageChanged(e){//*当分页器被点击时触发
console.log(e.current);//打印出当前点击的页码
this.pageIndex = e.current;//给页码赋值
this.requestRoleList();
},
/*返回*/
doBack(){
uni.navigateBack();
},
/*保存*/
doSave(){
var ids = [];
for(var i = 0; i < this.tableCheckIndex.length; i++){
ids[i] = this.roleList[this.tableCheckIndex[i]].id;
}
uni.request({
url: "http://localhost:8082/authuser/assign_role",
data:{
uid: this.uid,
roleIds: ids
},
success: (res) => {
if(res.data.code == 200){//授权成功
this.msg = res.data.data;
}else{//授权失败
this.msg = res.data.msg;
}
this.open();
}
})
},
/*当表格行的状态变化时触发*/
selectionChanged(e){
console.log(e);
this.tableCheckIndex = e.detail.index;//将表格被选中项的索引赋值给变量
},
//点击对话框确认按钮执行的操作
confirm(){
this.$refs.popup.close();
},
//点击对话框关闭按钮执行的操作
close() {
this.$refs.popup.close();
},
//弹出警告对话框
open() {
this.$refs.popup.open();
}
}
}
</script>
<style>
</style>好了，今天的分享到这里就结束了，有问题可以随时问我，希望能够帮助大家。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
