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

RuoYi

2021-07-05 90c41d498c98ba872f20250c0025303a07bfa894

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

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

@@ -17,6 +17,7 @@
import com.ruoyi.common.core.controller.BaseController;

import com.ruoyi.common.core.domain.AjaxResult;

import com.ruoyi.common.core.domain.entity.SysRole;

import com.ruoyi.common.core.domain.entity.SysUser;

import com.ruoyi.common.core.domain.model.LoginUser;

import com.ruoyi.common.core.page.TableDataInfo;

import com.ruoyi.common.enums.BusinessType;

@@ -26,6 +27,7 @@
import com.ruoyi.common.utils.poi.ExcelUtil;

import com.ruoyi.framework.web.service.SysPermissionService;

import com.ruoyi.framework.web.service.TokenService;

import com.ruoyi.system.domain.SysUserRole;

import com.ruoyi.system.service.ISysRoleService;

import com.ruoyi.system.service.ISysUserService;



@@ -179,4 +181,59 @@
    {

        return AjaxResult.success(roleService.selectRoleAll());

    }



    /**

     * æŸ¥è¯¢å·²åˆ†é…ç”¨æˆ·è§’色列表

     */

    @PreAuthorize("@ss.hasPermi('system:role:list')")

    @GetMapping("/authUser/allocatedList")

    public TableDataInfo allocatedList(SysUser user)

    {

        startPage();

        List<SysUser> list = userService.selectAllocatedList(user);

        return getDataTable(list);

    }



    /**

     * æŸ¥è¯¢æœªåˆ†é…ç”¨æˆ·è§’色列表

     */

    @PreAuthorize("@ss.hasPermi('system:role:list')")

    @GetMapping("/authUser/unallocatedList")

    public TableDataInfo unallocatedList(SysUser user)

    {

        startPage();

        List<SysUser> list = userService.selectUnallocatedList(user);

        return getDataTable(list);

    }



    /**

     * å–消授权用户

     */

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

    @Log(title = "角色管理", businessType = BusinessType.GRANT)

    @PutMapping("/authUser/cancel")

    public AjaxResult cancelAuthUser(@RequestBody SysUserRole userRole)

    {

        return toAjax(roleService.deleteAuthUser(userRole));

    }



    /**

     * æ‰¹é‡å–消授权用户

     */

    @Log(title = "角色管理", businessType = BusinessType.GRANT)

    @PutMapping("/authUser/cancelAll")

    public AjaxResult cancelAuthUserAll(Long roleId, Long[] userIds)

    {

        return toAjax(roleService.deleteAuthUsers(roleId, userIds));

    }



    /**

     * æ‰¹é‡é€‰æ‹©ç”¨æˆ·æŽˆæƒ

     */

    @Log(title = "角色管理", businessType = BusinessType.GRANT)

    @PutMapping("/authUser/selectAll")

    public AjaxResult selectAuthUserAll(Long roleId, Long[] userIds)

    {

        return toAjax(roleService.insertAuthUsers(roleId, userIds));

    }

}


 ruoyi-common/src/main/java/com/ruoyi/common/core/domain/entity/SysUser.java

@@ -92,6 +92,9 @@
    /** å²—位组 */

    private Long[] postIds;



    /** è§’色ID */

    private Long roleId;



    public SysUser()

    {



@@ -300,6 +303,16 @@
        this.postIds = postIds;

    }



    public Long getRoleId()

    {

        return roleId;

    }



    public void setRoleId(Long roleId)

    {

        this.roleId = roleId;

    }



    @Override

    public String toString() {

        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)


 ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysUserMapper.java

