基于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 :model="search" style="display:inline">
		<el-form-item>
			<el-col :span="5">
				<el-date-picker
					v-model="search.rzTime"
					type="date"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					placeholder="选择日期"
					@change="dateChange">
				</el-date-picker>
			</el-col>
			<el-col :span="10">
				<el-button type="primary" size="small" icon="el-icon-search" @click="getData">查询</el-button>
				<el-button type="primary" size="small" icon="el-icon-plus" @click="addRz">新增</el-button>
			</el-col>
		</el-form-item>
	</el-form>
	<el-table :data='tableData' style="width: 100%;">
		<el-table-column prop="userName" label="记录人" width="120" sortable>
		</el-table-column>
		<el-table-column prop="rdnr" label="日志内容">
		</el-table-column>
		<el-table-column prop="rzTime" label="记录时间" width="120" sortable>
		</el-table-column>
	</el-table>
	<el-dialog title="新增日志" :visible.sync="dialogVisible">
		<el-form :model="add">
			<el-form-item label="日志内容">
				<el-input :rows="5" type="textarea" v-model="add.rdnr"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="submit">提交</el-button>
				<el-button size="small" @click="cancel">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</div>
</template>

<script>
import { getLog, addLog } from '../api/api'
export default {
	data() {
		return {
			tableData: [],
			dialogVisible: false,
			logForm: {
				logArea: ''
			},
			search: {
				rzTime: ''
			},
			add: {
				rdnr: ''
			}
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		getData() {
			var obj = {
				rzTime: this.search.rzTime
			}
			getLog(obj).then((res => {
				this.tableData = res.data
			}))
		},
		dateChange(val) {
			this.search.rzTime = val
		},
		addRz() {
			this.dialogVisible = true
			this.add.rdnr = ''
		},
		submit() {
			var user = sessionStorage.getItem('user');
			user = JSON.parse(user)
			var obj = {
				userId: user.userId,
				rzTime: new Date().toLocaleDateString(),
				rdnr: this.add.rdnr
			}
			addLog(obj).then((res) => {
				this.$message({
          message: res.data.msg,
          type: 'success'
        });
			})
			this.dialogVisible = false
			this.getData()
		},
		cancel() {
			this.dialogVisible = false
			this.add.rdnr = ''
		}
	},
}
</script>

获取源码请关注后私信“20220826”