Newer
Older
urbanLifeline_YanAn / src / views / system / role / authUser.vue
@zhangqy zhangqy on 3 Oct 5 KB first commit
  1. <template>
  2. <div class="publicContainer">
  3. <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true">
  4. <el-form-item label="用户名称" prop="userName">
  5. <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
  6. </el-form-item>
  7. <el-form-item label="手机号码" prop="phonenumber">
  8. <el-input
  9. v-model="queryParams.phonenumber"
  10. placeholder="请输入手机号码"
  11. clearable
  12. style="width: 240px"
  13. @keyup.enter="handleQuery"
  14. />
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  18. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  19. </el-form-item>
  20. </el-form>
  21.  
  22. <el-row :gutter="10" class="mb8">
  23. <el-col :span="1.5">
  24. <el-button type="primary" plain icon="Plus" @click="openSelectUser" v-hasPermi="['system:role:add']">添加用户</el-button>
  25. </el-col>
  26. <el-col :span="1.5">
  27. <el-button
  28. type="danger"
  29. plain
  30. icon="CircleClose"
  31. :disabled="multiple"
  32. @click="cancelAuthUserAll"
  33. v-hasPermi="['system:role:remove']"
  34. >批量取消授权</el-button
  35. >
  36. </el-col>
  37. <el-col :span="1.5">
  38. <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
  39. </el-col>
  40. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  41. </el-row>
  42.  
  43. <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
  44. <el-table-column type="selection" width="55" />
  45. <el-table-column label="用户名称" prop="userName" show-overflow-tooltip />
  46. <el-table-column label="用户昵称" prop="nickName" show-overflow-tooltip />
  47. <el-table-column label="邮箱" prop="email" show-overflow-tooltip />
  48. <el-table-column label="手机" prop="phonenumber" show-overflow-tooltip />
  49. <el-table-column label="状态" prop="status">
  50. <template #default="scope">
  51. <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="创建时间" prop="createTime" width="180">
  55. <template #default="scope">
  56. <span>{{ parseTime(scope.row.createTime) }}</span>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="操作" class-name="small-padding fixed-width">
  60. <template #default="scope">
  61. <el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']"
  62. >取消授权</el-button
  63. >
  64. </template>
  65. </el-table-column>
  66. </el-table>
  67.  
  68. <pagination
  69. v-show="total > 0"
  70. :total="total"
  71. v-model:page="queryParams.pageNum"
  72. v-model:limit="queryParams.pageSize"
  73. @pagination="getList"
  74. />
  75. <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
  76. </div>
  77. </template>
  78.  
  79. <script setup name="AuthUser">
  80. import selectUser from './selectUser';
  81. import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role';
  82.  
  83. const { proxy } = getCurrentInstance();
  84. const { sys_normal_disable } = proxy.useDict('sys_normal_disable');
  85. const props = defineProps({
  86. roleId: {
  87. type: Number,
  88. default: 0,
  89. },
  90. });
  91.  
  92. const userList = ref([]);
  93. const loading = ref(true);
  94. const showSearch = ref(true);
  95. const multiple = ref(true);
  96. const total = ref(0);
  97. const userIds = ref([]);
  98.  
  99. const queryParams = reactive({
  100. pageNum: 1,
  101. pageSize: 10,
  102. roleId: props.roleId,
  103. userName: undefined,
  104. phonenumber: undefined,
  105. });
  106.  
  107. /** 查询授权用户列表 */
  108. function getList() {
  109. loading.value = true;
  110. allocatedUserList(queryParams).then(response => {
  111. userList.value = response.data;
  112. total.value = response.total;
  113. loading.value = false;
  114. });
  115. }
  116. // 返回按钮
  117. const emits = defineEmits();
  118. function handleClose() {
  119. emits('childCloseRole');
  120. }
  121. /** 搜索按钮操作 */
  122. function handleQuery() {
  123. queryParams.pageNum = 1;
  124. getList();
  125. }
  126. /** 重置按钮操作 */
  127. function resetQuery() {
  128. proxy.resetForm('queryRef');
  129. handleQuery();
  130. }
  131. // 多选框选中数据
  132. function handleSelectionChange(selection) {
  133. userIds.value = selection.map(item => item.userId);
  134. multiple.value = !selection.length;
  135. }
  136. /** 打开授权用户表弹窗 */
  137. function openSelectUser() {
  138. proxy.$refs['selectRef'].show();
  139. }
  140. /** 取消授权按钮操作 */
  141. function cancelAuthUser(row) {
  142. proxy.$modal
  143. .confirm('确认要取消该用户"' + row.userName + '"角色吗?')
  144. .then(function () {
  145. return authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
  146. })
  147. .then(() => {
  148. getList();
  149. proxy.$modal.msgSuccess('取消授权成功');
  150. })
  151. .catch(() => {});
  152. }
  153. /** 批量取消授权按钮操作 */
  154. function cancelAuthUserAll(row) {
  155. const roleId = queryParams.roleId;
  156. const uIds = userIds.value.join(',');
  157. proxy.$modal
  158. .confirm('是否取消选中用户授权数据项?')
  159. .then(function () {
  160. return authUserCancelAll({ roleId: roleId, userIds: uIds });
  161. })
  162. .then(() => {
  163. getList();
  164. proxy.$modal.msgSuccess('取消授权成功');
  165. })
  166. .catch(() => {});
  167. }
  168.  
  169. getList();
  170. </script>