@@ -20,6 +20,22 @@
    public List<SysUser> selectUserList(SysUser sysUser);



    /**

     * æ ¹æ®æ¡ä»¶åˆ†é¡µæŸ¥è¯¢æœªå·²é…ç”¨æˆ·è§’色列表

     * 
     * @param user ç”¨æˆ·ä¿¡æ¯

     * @return ç”¨æˆ·ä¿¡æ¯é›†åˆä¿¡æ¯

     */

    public List<SysUser> selectAllocatedList(SysUser user);



    /**

     * æ ¹æ®æ¡ä»¶åˆ†é¡µæŸ¥è¯¢æœªåˆ†é…ç”¨æˆ·è§’色列表

     * 
     * @param user ç”¨æˆ·ä¿¡æ¯

     * @return ç”¨æˆ·ä¿¡æ¯é›†åˆä¿¡æ¯

     */

    public List<SysUser> selectUnallocatedList(SysUser user);



    /**

     * é€šè¿‡ç”¨æˆ·åæŸ¥è¯¢ç”¨æˆ·

     * 

     * @param userName ç”¨æˆ·å


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

@@ -3,6 +3,7 @@
import java.util.List;

import java.util.Set;

import com.ruoyi.common.core.domain.entity.SysRole;

import com.ruoyi.system.domain.SysUserRole;



/**

 * è§’色业务层

@@ -136,4 +137,30 @@
     * @return ç»“æžœ

     */

    public int deleteRoleByIds(Long[] roleIds);



    /**

     * å–消授权用户角色

     * 
     * @param userRole ç”¨æˆ·å’Œè§’色关联信息

     * @return ç»“æžœ

     */

    public int deleteAuthUser(SysUserRole userRole);



    /**

     * æ‰¹é‡å–消授权用户角色

     * 
     * @param roleId è§’色ID

     * @param userIds éœ€è¦å–消授权的用户数据ID

     * @return ç»“æžœ

     */

    public int deleteAuthUsers(Long roleId, Long[] userIds);



    /**

     * æ‰¹é‡é€‰æ‹©æŽˆæƒç”¨æˆ·è§’色

     * 
     * @param roleId è§’色ID

     * @param userIds éœ€è¦åˆ é™¤çš„用户数据ID

     * @return ç»“æžœ

     */

    public int insertAuthUsers(Long roleId, Long[] userIds);

}


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

@@ -19,6 +19,22 @@
    public List<SysUser> selectUserList(SysUser user);



    /**

     * æ ¹æ®æ¡ä»¶åˆ†é¡µæŸ¥è¯¢å·²åˆ†é…ç”¨æˆ·è§’色列表

     * 
     * @param user ç”¨æˆ·ä¿¡æ¯

     * @return ç”¨æˆ·ä¿¡æ¯é›†åˆä¿¡æ¯

     */

    public List<SysUser> selectAllocatedList(SysUser user);



    /**

     * æ ¹æ®æ¡ä»¶åˆ†é¡µæŸ¥è¯¢æœªåˆ†é…ç”¨æˆ·è§’色列表

     * 
     * @param user ç”¨æˆ·ä¿¡æ¯

     * @return ç”¨æˆ·ä¿¡æ¯é›†åˆä¿¡æ¯

     */

    public List<SysUser> selectUnallocatedList(SysUser user);



    /**

     * é€šè¿‡ç”¨æˆ·åæŸ¥è¯¢ç”¨æˆ·

     * 

     * @param userName ç”¨æˆ·å


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

@@ -16,6 +16,7 @@
import com.ruoyi.common.utils.spring.SpringUtils;

import com.ruoyi.system.domain.SysRoleDept;

import com.ruoyi.system.domain.SysRoleMenu;

import com.ruoyi.system.domain.SysUserRole;

import com.ruoyi.system.mapper.SysRoleDeptMapper;

import com.ruoyi.system.mapper.SysRoleMapper;

import com.ruoyi.system.mapper.SysRoleMenuMapper;

@@ -350,4 +351,51 @@
        roleDeptMapper.deleteRoleDept(roleIds);

        return roleMapper.deleteRoleByIds(roleIds);

    }



    /**

     * å–消授权用户角色

     * 
     * @param userRole ç”¨æˆ·å’Œè§’色关联信息

     * @return ç»“æžœ

     */

    @Override

    public int deleteAuthUser(SysUserRole userRole)

    {

        return userRoleMapper.deleteUserRoleInfo(userRole);

    }



    /**

     * æ‰¹é‡å–消授权用户角色

     * 
     * @param roleId è§’色ID

     * @param userIds éœ€è¦å–消授权的用户数据ID

     * @return ç»“æžœ

     */

    @Override

    public int deleteAuthUsers(Long roleId, Long[] userIds)

    {

        return userRoleMapper.deleteUserRoleInfos(roleId, userIds);

    }



    /**

     * æ‰¹é‡é€‰æ‹©æŽˆæƒç”¨æˆ·è§’色

     * 
     * @param roleId è§’色ID

     * @param userIds éœ€è¦åˆ é™¤çš„用户数据ID

     * @return ç»“æžœ

     */

    @Override

    public int insertAuthUsers(Long roleId, Long[] userIds)

    {

        // æ–°å¢žç”¨æˆ·ä¸Žè§’色管理

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

        for (Long userId : userIds)

        {

            SysUserRole ur = new SysUserRole();

            ur.setUserId(userId);

            ur.setRoleId(roleId);

            list.add(ur);

        }

        return userRoleMapper.batchUserRole(list);

    }

}


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

