用户管理新增分配角色功能

RuoYi

2021-07-01 9c7901f526aa1fefd35da044b73c1a77e4d67ff0

用户管理新增分配角色功能

 ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysUserController.java

@@ -202,4 +202,31 @@
        user.setUpdateBy(SecurityUtils.getUsername());

        return toAjax(userService.updateUserStatus(user));

    }



    /**

     * 根据用户编号获取授权角色

     */

    @PreAuthorize("@ss.hasPermi('system:user:query')")

    @GetMapping("/authRole/{userId}")

    public AjaxResult authRole(@PathVariable("userId") Long userId)

    {

        AjaxResult ajax = AjaxResult.success();

        SysUser user = userService.selectUserById(userId);

        List<SysRole> roles = roleService.selectRolesByUserId(userId);

        ajax.put("user", user);

        ajax.put("roles", SysUser.isAdmin(userId) ? roles : roles.stream().filter(r -> !r.isAdmin()).collect(Collectors.toList()));

        return ajax;

    }



    /**

     * 用户授权角色

     */

    @PreAuthorize("@ss.hasPermi('system:user:edit')")

    @Log(title = "用户管理", businessType = BusinessType.GRANT)

    @PutMapping("/authRole")

    public AjaxResult insertAuthRole(Long userId, Long[] roleIds)

    {

        userService.insertUserAuth(userId, roleIds);

        return success();

    }

}


 ruoyi-system/src/main/java/com/ruoyi/system/service/ISysRoleService.java

@@ -20,7 +20,15 @@
    public List<SysRole> selectRoleList(SysRole role);



    /**

     * 根据用户ID查询角色

     * 根据用户ID查询角色列表

     * 
     * @param userId 用户ID

     * @return 角色列表

     */

    public List<SysRole> selectRolesByUserId(Long userId);



    /**

     * 根据用户ID查询角色权限

     * 

     * @param userId 用户ID

     * @return 权限列表


 ruoyi-system/src/main/java/com/ruoyi/system/service/ISysUserService.java

@@ -96,6 +96,14 @@
     * @return 结果

     */

    public int updateUser(SysUser user);

    
    /**

     * 用户授权角色

     * 
     * @param userId 用户ID

     * @param roleIds 角色组

     */

    public void insertUserAuth(Long userId, Long[] roleIds);



    /**

     * 修改用户状态


 ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysRoleServiceImpl.java

@@ -56,6 +56,31 @@
    }



    /**

     * 根据用户ID查询角色

     * 
     * @param userId 用户ID

     * @return 角色列表

     */

    @Override

    public List<SysRole> selectRolesByUserId(Long userId)

    {

        List<SysRole> userRoles = roleMapper.selectRolePermissionByUserId(userId);

        List<SysRole> roles = selectRoleAll();

        for (SysRole role : roles)

        {

            for (SysRole userRole : userRoles)

            {

                if (role.getRoleId().longValue() == userRole.getRoleId().longValue())

                {

                    role.setFlag(true);

                    break;

                }

            }

        }

        return roles;

    }



    /**

     * 根据用户ID查询权限

     * 

     * @param userId 用户ID


 ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java

@@ -243,6 +243,18 @@
    }



    /**

     * 用户授权角色

     * 
     * @param userId 用户ID

     * @param roleIds 角色组

     */

    public void insertUserAuth(Long userId, Long[] roleIds)

    {

        userRoleMapper.deleteUserRoleByUserId(userId);

        insertUserRole(userId, roleIds);

    }



    /**

     * 修改用户状态

     * 

     * @param user 用户信息

@@ -357,6 +369,32 @@
    }



    /**

     * 新增用户角色信息

     * 
     * @param userId 用户ID

     * @param roleIds 角色组

     */

    public void insertUserRole(Long userId, Long[] roleIds)

    {

        if (StringUtils.isNotNull(roleIds))

        {

            // 新增用户与角色管理

            List<SysUserRole> list = new ArrayList<SysUserRole>();

            for (Long roleId : roleIds)

            {

                SysUserRole ur = new SysUserRole();

                ur.setUserId(userId);

                ur.setRoleId(roleId);

                list.add(ur);

            }

            if (list.size() > 0)

            {

                userRoleMapper.batchUserRole(list);

            }

        }

    }



    /**

     * 通过用户ID删除用户

     * 

     * @param userId 用户ID


 ruoyi-ui/src/api/system/user.js

@@ -125,3 +125,20 @@
    method: 'get'

  })

}



// 查询授权角色

export function getAuthRole(userId) {

  return request({

    url: '/system/user/authRole/' + userId,

    method: 'get'

  })

}



// 保存授权角色

export function updateAuthRole(data) {

  return request({

    url: '/system/user/authRole',

    method: 'put',

    params: data

  })

}


 ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -53,6 +53,13 @@
    margin-left: 20px;

}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

    font-family: inherit;

    font-weight: 500;

    line-height: 1.1;

    color: inherit;

}



.el-dialog:not(.is-fullscreen){

    margin-top: 6vh !important;

}

@@ -120,6 +127,17 @@
    width: inherit;

}



/** 表格更多操作下拉样式 */

.el-table .el-dropdown-link {

    cursor: pointer;

    color: #1890ff;

    margin-left: 5px;

}



.el-table .el-dropdown, .el-icon-arrow-down {

    font-size: 12px;

}



.el-tree-node__content > .el-checkbox {

    margin-right: 8px;

}


 ruoyi-ui/src/router/index.js

