vue+elementui实现给角色分配资源的功能

注：本项目为前后端分离项目后端框架SpringBoot+MybatisPlus
效果展示：

前端代码：

首先在角色管理操作中加入分配资源按钮

     <el-row>
           <el-button size="mini"
                     type="text"
                       @click="handleSelectResource(scope.$index, scope.row)">分配资源
           </el-button>         
      </el-row>

定义好分配资源的弹框

 <!-- 分配资源-->
        <el-dialog
                title="分配资源"
                :visible.sync="dialogVisibleResource"
                width="50%">
            <div style="margin-top: 20px" align="center">
                <el-button type="primary" @click="handleSaveResource()">保存</el-button>
                <el-button @click="handleClearResource()">清空</el-button>
            </div>
            <div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
                <el-row class="table-layout" style="background: #F2F6FC;">
                    <el-checkbox v-model="cate.checked"
                                 :indeterminate="isIndeterminate(cate.id)"
                                 @change="handleCheckAllChange(cate)">
                        {{cate.name}}
                    </el-checkbox>
                </el-row>
                <el-row class="table-layout">
                    <el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
                        <el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
                            {{resource.name}}
                        </el-checkbox>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>

在data定义初始值

    data() {
        return {
             //资源有关
            roleId:null,
            dialogVisibleResource:false,
            allResource: null,
            allResourceCate: null
            }
        }

开始定义方法实现：

  methods: {
//分配资源
        handleSelectResource(index,row){
           this.roleId=row.id;
           this.dialogVisibleResource=true;
           let params={pageNum: 1,pageSize: 100};
           //获取资源分类信息
            queryResourceCategory(params).then(result=>{
                this.allResourceCate=result.data.data;
            })

            // 获取资源信息
            queryResourceList(params).then(result=>{
                this.allResource = result.data.data.list;
                //回显，查询改角色下有哪些资源
               this.getResourceByRoleId();
            })
        },
        getResourceByRoleId(){
            // 获取该角色拥有的资源，进行回显
            getResourceByRoleId(this.roleId).then(result=>{
                let roleResource = result.data.data;
                this.allResource.forEach(resource=>{
                    resource.checked = this.getResourceChecked(resource.id,roleResource);
                })
                this.allResourceCate.forEach(item=>{
                    item.checked = this.isAllChecked(item.id);
                });
                this.$forceUpdate();
            })
        },
        isAllChecked(categoryId) {
            let cateResources = this.getResourceByCate(categoryId);
            if (cateResources == null) return false;
            let checkedCount = 0;
            for (let i = 0; i < cateResources.length; i++) {
                if (cateResources[i].checked === true) {
                    checkedCount++;
                }
            }
            if(checkedCount===0){
                return false;
            }
            return checkedCount === cateResources.length;
        },
        getResourceChecked(resourceId,roleResource){
            for (let i = 0; i <roleResource.length ; i++) {
                if (roleResource[i].resourceId == resourceId){
                    return true;
                }
            }
            return false;
        },
        // 将商品资源放到对应的资源分类下面
        getResourceByCate(categoryId){
            let cateResource = [];
            if (this.allResource == null) return;
            for (let i = 0; i < this.allResource.length; i++) {
                if (this.allResource[i].categoryId == categoryId){
                    cateResource.push(this.allResource[i]);
                }
            }
            return cateResource;
        },

        isIndeterminate(categoryId){
            let cateResources = this.getResourceByCate(categoryId);
            if (cateResources == null) return false;
            let checkedCount = 0;
            for (let i = 0; i < cateResources.length; i++) {
                if (cateResources[i].checked === true) {
                    checkedCount++;
                }
            }
            return !(checkedCount === 0 || checkedCount === cateResources.length);
        },
        handleCheckAllChange(cate){
            var check=cate.checked;
            let cateResources = this.getResourceByCate(cate.id);
            for (let i = 0; i < cateResources.length; i++) {
                cateResources[i].checked = cate.checked;
            }
            this.$forceUpdate();
        },
        handleCheckChange(resource){
            this.allResourceCate.forEach(item=>{
                if(item.id===resource.categoryId){
                    item.checked = this.isAllChecked(resource.categoryId);
                }
            });
            this.$forceUpdate();


         },
        handleSaveResource(){
            this.$confirm('是否分配资源？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 获取选中的资源
                let checkedResourceId = [];
                this.allResource.forEach(resource=>{
                    if (resource.checked){
                        checkedResourceId.push(resource.id);
                    }
                })

                let params = new URLSearchParams();
                params.append("roleId", this.roleId);
                params.append("resourceId", checkedResourceId);
                addRoleResource(params).then(result=>{
                    this.$message.success("分类资源成功");
                    this.dialogVisibleResource = false;
                })
            })
        },
      }