@@ -67,6 +67,32 @@
    }



    /**

     * æ ¹æ®æ¡ä»¶åˆ†é¡µæŸ¥è¯¢å·²åˆ†é…ç”¨æˆ·è§’色列表

     * 
     * @param user ç”¨æˆ·ä¿¡æ¯

     * @return ç”¨æˆ·ä¿¡æ¯é›†åˆä¿¡æ¯

     */

    @Override

    @DataScope(deptAlias = "d", userAlias = "u")

    public List<SysUser> selectAllocatedList(SysUser user)

    {

        return userMapper.selectAllocatedList(user);

    }



    /**

     * æ ¹æ®æ¡ä»¶åˆ†é¡µæŸ¥è¯¢æœªåˆ†é…ç”¨æˆ·è§’色列表

     * 
     * @param user ç”¨æˆ·ä¿¡æ¯

     * @return ç”¨æˆ·ä¿¡æ¯é›†åˆä¿¡æ¯

     */

    @Override

    @DataScope(deptAlias = "d", userAlias = "u")

    public List<SysUser> selectUnallocatedList(SysUser user)

    {

        return userMapper.selectUnallocatedList(user);

    }



    /**

     * é€šè¿‡ç”¨æˆ·åæŸ¥è¯¢ç”¨æˆ·

     * 

     * @param userName ç”¨æˆ·å

@@ -248,6 +274,7 @@
     * @param userId ç”¨æˆ·ID

     * @param roleIds è§’色组

     */

    @Override

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

    {

        userRoleMapper.deleteUserRoleByUserId(userId);


 ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml

@@ -81,6 +81,41 @@
        ${params.dataScope}

    </select>

    

    <select id="selectAllocatedList" parameterType="SysUser" resultMap="SysUserResult">

        select distinct u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.phonenumber, u.status, u.create_time

        from sys_user u

             left join sys_dept d on u.dept_id = d.dept_id

             left join sys_user_role ur on u.user_id = ur.user_id

             left join sys_role r on r.role_id = ur.role_id

        where u.del_flag = '0' and r.role_id = #{roleId}

        <if test="userName != null and userName != ''">

            AND u.user_name like concat('%', #{userName}, '%')

        </if>

        <if test="phonenumber != null and phonenumber != ''">

            AND u.phonenumber like concat('%', #{phonenumber}, '%')

        </if>

        <!-- æ•°æ®èŒƒå›´è¿‡æ»¤ -->

        ${params.dataScope}

    </select>

	
    <select id="selectUnallocatedList" parameterType="SysUser" resultMap="SysUserResult">

        select distinct u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.phonenumber, u.status, u.create_time

        from sys_user u

             left join sys_dept d on u.dept_id = d.dept_id

             left join sys_user_role ur on u.user_id = ur.user_id

             left join sys_role r on r.role_id = ur.role_id

        where u.del_flag = '0' and (r.role_id != #{roleId} or r.role_id IS NULL)

        and u.user_id not in (select u.user_id from sys_user u inner join sys_user_role ur on u.user_id = ur.user_id and ur.role_id = #{roleId})

        <if test="userName != null and userName != ''">

            AND u.user_name like concat('%', #{userName}, '%')

        </if>

        <if test="phonenumber != null and phonenumber != ''">

            AND u.phonenumber like concat('%', #{phonenumber}, '%')

        </if>

        <!-- æ•°æ®èŒƒå›´è¿‡æ»¤ -->

        ${params.dataScope}

    </select>

	
    <select id="selectUserByUserName" parameterType="String" resultMap="SysUserResult">

        <include refid="selectUserVo"/>

        where u.user_name = #{userName}


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

@@ -73,3 +73,48 @@
    params: query

  })

}


// æŸ¥è¯¢è§’色已授权用户列表

export function allocatedUserList(query) {

  return request({

    url: '/system/role/authUser/allocatedList',

    method: 'get',

    params: query

  })

}



// æŸ¥è¯¢è§’色未授权用户列表

export function unallocatedUserList(query) {

  return request({

    url: '/system/role/authUser/unallocatedList',

    method: 'get',

    params: query

  })

}



// å–消用户授权角色

export function authUserCancel(data) {

  return request({

    url: '/system/role/authUser/cancel',

    method: 'put',

    data: data

  })

}



// æ‰¹é‡å–消用户授权角色

export function authUserCancelAll(data) {

  return request({

    url: '/system/role/authUser/cancelAll',

    method: 'put',

    params: data

  })

}



// æŽˆæƒç”¨æˆ·é€‰æ‹©

export function authUserSelectAll(data) {

  return request({

    url: '/system/role/authUser/selectAll',

    method: 'put',

    params: data

  })

}

 ruoyi-ui/src/router/index.js

@@ -94,6 +94,19 @@
    ]

  },

  {

    path: '/auth',

    component: Layout,

    hidden: true,

    children: [

      {

        path: 'user/:roleId(\\d+)',

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

        name: 'AuthUser',

        meta: { title: '分配用户'}

      }

    ]

  },

  {

    path: '/dict',

    component: Layout,

    hidden: true,


 ruoyi-ui/src/views/system/role/authUser.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,213 @@
<template>

  <div class="app-container">

     <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">

      <el-form-item label="用户名称" prop="userName">

        <el-input

          v-model="queryParams.userName"

          placeholder="请输入用户名称"

          clearable

          size="small"

          style="width: 240px"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="手机号码" prop="phonenumber">

        <el-input

          v-model="queryParams.phonenumber"

          placeholder="请输入手机号码"

          clearable

          size="small"

          style="width: 240px"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item>

        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>

    </el-form>



    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">

        <el-button

          type="primary"

          plain

          icon="el-icon-plus"

          size="mini"

          @click="openSelectUser"

          v-hasPermi="['system:role:add']"

        >添加用户</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="danger"

          plain

          icon="el-icon-circle-close"

          size="mini"

          :disabled="multiple"

          @click="cancelAuthUserAll"

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

        >批量取消授权</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="warning"

          plain

          icon="el-icon-close"

          size="mini"

          @click="handleClose"

        >关闭</el-button>

      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

    </el-row>



    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />

      <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />

      <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />

      <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />

      <el-table-column label="状态" align="center" prop="status">

        <template slot-scope="scope">

          <dict-tag :options="statusOptions" :value="scope.row.status"/>

        </template>

      </el-table-column>

      <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-column label="操作" align="center" class-name="small-padding fixed-width">

        <template slot-scope="scope">

          <el-button

            size="mini"

            type="text"

            icon="el-icon-circle-close"

            @click="cancelAuthUser(scope.row)"

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

          >取消授权</el-button>

        </template>

      </el-table-column>

    </el-table>



    <pagination

      v-show="total>0"

      :total="total"

      :page.sync="queryParams.pageNum"

      :limit.sync="queryParams.pageSize"

      @pagination="getList"

    />

    <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />

  </div>

</template>



<script>

import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";

import selectUser from "./selectUser";



export default {

  name: "AuthUser",

  components: { selectUser },

  data() {

    return {

      // é®ç½©å±‚

      loading: true,

      // é€‰ä¸­ç”¨æˆ·ç»„

      userIds: [],

      // éžå¤šä¸ªç¦ç”¨

      multiple: true,

      // æ˜¾ç¤ºæœç´¢æ¡ä»¶

      showSearch: true,

      // æ€»æ¡æ•°

      total: 0,

      // ç”¨æˆ·è¡¨æ ¼æ•°æ®

      userList: [],

      // çŠ¶æ€æ•°æ®å­—å…¸

      statusOptions: [],

      // æŸ¥è¯¢å‚æ•°

      queryParams: {

        pageNum: 1,

        pageSize: 10,

        roleId: undefined,

        userName: undefined,

        phonenumber: undefined

      }

    };

  },

  created() {

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

    if (roleId) {

      this.queryParams.roleId = roleId;

      this.getList();

      this.getDicts("sys_normal_disable").then(response => {

        this.statusOptions = response.data;

      });

    }

  },

  methods: {

    /** æŸ¥è¯¢æŽˆæƒç”¨æˆ·åˆ—表 */

    getList() {

      this.loading = true;

      allocatedUserList(this.queryParams).then(response => {

          this.userList = response.rows;

          this.total = response.total;

          this.loading = false;

        }

      );

    },

    // è¿”回按钮

    handleClose() {

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

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

    },

    /** æœç´¢æŒ‰é’®æ“ä½œ */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

    },

    /** é‡ç½®æŒ‰é’®æ“ä½œ */

    resetQuery() {

      this.resetForm("queryForm");

      this.handleQuery();

    },

    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®

    handleSelectionChange(selection) {

      this.userIds = selection.map(item => item.userId)

      this.multiple = !selection.length

    },

    /** æ‰“开授权用户表弹窗 */

    openSelectUser() {

      this.$refs.select.show();

    },

    /** å–消授权按钮操作 */

    cancelAuthUser(row) {

      const roleId = this.queryParams.roleId;

      this.$confirm('确认要取消该用户"' + row.userName + '"角色吗？', "警告", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning"

      }).then(function() {

        return authUserCancel({ userId: row.userId, roleId: roleId });

      }).then(() => {

        this.getList();

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

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

    },

    /** æ‰¹é‡å–消授权按钮操作 */

    cancelAuthUserAll(row) {

      const roleId = this.queryParams.roleId;

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

      this.$confirm('是否取消选中用户授权数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

      }).then(() => {

          return authUserCancelAll({ roleId: roleId, userIds: userIds });

      }).then(() => {

        this.getList();

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

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

    }

  }

};

</script>

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

@@ -135,17 +135,21 @@
          <el-button

            size="mini"

            type="text"

            icon="el-icon-circle-check"

            @click="handleDataScope(scope.row)"

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

          >数据权限</el-button>

          <el-button

            size="mini"

            type="text"

            icon="el-icon-delete"

            @click="handleDelete(scope.row)"

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

          >删除</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="handleDataScope" icon="el-icon-circle-check"

                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>

              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"

                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>

            </el-dropdown-menu>

          </el-dropdown>

        </template>

      </el-table-column>

    </el-table>

@@ -469,6 +473,19 @@
      this.single = selection.length!=1

      this.multiple = !selection.length

    },

    // æ›´å¤šæ“ä½œè§¦å‘

    handleCommand(command, row) {

      switch (command) {

        case "handleDataScope":

          this.handleDataScope(row);

          break;

        case "handleAuthUser":

          this.handleAuthUser(row);

          break;

        default:

          break;

      }

    },

    // æ ‘权限（展开/折叠）

    handleCheckedTreeExpand(value, type) {

      if (type == 'menu') {

@@ -548,6 +565,11 @@
        this.title = "分配数据权限";

      });

    },

    /** åˆ†é…ç”¨æˆ·æ“ä½œ */

    handleAuthUser: function(row) {

      const roleId = row.roleId;

      this.$router.push("/auth/user/" + roleId);

    },

    /** æäº¤æŒ‰é’® */

    submitForm: function() {

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


 ruoyi-ui/src/views/system/role/selectUser.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,142 @@
<template>

  <!-- æŽˆæƒç”¨æˆ· -->

  <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>

    <el-form :model="queryParams" ref="queryForm" :inline="true">

      <el-form-item label="用户名称" prop="userName">

        <el-input

          v-model="queryParams.userName"

          placeholder="请输入用户名称"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="手机号码" prop="phonenumber">

        <el-input

          v-model="queryParams.phonenumber"

          placeholder="请输入手机号码"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item>

        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>

    </el-form>

    <el-row>

      <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">

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

        <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />

        <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />

        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />

        <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />

        <el-table-column label="状态" align="center" prop="status">

          <template slot-scope="scope">

            <dict-tag :options="statusOptions" :value="scope.row.status"/>

          </template>

        </el-table-column>

        <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="queryParams.pageNum"

        :limit.sync="queryParams.pageSize"

        @pagination="getList"

      />

    </el-row>

    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="handleSelectUser">ç¡® å®š</el-button>

      <el-button @click="visible = false">取 æ¶ˆ</el-button>

    </div>

  </el-dialog>

</template>



<script>

import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";

export default {

  props: {

    // è§’色编号

    roleId: {

      type: Number

    }

  },

  data() {

    return {

      // é®ç½©å±‚

      visible: false,

      // é€‰ä¸­æ•°ç»„值

      userIds: [],

      // æ€»æ¡æ•°

      total: 0,

      // æœªæŽˆæƒç”¨æˆ·æ•°æ®

      userList: [],

      // çŠ¶æ€æ•°æ®å­—å…¸

      statusOptions: [],

      // æŸ¥è¯¢å‚æ•°

      queryParams: {

        pageNum: 1,

        pageSize: 10,

        roleId: undefined,

        userName: undefined,

        phonenumber: undefined

      }

    };

  },

  created() {

    this.getDicts("sys_normal_disable").then(response => {

      this.statusOptions = response.data;

    });

  },

  methods: {

    // æ˜¾ç¤ºå¼¹æ¡†

    show() {

      this.queryParams.roleId = this.roleId;

      this.getList();

      this.visible = true;

    },

    clickRow(row) {

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

    },

    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®

    handleSelectionChange(selection) {

      this.userIds = selection.map(item => item.userId);

    },

    // æŸ¥è¯¢è¡¨æ•°æ®

    getList() {

      unallocatedUserList(this.queryParams).then(res => {

        this.userList = res.rows;

        this.total = res.total;

      });

    },

    /** æœç´¢æŒ‰é’®æ“ä½œ */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

    },

    /** é‡ç½®æŒ‰é’®æ“ä½œ */

    resetQuery() {

      this.resetForm("queryForm");

      this.handleQuery();

    },

    /** é€‰æ‹©æŽˆæƒç”¨æˆ·æ“ä½œ */

    handleSelectUser() {

      const roleId = this.queryParams.roleId;

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

      authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => {

        this.msgSuccess(res.msg);

        if (res.code === 200) {

          this.visible = false;

          this.$emit("ok");

        }

      });

    }

  }

};

</script>