基于SpringBoot和Vue的OA办公管理系统

今天介绍一个基于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办公管理系统

基于SpringBoot和Vue的OA办公管理系统相关推荐

基于Springboot+Mybatisplus+Vue的科研项目管理系统
基于Springboot+Mybatisplus+Vue的科研项目管理系统 1.1 项目概述开发语言:Java8 数据库:Mysql5 前端技术:bootstrap 后端框架:Springboot ...
基于springboot＋vue的戒毒所人员管理系统毕业设计-附源码251514
Springboot戒毒所人员管理系统摘要随着社会各个领域的信息化进程加快,先进的数字和网络技术为公安执法部门提供了高效的沟通手段.在我国公安监管信息化建设作为监管信息化建设的其中一部分,戒毒所人 ...
基于springboot框架开发的OA办公自动化系统
OA办公自动化系统,使用Maven进行项目管理,基于springboot框架开发的项目,mysql底层数据库,前端采用freemarker模板引擎,Bootstrap作为前端UI框架, 集成了jpa. ...
项目设计-基于SpringBoot和Vue开发的宿舍管理系统
前言本期项目是宿舍管理系统,主要包括数据监控大盘.宿舍楼管理.宿舍管理.宿舍成员管理.借用管理.卫生管理.缴费管理.保修管理.日志管理.用户管理.角色管理以及各个模块的导出功能.以企业级的开发标 ...
【毕设精选】基于SpringBoot和Vue的相关系统
SpringBoot+Vue相关系统前言 springboot330付费问答系统的设计与实现含文档附源码 springboot325基于Java的企业OA管理系统的设计与实现含文档附源码 sprin ...
SpringBoot+Vue实现前后端分离OA办公管理系统
文末获取源码开发语言:Java 使用框架:spring boot 前端技术:JavaScript.Vue.js .css3 开发工具:IDEA/MyEclipse/Eclipse.Visual St ...
java-net-php-python-springboot基于SpringBoot的OA办公管理系统计算机毕业设计程序
java-net-php-python-springboot基于SpringBoot的OA办公管理系统计算机毕业设计程序 java-net-php-python-springboot基于SpringB ...
SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...

基于SpringBoot和Vue的OA办公管理系统

基于SpringBoot和Vue的OA办公管理系统相关推荐

最新文章

热门文章