目录
一、分配角色
分配角色我设置的是点击分配角色后查询并回显所有角色，分配角色时先删除所拥有的角色再添加。下面展示代码
分配角色弹出框代码
<!-- 分配角色的弹出框-->
<el-dialog title="分配角色" @click="" :visible.sync="fenFormVisible">
<!-- 复选框，有全选半选-->
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedRoles" @change="handlecheckedRolesChange">
<el-checkbox v-for="role in roles" :label="role.id" :key="role.id">{{role.roleName}}</el-checkbox>
</el-checkbox-group>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel1">取 消</el-button>
<el-button type="primary" @click="confirmRole">确 定
</el-button>
</div>
</el-dialog>分配角色的属性
//分配角色的弹出框默认值
fenFormVisible: false,
checkAll: false,
//被选中的
checkedRoles: [],
//全部的数据
roles: [],
//定义userid
userId:"",
//表示 checkbox 的不确定状态
isIndeterminate: true,分配角色的方法（包含确定、全选等）
fanPermission(userId) {
//开启弹出框
this.fenFormVisible = true;
this.userId=userId;
var that=this;
console.log(this.userId);
this.$api.userRole.findRoleByUserId(userId).then(function (resp) {
//把后台查到的所以权限放入roles中
console.log(resp.data);
that.roles=resp.data.allRole;
that.checkedRoles=resp.data.userRoleId;
console.log(that.checkedRoles);
console.log(userId);
})
},
//分配角色弹出框中的确认按钮
confirmRole(){
//分配角色 把被选中所有角色id传到后台，用户id
console.log(this.checkedRoles);
this.$api.userRole.funUserRole({userId:this.userId.id,roleIds:this.checkedRoles}).then(function (resp) {
})
//关闭弹出框
this.fenFormVisible = false;
},
cancel1() {
//设置弹出框为关闭状态
this.fenFormVisible = false;
},
//全选的操作
handleCheckAllChange(val) {
//先把被选中的角色Id清空
this.checkedRoles=[];
// 如果为true
if (val){
// 循环将全部的角色id放入到被选中的数组中
this.roles.forEach(item=>{
this.checkedRoles.push(item.id);
})
}
// this.checkedRoles = val ? this.roles : [];
this.isIndeterminate = false;
},
handlecheckedRolesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.roles.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.roles.length;
}
后台主要代码
/**
* 分配查询角色
* @author jitwxs
* @date 2021/8/10 17:08
* @param userId
* @return com.qcby.device.manage.common.web.ResultJson
*/
@Override
public ResultJson findRoleByUser(String userId){
List<SysRole> roles = roleMapper.selectList(null);
QueryWrapper<SysRefUserRole> wrapper = new QueryWrapper<>();
wrapper.eq("user_id",userId);
List<SysRefUserRole> userRoleVos = userRoleMapper.selectList(wrapper);
List<String> userRoleId = userRoleVos.stream().map(item -> String.valueOf(item.getRoleId())).collect(Collectors.toList());
// 把所有的角色和角色id存放到map中返回到前台
HashMap<String, Object> map = new HashMap<>();
map.put("allRole", roles);
map.put("userRoleId", userRoleId);
return ResultJson.ok("成功",map);
}
/**
* 分配角色添加角色
* @author jitwxs
* @date 2021/8/10 17:09
* @param userRoleVo
* @return com.qcby.device.manage.common.web.ResultJson
*/
@Override
public ResultJson funUserRole(UserRoleVo userRoleVo){
QueryWrapper<SysRefUserRole> wrapper = new QueryWrapper<>();
wrapper.eq("user_id",userRoleVo.getUserId());
userRoleMapper.delete(wrapper);
for (Long roleId: userRoleVo.getRoleIds()) {
SysRefUserRole userRole = new SysRefUserRole();
userRole.setUserId(userRoleVo.getUserId());
userRole.setRoleId(roleId);
userRoleMapper.insert(userRole);
}
return ResultJson.ok("成功");
}
二、分配权限
分配权限弹出框代码
<!-- 分配权限的弹出框-->
<el-dialog
title="分配权限"
:visible.sync="dialoVisible"
width="30%"
>
<el-tree
:data="powers"
show-checkbox
ref="rootTree"
node-key="id"
:default-expanded-keys="checkItems"
:default-checked-keys="checkItems"
:props="defaultProps">
</el-tree>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel1 ">取 消</el-button>
<el-button type="primary" @click="confirmPermission">确 定</el-button>
</span>
</el-dialog>权限树的属性
dialoVisible: false,
checkItems: [],
powers: [],
defaultProps: {
children: 'children',
label: 'title'
},
roleId:"",分配权限的方法
//点击分配权限
fanPower(roleId) {
this.dialoVisible = true;
this.roleId= roleId;
console.log(this.roleId);
var that = this;
//查询所有的权限 以及当前用户具有的权限id
this.$api.rolePower.findNavTree(roleId).then(function (resp) {
console.log(resp.data.rolePowerIds);
console.log(resp.data.allPowers)
//默认选中的树的数据 为解决上级菜单选中子菜单也会全部选中，这里只需要上级菜单选中，子菜单可以选中一个
setTimeout(() =>{
//rootTree表示上面ref的值
if (!resp.data.rolePowerIds){
return;
}
console.log(resp.data.allPowers);
resp.data.rolePowerIds.forEach(value => { //遍历角色的对应的权限Id 进行选中
that.$refs.rootTree.setChecked(value, true, false);
})}, 100)
//给所有的权限数据赋值
// console.log(that.$refs.menuTree);
that.powers = resp.data.allPowers;
//勾选的参数
that.checkItems = resp.data.rolePowerIds;
})
},
//点击确认按钮进行分配权限
confirmPermission() {
var that = this;
//获取全部被勾选的框的id 得到上级菜单被选中包含本身的值
var powerIds=this.$refs.rootTree.getCheckedKeys().concat(this.$refs.rootTree.getHalfCheckedKeys())
console.log(this.checkItems);
//roldId角色id permissionIds所有权限id传到后台
this.$api.rolePower.confirmPower({roleId:this.roleId.id,powerIds:powerIds}).then(function (resp) {
})
this.dialoVisible = false;
},
cancel1() {
//设置弹出框为关闭状态
this.dialoVisible = false;
},
后台主要代码
/**
* 分配权限查找权限
* @author jitwxs
* @date 2021/8/10 17:47
* @param roleId
* @return com.qcby.device.manage.common.web.ResultJson
*/
@Override
public ResultJson findPowerByRoleId(String roleId) {
List<TreeNode> sysPowers = sysRoleMapper.selectPower();
List<TreeNode> firstPowers = new ArrayList<>();//
for (TreeNode sysPower: sysPowers) {
if (sysPower.getParentId().equals(0)){
firstPowers.add(sysPower);
}
}
for (TreeNode firstPower: firstPowers ) {
for(int i = 0;i<sysPowers.size();i++){
if(firstPower.getId()==sysPowers.get(i).getParentId()) {
firstPower.addTreeNode(sysPowers.get(i));
}
}
}
QueryWrapper<SysRefRolePower> wrapper = new QueryWrapper<>();
wrapper.eq("role_id",roleId);
List<SysRefRolePower> sysRefRolePowers = rolePowerMapper.selectList(wrapper);
List<String> rolePowerIds = sysRefRolePowers.stream().map(item -> String.valueOf(item.getPowerId())).collect(Collectors.toList());
HashMap<String, Object> map = new HashMap<>();
map.put("allPowers", firstPowers);
map.put("rolePowerIds", rolePowerIds);
for (Map.Entry<String, Object> map1 : map.entrySet()) {
String key = map1.getKey().toString();
String value = map1.getValue().toString();
}
return ResultJson.ok("成功",map);
}
/**
* 分配权限
* @author jitwxs
* @date 2021/8/10 17:47
* @param rolePowerVo
* @return com.qcby.device.manage.common.web.ResultJson
*/
@Override
public ResultJson confirmPower(RolePowerVo rolePowerVo) {
QueryWrapper<SysRefRolePower> wrapper = new QueryWrapper<>();
wrapper.eq("role_id",rolePowerVo.getRoleId());
rolePowerMapper.delete(wrapper);
for (Long powerId: rolePowerVo.getPowerIds()) {
SysRefRolePower sysRefRolePower = new SysRefRolePower();
sysRefRolePower.setRoleId(rolePowerVo.getRoleId());
sysRefRolePower.setPowerId(powerId);
rolePowerMapper.insert(sysRefRolePower);
}
return ResultJson.ok("添加权限成功");
}
4828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
