学生管理系统 - 学生列表
<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/getTeachTeacherList', {
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>数据部分：</li>
</ol>
<p>data中定义了该页面需要用到的所有数据，例如：</p>
<ul>
<li>stucommentdata：评价学生表单中的评价内容；</li>
<li>uid：当前操作的学生ID；</li>
<li>lid：当前操作的课程ID；</li>
<li>nickname：搜索框中的学生姓名；</li>
<li>tableData：表格的数据源；</li>
<li>teachCourseList：当前教师的授课课程列表；</li>
<li>total：表格数据总数；</li>
<li>pageNum：当前页码；</li>
<li>pageSize：每页显示的数据量；</li>
<li>selectCourse：选择的课程名称；</li>
<li>multipleSelection：当前选中的学生列表；</li>
<li>lessonname：搜索框中的课程名称；</li>
<li>words：留言列表；</li>
<li>form：当前选中的学生信息；</li>
<li>targerusername：留言的目标学生姓名；</li>
<li>WordsFormVisible：留言弹窗是否显示；</li>
<li>tid：当前教师的ID；</li>
<li>coursename：当前选中的课程名称；</li>
<li>EvaluateStuFormVisible：评价学生弹窗是否显示；</li>
<li>NoticeFormVisible：发送通知弹窗是否显示；</li>
<li>noticecontent：通知内容；</li>
<li>headerbg：页面头部背景样式；</li>
<li>dialogFormVisible：查看学生信息弹窗是否显示；</li>
<li>user：当前登录的用户信息。</li>
</ul>
<ol start="2">
<li>页面结构部分：</li>
</ol>
<p>template中定义了该页面的结构和布局，主要包括：</p>
<ul>
<li>搜索框：包括学生姓名和搜索按钮；</li>
<li>表格：包括多选、学生姓名、学校、班级、电话、电子邮箱和操作列；</li>
<li>分页：包括每页显示数量、页码和跳转等组件。</li>
</ul>
<ol start="3">
<li>方法部分：</li>
</ol>
<p>methods中定义了该页面需要用到的所有方法，例如：</p>
<ul>
<li>handleDetail：查看学生信息弹窗；</li>
<li>toEL：评价学生；</li>
<li>load：加载表格数据；</li>
<li>toWord：留言；</li>
<li>getWord：获取留言列表；</li>
<li>handleWord：查看留言弹窗；</li>
<li>toggleSelection：多选表格中的学生；</li>
<li>handleSelectionChange：选中表格中的学生；</li>
<li>changeCourse：选择课程；</li>
<li>handleSizeChange：改变每页显示数量；</li>
<li>handleCurrentChange：改变页码；</li>
<li>sendEmail：发送邮件提醒；</li>
<li>sendNotice：发送通知；</li>
<li>handleNotice：显示发送通知弹窗；</li>
<li>getTeacherCourse：获取当前教师的授课课程列表；</li>
<li>handleComment：评价学生；</li>
<li>reset：重置搜索条件。</li>
</ul>
<ol start="4">
<li>样式部分：</li>
</ol>
<p>style中定义了该页面的样式，例如页面头部的背景颜色、学生头像的圆角等。</p>
原文地址: https://www.cveoy.top/t/topic/oVp2 著作权归作者所有。请勿转载和采集!