api中发请求：

//页面注入
import {queryResourceCategory} from "../../../api/ums/resourceCategory/resourceCategory";
import {queryResourceList,getResourceByRoleId,addRoleResource} from "../../../api/ums/resource/resource";

//查询分类资源数据
export const queryResourceCategory = params => {
    return request({
        url: 'http://localhost:8080/resourceCategory/selete',
        method: 'get',
        params: params
    });
};

//查询资源数据
export const queryResourceList = params => {
    return request({
        url: 'http://localhost:8080/resource',
        method: 'get',
        params: params
    });
};

//回显角色线下资源数据
export const getResourceByRoleId = roleId => {
    return request({
        url: 'http://localhost:8080/roleResourceRelation/'+roleId,
        method: 'get',
    });
};

//修改或新增
export const addRoleResource = params => {
    return request({
        url:'http://localhost:8080/roleResourceRelation/',
        method: 'post',
        data: params
    });
};

后端代码：

资源分类表 前端控制器 ResourceCategoryController类

//查询资源数据
    @GetMapping("selete")
    public ResultObj queryResourceCategory(Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum, pageSize);

        List<ResourceCategory> resourceCategoryList = resourceCategoryService.list();

        return ResultObj.success(resourceCategoryList);
    }

后台资源表 前端控制器 ResourceController类

    //查询数据+分页+条件查询
    @GetMapping
    public ResultObj queryResourceList(Integer pageNum, Integer pageSize, String name){
        PageHelper.startPage(pageNum, pageSize);
        QueryWrapper<Resource> queryWrapper = new QueryWrapper<>();
        if(StringUtils.isNotBlank(name)){
            queryWrapper.like("name",name);
        }
        queryWrapper.orderByDesc("id");
        List<Resource> resourceList = resourceService.list(queryWrapper);
        PageInfo pageInfo = new PageInfo(resourceList);
        return ResultObj.success(pageInfo);
    }

分页jar包

后台角色资源关系表 前端控制器 RoleResourceRelationController类

//回显
    @GetMapping("{roleId}")
    public ResultObj queryMenuByRoleId(@PathVariable Long roleId){
        List<RoleResourceRelation> roleResourceRelations = roleResourceRelationService.list(new QueryWrapper<RoleResourceRelation>().eq("role_id", roleId));
        return ResultObj.success(roleResourceRelations);
    }



    //新增
    @PostMapping
    public ResultObj addRoleResource(@RequestParam("roleId") Long roleId,@RequestParam("resourceId")List<Long>resourceIds){
        roleResourceRelationService.addRoleResource(roleId,resourceIds);
        return ResultObj.success();
    }

RoleMenuRelationServiceImpl实现类代码

@Override
    public void addRoleResource(Long roleId, List<Long> resourceIds) {
            super.remove(new QueryWrapper<RoleResourceRelation>().eq("role_id",roleId));
            List<RoleResourceRelation>list=new ArrayList<>();
            if(!CollectionUtils.isEmpty(resourceIds)){
                resourceIds.forEach(resourceId->{
                    RoleResourceRelation roleMenuRelation=new RoleResourceRelation();
                    roleMenuRelation.setResourceId(resourceId);
                    roleMenuRelation.setRoleId(roleId);
                    list.add(roleMenuRelation);
                });

            }
            super.saveBatch(list);

    }