学生管理系统前端代码 - 搜索、展示、删除、修改、分页、邮件提醒、通知、评价、导出
<template>
<div>
<div style='margin-bottom:20px;'>
<!-- <el-select v-model='lessonname' @change='changeCourse'>
<el-option v-for='(item, index) in teachCourseList' :key='index' :value='item.lessonname' :label='item.lessonname'></el-option>
</el-select> -->
<el-input style='width: 200px' suffix-icon='el-icon-search' placeholder='请输入学生名称' v-model='nickname' class='ml-5'></el-input>
<el-button class='ml-5' type='primary' @click='load' icon='el-icon-search'>搜索</el-button>
<el-button type='warning' @click='reset' icon='el-icon-refresh-right'>重置</el-button>
</div>
<pre><code> <el-table ref='multipleTable'
tooltip-effect='dark'
:data='tableData'
border stripe
style='font-weight:500;font-size:14px;'
@selection-change='handleSelectionChange'
>
>
<el-table-column type='selection' width='55'></el-table-column>
<el-table-column prop='nickname' label='学生名字' width='100'></el-table-column>
<el-table-column prop='school' label='学校' width='200'></el-table-column>
<el-table-column prop='inclass' label='班级' width='200'></el-table-column>
<el-table-column prop='phone' label='电话' width='200'></el-table-column>
<el-table-column prop='email' label='电子邮箱' width='200'></el-table-column>
<el-table-column label='操作' align=center>
<template slot-scope='scope'>
<el-button type='primary' @click='handleComment(scope.row)'>删除学生</el-button>
<el-button type='warning' @click='handleWord(scope.row)'>修改学生</el-button>
</template>
</el-table-column>
</el-table>
<div style='padding: 10px 0'>
<el-pagination
@size-change='handleSizeChange'
@current-change='handleCurrentChange'
:current-page='pageNum'
:page-sizes='[2, 5, 10, 20]'
:page-size='pageSize'
layout='total, sizes, prev, pager, next, jumper'
:total='total'
></el-pagination>
</div>
</div>
</code></pre>
</template>
<script>
export default {
name: 'Chooselesson',
data() {
return {
stucommentdata: '',
uid: 0,
lid:0,
nickname: '',
tableData: [],
teachCourseList: [],
total: 0,
slesson: {},
messagedata:'',
pageNum: 1,
pageSize: 10,
selectCourse: '',
multipleSelection: [],
lessonname: '',
words:[],
form: {},
targerusername:'',
WordsFormVisible:false,
tid:0,
coursename: '',
EvaluateStuFormVisible: false,
NoticeFormVisible:false,
noticecontent:'',
headerbg: 'headerbg',
dialogFormVisible: false,
user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
};
},
created() {
this.load();
this.getTeacherCourse();
// this.getSelectedList()
},
methods: {
handleDetail(row) {
this.dialogFormVisible = true;
console.log(row);
this.form = row;
},
toEL() {
let item = {
tid: this.user.id,
uid: this.uid,
content: this.stucommentdata,
mode: 1,
lesson: this.coursename
};
console.log(item);
this.request.post('/sysTandsComment/tscomment', item).then(res => {
if (res.code == 200) {
this.$message.success(res.message);
this.EvaluateStuFormVisible = false;
} else {
this.$message.error(res.message);
}
// console.log(res.records)
});
},
load() {
this.request.post('/manage/getTeachStudentList2', {
current: this.pageNum,
size: this.pageSize,
nickname: this.nickname,
})
.then(res => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
console.log('-------------', this.tableData)
});
},
toWord(){
if(!this.messagedata){
this.$message.error('请输入内容')
return
}
let item = {
uid:this.uid,
tid:this.user.id,
content:this.messagedata,
mode:1
}
this.request.post('/sysMessage/leaveMessage',item).then(res => {
console.log(res)
if(res.code == 200){
this.$message.success(res.message)
let item1={
uid:this.user.id,
tid:this.tid
}
this.messagedata = ''
this.getWord()
}else{
this.$message.error(res.message)
}
})
},
getWord(){
let item = {
current:1,
size:500,
tid:this.user.id,
uid:this.uid
}
console.log('item',item)
this.request.post('/sysMessage/getMessageList',item).then(res =>{
this.words = res.data.records
console.log('words',this.words)
})
},
handleWord(row){
this.targerusername=row.nickname
this.uid=row.uid
this.WordsFormVisible = true
this.getWord(row)
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
console.log(val);
this.multipleSelection = val;
},
changeCourse(e) {
console.log(e);
this.lessonname = e;
this.load();
},
handleSizeChange(pageSize) {
// console.log(`每页 ${val} 条`);
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
this.pageNum = pageNum;
this.load();
},
sendEmail() {
if (this.multipleSelection.length == 0) {
this.$message.warning('请选择要提醒的学生');
return;
}
let emailList = [];
for (var i = 0; i < this.multipleSelection.length; i++) {
let item = {
email: this.multipleSelection[i].email,
lessonname: this.multipleSelection[i].lessonname,
lessontime: this.multipleSelection[i].lessontime,
location: this.multipleSelection[i].location,
nickname: this.multipleSelection[i].nickname
};
emailList.push(item);
}
let item1 = {
emailList
}
console.log(item1);
this.request.post('/file/sendEamil', {
emailList
}).then(res => {
});
this.$message.success('系统已接收，已玩命发送');
this.toggleSelection(false)
},
sendNotice(){
let emailList = [];
for (var i = 0; i < this.multipleSelection.length; i++) {
let item = {
email: this.multipleSelection[i].email,
content:this.noticecontent
};
emailList.push(item);
}
let item1 = {
emailList,
}
// console.log(item1);
this.request.post('/file/sendNotice', item1).then(res => {
});
this.$message.success('已发送');
this.NoticeFormVisible = false
this.noticecontent = ''
// this.toggleSelection(false)
},
handleNotice(){
if (this.multipleSelection.length == 0) {
this.$message.warning('请选择要提醒的学生');
return;
}
this.NoticeFormVisible = true
},
getTeacherCourse() {
this.request
.post('/getTeachLessonList', {
current: this.pageNum,
size: 500,
tid: this.user.id
})
.then(res => {
this.teachCourseList = res.data.records;
console.log('课程-----------', this.teachCourseList);
});
},
handleComment(row) {
console.log(row);
this.uid = row.uid;
this.coursename = row.lessonname;
this.EvaluateStuFormVisible = true;
},
reset() {
this.lessonname = '';
this.nickname = '';
this.load();
},
// exp(){
// let item = {
// id:this.user.id
// }
// // this.request.post('/user/export',item).then(res =>{
// // })
// window.open('http://localhost:9090/user/export',item)
// }
}
};
</script>
<style>
.headerbg {
background-color: #eee !important;
}
.userInfo{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-top: 30px;
}
.userInfo div{
margin-left: 9px;
}
.img img{
width: 35px;
height: 35px;
border-radius: 50%;
}
</style>
<p>写一份代码说明书</p>
<p>内容：本代码是一个学生管理系统的前端代码，主要实现了以下功能：</p>
<ol>
<li>
<p>搜索学生：根据学生名称搜索学生信息。</p>
</li>
<li>
<p>展示学生信息：展示学生的姓名、学校、班级、电话、电子邮箱等信息。</p>
</li>
<li>
<p>删除学生：可以删除选中的学生信息。</p>
</li>
<li>
<p>修改学生：可以修改选中的学生信息。</p>
</li>
<li>
<p>分页展示：使用分页插件展示学生信息。</p>
</li>
<li>
<p>发送邮件：可以选择学生，发送邮件提醒学生上课。</p>
</li>
<li>
<p>发送通知：可以选择学生，发送通知。</p>
</li>
<li>
<p>课程评价：可以对学生进行课程评价。</p>
</li>
<li>
<p>导出数据：可以将学生数据导出为Excel文件。</p>
</li>
</ol>
<p>该代码使用了Element UI库，实现了表格、分页、弹窗等组件。同时也使用了Axios库来进行数据请求。代码逻辑清晰，注释详细，易于阅读和维护。</p>
原文地址: https://www.cveoy.top/t/topic/oVmC 著作权归作者所有。请勿转载和采集!