基于 Vue 3 + Element Plus 的企业级后台管理系统
快速开始 • 项目结构 • 功能模块 • 接口文档 • 工具方法
--- ## 项目介绍 阿白管理系统是一个基于 Vue 3 + Element Plus 开发的企业级后台管理系统模板，采用纯前端 Mock 数据方案，无需后端即可运行演示。系统包含完整的 RBAC 权限管理、动态路由、多布局模式等特性，适合作为中后台管理系统的基础模板。 ## 技术栈 | 技术 | 版本 | 说明 | |------|------|------| | [Vue 3](https://vuejs.org/) | ^3.4.x | 渐进式 JavaScript 框架 | | [Element Plus](https://element-plus.org/) | ^2.7.x | 基于 Vue 3 的组件库 | | [Pinia](https://pinia.vuejs.org/) | ^2.1.x | 状态管理 | | [Vue Router](https://router.vuejs.org/) | ^4.3.x | 路由管理 | | [Vite](https://vitejs.dev/) | ^5.2.x | 构建工具 | | [Mock.js](https://github.com/nuysoft/Mock) | ^1.1.x | 数据模拟 | | [ECharts](https://echarts.apache.org/) | ^5.5.x | 图表库 | | [WangEditor](https://www.wangeditor.com/) | ^5.1.x | 富文本编辑器 | | [CryptoJS](https://github.com/brix/crypto-js) | ^4.2.x | 加密库 | | [Moment.js](https://momentjs.com/) | ^2.30.x | 日期处理 | ## 快速开始 ### 环境要求 - Node.js >= 18.0.0 - npm >= 9.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash npm install ``` ### 开发环境运行 ```bash npm run dev ``` ### 生产环境构建 ```bash npm run build ``` ### 预览生产构建 ```bash npm run preview ``` ### 登录信息 - **账号**: admin - **密码**: 123456 ## 项目结构 ``` 阿白管理系统 ├── public/ # 静态资源 │ └── logo.svg # 系统 Logo ├── src/ │ ├── api/ # API 接口定义 │ │ ├── auth.js # 认证相关 │ │ ├── index.js # 首页相关 │ │ ├── logs.js # 日志管理 │ │ ├── menu.js # 菜单管理 │ │ ├── role.js # 角色管理 │ │ ├── setting.js # 系统设置 │ │ ├── theme.js # 主题管理 │ │ └── user.js # 用户管理 │ ├── common/ # 通用工具 │ │ └── isAuth.js # 权限判断 + AES加密 │ ├── components/ # 公共组件 │ │ ├── common/ # 通用组件 │ │ │ ├── FontSizeSwitch.vue # 字体大小切换 │ │ │ ├── LayoutSwitch.vue # 布局切换 │ │ │ ├── ThemeSwitch.vue # 主题切换 │ │ │ ├── WangEditor.vue # 富文本编辑器 │ │ │ └── Watermark.vue # 水印组件 │ │ └── Layout/ # 布局组件 │ │ ├── AdminLayout.vue # 侧边栏布局 │ │ ├── LayoutContainer.vue # 布局容器 │ │ ├── MixLayout.vue # 混合布局 │ │ ├── TabsView.vue # 标签页视图 │ │ └── TopLayout.vue # 顶部导航布局 │ ├── mock/ # Mock 数据 │ │ ├── auth.js # 认证相关 Mock │ │ ├── index.js # Mock 入口 │ │ ├── indexApi.js # 首页 API Mock │ │ ├── logs.js # 日志管理 Mock │ │ ├── menu.js # 菜单管理 Mock │ │ ├── role.js # 角色管理 Mock │ │ ├── setting.js # 系统设置 Mock │ │ ├── theme.js # 主题设置 Mock │ │ ├── upload.js # 文件上传 Mock │ │ └── user.js # 用户管理 Mock │ ├── router/ # 路由配置 │ │ └── index.js # 路由定义 │ ├── stores/ # Pinia 状态管理 │ │ ├── layout.js # 布局状态 │ │ ├── tabs.js # 标签页状态 │ │ └── user.js # 用户状态 │ ├── styles/ # 样式文件 │ │ ├── common.css # 通用样式 │ │ ├── responsive.css # 响应式样式 │ │ └── theme.css # 主题样式 │ ├── utils/ # 工具函数 │ │ ├── dynamicRoutes.js # 动态路由 │ │ ├── fontSize.js # 字体大小管理 │ │ ├── request.js # 请求封装 │ │ ├── theme.js # 主题管理 │ │ └── tools.js # 通用工具 │ ├── views/ # 页面视图 │ │ ├── logs/ # 日志管理 │ │ │ ├── loginLog.vue # 登录日志 │ │ │ └── operationLog.vue # 操作日志 │ │ ├── menu/ # 菜单管理 │ │ │ └── index.vue # 菜单列表 │ │ ├── role/ # 角色管理 │ │ │ └── index.vue # 角色列表 │ │ ├── sys/ # 系统管理 │ │ │ ├── notice.vue # 公告管理 │ │ │ ├── setting.vue# 系统设置 │ │ │ ├── user.vue # 用户管理 │ │ │ └── workOrder.vue# 工单管理 │ │ ├── Home.vue # 首页 │ │ ├── Login.vue # 登录页 │ │ ├── NotFound.vue # 404页面 │ │ └── UnderDevelopment.vue # 开发中页面 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── index.html # HTML 模板 ├── package.json # 依赖配置 ├── vite.config.js # Vite 配置 └── README.md # 项目说明 ``` ## 功能模块 ### 1. 用户认证 - 账号密码登录 - 图形验证码 - 记住密码（AES 加密存储） - 登录状态持久化 ### 2. 首页 - 快捷入口 - 公告通知 - 系统概览 ### 3. 菜单管理 - 菜单树形结构展示 - 菜单增删改查 - 功能点管理 - 菜单状态启用/禁用 ### 4. 角色管理 - 角色增删改查 - 权限分配（菜单 + 功能） - 树形权限选择 ### 5. 用户管理 - 部门树形结构 - 员工增删改查 - 重置密码 - 状态管理（启用/禁用/离职） - 登录权限控制 ### 6. 系统设置 - 系统基础配置 - Logo 设置 - 公告管理（富文本编辑器） - 工单管理 ### 7. 日志管理 - 登录日志（IP、时间、设备） - 操作日志（操作内容、URL、时间） - 多维度筛选查询 ### 8. 系统特性 - **三种布局模式**：侧边栏、顶部导航、混合布局 - **20+ 主题配色**：支持一键切换 - **字体大小调节**：12px-16px 可选 - **水印功能**：页面安全水印 - **标签页导航**：支持多标签页切换 - **全屏功能**：一键全屏 - **响应式设计**：适配移动端 ## 数据字典 ### 用户表 (user) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 用户ID | | name | string | 姓名 | | phone | string | 手机号 | | department_id | number | 部门ID | | position | string | 职位 | | status | number | 状态：1-启用，0-禁用 | | is_office | number | 在职状态：1-在职，0-离职 | | auth | number | 登录权限：1-允许，0-禁止 | | create_time | string | 创建时间 | ### 角色表 (role) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 角色ID | | name | string | 角色名称 | | description | string | 角色描述 | | create_time | string | 创建时间 | ### 菜单表 (menu) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 菜单ID | | menu_name | string | 菜单名称 | | menu_url | string | 菜单路径 | | pid | number | 父菜单ID，0为顶级 | | sort_no | number | 排序号 | | icon | string | 图标类名 | | status | number | 状态：1-启用，0-禁用 | ### 部门表 (department) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 部门ID | | department_name | string | 部门名称 | | pid | number | 父部门ID，0为顶级 | | sort | number | 排序号 | | leader_id | number | 部门负责人ID | ### 公告表 (notice) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 公告ID | | title | string | 公告标题 | | content | string | 公告内容（HTML）| | did | number | 部门ID | | addtime | string | 发布时间 | | status | number | 状态：1-显示，0-隐藏 | ### 工单表 (work_order) | 字段 | 类型 | 说明 | |------|------|------| | work_id | number | 工单ID | | problem | string | 问题描述 | | file | string | 附件URL | | company_id | string | 公司ID | | create_time | string | 创建时间 | | status | number | 状态：0-待处理，1-处理中，2-已处理，3-已关闭 | | reply | string | 回复内容 | | reply_time | string | 回复时间 | ### 登录日志表 (login_log) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 日志ID | | employee_id | number | 员工ID | | employee_name | string | 员工姓名 | | department_id | number | 部门ID | | login_time | string | 登录时间 | | ip | string | IP地址 | | week | string | 星期 | | equipment | string | 设备类型：PC/IOS/Android | ### 操作日志表 (operation_log) | 字段 | 类型 | 说明 | |------|------|------| | id | number | 日志ID | | employee_id | number | 员工ID | | employee_name | string | 员工姓名 | | department_id | number | 部门ID | | url | string | 操作URL | | param | string | 操作参数 | | addtime | string | 操作时间 | ## 接口文档 ### 基础说明 - **请求方式**: POST - **数据格式**: JSON - **基础响应格式**: ```json { "status": 1, // 1-成功，0-失败 "msg": "提示信息", "data": {} // 响应数据 } ``` ### 认证模块 #### 用户登录 - **URL**: `/api/Auth/login` - **参数**: ```json { "username": "string", // 用户名 "password": "string", // 密码 "code": "string" // 验证码 } ``` #### 获取验证码 - **URL**: `/api/Auth/verify` - **方法**: GET #### 获取初始化配置 - **URL**: `/api/Auth/init` - **方法**: GET #### 退出登录 - **URL**: `/api/Auth/logout` - **参数**: ```json { "uid": "string" // 用户ID } ``` ### 菜单模块 #### 获取菜单树 - **URL**: `/api/menu/index` #### 获取功能列表 - **URL**: `/api/func/index` - **参数**: ```json { "pid": "number" // 父菜单ID } ``` #### 新增菜单 - **URL**: `/api/menu/add` - **参数**: ```json { "menu_name": "string", // 菜单名称 "menu_url": "string", // 菜单路径 "pid": "number", // 父菜单ID "sort_no": "number", // 排序号 "icon": "string" // 图标 } ``` #### 编辑菜单 - **URL**: `/api/menu/edit` - **参数**: 同新增，需包含 `id` #### 删除菜单 - **URL**: `/api/menu/delete` - **参数**: ```json { "id": "number" // 菜单ID } ``` #### 新增功能 - **URL**: `/api/func/add` - **参数**: ```json { "menu_name": "string", // 功能名称 "menu_url": "string", // 功能路径 "pid": "number", // 父菜单ID "sort_no": "number" // 排序号 } ``` #### 编辑功能 - **URL**: `/api/func/edit` - **参数**: 同新增，需包含 `id` #### 删除功能 - **URL**: `/api/func/delete` - **参数**: ```json { "id": "number" // 功能ID } ``` ### 角色模块 #### 获取角色列表 - **URL**: `/api/role/index` #### 新增角色 - **URL**: `/api/role/add` - **参数**: ```json { "name": "string", // 角色名称 "description": "string" // 角色描述 } ``` #### 编辑角色 - **URL**: `/api/role/edit` - **参数**: 同新增，需包含 `id` #### 删除角色 - **URL**: `/api/role/delete` - **参数**: ```json { "id": "number" // 角色ID } ``` #### 获取角色权限 - **URL**: `/api/role/get_func` - **参数**: ```json { "id": "number" // 角色ID } ``` - **响应**: ```json { "menu_list": [], // 菜单权限列表 "func_list": [] // 功能权限列表 } ``` #### 设置角色权限 - **URL**: `/api/role/set_func` - **参数**: ```json { "role_id": "number", // 角色ID "ids": ["string"] // 权限ID数组 } ``` ### 用户模块 #### 获取用户列表 - **URL**: `/api/Employee/index?p={page}` - **参数** (POST): ```json { "name": "string", // 姓名搜索 "phone": "string", // 手机号搜索 "is_office": "number", // 在职状态 "department_id": "number" // 部门ID } ``` - **响应**: ```json { "list": [], // 用户列表 "count": "number" // 总条数 } ``` #### 新增用户 - **URL**: `/api/Employee/add` - **参数**: ```json { "name": "string", // 姓名 "phone": "string", // 手机号 "department_id": "number", // 部门ID "position": "string", // 职位 "status": "number" // 状态：1-启用，0-禁用 } ``` #### 编辑用户 - **URL**: `/api/Employee/edit` - **参数**: 同新增，需包含 `id` #### 删除用户 - **URL**: `/api/Employee/delete` - **参数**: ```json { "id": "number" // 用户ID } ``` #### 重置密码 - **URL**: `/api/Employee/reset_pass` - **参数**: ```json { "id": "number" // 用户ID } ``` #### 设置用户字段 - **URL**: `/api/employee/set_field` - **参数**: ```json { "id": "number", // 用户ID "field": "string", // 字段名 "value": "any" // 字段值 } ``` ### 部门模块 #### 获取部门树 - **URL**: `/api/Department/index` #### 新增部门 - **URL**: `/api/Department/add` - **参数**: ```json { "department_name": "string", // 部门名称 "pid": "number", // 父部门ID "sort": "number", // 排序号 "leader_id": "number" // 负责人ID } ``` #### 编辑部门 - **URL**: `/api/Department/edit` - **参数**: 同新增，需包含 `id` #### 删除部门 - **URL**: `/api/Department/delete` - **参数**: ```json { "id": "number" // 部门ID } ``` #### 获取部门员工 - **URL**: `/api/Common/get_sub_department_employee` - **参数**: ```json { "department_id": "number" // 部门ID } ``` ### 系统设置模块 #### 获取系统配置 - **URL**: `/api/config/index` #### 编辑系统配置 - **URL**: `/api/config/edit` - **参数**: ```json { "company_name": "string", // 公司名称 "start_time": "string", // 上班时间 "end_time": "string", // 下班时间 "logo": "string" // Logo URL } ``` ### 公告模块 #### 获取公告列表 - **URL**: `/api/Notice/index?p={page}` - **参数** (POST): ```json { "title": "string" // 标题搜索 } ``` #### 新增公告 - **URL**: `/api/Notice/add` - **参数**: ```json { "title": "string", // 公告标题 "content": "string", // 公告内容（HTML） "did": "number" // 部门ID } ``` #### 编辑公告 - **URL**: `/api/Notice/edit` - **参数**: 同新增，需包含 `id` #### 删除公告 - **URL**: `/api/Notice/delete` - **参数**: ```json { "id": "number" // 公告ID } ``` ### 工单模块 #### 获取工单列表 - **URL**: `/api/WorkOrder/index?p={page}` - **参数** (POST): ```json { "status": "string", // 状态筛选 "company_id": "string" // 公司ID } ``` #### 新增工单 - **URL**: `/api/WorkOrder/add` - **参数**: ```json { "problem": "string", // 问题描述 "file": "string", // 附件URL "company_id": "string" // 公司ID } ``` #### 编辑工单 - **URL**: `/api/WorkOrder/edit` - **参数**: 同新增，需包含 `id` #### 回复工单 - **URL**: `/api/WorkOrder/reply` - **参数**: ```json { "id": "number", // 工单ID "reply": "string" // 回复内容 } ``` ### 日志模块 #### 获取登录日志 - **URL**: `/api/employeeLoginLog/index?p={page}` - **参数** (POST): ```json { "employee_id": "number", // 员工ID "week": "string", // 星期 "ip": "string", // IP地址 "department_id": "number", // 部门ID "start_time": "string", // 开始时间 "end_time": "string" // 结束时间 } ``` #### 获取操作日志 - **URL**: `/api/employeeOperationLog/index?p={page}` - **参数** (POST): ```json { "employee_id": "number", // 员工ID "url": "string", // URL搜索 "department_id": "number", // 部门ID "start_time": "string", // 开始时间 "end_time": "string" // 结束时间 } ``` ### 主题模块 #### 编辑主题样式 - **URL**: `/api/Common/edit_style` - **参数**: ```json { "theme": "string" // 主题名称 } ``` ### 文件上传 #### 上传文件 - **URL**: `/api/common/upload` - **方法**: POST (form-data) - **参数**: ```json { "file": "File" // 文件对象 } ``` ## 工具方法 ### TOOLS 工具集 文件路径: `src/utils/tools.js` #### 1. Flaten - 扁平化树形数据 将具有 children 属性的树形数组转换为一维数组。 ```javascript import TOOLS from '@/utils/tools' const treeData = [ { id: 1, name: '部门A', children: [{ id: 2, name: '子部门A1' }] }, { id: 3, name: '部门B' } ] const flatData = TOOLS.Flaten(treeData) // 结果: [{ id: 1, ... }, { id: 2, ... }, { id: 3, ... }] ``` #### 2. GetTime - 获取格式化日期 获取格式化的当前日期时间。 ```javascript import TOOLS from '@/utils/tools' TOOLS.GetTime() // '2024-03-15' (默认 day) TOOLS.GetTime('day') // '2024-03-15' TOOLS.GetTime('month') // '2024-03' ``` #### 3. getMonths - 获取最近月份 从当前月份开始，向前推算指定数量的月份。 ```javascript import TOOLS from '@/utils/tools' // 假设当前是 2024-03 TOOLS.getMonths(3) // ['2024-03', '2024-02', '2024-01'] TOOLS.getMonths() // 返回最近12个月 ``` #### 4. DatePickerShortcuts - 日期选择器快捷选项 Element Plus 日期选择器快捷选项配置。 ```vueMade with ❤️ by 阿白