优化ui

src/views/system/role/index.vue

@@ -41,7 +41,11 @@
             @change="handleStatusChange(scope.row)"></el-switch>
         </template>
       </el-table-column>
-      <el-table-column label="用户个数" align="center" prop="userNum" width="90" />
+      <el-table-column label="用户个数" align="center" prop="userNum" width="90">
+        <template #default="scope">
+          <el-link type="primary" @click="handleAuthUser(scope.row)">{{ scope.row.userNum }}</el-link>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
       <el-table-column label="备注" align="center" prop="remark" width="150" :show-overflow-tooltip="true" />
       <el-table-column label="操作" align="center" width="200">
@@ -221,24 +225,24 @@ const showRoleScope = ref(false)
 const dataScopeOptions = ref([
   {
     dictValue: '1',
-    dictLabel: '全部',
+    dictLabel: '全部'
   },
   {
     dictValue: '2',
-    dictLabel: '自定义',
+    dictLabel: '自定义'
   },
   {
     dictValue: '3',
-    dictLabel: '本部门',
+    dictLabel: '本部门'
   },
   {
     dictValue: '4',
-    dictLabel: '本部门及以下',
+    dictLabel: '本部门及以下'
   },
   {
     dictValue: '5',
-    dictLabel: '仅本人',
-  },
+    dictLabel: '仅本人'
+  }
 ])
 // 菜单列表
 const menuOptions = ref([])
@@ -250,7 +254,7 @@ const queryParams = reactive({
   pageSize: 10,
   roleName: undefined,
   roleKey: undefined,
-  status: undefined,
+  status: undefined
 })
 const searchText = ref('')
 
@@ -259,12 +263,12 @@ const state = reactive({
   rules: {
     roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
     roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
-    roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }],
+    roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }]
   },
   defaultProps: {
     children: 'children',
-    label: 'label',
-  },
+    label: 'label'
+  }
 })
 const menuRef = ref()
 const deptRef = ref()
@@ -332,7 +336,7 @@ function handleStatusChange(row) {
     .$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'warning'
     })
     .then(function () {
       return changeRoleStatus(row.roleId, row.status)
@@ -370,7 +374,7 @@ function reset() {
       dataScope: '1',
       menuCheckStrictly: true,
       deptCheckStrictly: true,
-      remark: undefined,
+      remark: undefined
     })
   proxy.resetForm('form')
 }
@@ -504,14 +508,19 @@ function handleDataScope(row) {
     roleId: row.roleId,
     roleName: row.roleName,
     roleKey: row.roleKey,
-    menuCheckStrictly: row.menuCheckStrictly,
+    menuCheckStrictly: row.menuCheckStrictly
   }
 }
 const router = useRouter()
 /** 分配用户操作 */
 function handleAuthUser(row) {
   const roleId = row.roleId
+  var hasPermi = proxy.$auth.hasPermi(['system:role:authorize', 'system:roleusers:list'])
+  if (hasPermi) {
     router.push({ path: '/system/roleusers', query: { roleId } })
+  } else {
+    proxy.$modal.msgError('你没有权限访问')
+  }
 }
 /** 提交按钮 */
 function submitForm() {
@@ -563,7 +572,7 @@ function handleDelete(row) {
     .$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'warning'
     })
     .then(function () {
       return delRole(roleIds)
@@ -580,7 +589,7 @@ function handleExport() {
     .$confirm('是否确认导出所有角色数据项?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning',
+      type: 'warning'
     })
     .then(function () {
       return exportRole(queryParams)

src/views/system/user/index.vue

@@ -146,6 +146,7 @@
                 v-if="scope.row.userId !== 1"
                 text
                 icon="Key"
+                title="重置密码"
                 @click="handleResetPwd(scope.row)"
                 v-hasPermi="['system:user:resetPwd']"></el-button>
             </template>
@@ -222,6 +223,8 @@
             <el-form-item label="角色">
               <el-select v-model="form.roleIds" multiple placeholder="请选择" style="width: 100%" @change="selectRole($event)">
                 <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1">
+                  <span style="float: left">{{ item.roleName }}</span>
+                  <span style="float: right">{{ item.roleKey }}</span>
                 </el-option>
               </el-select>
             </el-form-item>