今天介绍一个基于SpringBoot和Vue的OA办公管理系统，适合初学者拿来学习或者用作大作业的参考等等。
使用的技术
后端：JAVA语言，Sprongboot框架，MySql数据库
前端：Vue
Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。
MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。
Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用（SPA）提供驱动。
实现的功能
管理员和员工两种角色，公告展示、项目进度展示、请假和请假审批、日志系统、会议管理等；
部分代码展示
<template><div><el-form><el-form-item><el-button v-if="!ifAdmin" type="primary" size="small" @click="apply" icon="el-icon-plus">请假申请</el-button></el-form-item></el-form><el-table :data="tableData"><el-table-column prop="userName" label="请假人" width="150"></el-table-column><el-table-column prop="qjyy" label="请假类型"></el-table-column><el-table-column prop="ksTime" label="请假开始时间" width="180"></el-table-column><el-table-column prop="jsTime" label="请假结束时间" width="180"></el-table-column><el-table-column prop="qjzt" label="审批状态" width="180"></el-table-column><el-table-column prop="qjms" label="备注" width="180"></el-table-column><el-table-column label="操作" width="150" v-if="ifAdmin"><template scope="scope"><el-button type="success" size="small" :disabled="buttonAble(scope.row)" @click="handleAgree(scope.row,1)">同意</el-button><el-button type="danger" size="small" :disabled="buttonAble(scope.row)" @click="handleAgree(scope.row,0)">拒绝</el-button></template></el-table-column></el-table><el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false"><el-form :model="addForm" label-width="100px" ref="addForm"><el-form-item label="请假人" prop="UserName"><el-input v-model="addForm.userName" readonly=true></el-input></el-form-item><el-form-item label="请假类型"><el-select v-model="addForm.qjyy"><el-option label="病假" value="病假"></el-option><el-option label="事假" value="事假"></el-option></el-select></el-form-item><el-form-item label="请假时间"><el-date-pickerv-model="addForm.time"type="daterange"value-format="yyyy-MM-dd"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="addForm.qjms"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button size="small" @click.native="addFormVisible = false">取消</el-button><el-button size="small" type="primary" @click.native="addSubmit">提交</el-button></div></el-dialog></div></template><script>import util from '../common/js/util'import { getQjList,agreeQj,addQj } from '../api/api'export default {data() {return {tableData: [],ifAdmin: true,addFormVisible: false,addForm: {userName: '',qjyy: '',time: '',qjms: ''}}},mounted() {this.getTableData()},methods: {handleAgree(row,value) {console.log(row,value)if(value==1) {var params = {qjId: row.qjId,qjzt: '同意'}}else{var params = {qjId: row.qjId,qjzt: '拒绝'}}agreeQj(params).then((res) => {this.$message({message: res.data.msg,// type: 'success'});this.getTableData()})},getTableData() {var user = sessionStorage.getItem('user');user = JSON.parse(user)user.permission=='1'?this.ifAdmin = true:this.ifAdmin = falsevar params = {userId: user.userId}getQjList(params).then((res) => {this.tableData = res.data})},buttonAble(row) {if(row.qjzt=='审批中') {return false} else {return true}},apply() {var user = sessionStorage.getItem('user');user = JSON.parse(user)this.addFormVisible = truethis.addForm.userName = user.userNamethis.addForm.qjyy = ''this.addForm.time = ''this.addForm.qjms = ''},addSubmit() {var user = sessionStorage.getItem('user');user = JSON.parse(user)var obj = {userId: user.userId,qjyy: this.addForm.qjyy,// ksTime: this.addForm.time[0].valueOf(),ksTime: (!this.addForm.time[0] || this.addForm.time[0] == '') ? '' : util.formatDate.format(new Date(this.addForm.time[0]), 'yyyy-MM-dd'),// jsTime: this.addForm.time[1].valueOf(),jsTime: (!this.addForm.time[1] || this.addForm.time[1] == '') ? '' : util.formatDate.format(new Date(this.addForm.time[1]), 'yyyy-MM-dd'),qjzt: '审批中',qjms: this.addForm.qjms}addQj(obj).then((res) => {this.$message({message: res.data.msg,type: 'success'});})this.addFormVisible = falsethis.getTableData()}}}</script>
演示视频
基于SpringBoot和Vue的OA办公管理系统
