vue-admin-template给角色分配权限

1.放置权限弹层

<!-- 放置权限弹层 -->
<el-dialog :visible.sync="showPermissionDialog" title="分配权限">
<!-- 放置权限数据 -->
<el-tree
        ref="permTree"
        check-strictly
        node-key="id"
        :data="permissionData"
        :props="{ label: 'name' }"
        show-checkbox
default-expand-all
        :default-checked-keys="permIds"
        />
<el-row slot="footer" type="flex" justify="center">
<el-col :span="6">
<el-button type="primary" size="mini" @click="btnPermissionOK">确定</el-button>
<el-button size="mini" @click="showPermissionDialog = false">取消</el-button>
</el-col>
</el-row>
</el-dialog>

2.控制弹层变量

showPermissionDialog: false,
        permissionData: [],
        currentRoleId: null,
        permIds: []

3.弹出弹层方法

async  btnPermission(id) {
    this.currentRoleId = id
  const { permIds } = await getRoleDetail(id)
            this.permIds = permIds
    this.permissionData = transListToTreeData(await getPermissionList(), 0)
    this.showPermissionDialog = true
},

4.保存权限

// 点击确定时触发
async  btnPermissionOK() {
    await assignPerm({
            id: this.currentRoleId,
            permIds: this.$refs.permTree.getCheckedKeys()
  })
    this.$message.success('角色分配权限成功')
    this.showPermissionDialog = false
}

5.权限回显，显示已分配权限

:default-checked-keys="permIds"

// 弹出权限弹层
async  btnPermission(id) {
    this.currentRoleId = id // 记录了角色ID
  const permids = await getRoleDetail(id)
    console.log('permids', permids)
    this.permids = permids

    this.permissionData = transListToTreeData(await getPermissionList(), 0)
    this.showPermissionDialog = true
},

6.后端

@PutMapping("/assignPerm")
public Result<String> assignPerm(@RequestBody RolePermListDto rolePermListDto){
    QueryWrapper<RolePerm> wrapper = new QueryWrapper();
    wrapper.eq("roleid",rolePermListDto.getId());
    rolePermService.remove(wrapper);



    rolePermListDto.getPermids().forEach(element -> {
        // 对元素进行操作
        RolePerm rolePerm = new RolePerm();
        rolePerm.setRoleid(rolePermListDto.getId());
        rolePerm.setPermid(element);
        rolePermService.save(rolePerm);
    });;
    return Result.success("分配角色权限成功");
}