employee-LMS-client

审批流后台管理系统前端运用了Vue3框架和ElementPlus组件库，后端运用了Koa2，使用MongDB数据库来存储信息，Mongoose来操作MongDB数据库。主要由用户管理、菜单管理、角色管理、部门管理、审批流申请、审批流审核等六大块系统功能组成。

功能模块图

页面展示

登录界面——为了方便用户操作，登录界面设置非常简单

欢迎页

用户管理

用户管理-点击新增/编辑按钮

菜单管理

菜单管理-点击菜单管理中的新增按钮

角色管理

角色管理-设置权限/用户创建

部门管理

休假申请

休假申请——查看

待我审批——登录人事部员工的账号，只给其审批管理权限，因此系统管理页面其看不见。查看待我审批。

待我审批——点击审核按钮

系统404页面——当访问错误的地址时，出现404页面

重要文件夹及文件说明

1. 后端

• config文件夹——连接数据库
• logs文件夹——日志文件存放
• models文件夹——数据表模型
• public文件夹——公共静态资源
• routes文件夹——页面的核心功能后端实现
• utils文件夹——公共函数封装、二次封装日志包logjs

2. 前端

• api文件夹——api接口统一定义和存放
• assets文件夹——公共静态资源存放
• components文件夹——公共组件
• config文件夹——环境配置封装
• router文件夹——路由渲染和路由路径
• store文件夹——Vuex状态管理、Mutations业务层数据提交
• utils文件夹——axios二次封装-请求拦截，响应拦截、 storage二次封装、工具函数封装 views文件夹——前端页面存放

使用说明

1. 下载 前端代码 和 后端代码， 分别打开文件，使用Robo3T，连接数据库后，创建对应的数据库：manager 在数据库的Collections中创建

• counters
• depts
• leaves
• menus
• roles
• users

其中，users中创建一个用户

{
    "state" : 1,
    "role" : "0",
    "roleList" : [ 
        "653122ec3456ea022d646d13"
    ],
    "deptId" : [ 
        "652fd80757265465d3fd8201", 
        "653124113456ea022d646d70"
    ],
    "userId" : 100001,
    "userName" : "admin",
    "userPwd" : "21232f297a57a5a743894a0e4a801fc3",
    "userEmail" : "admin@erika.com",
    "createTime" : "2023-08-31T13:32:06.381Z",
    "lastLoginTime" : "2023-08-21T13:32:06.381Z",
    "__v" : 0,
    "job" : "架构师",
    "mobile" : "17611020022"
}

其中userPwd为密码admin的md5加密后的样子 然后剩下的均可通过项目运行起来之后在项目中创建。 登录账号：admin 密码：admin

当使用后面的功能时，记得重新回来修改admin用户中的deptId、roleList，前提是先创建部门和角色

项目运行

1. 分别打开项目，在该项目路径下运行 yarn
2. 下载安装包之后，输入yarn dev即可