bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1020

Browse Source
This commit is contained in:
bwstudio
2025-10-20 07:11:14 +08:00
parent 78f6022827
commit 467b04e5b0
18 changed files with 10466 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
原型/后台管理页面/user-management.html
+942
View File
@@ -0,0 +1,942 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理 - 图片收集系统</title>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入Element UI CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
<!-- 引入Element UI JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f0f2f5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.container {
height: 100vh;
display: flex;
}
.sidebar {
width: 220px;
background-color: #001529;
color: white;
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #1f2937;
}
.logo {
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.logo-icon {
margin-right: 8px;
font-size: 22px;
}
.menu-item {
padding: 15px 20px;
cursor: pointer;
transition: background-color 0.3s;
display: flex;
align-items: center;
}
.menu-item:hover {
background-color: #1f2937;
}
.menu-item.active {
background-color: #1989fa;
}
.menu-icon {
margin-right: 10px;
font-size: 16px;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
background-color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header-title {
font-size: 18px;
font-weight: 600;
color: #303133;
}
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
.user-info {
display: flex;
align-items: center;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #1989fa;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 14px;
}
.user-name {
color: #606266;
}
.content-wrapper {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.search-section {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.search-input {
width: 250px;
}
.department-select {
width: 200px;
}
.table-wrapper {
overflow-x: auto;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.table-title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
.btn-primary {
background-color: #1989fa;
border-color: #1989fa;
}
.btn-primary:hover {
background-color: #409eff;
border-color: #409eff;
}
.operation-buttons {
display: flex;
gap: 8px;
}
.el-button {
padding: 6px 12px;
font-size: 14px;
}
.dialog-form-item {
margin-bottom: 20px;
}
.dialog-form-label {
font-weight: 500;
color: #303133;
margin-bottom: 8px;
font-size: 14px;
}
.status-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-active {
background-color: #f0f9eb;
color: #67c23a;
}
.status-inactive {
background-color: #f5f7fa;
color: #909399;
}
.role-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
.role-admin {
background-color: #fef0f0;
color: #f56c6c;
}
.role-manager {
background-color: #f0f5ff;
color: #409eff;
}
.role-user {
background-color: #f0f9eb;
color: #67c23a;
}
.statistics-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.stat-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #ecf5ff;
color: #1989fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-right: 15px;
}
.stat-content {
flex: 1;
}
.stat-value {
font-size: 24px;
font-weight: 600;
color: #303133;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: #909399;
}
.logout-btn {
cursor: pointer;
color: #606266;
transition: color 0.3s;
}
.logout-btn:hover {
color: #f56c6c;
}
.avatar-preview {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #dcdfe6;
margin: 0 auto 15px;
display: block;
}
.avatar-uploader {
text-align: center;
}
.password-toggle {
cursor: pointer;
margin-left: 5px;
color: #909399;
}
.password-toggle:hover {
color: #1989fa;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-header">
<div class="logo">
<i class="fa fa-tachometer logo-icon"></i>
<span>管理平台</span>
</div>
</div>
<div class="menu-item" @click="navigateTo('department')">
<i class="fa fa-building-o menu-icon"></i>
<span>部门管理</span>
</div>
<div class="menu-item active" @click="navigateTo('user')">
<i class="fa fa-users menu-icon"></i>
<span>用户管理</span>
</div>
<div class="menu-item" @click="navigateTo('task')">
<i class="fa fa-tasks menu-icon"></i>
<span>任务管理</span>
</div>
<div class="menu-item" @click="navigateTo('image')">
<i class="fa fa-picture-o menu-icon"></i>
<span>图片管理</span>
</div>
</div>
<!-- 主内容区 -->
<div class="main-content">
<!-- 顶部导航栏 -->
<div class="header">
<div class="header-title">用户管理</div>
<div class="header-actions">
<div class="user-info">
<div class="user-avatar">管</div>
<span class="user-name">系统管理员</span>
</div>
<div class="logout-btn" @click="handleLogout">
<i class="fa fa-sign-out"></i> 退出
</div>
</div>
</div>
<!-- 内容区域 -->
<div class="content-wrapper">
<!-- 统计卡片 -->
<div class="statistics-cards">
<div class="stat-card">
<div class="stat-icon">
<i class="fa fa-user"></i>
</div>
<div class="stat-content">
<div class="stat-value">{{ userStats.total }}</div>
<div class="stat-label">总用户数</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background-color: #f0f9eb; color: #67c23a;">
<i class="fa fa-check-circle"></i>
</div>
<div class="stat-content">
<div class="stat-value">{{ userStats.active }}</div>
<div class="stat-label">活跃用户</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background-color: #fef0f0; color: #f56c6c;">
<i class="fa fa-user-circle"></i>
</div>
<div class="stat-content">
<div class="stat-value">{{ userStats.admins }}</div>
<div class="stat-label">管理员</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background-color: #e6f7ff; color: #1890ff;">
<i class="fa fa-id-card"></i>
</div>
<div class="stat-content">
<div class="stat-value">{{ userStats.managers }}</div>
<div class="stat-label">部门负责人</div>
</div>
</div>
</div>
<!-- 搜索和操作区域 -->
<div class="card">
<div class="search-section">
<el-input
v-model="searchQuery"
placeholder="搜索用户名或姓名"
prefix-icon="el-icon-search"
class="search-input"
></el-input>
<el-select
v-model="departmentFilter"
placeholder="选择部门"
class="department-select"
clearable
>
<el-option
v-for="dept in departments"
:key="dept.id"
:label="dept.name"
:value="dept.id"
></el-option>
</el-select>
<el-select
v-model="roleFilter"
placeholder="选择角色"
class="department-select"
clearable
>
<el-option label="管理员" value="admin"></el-option>
<el-option label="部门负责人" value="dept_manager"></el-option>
<el-option label="普通用户" value="user"></el-option>
</el-select>
<el-button
type="primary"
class="btn-primary"
@click="addUser"
>
<i class="fa fa-plus"></i> 新增用户
</el-button>
</div>
</div>
<!-- 用户列表 -->
<div class="card">
<div class="table-header">
<div class="table-title">用户列表</div>
</div>
<div class="table-wrapper">
<el-table :data="filteredUsers" stripe style="width: 100%">
<el-table-column prop="id" label="用户ID" width="80"></el-table-column>
<el-table-column label="头像" width="80">
<template slot-scope="scope">
<img
:src="scope.row.avatar"
:alt="scope.row.name"
style="width: 40px; height: 40px; border-radius: 50%;"
>
</template>
</el-table-column>
<el-table-column prop="username" label="用户名" min-width="120"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
<el-table-column prop="departmentName" label="所属部门" min-width="120"></el-table-column>
<el-table-column prop="position" label="职位" min-width="100"></el-table-column>
<el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
<el-table-column prop="email" label="邮箱" min-width="180"></el-table-column>
<el-table-column prop="role" label="角色" min-width="100">
<template slot-scope="scope">
<span
class="role-badge"
:class="{
'role-admin': scope.row.role === 'admin',
'role-manager': scope.row.role === 'dept_manager',
'role-user': scope.row.role === 'user'
}"
>
{{ getRoleText(scope.row.role) }}
</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<span
class="status-badge"
:class="scope.row.status === 'active' ? 'status-active' : 'status-inactive'"
>
{{ scope.row.status === 'active' ? '活跃' : '禁用' }}
</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="150">
<template slot-scope="scope">
{{ formatDate(scope.row.createTime) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template slot-scope="scope">
<div class="operation-buttons">
<el-button
type="primary"
size="small"
@click="editUser(scope.row)"
:disabled="scope.row.id === 1"
>
编辑
</el-button>
<el-button
type="success"
size="small"
@click="resetPassword(scope.row.id)"
>
重置密码
</el-button>
<el-button
type="danger"
size="small"
@click="deleteUser(scope.row.id)"
:disabled="scope.row.id === 1"
>
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
<!-- 用户对话框 -->
<el-dialog
:title="dialogTitle"
:visible.sync="showDialog"
width="600px"
>
<div class="dialog-form-item avatar-uploader">
<img
v-if="userForm.avatar"
:src="userForm.avatar"
class="avatar-preview"
:alt="userForm.name"
>
<div v-else class="avatar-preview" style="background-color: #f5f7fa; display: flex; align-items: center; justify-content: center; color: #909399;">
<i class="fa fa-user-circle" style="font-size: 40px;"></i>
</div>
<el-button type="primary" size="small" style="margin-top: 10px;">
<i class="fa fa-upload"></i> 上传头像
</el-button>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">用户名</div>
<el-input
v-model="userForm.username"
placeholder="请输入用户名"
:disabled="!isNewUser"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">姓名</div>
<el-input
v-model="userForm.name"
placeholder="请输入姓名"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">所属部门</div>
<el-select
v-model="userForm.departmentId"
placeholder="请选择部门"
>
<el-option
v-for="dept in departments"
:key="dept.id"
:label="dept.name"
:value="dept.id"
></el-option>
</el-select>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">职位</div>
<el-input
v-model="userForm.position"
placeholder="请输入职位"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">手机号</div>
<el-input
v-model="userForm.phone"
placeholder="请输入手机号"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">邮箱</div>
<el-input
v-model="userForm.email"
placeholder="请输入邮箱"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">角色</div>
<el-radio-group v-model="userForm.role">
<el-radio label="admin">管理员</el-radio>
<el-radio label="dept_manager">部门负责人</el-radio>
<el-radio label="user">普通用户</el-radio>
</el-radio-group>
</div>
<div class="dialog-form-item" v-if="isNewUser">
<div class="dialog-form-label">初始密码</div>
<el-input
v-model="userForm.password"
type="password"
placeholder="请输入初始密码"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">用户状态</div>
<el-radio-group v-model="userForm.status">
<el-radio label="active">活跃</el-radio>
<el-radio label="inactive">禁用</el-radio>
</el-radio-group>
</div>
<div slot="footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button
type="primary"
@click="saveUser"
:loading="saving"
>
保存
</el-button>
</div>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
searchQuery: '',
departmentFilter: '',
roleFilter: '',
showDialog: false,
dialogTitle: '新增用户',
saving: false,
departments: [
{ id: 1, name: '技术部' },
{ id: 2, name: '市场部' },
{ id: 3, name: '人力资源部' },
{ id: 4, name: '财务部' },
{ id: 5, name: '行政部' }
],
users: [
{
id: 1,
username: 'admin',
name: '系统管理员',
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
departmentId: 1,
departmentName: '技术部',
position: '系统管理员',
phone: '13800138000',
email: 'admin@example.com',
role: 'admin',
status: 'active',
createTime: '2023-01-01'
},
{
id: 2,
username: 'zhangjingli',
name: '张经理',
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
departmentId: 1,
departmentName: '技术部',
position: '部门经理',
phone: '13812345678',
email: 'zhang@example.com',
role: 'dept_manager',
status: 'active',
createTime: '2023-01-15'
},
{
id: 3,
username: 'liming',
name: '李明',
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
departmentId: 2,
departmentName: '市场部',
position: '专员',
phone: '13987654321',
email: 'liming@example.com',
role: 'user',
status: 'active',
createTime: '2023-02-01'
},
{
id: 4,
username: 'wanghong',
name: '王红',
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
departmentId: 3,
departmentName: '人力资源部',
position: 'HR',
phone: '13765432198',
email: 'wanghong@example.com',
role: 'user',
status: 'active',
createTime: '2023-02-15'
},
{
id: 5,
username: 'zhaoming',
name: '赵明',
avatar: 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
departmentId: 4,
departmentName: '财务部',
position: '会计',
phone: '13654321987',
email: 'zhaoming@example.com',
role: 'user',
status: 'inactive',
createTime: '2023-03-01'
}
],
userForm: {
id: '',
username: '',
name: '',
avatar: '',
departmentId: '',
departmentName: '',
position: '',
phone: '',
email: '',
role: 'user',
password: '',
status: 'active'
},
userStats: {
total: 5,
active: 4,
admins: 1,
managers: 1
}
}
},
computed: {
filteredUsers() {
return this.users.filter(user => {
// 搜索用户名或姓名
const matchesSearch = !this.searchQuery ||
user.username.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
user.name.toLowerCase().includes(this.searchQuery.toLowerCase());
// 部门筛选
const matchesDepartment = !this.departmentFilter ||
user.departmentId === this.departmentFilter;
// 角色筛选
const matchesRole = !this.roleFilter ||
user.role === this.roleFilter;
return matchesSearch && matchesDepartment && matchesRole;
});
},
isNewUser() {
return !this.userForm.id;
}
},
methods: {
// 导航到其他页面
navigateTo(page) {
let url = '';
switch (page) {
case 'department':
url = 'department-management.html';
break;
case 'user':
url = 'user-management.html';
break;
case 'task':
url = 'task-management.html';
break;
case 'image':
url = 'image-management.html';
break;
}
if (url && url !== window.location.pathname) {
window.location.href = url;
}
},
// 格式化日期
formatDate(dateStr) {
return dateStr;
},
// 获取角色文本
getRoleText(role) {
const roleMap = {
'admin': '管理员',
'dept_manager': '部门负责人',
'user': '普通用户'
};
return roleMap[role] || '普通用户';
},
// 新增用户
addUser() {
this.dialogTitle = '新增用户';
this.userForm = {
id: '',
username: '',
name: '',
avatar: '',
departmentId: '',
departmentName: '',
position: '',
phone: '',
email: '',
role: 'user',
password: '',
status: 'active'
};
this.showDialog = true;
},
// 编辑用户
editUser(user) {
this.dialogTitle = '编辑用户';
this.userForm = { ...user };
this.showDialog = true;
},
// 保存用户
saveUser() {
// 表单验证
if (!this.userForm.username.trim()) {
this.$message.error('请输入用户名');
return;
}
if (!this.userForm.name.trim()) {
this.$message.error('请输入姓名');
return;
}
if (!this.userForm.departmentId) {
this.$message.error('请选择所属部门');
return;
}
if (this.isNewUser && !this.userForm.password.trim()) {
this.$message.error('请输入初始密码');
return;
}
// 更新部门名称
const dept = this.departments.find(d => d.id === this.userForm.departmentId);
if (dept) {
this.userForm.departmentName = dept.name;
}
this.saving = true;
// 模拟保存操作
setTimeout(() => {
if (this.userForm.id) {
// 编辑现有用户
const index = this.users.findIndex(u => u.id === this.userForm.id);
if (index > -1) {
this.users[index] = { ...this.userForm };
this.$message.success('用户信息已更新');
}
} else {
// 添加新用户
const newId = Math.max(...this.users.map(u => u.id), 0) + 1;
const newUser = {
...this.userForm,
id: newId,
avatar: this.userForm.avatar || 'https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/avatar.jpg',
createTime: new Date().toISOString().split('T')[0]
};
this.users.unshift(newUser);
// 更新统计数据
this.userStats.total++;
if (newUser.status === 'active') {
this.userStats.active++;
}
if (newUser.role === 'admin') {
this.userStats.admins++;
} else if (newUser.role === 'dept_manager') {
this.userStats.managers++;
}
this.$message.success('用户已创建');
}
this.saving = false;
this.showDialog = false;
}, 1000);
},
// 重置密码
resetPassword(userId) {
this.$confirm(`确定要重置该用户的密码吗？重置后密码将变为123456。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message.success('密码已重置为：123456');
}).catch(() => {
// 取消重置
});
},
// 删除用户
deleteUser(userId) {
if (userId === 1) {
this.$message.warning('系统管理员不能删除');
return;
}
this.$confirm(`确定要删除该用户吗？删除后将无法恢复。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.users.findIndex(u => u.id === userId);
if (index > -1) {
const user = this.users[index];
this.users.splice(index, 1);
// 更新统计数据
this.userStats.total--;
if (user.status === 'active') {
this.userStats.active--;
}
if (user.role === 'admin') {
this.userStats.admins--;
} else if (user.role === 'dept_manager') {
this.userStats.managers--;
}
this.$message.success('用户已删除');
}
}).catch(() => {
// 取消删除
});
},
// 处理退出登录
handleLogout() {
this.$confirm('确定要退出登录吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message.success('退出成功');
setTimeout(() => {
window.location.href = 'admin-login.html';
}, 1000);
}).catch(() => {
// 取消退出
});
}
}
})
</script>
</body>
</html>