SSM_Vue实现疫情期间高校人员管理系统

2022-06-29 00:35:13 阅读：154 来源： 互联网

标签：el style Vue 管理系统 color type SSM data contents

1.技术介绍
SpingMVC+Spring+Mybatis+mysql+Vue
开发工具：eclipse或IDEA
2.主要功能说明：
1)学生
个人中心、地区管理、疫情资讯管理、学生管理（学生居家管理、学生打卡管理、学生返校申请管理、学生请假申请管理）、学生留言管理
2）老师
个人中心、地区管理、老师管理（老师居家管理、老师打卡管理、老师返校申请管理）、疫情资讯管理、学生管理（学生信息管理、学生居家管理、学生打卡管理、学生返校申请管理、学生请假申请管理）、学生留言管理
3）管理员
个人中心、地区类型管理、地区管理、老师管理（老师信息管理、老师居家管理、老师打卡管理、老师返校申请管理）、疫情资讯管理、学生管理（学生信息管理、学生居家管理、学生打卡管理、学生返校申请管理、学生请假申请管理）、学生留言管理
3.部分代码展示
教师返校申请列表
```java
<template>
<div class="main-content">
<el-dialog title="审核" :visible.sync="laoshifanxiaoshenqingYesnoTypesVisible">
<el-form :model="form">
<input type="hidden" v-model="form.id">
<el-form-item label="审核" >
<el-select v-model="form.laoshifanxiaoshenqingYesnoTypes" placeholder="请选择审核类型">
<el-option label="通过" value="2"></el-option>
<el-option label="拒绝" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="审核意见">
<el-input type="textarea" v-model="form.laoshifanxiaoshenqingYesnoText" placeholder="审核意见"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="laoshifanxiaoshenqingYesnoTypesVisible = false">取消</el-button>
<el-button type="primary" @click="laoshifanxiaoshenqingYesnoTypesShenhe">提交</el-button>
</div>
</el-dialog>

<div v-if="showFlag">
<el-form :inline="true" :model="searchForm" class="form-content">
<el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">

<el-form-item :label="contents.inputTitle == 1 ? '申请编号' : ''">
<el-input prefix-icon="el-icon-search" v-model="searchForm.laoshifanxiaoshenqingUuidNumber" placeholder="申请编号" clearable></el-input>
</el-form-item>

<el-form-item :label="contents.inputTitle == 1 ? '审核状态' : ''">
<el-select v-model="searchForm.laoshifanxiaoshenqingYesnoTypes" placeholder="请选择审核状态">
<el-option label="=-请选择-=" value=""></el-option>
<el-option
v-for="(item,index) in laoshifanxiaoshenqingYesnoTypesSelectSearch"
v-bind:key="index"
:label="item.indexName"
:value="item.codeIndex">


</el-option>
</el-select>
</el-form-item>

<el-form-item :label="contents.inputTitle == 1 ? '老师姓名' : ''">
<el-input prefix-icon="el-icon-search" v-model="searchForm.laoshiName" placeholder="老师姓名" clearable></el-input>
</el-form-item>

<el-form-item>
<el-button type="success" @click="search()">查询<i class="el-icon-search el-icon--right"/></el-button>
</el-form-item>
</el-row>
<el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
<el-form-item>
<el-button
v-if="isAuth('laoshifanxiaoshenqing','新增')"
type="success"
icon="el-icon-plus"
@click="addOrUpdateHandler()"
>新增</el-button>
 
<el-button
v-if="isAuth('laoshifanxiaoshenqing','删除')"
:disabled="dataListSelections.length <= 0"
type="danger"
icon="el-icon-delete"
@click="deleteHandler()"
>删除</el-button>
 
<el-button
v-if="isAuth('laoshifanxiaoshenqing','报表')"
type="success"
icon="el-icon-pie-chart"
@click="chartDialog()"
>报表</el-button>
 
<a style="text-decoration:none" class="el-button el-button--success"
v-if="isAuth('laoshifanxiaoshenqing','导入导出')"
icon="el-icon-download"
href="http://localhost:8080/gaoxiaofangkong/upload/laoshifanxiaoshenqingMuBan.xls"
>批量导入老师返校申请数据模板</a>
 
<el-upload
v-if="isAuth('laoshifanxiaoshenqing','导入导出')"
style="display: inline-block"
action="gaoxiaofangkong/file/upload"
:on-success="laoshifanxiaoshenqingUploadSuccess"
:on-error="laoshifanxiaoshenqingUploadError"
:show-file-list = false>
<el-button
v-if="isAuth('laoshifanxiaoshenqing','导入导出')"
type="success"
icon="el-icon-upload2"
>批量导入老师返校申请数据</el-button>
</el-upload>
 

<download-excel v-if="isAuth('laoshifanxiaoshenqing','导入导出')" style="display: inline-block" class = "export-excel-wrapper" :data = "dataList" :fields = "json_fields" name = "laoshifanxiaoshenqing.xls">

<el-button
type="success"
icon="el-icon-download"
>导出</el-button>
</download-excel>
 
</el-form-item>
</el-row>
</el-form>
<div class="table-content">
<el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
:header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
:border="contents.tableBorder"
:fit="contents.tableFit"
:stripe="contents.tableStripe"
:row-style="rowStyle"
:cell-style="cellStyle"
:style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
v-if="isAuth('laoshifanxiaoshenqing','查看')"
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandler">
<el-table-column v-if="contents.tableSelection"
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="laoshiName"
header-align="center"
label="老师姓名">
<template slot-scope="scope">
{{scope.row.laoshiName}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="laoshiPhone"
header-align="center"
label="老师手机号">
<template slot-scope="scope">
{{scope.row.laoshiPhone}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="laoshiPhoto"
header-align="center"
width="200"
label="老师头像">
<template slot-scope="scope">
<div v-if="scope.row.laoshiPhoto">
<img :src="scope.row.laoshiPhoto" width="100" height="100">
</div>
<div v-else>无图片</div>
</template>
</el-table-column>

<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="laoshifanxiaoshenqingUuidNumber"
header-align="center"
label="申请编号">
<template slot-scope="scope">
{{scope.row.laoshifanxiaoshenqingUuidNumber}}
</template>
</el-table-column>

<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="insertTime"
header-align="center"
label="申请时间">
<template slot-scope="scope">
{{scope.row.insertTime}}
</template>
</el-table-column>

<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="laoshifanxiaoshenqingTime"
header-align="center"
label="申请返校日期">
<template slot-scope="scope">
{{scope.row.laoshifanxiaoshenqingTime}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="jiankangmaPhoto"
header-align="center"
width="200"
label="健康码">
<template slot-scope="scope">
<div v-if="scope.row.jiankangmaPhoto">
<img :src="scope.row.jiankangmaPhoto" width="100" height="100">
</div>
<div v-else>无图片</div>
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="xingchengmaPhoto"
header-align="center"
width="200"
label="行程码">
<template slot-scope="scope">
<div v-if="scope.row.xingchengmaPhoto">
<img :src="scope.row.xingchengmaPhoto" width="100" height="100">
</div>
<div v-else>无图片</div>
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="hesuanbaogaoPhoto"
header-align="center"
width="200"
label="核酸报告">
<template slot-scope="scope">
<div v-if="scope.row.hesuanbaogaoPhoto">
<img :src="scope.row.hesuanbaogaoPhoto" width="100" height="100">
</div>
<div v-else>无图片</div>
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="laoshifanxiaoshenqingYesnoTypes"
header-align="center"
label="审核状态">
<template slot-scope="scope">
{{scope.row.laoshifanxiaoshenqingYesnoValue}}
</template>
</el-table-column>
<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="laoshifanxiaoshenqingYesnoText"
header-align="center"
label="审核意见">
<template slot-scope="scope">
<span v-if="scope.row.laoshifanxiaoshenqingYesnoText != null &&scope.row.laoshifanxiaoshenqingYesnoText.length>10">
{{scope.row.laoshifanxiaoshenqingYesnoText.slice(0,10)}}...
</span>
<span v-else>
{{scope.row.laoshifanxiaoshenqingYesnoText}}
</span>
</template>
</el-table-column>

<el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign"
prop="updateTime"
header-align="center"
label="审核时间">
<template slot-scope="scope">
{{scope.row.updateTime}}
</template>
</el-table-column>

<el-table-column width="300" :align="contents.tableAlign"
header-align="center"
label="操作">
<template slot-scope="scope">
<el-button v-if="isAuth('laoshifanxiaoshenqing','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
<el-button v-if="isAuth('laoshifanxiaoshenqing','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>

<el-button v-if="isAuth('laoshifanxiaoshenqing','删除')" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
<el-button v-if="isAuth('laoshifanxiaoshenqing','审核') && scope.row.laoshifanxiaoshenqingYesnoTypes == 1 " type="primary" icon="el-icon-thumb" size="mini" @click="openYesnoTypes(scope.row.id)">审核</el-button>

</template>
</el-table-column>
</el-table>
<el-pagination
clsss="pages"
:layout="layouts"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="Number(contents.pageEachNum)"
:total="totalPage"
:small="contents.pageStyle"
class="pagination-content"
:background="contents.pageBtnBG"
:style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
></el-pagination>
</div>
</div>

<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>

<el-dialog title="统计报表" :visible.sync="chartVisiable" width="800">
<el-date-picker
v-model="echartsDate"
type="year"
placeholder="选择年">
</el-date-picker>
<el-button @click="chartDialog()">查询</el-button>
<div id="statistic" style="width:100%;height:600px;"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="chartVisiable = false">关闭</el-button>
</span>
</el-dialog>

</div>
</template>
<script>
import AddOrUpdate from "./add-or-update";
import styleJs from "../../../utils/style.js";

export default {
data() {
return {
searchForm: {
key: ""
},
sessionTable : "",//登录账户所在表名
role : "",//权限
userId:"",//当前登录人的id
//级联表下拉框搜索条件
//当前表下拉框搜索条件
laoshifanxiaoshenqingYesnoTypesSelectSearch : [],
form:{
id : null,
laoshiId : null,
laoshifanxiaoshenqingUuidNumber : null,
insertTime : null,
laoshifanxiaoshenqingTime : null,
jiankangmaPhoto : null,
xingchengmaPhoto : null,
hesuanbaogaoPhoto : null,
laoshifanxiaoshenqingContent : null,
laoshifanxiaoshenqingYesnoTypes : null,
laoshifanxiaoshenqingYesnoText : null,
updateTime : null,
createTime : null,
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
showFlag: true,
sfshVisiable: false,
shForm: {},
chartVisiable: false,
echartsDate: new Date(),//echarts的时间查询字段
addOrUpdateFlag:false,
contents:null,
layouts: '',

laoshifanxiaoshenqingYesnoTypesVisible : false,

//导出excel
json_fields: {
//级联表字段
'老师姓名': 'laoshiName',
'老师手机号': 'laoshiPhone',
'老师身份证号': 'laoshiIdNumber',
'老师头像': 'laoshiPhoto',
'是否在校': 'laoshizaixiaoTypes',
'电子邮箱': 'laoshiEmail',
//本表字段
'申请编号': "laoshifanxiaoshenqingUuidNumber",
'申请时间': "insertTime",
'申请返校日期': "laoshifanxiaoshenqingTime",
'健康码': "jiankangmaPhoto",
'行程码': "xingchengmaPhoto",
'核酸报告': "hesuanbaogaoPhoto",
'审核状态': "laoshifanxiaoshenqingYesnoTypes",
'审核意见': "laoshifanxiaoshenqingYesnoText",
'审核时间': "updateTime",
},

};
},
created() {
this.contents = styleJs.listStyle();
this.init();
this.getDataList();
this.contentStyleChange()
},
mounted() {
//获取当前登录用户的信息
this.sessionTable = this.$storage.get("sessionTable");
this.role = this.$storage.get("role");
this.userId = this.$storage.get("userId");

},
filters: {
htmlfilter: function (val) {
return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
}
},
components: {
AddOrUpdate,
},
computed: {
},
methods: {
chartDialog() {
let _this = this;
let params = {
dateFormat :"%Y", //%Y-%m
riqi :_this.echartsDate.getFullYear(),
// riqi :_this.echartsDate.getFullYear()+"-"+(_this.echartsDate.getMonth() + 1 < 10 ? '0' + (_this.echartsDate.getMonth() + 1) : _this.echartsDate.getMonth() + 1),
thisTable : {//当前表
tableName :'laoshifanxiaoshenqing',//当前表表名,
sumColum : 'laoshifanxiaoshenqing_number', //求和字段
date : 'insert_time',//分组日期字段
// string : 'laoshifanxiaoshenqing_name',//分组字符串字段
// types : 'laoshifanxiaoshenqing_types',//分组下拉框字段
},
// joinTable : {//级联表（可以不存在）
// tableName :'yonghu',//级联表表名
// // date : 'insert_time',//分组日期字段
// string : 'yonghu_name',//分组字符串字段
// // types : 'yonghu_types',//分组下拉框字段
// }
}
_this.chartVisiable = true;
_this.$nextTick(() => {
var statistic = this.$echarts.init(document.getElementById("statistic"), 'macarons');
this.$http({
url: "barSum",
method: "get",
params: params
}).then(({data}) => {
if(data && data.code === 0){

//柱状图求和已成功使用
//start
let yAxisName = "数值";//根据查询数据具体改(单列要改,多列不改)
let xAxisName = "月份";
let series = [];//具体数据值
data.data.yAxis.forEach(function (item,index) {
let tempMap = {};
// tempMap.name= ["数值"];//根据查询数据具体改(单列要改,多列不改)
tempMap.name=data.data.legend[index];
tempMap.type='bar';
tempMap.data=item;
series.push(tempMap);

})

// }, 50)
// })
},
// 分页
contentPageStyleChange() {
let arr = []
if (this.contents.pageTotal) arr.push('total')
if (this.contents.pageSizes) arr.push('sizes')
if (this.contents.pagePrevNext) {
arr.push('prev')
if (this.contents.pagePager) arr.push('pager')
arr.push('next')
}
if (this.contents.pageJumper) arr.push('jumper')
this.layouts = arr.join()
this.contents.pageEachNum = 10
},

init() {
},
search() {
this.pageIndex = 1;
this.getDataList();
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
let params = {
page: this.pageIndex,
limit: this.pageSize,
sort: 'id',
}

if (this.searchForm.laoshiName!= '' && this.searchForm.laoshiName!= undefined) {
params['laoshiName'] = '%' + this.searchForm.laoshiName + '%'
}

if (this.searchForm.laoshifanxiaoshenqingUuidNumber!= '' && this.searchForm.laoshifanxiaoshenqingUuidNumber!= undefined) {
params['laoshifanxiaoshenqingUuidNumber'] = '%' + this.searchForm.laoshifanxiaoshenqingUuidNumber + '%'
}

if (this.searchForm.laoshifanxiaoshenqingYesnoTypes!= '' && this.searchForm.laoshifanxiaoshenqingYesnoTypes!= undefined) {
params['laoshifanxiaoshenqingYesnoTypes'] = this.searchForm.laoshifanxiaoshenqingYesnoTypes
}

params['laoshifanxiaoshenqingDelete'] = 1// 逻辑删除字段 1 未删除 2 删除

this.$http({
url: "laoshifanxiaoshenqing/page",
method: "get",
params: params
}).then(({data}) => {
if(data && data.code === 0){
this.dataList = data.data.list;
this.totalPage = data.data.total;
}else{
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});

//查询级联表搜索条件所有列表
//查询当前表搜索条件所有列表
//填充下拉框选项
this.$http({
url: "dictionary/page?dicCode=laoshifanxiaoshenqing_yesno_types&page=1&limit=100",
method: "get",
}).then(({data}) => {
if(data && data.code === 0){
this.laoshifanxiaoshenqingYesnoTypesSelectSearch = data.data.list;
}
});
},
//每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandler(val) {
this.dataListSelections = val;
},
// 添加/修改
addOrUpdateHandler(id, type) {
this.showFlag = false;
this.addOrUpdateFlag = true;
this.crossAddOrUpdateFlag = false;
if (type != 'info') {
type = 'else';
}
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id, type);
});
},
// 下载
download(file) {
window.open(" ${file} ")
},
// 删除
deleteHandler(id) {
var ids = id ? [Number(id)] : this.dataListSelections.map(item => {
return Number(item.id);
});

this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.$http({
url: "laoshifanxiaoshenqing/delete",
method: "post",
data: ids
}).then(({data}) => {
if(data && data.code === 0){
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.search();
}
});
}else{
this.$message.error(data.msg);
}
});
});
},
// 导入功能上传文件成功后调用导入方法
laoshifanxiaoshenqingUploadSuccess(data){
let _this = this;
_this.$http({
url: "laoshifanxiaoshenqing/batchInsert?fileName=" + data.file,
method: "get"
}).then(({data}) => {
if(data && data.code === 0){
_this.$message({
message: "导入老师返校申请数据成功",
type: "success",
duration: 1500,
onClose: () => {
_this.search();
}
});
}else{
_this.$message.error(data.msg);
}
});

},
// 导入功能上传文件失败后调用导入方法
laoshifanxiaoshenqingUploadError(data){
this.$message.error('上传失败');
},
openYesnoTypes(id) {
let _this = this;
_this.form.id = null;
_this.form.id = id;
_this.form.laoshifanxiaoshenqingYesnoText = null;
_this.form.laoshifanxiaoshenqingYesnoTypes = "请选择审核结果";
_this.laoshifanxiaoshenqingYesnoTypesVisible = true;
},

laoshifanxiaoshenqingYesnoTypesShenhe() {
let _this = this;
if(_this.form.laoshifanxiaoshenqingYesnoTypes == "请选择审核结果"){
alert("请选择审核结果");
return false;
}
if(_this.form.laoshifanxiaoshenqingYesnoText == null || _this.form.laoshifanxiaoshenqingYesnoText == ""){
alert("请输入审核原因");
return false;
}
this.$http({
url:`laoshifanxiaoshenqing/update`,
method: "post",
data: _this.form
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "审核成功",
type: "success",
duration: 1500,
onClose: () => {
_this.laoshifanxiaoshenqingYesnoTypesVisible = false;
_this.search();
}
});
} else {
this.$message.error(data.msg);
_this.laoshifanxiaoshenqingYesnoTypesVisible = false;
}
});
}, }
};
</script>
<style lang="scss" scoped>
.slt {
margin: 0 !important;
display: flex;
}

.ad {
margin: 0 !important;
display: flex;
}

.pages {
& /deep/ el-pagination__sizes{
& /deep/ el-input__inner {
height: 22px;
line-height: 22px;
}
}
}

.el-button+.el-button {
margin:0;
}

.tables {
& /deep/ .el-button--success {
height: 40px;
color: #333;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #DCDFE6;
border-radius: 20px;
background-color: rgba(173, 241, 242, 1);
}

& /deep/ .el-button--primary {
height: 40px;
color: #333;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #DCDFE6;
border-radius: 20px;
background-color: rgba(202, 235, 202, 1);
}

& /deep/ .el-button--danger {
height: 40px;
color: #333;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #DCDFE6;
border-radius: 20px;
background-color: rgba(214, 186, 232, 1);
}

& /deep/ .el-button {
margin: 4px;
}
}
</style>

```
4.系统演示地址
链接：https://pan.baidu.com/s/1yRNfF-so6SB1no3osea-wA
提取码：brh8

标签：el,style,Vue,管理系统,color,type,SSM,data,contents
来源： https://www.cnblogs.com/xiao123456789/p/16421771.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SSM_Vue实现疫情期间高校人员管理系统