Skip to content

N
nse-ui
Commit 934e77d1 by 周海峰
Options

no message

parent 8990fa66
正在显示 包含 177 行增加 和 75 行删除
src/components/PermissionArea/index.vue
<template>
<div style="font-weight: bold; font-size: 16px; margin-top: 12px;margin-bottom: 12px;">权限设置</div>
<div>
<div class="permission-area">
<div class="permission-area" :class="{ 'disabled': disabled }">
<div class="all-select">
<el-checkbox :model-value="allSelected" @change="onAllChange">全选</el-checkbox>
<el-checkbox :model-value="allSelected" @change="onAllChange" :disabled="disabled">全选</el-checkbox>
</div>
<div class="permission-list">
<div v-for="(item, index) in permissionList" :key="index" class="permission-item">
<div class="permission-header" @click="item.children && item.children.length > 0 && toggleExpand(item)">
<div class="permission-header" @click="!disabled && item.children && item.children.length > 0 && toggleExpand(item)">
<div class="left">
<span class="expand-icon-placeholder">
<el-icon v-if="item.children && item.children.length > 0" class="expand-icon" :class="{ expanded: item.expanded }">
......@@ -17,6 +17,7 @@
<el-checkbox
v-model="item.selected"
:indeterminate="item.indeterminate"
:disabled="disabled"
@change="val => emit('permission-change', item, val)"
>
{{ item.name }}
......@@ -31,6 +32,7 @@
v-for="child in item.children"
:key="child.id"
v-model="child.selected"
:disabled="disabled"
@change="val => emit('sub-permission-change', item, child, val)"
>
{{ child.name }}
......@@ -60,6 +62,10 @@ const props = defineProps({
allPermissionsSelected: {
type: Boolean,
required: true
},
disabled: {
type: Boolean,
default: false
}
})
......
src/views/safetyManagement/userConfig/edit.vue
......@@ -94,23 +94,47 @@
</el-form>
<!-- 角色选择 -->
<RoleTransfer
:roles="roles"
:selectedRoles="selectedRoles"
:searchRole="searchRole"
@update:roles="val => roles = val"
@update:selectedRoles="val => selectedRoles = val"
@update:searchRole="val => searchRole = val"
/>
<div class="component-wrapper">
<RoleTransfer
:roles="roles"
:selectedRoles="selectedRoles"
:searchRole="searchRole"
@update:roles="val => roles = val"
@update:selectedRoles="val => selectedRoles = val"
@update:searchRole="val => searchRole = val"
/>
<div v-if="isAdminUser" class="overlay-mask">
<div class="mask-message">
<el-alert
title="超级管理员用户的角色不可修改"
type="info"
:closable="false"
show-icon
/>
</div>
</div>
</div>
<!-- 权限设置 -->
<PermissionArea
:permissionList="permissionList"
:allPermissionsSelected="allPermissionsSelected"
@update:allPermissionsSelected="val => allPermissionsSelected = val"
@permission-change="handlePermissionChange"
@sub-permission-change="handleSubPermissionChange"
/>
<div class="component-wrapper">
<PermissionArea
:permissionList="permissionList"
:allPermissionsSelected="allPermissionsSelected"
@update:allPermissionsSelected="val => allPermissionsSelected = val"
@permission-change="handlePermissionChange"
@sub-permission-change="handleSubPermissionChange"
/>
<div v-if="isAdminUser" class="overlay-mask">
<div class="mask-message">
<el-alert
title="超级管理员用户的权限不可修改"
type="info"
:closable="false"
show-icon
/>
</div>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
......@@ -178,6 +202,9 @@ const allPermissionsSelected = ref(false)
const permissionList = ref([])
const instance = getCurrentInstance()
// 判断是否为超级管理员用户（roleId = 1）
const isAdminUser = ref(false)
// 表单校验规则
const validatePassword = (rule, value, callback) => {
if (value === '') {
......@@ -278,6 +305,8 @@ const initEditData = async (id) => {
})
// 用户组
userGroupOptions.value = (groupRes.data || []).map(g => ({ value: g.id, label: g.groupname }))
// 是否是超管
isAdminUser.value = userRes.data.rolesList.some(role => role.id === '1')
// 未选中角色
roles.value = roleRes.data
.filter(r => !(userRes.data.rolesList.map(m => m.id) || []).includes(r.id))
......@@ -589,4 +618,28 @@ const checkAllPermissionsStatus = () => {
text-align: center;
display: inline-flex;
}
.component-wrapper {
position: relative;
}
.overlay-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.mask-message {
padding: 10px;
border-radius: 4px;
width: 80%;
max-width: 400px;
}
</style>
src/views/safetyManagement/userConfig/index.vue
......@@ -11,13 +11,13 @@
<el-form :inline="true" :model="searchForm" class="search-form">
<div class="left-area">
<el-form-item label="姓名:">
<el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
<el-input v-model="searchForm.realname" clearable placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="用户名:">
<el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
<el-input v-model="searchForm.username" clearable placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input v-model="searchForm.remark" placeholder="请输入备注"></el-input>
<el-input v-model="searchForm.remark" clearable placeholder="请输入备注"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
......@@ -32,27 +32,36 @@
<!-- 用户列表 -->
<div class="user-list">
<div class="user-grid">
<div v-for="(user, index) in userList" :key="index" class="user-card">
<div class="user-info">
<div class="avatar">
<el-avatar :size="50" icon="User"></el-avatar>
</div>
<div class="info">
<div v-for="(user, index) in userList" :key="index" class="user-card" :class="{ 'admin-card': user.username === 'admin' }">
<div class="card-header" :class="{ 'admin-header': user.username === 'admin' }">
<div class="header-info">
<div class="name">{{ user.realname }}</div>
<div class="username">用户名: {{ user.username }}</div>
<div class="remark">备注: {{ user.remark }}</div>
<div class="username">{{ user.username }}</div>
</div>
<div class="user-avatar">
<el-avatar :size="50" icon="User" :src="user.avatar"></el-avatar>
</div>
</div>
<div class="card-content">
<div class="info-row">
<div class="info-label">备注:</div>
<div class="info-value">{{ user.remark || '无' }}</div>
</div>
<div class="info-row">
<div class="info-label">创建时间:</div>
<div class="info-value">{{ user.createtime || '' }}</div>
</div>
<!-- 遮罩层和操作按钮 -->
<div class="hover-mask">
<div class="operation-buttons">
<div class="operation-btn" @click="handleDelete(user)">
<i class="el-icon-delete"></i>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<i class="el-icon-edit"></i>
<span>编辑</span>
</div>
</div>
<!-- 遮罩层和操作按钮 -->
<div class="hover-mask">
<div class="operation-buttons">
<div class="operation-btn" @click="handleDelete(user)">
<el-icon><Delete /></el-icon>
<span>删除</span>
</div>
<div class="operation-btn" @click="handleEdit(user)">
<el-icon><Edit /></el-icon>
<span>编辑</span>
</div>
</div>
</div>
......@@ -87,7 +96,7 @@
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessageBox } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { User, Delete, Edit } from '@element-plus/icons-vue'
import UserEdit from './edit.vue'
import { query } from '@/api/safetyManagement/userConfig.js'
......@@ -235,36 +244,75 @@ onMounted(() => {
.user-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.user-info {
display: flex;
align-items: center;
padding: 20px;
position: relative;
cursor: pointer;
height: 100%;
.avatar {
margin-right: 15px;
border-left: 4px solid #3498db;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.info {
flex: 1;
&.admin-card {
border-left: 4px solid #f39c12;
}
.card-header {
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to right, #3498db, #73b4f8);
color: white;
.name {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
&.admin-header {
background: linear-gradient(to right, #f39c12, #f8c471);
}
.username, .remark {
color: #666;
font-size: 14px;
margin-bottom: 5px;
.header-info {
flex: 1;
.name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.username {
font-size: 14px;
opacity: 0.9;
}
}
.user-avatar {
margin-left: 15px;
}
}
.card-content {
padding: 15px 20px;
.info-row {
display: flex;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.info-label {
color: #666;
font-size: 14px;
width: 80px;
flex-shrink: 0;
}
.info-value {
color: #333;
font-size: 14px;
flex: 1;
}
}
}
......@@ -278,6 +326,7 @@ onMounted(() => {
display: none;
justify-content: center;
align-items: center;
transition: all 0.3s;
.operation-buttons {
display: flex;
......@@ -289,8 +338,8 @@ onMounted(() => {
align-items: center;
color: white;
cursor: pointer;
i {
.el-icon {
font-size: 24px;
margin-bottom: 8px;
}
......@@ -301,6 +350,7 @@ onMounted(() => {
&:hover {
color: #409EFF;
transform: scale(1.1);
}
}
}
......@@ -312,13 +362,6 @@ onMounted(() => {
}
}
}
.operation-time {
color: #666;
i {
margin-right: 5px;
}
}
}
.pagination {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论