角色授权---通过添加和删除一级菜单，完成二级菜单的添加和删除

目的：

点击一级菜单，完成添加一级菜单，同时，二级菜单也能够同步完成勾选并添加，再次点击完成删除。点击二级菜单，完成添加或删除

详细代码

1，RoleFunctionsController

@RestController
public class RoleFunctionsController {
    

    @Autowired
    private IRoleFunService roleFunService;

    /** * 添加角色权限 * @param roleFun * @return */
    @PostMapping("/role-functions")
    public JsonResult addRoleFunctions(@RequestBody RoleFun roleFun){
    
        roleFunService.save(roleFun);
        return new JsonResult(1,roleFun);
    }

    /** * 删除角色权限 * @param roleId * @param functionsId * @return */
    @DeleteMapping("/role-functions/{roleId}/{functionsId}")
    public JsonResult deleteRoleFunctions(@PathVariable String roleId,@PathVariable String functionsId){
    
        roleFunService.remove(new QueryWrapper<RoleFun>().lambda()
                .eq(RoleFun::getRoleId,roleId)
                .eq(RoleFun::getFunId,functionsId));
        //考虑上级权限的情况
        return new JsonResult(1,null);
    }
}

2，role-list.html

这里我只列出了HTML的部分代码

	<el-dialog title="角色授权" :visible.sync="dialogTreeVisible">
        <el-tree :data="functions" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current @check="checkTreeNode" :props="defaultProps">
        </el-tree>
    </el-dialog>
    
<script> new Vue({
      el:"#app", data() {
      return {
      roles:null, rolefunctionslist:null, //权限树 current:null, dialogTreeVisible:false,//显示权限树对话框 functions:null, //权限数据 defaultProps:{
      //修改树属性的名称 children:'subFunctions', label:'name' } } }, methods:{
      //列表点击一行 changeCurrent(row){
      this.current = row; //取消所有的选择效果 this.$refs.roleTable.clearSelection(); //选中当前的行 this.$refs.roleTable.toggleRowSelection(row); }, //单选某一行，data是当前行的数据，row是当前行的对象 selectOne(data,row){
      //取消所有的选择效果 this.$refs.roleTable.clearSelection(); //选中当前的行 this.$refs.roleTable.toggleRowSelection(row); }, //取消全选角色 selectAll(){
      this.$refs.roleTable.clearSelection(); }, //显示授权树 showTreeDialog(){
      if (this.current){
      this.dialogTreeVisible = true; //查询角色相关的权限 axios.get("/functions/role/"+this.current.id).then(value => {
      if (value.data.code == 1){
      this.rolefunctionslist = value.data.data; this.$refs.tree.setCheckedKeys(value.data.data); } }) }else{
      this.$message("请选择角色"); } }, //添加树上的权限节点 checkTreeNode(arg1,arg2){
      console.log(arg1) console.log(arg2) //判断当前的权限id是够在选中的key中 if (arg1.subFunctions != null){
      if (arg2.checkedKeys.length > this.rolefunctionslist.length){
      //添加选择的一级菜单以及以下的二级菜单 //添加一级菜单 axios.post("/role-functions", {
     roleId:this.current.id,funId:arg1.id}).then(value => {
      if (value.data.code == 1){
      this.$message("添加权限成功"); } }) //遍历添加二级菜单 for (let i = 0; i < arg1.subFunctions.length ; i++) {
      axios.post("/role-functions", {
     roleId:this.current.id,funId:arg1.subFunctions[i].id}) .then(value => {
      if (value.data.code == 1){
      this.$message("添加权限成功"); } }) } }else if (arg2.checkedKeys.length <= this.rolefunctionslist.length){
      //删除选择的一级菜单以及以下的二级菜单 //删除一级菜单 axios.delete("/role-functions/"+this.current.id+"/"+arg1.id) .then(value => {
      if (value.data.code == 1){
      this.$message("删除权限成功"); } }); //遍历删除二级菜单 for (let i = 0; i < arg1.subFunctions.length; i++) {
      axios.delete("/role-functions/"+this.current.id+"/"+arg1.subFunctions[i].id) .then(value => {
      if (value.data.code == 1){
      this.$message("删除权限成功"); } }); } } }else {
      //单个添加二级菜单 if (arg2.checkedKeys.indexOf(arg1.id) != -1){
      axios.post("/role-functions", {
     roleId:this.current.id,funId:arg1.id}) .then(value => {
      if (value.data.code == 1){
      this.$message("添加权限成功"); } }) }else {
      axios.delete("/role-functions/"+this.current.id+"/"+arg1.id) //传过去当前角色的id和当前权限的id .then(value => {
      if (value.data.code == 1){
      this.$message("删除权限成功"); } }) } } }, }, mounted(){
      //钩子函数 //加载所有的权限 axios.get("/functions").then(value => {
      if (value.data.code == 1){
      this.functions = value.data.data; } }) } }); </script>