Newer
Older
KaiFengPC / src / views / system / user / authRole.vue
@鲁yixuan 鲁yixuan on 14 Aug 3 KB updata
  1. <template>
  2. <div class="publicContainer">
  3. <h4 class="form-header h4">基本信息</h4>
  4. <el-form :model="form" label-width="80px">
  5. <el-row>
  6. <el-col :span="8" :offset="2">
  7. <el-form-item label="用户昵称" prop="nickName">
  8. <el-input v-model="form.nickName" disabled />
  9. </el-form-item>
  10. </el-col>
  11. <el-col :span="8" :offset="2">
  12. <el-form-item label="登录账号" prop="userName">
  13. <el-input v-model="form.userName" disabled />
  14. </el-form-item>
  15. </el-col>
  16. </el-row>
  17. </el-form>
  18.  
  19. <h4 class="form-header h4">角色信息</h4>
  20. <el-table
  21. v-loading="loading"
  22. :row-key="getRowKey"
  23. @row-click="clickRow"
  24. ref="roleRef"
  25. @selection-change="handleSelectionChange"
  26. :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
  27. >
  28. <el-table-column label="序号" width="55" type="index">
  29. <template #default="scope">
  30. <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
  31. </template>
  32. </el-table-column>
  33. <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
  34. <el-table-column label="角色编号" prop="roleId" />
  35. <el-table-column label="角色名称" prop="roleName" />
  36. <el-table-column label="权限字符" prop="roleKey" />
  37. <el-table-column label="创建时间" prop="createTime" width="180">
  38. <template #default="scope">
  39. <span>{{ parseTime(scope.row.createTime) }}</span>
  40. </template>
  41. </el-table-column>
  42. </el-table>
  43.  
  44. <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
  45.  
  46. <el-form label-width="100px">
  47. <div style="text-align: center; margin-left: -120px; margin-top: 30px">
  48. <el-button type="primary" @click="submitForm()">提交</el-button>
  49. <el-button @click="close()">返回</el-button>
  50. </div>
  51. </el-form>
  52. </div>
  53. </template>
  54.  
  55. <script setup name="AuthRole">
  56. import { getAuthRole, updateAuthRole } from '@/api/system/user';
  57.  
  58. const route = useRoute();
  59. const { proxy } = getCurrentInstance();
  60. const props = defineProps({
  61. userId: {
  62. type: Number,
  63. default: 0,
  64. },
  65. });
  66.  
  67. const loading = ref(true);
  68. const total = ref(0);
  69. const pageNum = ref(1);
  70. const pageSize = ref(10);
  71. const roleIds = ref([]);
  72. const roles = ref([]);
  73. const form = ref({
  74. nickName: undefined,
  75. userName: undefined,
  76. userId: undefined,
  77. });
  78.  
  79. /** 单击选中行数据 */
  80. function clickRow(row) {
  81. proxy.$refs['roleRef'].toggleRowSelection(row);
  82. }
  83. /** 多选框选中数据 */
  84. function handleSelectionChange(selection) {
  85. roleIds.value = selection.map(item => item.roleId);
  86. }
  87. /** 确定选中的数据编号 */
  88. function getRowKey(row) {
  89. return row.roleId;
  90. }
  91. /** 关闭按钮 */
  92. const emits = defineEmits();
  93. function close() {
  94. emits('childCloseRole');
  95. }
  96. /** 提交按钮 */
  97. function submitForm() {
  98. const userId = form.value.userId;
  99. const rIds = roleIds.value.join(',');
  100. updateAuthRole({ userId: userId, roleIds: rIds }).then(response => {
  101. proxy.$modal.msgSuccess('授权成功');
  102. close();
  103. });
  104. }
  105. onMounted(() => {
  106. const userId = props.userId;
  107. if (userId) {
  108. loading.value = true;
  109. getAuthRole(userId).then(response => {
  110. form.value = response.data.user;
  111. roles.value = response.data.roles;
  112. total.value = roles.value.length;
  113. nextTick(() => {
  114. roles.value.forEach(row => {
  115. if (row.flag) {
  116. proxy.$refs['roleRef'].toggleRowSelection(row);
  117. }
  118. });
  119. });
  120. loading.value = false;
  121. });
  122. }
  123. });
  124. </script>