@@ -81,6 +81,19 @@
    ]

  },

  {

    path: '/auth',

    component: Layout,

    hidden: true,

    children: [

      {

        path: 'role/:userId(\\d+)',

        component: (resolve) => require(['@/views/system/user/authRole'], resolve),

        name: 'AuthRole',

        meta: { title: '分配角色'}

      }

    ]

  },

  {

    path: '/dict',

    component: Layout,

    hidden: true,


 ruoyi-ui/src/views/system/user/authRole.vue

对比新文件
@@ -0,0 +1,117 @@
<template>

  <div class="app-container">

    <h4 class="form-header h4">基本信息</h4>

    <el-form ref="form" :model="form" label-width="80px">

      <el-row>

        <el-col :span="8" :offset="2">

          <el-form-item label="用户昵称" prop="nickName">

            <el-input v-model="form.nickName" disabled />

          </el-form-item>

        </el-col>

        <el-col :span="8" :offset="2">

          <el-form-item label="登录账号" prop="phonenumber">

            <el-input  v-model="form.userName" disabled />

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>



    <h4 class="form-header h4">角色信息</h4>

    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">

      <el-table-column label="序号" type="index" align="center">

        <template slot-scope="scope">

          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>

        </template>

      </el-table-column>

      <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>

      <el-table-column label="角色编号" align="center" prop="roleId" />

      <el-table-column label="角色名称" align="center" prop="roleName" />

      <el-table-column label="权限字符" align="center" prop="roleKey" />

      <el-table-column label="创建时间" align="center" prop="createTime" width="180">

        <template slot-scope="scope">

          <span>{{ parseTime(scope.row.createTime) }}</span>

        </template>

      </el-table-column>

    </el-table>

    
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />



    <el-form label-width="100px">

      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">

        <el-button type="primary" @click="submitForm()">提交</el-button>

        <el-button @click="close()">返回</el-button>

      </el-form-item>

    </el-form>

  </div>

</template>



<script>

import { getAuthRole, updateAuthRole } from "@/api/system/user";



export default {

  name: "AuthRole",

  data() {

    return {

       // 遮罩层

      loading: true,

      // 分页信息

      total: 0,

      pageNum: 1,

      pageSize: 10,

      // 选中角色编号

      roleIds:[],

      // 角色信息

      roles: [],

      // 用户信息

      form: {}

    };

  },

  created() {

    const userId = this.$route.params && this.$route.params.userId;

    if (userId) {

      this.loading = true;

      getAuthRole(userId).then((response) => {

        this.form = response.user;

        this.roles = response.roles;

        this.total = this.roles.length;

        this.$nextTick(() => {

          this.roles.forEach((row) => {

            if (row.flag) {

              this.$refs.table.toggleRowSelection(row);

            }

          });

        });

        this.loading = false;

      });

    }

  },

  methods: {

    /** 单击选中行数据 */

    clickRow(row) {

      this.$refs.table.toggleRowSelection(row);

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

      this.roleIds = selection.map((item) => item.roleId);

    },

    // 保存选中的数据编号

    getRowKey(row) {

      return row.roleId;

    },

    /** 提交按钮 */

    submitForm() {

      const userId = this.form.userId;

      const roleIds = this.roleIds.join(",");

      updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {

        this.msgSuccess("授权成功");

        this.close();

      });

    },

    /** 关闭按钮 */

    close() {

      this.$store.dispatch("tagsView/delView", this.$route);

      this.$router.push({ path: "/system/user" });

    },

  },

};

</script>

 ruoyi-ui/src/views/system/user/index.vue

@@ -175,21 +175,19 @@
                @click="handleUpdate(scope.row)"

                v-hasPermi="['system:user:edit']"

              >修改</el-button>

              <el-button

                v-if="scope.row.userId !== 1"

                size="mini"

                type="text"

                icon="el-icon-delete"

                @click="handleDelete(scope.row)"

                v-hasPermi="['system:user:remove']"

              >删除</el-button>

              <el-button

                size="mini"

                type="text"

                icon="el-icon-key"

                @click="handleResetPwd(scope.row)"

                v-hasPermi="['system:user:resetPwd']"

              >重置</el-button>

              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">

                <span class="el-dropdown-link">

                  <i class="el-icon-d-arrow-right el-icon--right"></i>更多操作

                </span>

                <el-dropdown-menu slot="dropdown">

                  <el-dropdown-item command="handleDelete" v-if="scope.row.userId !== 1" icon="el-icon-delete"

                    v-hasPermi="['system:user:remove']">删除用户</el-dropdown-item>

                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"

                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>

                  <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"

                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>

                </el-dropdown-menu>

              </el-dropdown>

            </template>

          </el-table-column>

        </el-table>

@@ -561,6 +559,22 @@
      this.single = selection.length != 1;

      this.multiple = !selection.length;

    },

    // 更多操作触发

    handleCommand(command, row) {

      switch (command) {

        case "handleDelete":

          this.handleDelete(row);

          break;

        case "handleResetPwd":

          this.handleResetPwd(row);

          break;

        case "handleAuthRole":

          this.handleAuthRole(row);

          break;

        default:

          break;

      }

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset();

@@ -603,6 +617,11 @@
          });

        }).catch(() => {});

    },

    /** 分配角色操作 */

    handleAuthRole: function(row) {

      const userId = row.userId;

      this.$router.push("/auth/role/" + userId);

    },

    /** 提交按钮 */

    submitForm: function() {

      this.$refs["form"].validate(valid => {