add 增加 用户管理 用户详情展示抽屉

src/assets/styles/vendors/element-plus/_shell.scss

@@ -25,6 +25,9 @@
 }
 
 .el-drawer__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 10px;

src/views/system/user/index.vue

@@ -188,9 +188,14 @@
               key="userName"
               label="用户名称"
               align="center"
-              prop="userName"
               :show-overflow-tooltip="true"
-            />
+            >
+              <template #default="scope">
+                <el-link type="primary" :underline="false" @click="handleViewDetail(scope.row)">
+                  {{ scope.row.userName }}
+                </el-link>
+              </template>
+            </el-table-column>
             <el-table-column
               v-if="columns[2].visible"
               key="nickName"
@@ -460,6 +465,9 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 用户详情抽屉 -->
+    <user-view-drawer ref="userViewRef" />
   </div>
 </template>
 
@@ -474,6 +482,7 @@ import { to } from 'await-to-js';
 import { optionselect } from '@/api/system/post';
 import { checkPermi } from '@/utils/permission';
 import { useUserStore } from '@/store/modules/user';
+import UserViewDrawer from './view.vue';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -524,6 +533,7 @@ const queryFormRef = ref<ElFormInstance>();
 const userFormRef = ref<ElFormInstance>();
 const uploadRef = ref<ElUploadInstance>();
 const formDialogRef = ref<ElDialogInstance>();
+const userViewRef = ref<InstanceType<typeof UserViewDrawer>>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -730,6 +740,11 @@ const handleSelectionChange = (selection: UserVO[]) => {
   multiple.value = !selection.length;
 };
 
+/** 详情按钮操作 */
+const handleViewDetail = (row: UserVO) => {
+  userViewRef.value?.openDrawer(row.userId);
+};
+
 /** 导入按钮操作 */
 const handleImport = () => {
   upload.title = '用户导入';

src/views/system/user/view.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-drawer v-model="visible" title="用户信息详情" :size="680" append-to-body :close-on-click-modal="true" @closed="info = null">
+    <el-descriptions v-if="info" v-loading="loading" :column="2" border>
+      <el-descriptions-item label="用户名称">{{ info.nickName }}</el-descriptions-item>
+      <el-descriptions-item label="归属部门">{{ info.deptName || (info.dept && info.dept.deptName) || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="手机号码">{{ info.phoneNumber || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="邮箱">{{ info.email || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="登录账号">{{ info.userName }}</el-descriptions-item>
+      <el-descriptions-item label="用户状态">
+        <el-tag :type="info.status === '0' ? 'success' : 'danger'">
+          {{ proxy?.selectDictLabel(sys_normal_disable, info.status) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="岗位">{{ postNames || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="用户性别">{{ proxy?.selectDictLabel(sys_user_gender, info.gender) || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="角色" :span="2">{{ roleNames || '-' }}</el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider />
+
+    <el-descriptions v-if="info" :column="2" border>
+      <el-descriptions-item label="创建时间">{{ info.createTime || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="更新时间">{{ info.updateTime || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="最后登录IP">{{ info.loginIp || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="最后登录时间">{{ info.loginDate || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="备注" :span="2">{{ info.remark || '-' }}</el-descriptions-item>
+    </el-descriptions>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import api from '@/api/system/user';
+import type { UserVO } from '@/api/system/user/types';
+import type { PostVO } from '@/api/system/post/types';
+import type { RoleVO } from '@/api/system/role/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable, sys_user_gender } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_gender'));
+
+const visible = ref(false);
+const loading = ref(false);
+const info = ref<UserVO | null>(null);
+const postOptions = ref<PostVO[]>([]);
+const roleOptions = ref<RoleVO[]>([]);
+const postIds = ref<string[]>([]);
+const roleIds = ref<string[]>([]);
+
+const postNames = computed(() => {
+  if (!postOptions.value.length || !postIds.value.length) return '';
+  return postOptions.value
+    .filter((p) => postIds.value.includes(String(p.postId)))
+    .map((p) => p.postName)
+    .join('、');
+});
+
+const roleNames = computed(() => {
+  if (!roleOptions.value.length || !roleIds.value.length) return '';
+  return roleOptions.value
+    .filter((r) => roleIds.value.includes(String(r.roleId)))
+    .map((r) => r.roleName)
+    .join('、');
+});
+
+async function openDrawer(userId: string | number) {
+  visible.value = true;
+  loading.value = true;
+  try {
+    const { data } = await api.getUser(userId);
+    info.value = data.user;
+    postOptions.value = data.posts || [];
+    roleOptions.value = data.roles || [];
+    postIds.value = (data.postIds || []).map(String);
+    roleIds.value = (data.roleIds || []).map(String);
+  } catch (error) {
+    console.error('获取用户信息失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ openDrawer });
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-descriptions__label) {
+  min-width: 110px;
+}
+</style>