目录
起因
每天上班的第一件事情，相信很多小伙伴跟我一样：写日报。
要先想想昨天做了什么，然后还要写今天的计划安排，最后写完了还要排版（除非你啥也不整理就丢出去）……早就对这种日复一日的事情厌倦了，于是抄起我的键盘，给领导甩过去……不是，是搞起一个系统来。
经过
前前后后，每天业余时间，想到一点就写一点，时间过的很快，我这蜗牛般的速度也算差不多完工了。自主设计到开发、测试，似乎没啥大问题，就上线了。
预览
线上地址：http://www.yunfengzhijia.cn/workreport/#/login
技术栈
- 前端使用了 Vue3 + vuex + vue-router + element-plus + axios + echats + mitt + websocket + webworker + canvas + vite
就这些吧，有点乱 - 后端使用了 springBoot + myBatisPlus + MySQL + easyexcel + websocket + swagger + mybatis-plus-generator
后端写的比较简单
源码
gitee:
前端： https://gitee.com/Kevin-269581661/work-report-front
后端：https://gitee.com/Kevin-269581661/work-report-svc
感谢
也是在前人的肩膀上，经过了多番实践和创造才得来的成果，虽然仍然还有很多可以继续改进的！但是就暂时在这里止步吧！更大的想象空间留给未来！
项目介绍
登录注册
前端
- 使用了动态背景图片，每次打开或者刷新会从图库里随机抽取一张图作为背景。
- 加了个个人认为比较好看的烟花特效（净整些花里胡哨的 …… ） 。
- 图形验证，使用了canvas的一些绘图技巧，多看看文档，也不是很难。
后端
- 由于是小项目没有使用 Shiro 和 Spring Security 框架，使用了比较简单的 JWT 生成 token 做的登录。
- 使用 UserLoginToken 注解 + 拦截器对请求进行是否登录的检验，配置了token过期时间和自动刷新的时间。
- 接口除了检验登录之外，还会对配有权限的接口进行校验角色权限，也是在拦截器中进行。
- 后期 token 和角色权限都可以使用 radis 缓存，这样不用频繁地去查库，减少IO消耗。
选择机构
前端
- 因为是个 saas 系统，所以登录完必须要选择机构才能使用，这给了任意人新建机构的入口。默认新建机构的人会得到机构管理员的权限。一个账号只能绑定一个机构。
- 使用了路由守卫，如果没有绑定机构是进入不了其他页面（除了登录）。
- 可以为加入机构的人设置问题验证（嘿嘿，是不是很熟悉
^_^），选择开启或者关闭验证。 - 关闭验证之后其他用户可以直接进入关联你的机构。
后端
- 机构是单独作为一个表去维护，机构关联了很多的业务模块。包括角色，项目模块等等，每个机构都不同，需要区分。
- 创建机构会初始化一些必要的数据，譬如该机构的初始化角色……
首页
前端
- 首页在原来的基础上是没有太多的改动的，中间代办事项那里重新使用 vxe-table 重构了一下，这里写了个 webworker 线程，原本打算根据时间去使用子线程去监听未做的事情，虽然代码基本实现了，但是功能没有用到，因为感觉前端做这个意义不大。
- 左侧菜单栏做了权限隐藏控制，普通用户没有对应的查看权限即不会显示对应菜单。
- 左下方做了一个精小玲珑的小时钟，嘿嘿，感觉挺有意思
^_^。 - 菜单的折叠状态都充分地使用了 vuex + sessionStorage 进行缓存处理（又是一个小细节……）。
- 顶部tag标签栏，在原来的基础上重新进行了封装，增加了左右滑动按钮控制。
后端
- 增加了登录时间记录，和根据登录的ip查询归属地，记录登录地点（这个可以做个日志记录，暂时没有做）。
- 消息数量统计，当前一周的日报提交数量统计和当前年份的每个月的日报提交数量统计。
个人信息页
前端
- 编辑个人信息，点编辑按钮进入编辑，如果修改了，没有保存，会回复原始状态。
- 上传头像，做了一些限制，头像过大（超过1M）不能上传，尽管后端已经已经把质量压缩到了0.2
^_^，但是谁会嫌自己的服务器硬盘够大呢？ - 这里显示了当前用户的机构信息，机构管理员还可以编辑机构信息，可以修改验证等等。
- 修改密码，做了一个密码强度的验证，规则嘛，自己试试看
^_^~
后端
- 用户信息的修改保存。
- 机构信息的修改保存。
- 文件的上传处理，保存文件流。
角色管理
前端
- 可以新建角色，授权，删除角色等操作。
- 默认的角色不可被删除。
后端
- 角色权限目前我设计的是使用的是枚举来控制的，针对每一个接口或者按钮都可以做到权限的控制。
- 具体可看代码，不过多介绍。
用户管理
前端
- 使用 vxe-table 的好处之一在于方便进行列筛选，可以控制哪些列需要进行展示，防止表格列过多的横向拖动。
- 用户列表只对有查看用户列表权限的人才开放，可以进行修改用户基本信息，授权角色，重置密码，设为停用等操作。
后端
- 用户列表的条件查询，对应的修改信息、授权、停用等接口。
机构管理
前端
- 机构管理只有超级管理员才有此查看权限。
- 可以修改、设为不可加入、停用、删除等操作。
后端
- 机构列表的查询修改，设为不可加入、停用、删除等接口。
组织架构
前端
- 通过递归组件实现了这个组织架构图的功能。
- 可以不限层级地添加组织和人员，每个组织可以设置一名组织管理员，拥有对应角色的权限。
- 下拉菜单实现了按钮级权限。
后端
- 通过 parentId 关联组织数据，形成树型结构数据，通过递归遍历查询数据。当前数据较少，也可以一次查出当前机构所有组织数据，再进行数据处理。
项目模块管理
前端
- 写日报必须要告诉工作的具体项目模块，所以得有一个列表。
- 多个根节点的树型数据，采用树型数据列表展示，之前使用懒加载，但实际使用效果不怎么好，取消了。
后端
- 通过一次查出该机构所有项目模块数据，再进行树型数据的处理。
日报模块
发布日报
可以发布今天的日报
我的日报
可以根据日期发布日报，左下角显示当前的周数，右上角的左右箭头可以切换周数。
我的日报-新建
发布日报必须填写姓名，否则不知道是谁。这里单独使用了一个字段保存，避免影响到昵称等。
我的日报-填写姓名
这里跳转过来做了一个提示动画，又是一个小细节^_^~
我的日报-新建-选择模块
根据模块管理配置的级联选择
我的日报-编辑
快捷拖动进度条选择进度
我的日报-日报列表
添加完数据的样子
发送日报
自动获取今天和上个工作日的日报，可以取消掉不发送的日报
组长可以自动获取到所有组员的日报，同样可以编辑处理
已发送日报管理
可查看历史发送记录，每天只能发送一次哦，只可以撤回今天的。这里做了一个复制的功能，直接帮助排版好，粘贴到聊天工具也是可以的哦^_^~
已发送日报管理-折叠
我的日报-一键添加周报
可以自动获取本周一到今天的所有日报记录，添加到周报列表
我的日报-周报数据预览
预览一周的日报，点击导出，可以导出Excel文件
我的日报-导航栏
点击不同星期，展现不同颜色，每一天对应一种颜色，代表每天不一样的心情^_^~
日报管理列表
这里更方便的看到自己的日报记录
发送日报-通知
组员发送和撤回日报，组长会受到一个实时的消息通知
日报汇总
这里组长可以看到所有组员和下级组员的已发送的日报，组员可以看到自己组员发送的日报，再也不用一个一个去问了
消息模块
前端
- 前端使用了stompjs 和 sockjs.js 模块实现了websoket通信。
- 采用消息订阅的方式接收服务端转发的消息。
- 目前消息没有做详情，只是简单做了已读。
后端
- 使用 spring-boot-starter-websocket 模块实现 socket 通信。
- 使用 simpMessagingTemplate 给指定用户发送消息。
- 也可以使用 Netty 去实现更多的功能。
如果这篇文章有帮助到您，请简单给个赞吧，谢谢~
