From a67ca21f15b952d8626e58550a501f4c7a9c822f Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Thu, 09 Apr 2026 14:13:45 +0800
Subject: [PATCH] 用户列表新增抽屉效果详细信息
---
ruoyi-modules/ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml | 2
ruoyi-api/ruoyi-api-system/src/main/java/com/ruoyi/system/api/domain/SysUser.java | 2
ruoyi-ui/src/views/system/user/view.vue | 177 +++++++++++++++++++++++++++++++++++
ruoyi-ui/src/views/system/user/index.vue | 15 ++
ruoyi-ui/src/assets/styles/ruoyi.scss | 49 +++++++++
5 files changed, 242 insertions(+), 3 deletions(-)
diff --git a/ruoyi-api/ruoyi-api-system/src/main/java/com/ruoyi/system/api/domain/SysUser.java b/ruoyi-api/ruoyi-api-system/src/main/java/com/ruoyi/system/api/domain/SysUser.java
index f7ce207..5c1e9ba 100644
--- a/ruoyi-api/ruoyi-api-system/src/main/java/com/ruoyi/system/api/domain/SysUser.java
+++ b/ruoyi-api/ruoyi-api-system/src/main/java/com/ruoyi/system/api/domain/SysUser.java
@@ -3,6 +3,7 @@
import java.util.Date;
import java.util.List;
import jakarta.validation.constraints.*;
+import com.fasterxml.jackson.annotation.JsonFormat;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.ruoyi.common.core.annotation.Excel;
@@ -68,6 +69,7 @@
private String loginIp;
/** 最后登录时间 */
+ @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "最后登录时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss", type = Type.EXPORT)
private Date loginDate;
diff --git a/ruoyi-modules/ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml b/ruoyi-modules/ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml
index 49de1ca..9f88dc7 100644
--- a/ruoyi-modules/ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml
+++ b/ruoyi-modules/ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml
@@ -48,7 +48,7 @@
</resultMap>
<sql id="selectUserVo">
- select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.pwd_update_date, u.create_by, u.create_time, u.remark,
+ select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.pwd_update_date, u.create_by, u.create_time, u.update_by, u.update_time, u.remark,
d.dept_id, d.parent_id, d.ancestors, d.dept_name, d.order_num, d.leader, d.status as dept_status,
r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.status as role_status
from sys_user u
diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss
index 73e7c2a..4a00395 100644
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -233,6 +233,55 @@
}
/** 详细卡片样式 */
+.detail-drawer {
+ .el-drawer__header {
+ margin-bottom: 6px;
+ padding: 8px 12px 6px;
+ font-size: 15px;
+ color: #303133;
+ background: #f8f8f8;
+ }
+ .section-header {
+ font-size: 15px;
+ color: #6379bb;
+ border-bottom: 1px solid #ddd;
+ margin: 12px 0 16px 0;
+ padding-bottom: 8px;
+ }
+ .drawer-content {
+ padding: 0 20px 20px 20px;
+ .info-item {
+ display: flex;
+ align-items: flex-start;
+ padding: 8px 0;
+ min-height: 40px;
+ }
+ .info-label {
+ flex-shrink: 0;
+ width: 200px;
+ color: #606266;
+ font-size: 13px;
+ line-height: 1.6;
+ padding-top: 4px;
+ text-align: right;
+ margin-right: 14px;
+ }
+ .info-value {
+ flex: 1;
+ color: #303133;
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 1.6;
+ word-break: break-all;
+ padding-top: 4px;
+ min-height: 1.6em;
+ &.plaintext {
+ border-bottom: 1px dashed #dde1e6;
+ }
+ }
+ }
+}
+
.detail-wrap { padding: 0 4px; }
.detail-card {
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index ef4cbf7..7d3f940 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/ruoyi-ui/src/views/system/user/index.vue
@@ -46,7 +46,11 @@
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
- <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
+ <el-table-column label="用户名称" align="center" key="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true">
+ <template slot-scope="scope">
+ <a class="link-type" style="cursor:pointer" @click="handleViewData(scope.row)">{{ scope.row.userName }}</a>
+ </template>
+ </el-table-column>
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
@@ -163,6 +167,8 @@
</div>
</el-dialog>
+ <!-- 用户详情抽屉 -->
+ <user-view-drawer ref="userViewRef" />
<!-- 用户导入对话框 -->
<excel-import-dialog ref="importUserRef" title="用户导入" action="/system/user/importData" template-action="/system/user/importTemplate" template-file-name="user_template" update-support-label="是否更新已经存在的用户数据" @success="getList" />
</div>
@@ -174,11 +180,12 @@
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import TreePanel from "@/components/TreePanel"
import ExcelImportDialog from "@/components/ExcelImportDialog"
+import UserViewDrawer from "./view"
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
- components: { Treeselect, TreePanel, ExcelImportDialog },
+ components: { Treeselect, TreePanel, ExcelImportDialog, UserViewDrawer },
data() {
return {
// 遮罩层
@@ -456,6 +463,10 @@
...this.queryParams
}, `user_${new Date().getTime()}.xlsx`)
},
+ /** 详情按钮操作 */
+ handleViewData(row) {
+ this.$refs.userViewRef.open(row.userId)
+ },
/** 导入按钮操作 */
handleImport() {
this.$refs.importUserRef.open()
diff --git a/ruoyi-ui/src/views/system/user/view.vue b/ruoyi-ui/src/views/system/user/view.vue
new file mode 100644
index 0000000..04726c0
--- /dev/null
+++ b/ruoyi-ui/src/views/system/user/view.vue
@@ -0,0 +1,177 @@
+<template>
+ <el-drawer title="用户信息详情" :visible.sync="visible" direction="rtl" size="68%" append-to-body :before-close="handleClose" custom-class="detail-drawer">
+ <div v-loading="loading" class="drawer-content">
+ <!-- 基本信息 -->
+ <h4 class="section-header">基本信息</h4>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">用户名称：</label>
+ <span class="info-value plaintext">{{ info.nickName }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">归属部门：</label>
+ <span class="info-value plaintext">{{ (info.dept && info.dept.deptName) }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">手机号码：</label>
+ <span class="info-value plaintext">{{ info.phonenumber }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">邮箱：</label>
+ <span class="info-value plaintext">{{ info.email }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">登录账号：</label>
+ <span class="info-value plaintext">{{ info.userName }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">用户状态：</label>
+ <span class="info-value plaintext">
+ <el-tag size="small" :type="info.status === '0' ? 'success' : 'danger'">{{ info.status === '0' ? '正常' : '停用' }}</el-tag>
+ </span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">岗位：</label>
+ <span class="info-value plaintext">{{ postNames || '无岗位' }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">用户性别：</label>
+ <span class="info-value plaintext">{{ sexLabel }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="24">
+ <div class="info-item full-width">
+ <label class="info-label">角色：</label>
+ <span class="info-value plaintext">{{ roleNames || '无角色' }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <!-- 其他信息 -->
+ <h4 class="section-header">其他信息</h4>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">创建者：</label>
+ <span class="info-value plaintext">{{ info.createBy }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">创建时间：</label>
+ <span class="info-value plaintext">{{ info.createTime }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">更新者：</label>
+ <span class="info-value plaintext">{{ info.updateBy }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">更新时间：</label>
+ <span class="info-value plaintext">{{ info.updateTime }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">最后登录IP：</label>
+ <span class="info-value plaintext">{{ info.loginIp }}</span>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="info-item">
+ <label class="info-label">最后登录时间：</label>
+ <span class="info-value plaintext">{{ info.loginDate }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="mb8">
+ <el-col :span="24">
+ <div class="info-item full-width">
+ <label class="info-label">备注：</label>
+ <span class="info-value plaintext">{{ info.remark }}</span>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </el-drawer>
+</template>
+
+<script>
+import { getUser } from '@/api/system/user'
+
+export default {
+ name: 'UserViewDrawer',
+ dicts: ['sys_user_sex'],
+ data() {
+ return {
+ visible: false,
+ loading: false,
+ info: {},
+ postOptions: [],
+ roleOptions: []
+ }
+ },
+ computed: {
+ sexLabel() {
+ return this.selectDictLabel(this.dict.type.sys_user_sex, this.info.sex) || '-'
+ },
+ postNames() {
+ if (!this.postOptions.length) return ''
+ const ids = this.info.postIds || []
+ return this.postOptions.filter(p => ids.includes(p.postId)).map(p => p.postName).join('、') || ''
+ },
+ roleNames() {
+ if (!this.roleOptions.length) return ''
+ const ids = this.info.roleIds || []
+ return this.roleOptions.filter(r => ids.includes(r.roleId)).map(r => r.roleName).join('、') || ''
+ }
+ },
+ methods: {
+ open(userId) {
+ this.visible = true
+ this.loading = true
+ getUser(userId).then(res => {
+ this.info = res.data || {}
+ this.postOptions = res.posts || []
+ this.roleOptions = res.roles || []
+ this.info.postIds = res.postIds || []
+ this.info.roleIds = res.roleIds || []
+ }).finally(() => {
+ this.loading = false
+ })
+ },
+ handleClose() {
+ this.visible = false
+ }
+ }
+}
+</script>
--
Gitblit v1.9.3