注：本项目为前后端分离项目后端框架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
}
}
开始定义方法实现：
: {
//分配资源
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);
}
