selectUser.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <!-- 授权用户 -->
  3. <el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
  4. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
  5. <el-form-item label="员工编码" prop="userName">
  6. <el-input
  7. v-model="queryParams.userName"
  8. placeholder="请输入员工编码"
  9. clearable
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="员工名称" prop="nickName">
  14. <el-input
  15. v-model="queryParams.nickName"
  16. placeholder="请输入员工名称"
  17. clearable
  18. @keyup.enter.native="handleQuery"
  19. />
  20. </el-form-item>
  21. <el-form-item label="手机号码" prop="phonenumber">
  22. <el-input
  23. v-model="queryParams.phonenumber"
  24. placeholder="请输入手机号码"
  25. clearable
  26. @keyup.enter.native="handleQuery"
  27. />
  28. </el-form-item>
  29. <el-form-item>
  30. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  31. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  32. </el-form-item>
  33. </el-form>
  34. <el-row>
  35. <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
  36. <el-table-column type="selection" width="55"></el-table-column>
  37. <el-table-column label="员工编码" prop="userName" :show-overflow-tooltip="true" />
  38. <el-table-column label="员工名称" prop="nickName" :show-overflow-tooltip="true" />
  39. <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
  40. <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
  41. <el-table-column label="状态" align="center" prop="status">
  42. <template slot-scope="scope">
  43. <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
  44. </template>
  45. </el-table-column>
  46. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  47. <template slot-scope="scope">
  48. <span>{{ parseTime(scope.row.createTime) }}</span>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52. <pagination
  53. v-show="total>0"
  54. :total="total"
  55. :page.sync="queryParams.pageNum"
  56. :limit.sync="queryParams.pageSize"
  57. @pagination="getList"
  58. />
  59. </el-row>
  60. <div slot="footer">
  61. <el-button type="primary" @click="handleSelectUser">确 定</el-button>
  62. <el-button @click="visible = false">取 消</el-button>
  63. </div>
  64. </el-dialog>
  65. </template>
  66. <script>
  67. import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
  68. export default {
  69. dicts: ['sys_normal_disable'],
  70. props: {
  71. // 角色编号
  72. roleId: {
  73. type: [Number, String]
  74. }
  75. },
  76. data() {
  77. return {
  78. // 遮罩层
  79. visible: false,
  80. // 选中数组值
  81. userIds: [],
  82. // 总条数
  83. total: 0,
  84. // 未授权用户数据
  85. userList: [],
  86. // 查询参数
  87. queryParams: {
  88. pageNum: 1,
  89. pageSize: 10,
  90. roleId: undefined,
  91. userName: undefined,
  92. nickName: undefined,
  93. phonenumber: undefined
  94. }
  95. };
  96. },
  97. methods: {
  98. // 显示弹框
  99. show() {
  100. this.queryParams.roleId = this.roleId;
  101. this.getList();
  102. this.visible = true;
  103. },
  104. clickRow(row) {
  105. this.$refs.table.toggleRowSelection(row);
  106. },
  107. // 多选框选中数据
  108. handleSelectionChange(selection) {
  109. this.userIds = selection.map(item => item.userId);
  110. },
  111. // 查询表数据
  112. getList() {
  113. unallocatedUserList(this.queryParams).then(res => {
  114. this.userList = res.rows;
  115. this.total = res.total;
  116. });
  117. },
  118. /** 搜索按钮操作 */
  119. handleQuery() {
  120. this.queryParams.pageNum = 1;
  121. this.getList();
  122. },
  123. /** 重置按钮操作 */
  124. resetQuery() {
  125. this.resetForm("queryForm");
  126. this.handleQuery();
  127. },
  128. /** 选择授权用户操作 */
  129. handleSelectUser() {
  130. const roleId = this.queryParams.roleId;
  131. const userIds = this.userIds.join(",");
  132. if (userIds == "") {
  133. this.$modal.msgError("请选择要分配的用户");
  134. return;
  135. }
  136. authUserSelectAll({ roleId: roleId, userIds: userIds }).then(res => {
  137. this.$modal.msgSuccess(res.msg);
  138. if (res.code === 200) {
  139. this.visible = false;
  140. this.$emit("ok");
  141. }
  142. });
  143. }
  144. }
  145. };
  146. </script>