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
原型/后台管理页面/department-management.html
+655
View File
@@ -0,0 +1,655 @@
<!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: 300px;
}
.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;
}
.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;
}
</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 active" @click="navigateTo('department')">
<i class="fa fa-building-o menu-icon"></i>
<span>部门管理</span>
</div>
<div class="menu-item" @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-building"></i>
</div>
<div class="stat-content">
<div class="stat-value">{{ departmentStats.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">{{ departmentStats.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-users"></i>
</div>
<div class="stat-content">
<div class="stat-value">{{ departmentStats.totalUsers }}</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-button
type="primary"
class="btn-primary"
@click="addDepartment"
>
<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="filteredDepartments" stripe style="width: 100%">
<el-table-column prop="id" label="部门ID" width="80"></el-table-column>
<el-table-column prop="name" label="部门名称" min-width="150"></el-table-column>
<el-table-column prop="manager" label="部门负责人" min-width="120"></el-table-column>
<el-table-column prop="userCount" label="用户数量" width="100"></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 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 label="操作" width="180" fixed="right">
<template slot-scope="scope">
<div class="operation-buttons">
<el-button
type="primary"
size="small"
@click="editDepartment(scope.row)"
>
编辑
</el-button>
<el-button
type="danger"
size="small"
@click="deleteDepartment(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="500px"
>
<div class="dialog-form-item">
<div class="dialog-form-label">部门名称</div>
<el-input
v-model="departmentForm.name"
placeholder="请输入部门名称"
></el-input>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">部门负责人</div>
<el-select
v-model="departmentForm.manager"
placeholder="请选择部门负责人"
>
<el-option
v-for="user in availableManagers"
:key="user.id"
:label="user.name"
:value="user.name"
></el-option>
</el-select>
</div>
<div class="dialog-form-item">
<div class="dialog-form-label">部门状态</div>
<el-radio-group v-model="departmentForm.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="saveDepartment"
:loading="saving"
>
保存
</el-button>
</div>
</el-dialog>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
searchQuery: '',
showDialog: false,
dialogTitle: '新增部门',
saving: false,
departments: [
{
id: 1,
name: '技术部',
manager: '张经理',
userCount: 15,
createTime: '2023-01-15',
status: 'active'
},
{
id: 2,
name: '市场部',
manager: '李经理',
userCount: 12,
createTime: '2023-01-20',
status: 'active'
},
{
id: 3,
name: '人力资源部',
manager: '王经理',
userCount: 5,
createTime: '2023-02-05',
status: 'active'
},
{
id: 4,
name: '财务部',
manager: '赵经理',
userCount: 8,
createTime: '2023-02-10',
status: 'active'
},
{
id: 5,
name: '行政部',
manager: '刘经理',
userCount: 6,
createTime: '2023-03-01',
status: 'inactive'
}
],
departmentForm: {
id: '',
name: '',
manager: '',
status: 'active'
},
availableManagers: [
{ id: 1, name: '张经理' },
{ id: 2, name: '李经理' },
{ id: 3, name: '王经理' },
{ id: 4, name: '赵经理' },
{ id: 5, name: '刘经理' }
],
departmentStats: {
total: 5,
active: 4,
totalUsers: 46
}
}
},
computed: {
filteredDepartments() {
if (!this.searchQuery) {
return this.departments;
}
const query = this.searchQuery.toLowerCase();
return this.departments.filter(dept =>
dept.name.toLowerCase().includes(query) ||
dept.manager.toLowerCase().includes(query)
);
}
},
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;
},
// 新增部门
addDepartment() {
this.dialogTitle = '新增部门';
this.departmentForm = {
id: '',
name: '',
manager: '',
status: 'active'
};
this.showDialog = true;
},
// 编辑部门
editDepartment(department) {
this.dialogTitle = '编辑部门';
this.departmentForm = { ...department };
this.showDialog = true;
},
// 保存部门
saveDepartment() {
// 表单验证
if (!this.departmentForm.name.trim()) {
this.$message.error('请输入部门名称');
return;
}
if (!this.departmentForm.manager) {
this.$message.error('请选择部门负责人');
return;
}
this.saving = true;
// 模拟保存操作
setTimeout(() => {
if (this.departmentForm.id) {
// 编辑现有部门
const index = this.departments.findIndex(d => d.id === this.departmentForm.id);
if (index > -1) {
this.departments[index] = { ...this.departmentForm };
this.$message.success('部门信息已更新');
}
} else {
// 添加新部门
const newId = Math.max(...this.departments.map(d => d.id), 0) + 1;
const newDepartment = {
...this.departmentForm,
id: newId,
userCount: 0,
createTime: new Date().toISOString().split('T')[0]
};
this.departments.unshift(newDepartment);
this.departmentStats.total++;
if (newDepartment.status === 'active') {
this.departmentStats.active++;
}
this.$message.success('部门已创建');
}
this.saving = false;
this.showDialog = false;
}, 1000);
},
// 删除部门
deleteDepartment(id) {
if (id === 1) {
this.$message.warning('默认部门不能删除');
return;
}
this.$confirm(`确定要删除该部门吗？删除后将无法恢复。`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.departments.findIndex(d => d.id === id);
if (index > -1) {
const department = this.departments[index];
this.departments.splice(index, 1);
this.departmentStats.total--;
if (department.status === 'active') {
this.departmentStats.active--;
}
this.departmentStats.totalUsers -= department.userCount;
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>