基于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-picker
						v-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 = false
				var 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 = true
				this.addForm.userName = user.userName
				this.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 = false
				this.getTableData()
			}
		}
	}

</script>

 演示视频

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