一、前端修改权限弹出层

 <el-dialog
                title="修改权限"
                :visible.sync="updatePermissiondialogVisible"
                width="30%"
        >
            
            <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    ref="rootTree"
                    default-expand-all
                    :props="defaultProps">
            el-tree>
            <span slot="footer" class="dialog-footer">
            <el-button @click="updatePermissiondialogVisible = false">取 消el-button>
            <el-button type="primary" @click="confirmPermission">确 定el-button>
          span>
        el-dialog>

treeData：是我们从后端查询出的所有权限

defaultProps：(1)children:子节点；lable:子节点名称

node-key：是我们权限显示根据查询出来的权限编号来显示

ref：可以理解为被选中的权限

data数据层需要定义的数据:

data(){
    return:{
        //权限弹出层
                updatePermissiondialogVisible:false,
        defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                //树型菜单数据
                treeData:[],
                //被选中中菜单项目
                checkedKeys:[],
                roleId:0
    }
}

选中点击修改权限按钮触发的事件:

  //修改权限按钮事件
                updatePer(roleId){
                    this.roleId=roleId;
                    this.updatePermissiondialogVisible=true;
                    this.$http.post("/permission/allMenu/"+roleId).then(result=>{
                        // //1.查询所有的菜单
                        this.treeData=result.data.data.treeData;
                        console.log(result.data.data.checkIds)
                        // //2.查询当前角色具有的菜单id.
                        setTimeout(()=>{
                            result.data.data.checkIds.forEach(value=>{
                                this.$refs.rootTree.setChecked(value,true,false);
                            })
                        },100)
                        /*menuids.forEach(value=>{
                            console.log(value);
                            that.$refs.tree.setChecked(value,true,false);
                        })*/
 
                    })
                },

二、后台权限信息数据回显功能实现:

1.controller层

@PostMapping("/allMenu/{roleId}")
    public CommonResult allMenu(@PathVariable String roleId){
        CommonResult allMenu = permissionService.findAllMenu(roleId);
        return allMenu;
    }

2.业务层Srvice层(核心)

        我查询当前角色具有的权限使用的是递归调用分别比较当前权限id与父4权限id是否相同，相同则代表该权限id具有子菜单。

@Service
public class PermissionServiceImpl extends ServiceImpl implements IPermissionService {
    @Autowired
    private PermissionMapper permissionMapper;
    @Autowired
    private RedisTemplate redisTemplate;
    @Autowired
    private IRolePermissionService rolePermissionService;
 
    @Override
    //查询出所有的权限
    public CommonResult findAllMenu(String roleid) {
      QueryWrapper wrapper=new QueryWrapper<>();
      wrapper.eq("is_deleted",0);
        List permissionList = permissionMapper.selectList(wrapper);
        //设置层级关系
        List firstMenus =new ArrayList<>();
        for (Permission first : permissionList) {
            //查找一级菜单放入list集合
            if(first.getPid().equals("1")){
                firstMenus.add(first);
            }
        }
        //为一级菜单设置二级菜单
        for (Permission firstMenu : firstMenus) {
            firstMenu.setChildren(findChildren(permissionList,firstMenu.getId()));
        }
 
        //根据角色查询该角色具有的权限id
        QueryWrapper wrapper1=new QueryWrapper<>();
        wrapper1.eq("role_id",roleid);
        List list = rolePermissionService.list(wrapper1);
        //使用stream流只取出id
        List collect = list.stream().map(iteam -> iteam.getPermissionId()).distinct().collect(Collectors.toList());
 
 
        //将查询到的结果封装到map中
        Map map=new HashMap<>();
        map.put("checkIds",collect);
        map.put("treeData",firstMenus);
 
 
        return new CommonResult(2000,"查询成功!",map);
    }

3.dao层(mapper层)

数据库方面我使用是mybatis-plus

@Repository
public interface PermissionMapper extends BaseMapper {
 
    List findPermissionByUserId(String id);
}

 此时我们已经做到权限数据可以回显，当前角色具有的权限也会被选中

三、重新给角色分配权限后的确认修改的功能实现:

1、点击确认修改权限的事件

//确定权限分配
            confirmPermission(){
                //获取全选半选的树节点
                var checkedNodes=this.$refs.rootTree.getCheckedNodes(false,true);
                var ids=[];
                checkedNodes.forEach(iteam=>{
                    ids.push(iteam.id)
                })
                this.$http.post("/rolePermission/edit/"+this.roleId,ids).then(result=>{
                    if (result.data.code===2000){
                        this.$message.success(result.data.msg);
                        this.updatePermissiondialogVisible=false;
                    }
                    this.$router.go(0);
 
                })
            },

2、后端修改权限controller层

@RestController
@RequestMapping("/rolePermission")
public class RolePermissionController {
    @Autowired
    private IRolePermissionService rolePermissionService;
    @PostMapping("/edit/{roleId}")
    public CommonResult edit(@PathVariable String roleId, @RequestBody List ids){
        System.out.println(ids);
        return rolePermissionService.edit(roleId,ids);
    }
}

3.dao层(mapper层)

数据库方面我使用是mybatis-plus

在mapper中我调用的都是mybatis-plus中自带的单表方法

4.业务层Srvice层(核心)

修改权限业务流程可以看作是：

1.先把角色原有的权限全部删除

2.将重写分配给角色的权限添加上去

因为是两步操作而且要保证同时进行所以我们要为其添加上事务处理

@Transactional

另外也要在主启动类上开启事务注解

@EnableTransactionManagement//开启事务

@Service
public class RolePermissionServiceImpl extends ServiceImpl implements IRolePermissionService {
    @Override
    @Transactional
    public CommonResult edit(String roleId, List ids) {
        //修改操作
        //先删除后添加
        //删除
        QueryWrapper wrapper=new QueryWrapper<>();
        wrapper.eq("role_id",roleId);
        this.remove(wrapper);
 
        //添加
        List collect =
                ids.stream()
                        .map(iteam -> new RolePermission(null, roleId, iteam, false, LocalDateTime.now(), LocalDateTime.now())).collect(Collectors.toList());
        this.saveBatch(collect);
 
        return new CommonResult(2000,"分配成功!",null);
    }
}