Newer
Older
Nanping_sponge_SJJC / src / views / system / role / selectUser.vue
@liyingjing liyingjing on 25 Oct 2023 4 KB 数据检测
  1. <template>
  2. <!-- 授权用户 -->
  3. <el-dialog
  4. title="选择用户"
  5. v-model="visible"
  6. width="800px"
  7. top="5vh"
  8. append-to-body
  9. >
  10. <el-form :model="queryParams" ref="queryRef" :inline="true">
  11. <el-form-item label="用户名称" prop="userName">
  12. <el-input
  13. v-model="queryParams.userName"
  14. placeholder="请输入用户名称"
  15. clearable
  16. style="width: 200px"
  17. @keyup.enter="handleQuery"
  18. />
  19. </el-form-item>
  20. <el-form-item label="手机号码" prop="phonenumber">
  21. <el-input
  22. v-model="queryParams.phonenumber"
  23. placeholder="请输入手机号码"
  24. clearable
  25. style="width: 200px"
  26. @keyup.enter="handleQuery"
  27. />
  28. </el-form-item>
  29. <el-form-item>
  30. <el-button type="primary" icon="Search" @click="handleQuery"
  31. >搜索</el-button
  32. >
  33. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  34. </el-form-item>
  35. </el-form>
  36. <el-row>
  37. <el-table
  38. @row-click="clickRow"
  39. ref="refTable"
  40. :data="userList"
  41. @selection-change="handleSelectionChange"
  42. height="260px"
  43. >
  44. <el-table-column type="selection" width="55"></el-table-column>
  45. <el-table-column
  46. label="用户名称"
  47. prop="userName"
  48. :show-overflow-tooltip="true"
  49. />
  50. <el-table-column
  51. label="用户昵称"
  52. prop="nickName"
  53. :show-overflow-tooltip="true"
  54. />
  55. <el-table-column
  56. label="邮箱"
  57. prop="email"
  58. :show-overflow-tooltip="true"
  59. />
  60. <el-table-column
  61. label="手机"
  62. prop="phonenumber"
  63. :show-overflow-tooltip="true"
  64. />
  65. <el-table-column label="状态" align="center" prop="status">
  66. <template #default="scope">
  67. <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
  68. </template>
  69. </el-table-column>
  70. <el-table-column
  71. label="创建时间"
  72. align="center"
  73. prop="createTime"
  74. width="180"
  75. >
  76. <template #default="scope">
  77. <span>{{ parseTime(scope.row.createTime) }}</span>
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81. <pagination
  82. v-show="total > 0"
  83. :total="total"
  84. v-model:page="queryParams.pageNum"
  85. v-model:limit="queryParams.pageSize"
  86. @pagination="getList"
  87. />
  88. </el-row>
  89. <template #footer>
  90. <div class="dialog-footer">
  91. <el-button type="primary" @click="handleSelectUser">确 定</el-button>
  92. <el-button @click="visible = false">取 消</el-button>
  93. </div>
  94. </template>
  95. </el-dialog>
  96. </template>
  97.  
  98. <script setup name="SelectUser">
  99. import { authUserSelectAll, unallocatedUserList } from "@/api/system/role";
  100.  
  101. const props = defineProps({
  102. roleId: {
  103. type: [Number, String],
  104. },
  105. });
  106.  
  107. const { proxy } = getCurrentInstance();
  108. const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
  109.  
  110. const userList = ref([]);
  111. const visible = ref(false);
  112. const total = ref(0);
  113. const userIds = ref([]);
  114.  
  115. const queryParams = reactive({
  116. pageNum: 1,
  117. pageSize: 10,
  118. roleId: undefined,
  119. userName: undefined,
  120. phonenumber: undefined,
  121. });
  122.  
  123. // 显示弹框
  124. function show() {
  125. queryParams.roleId = props.roleId;
  126. getList();
  127. visible.value = true;
  128. }
  129. /**选择行 */
  130. function clickRow(row) {
  131. proxy.$refs["refTable"].toggleRowSelection(row);
  132. }
  133. // 多选框选中数据
  134. function handleSelectionChange(selection) {
  135. userIds.value = selection.map((item) => item.userId);
  136. }
  137. // 查询表数据
  138. function getList() {
  139. unallocatedUserList(queryParams).then((res) => {
  140. userList.value = res.data;
  141. total.value = res.total;
  142. });
  143. }
  144. /** 搜索按钮操作 */
  145. function handleQuery() {
  146. queryParams.pageNum = 1;
  147. getList();
  148. }
  149. /** 重置按钮操作 */
  150. function resetQuery() {
  151. proxy.resetForm("queryRef");
  152. handleQuery();
  153. }
  154. const emit = defineEmits(["ok"]);
  155. /** 选择授权用户操作 */
  156. function handleSelectUser() {
  157. const roleId = queryParams.roleId;
  158. const uIds = userIds.value.join(",");
  159. if (uIds == "") {
  160. proxy.$modal.msgError("请选择要分配的用户");
  161. return;
  162. }
  163. authUserSelectAll({ roleId: roleId, userIds: uIds }).then((res) => {
  164. proxy.$modal.msgSuccess(res.msg);
  165. if (res.code === 200) {
  166. visible.value = false;
  167. emit("ok");
  168. }
  169. });
  170. }
  171.  
  172. defineExpose({
  173. show,
  174. });
  175. </script>