在线选课系统 - 课程列表
<template>
<div>
<div style='margin-bottom:20px;'>
<el-input
style='width: 200px'
suffix-icon='el-icon-search'
placeholder='请输入课程名称'
v-model='lessonname'
></el-input>
<el-button class='ml-5' type='primary' icon='el-icon-search' @click='load' >搜索</el-button>
<el-button type='warning' @click='reset' icon='el-icon-refresh-right'>重置</el-button>
<!-- <el-button @click='AddLesson()' icon='el-icon-plus' style='background-color:#327790; color:white'>添加课程</el-button> -->
</div>
<pre><code><el-table
:data='tableData'
border
stripe
style='font-weight:500;font-size:14px;'
>
<el-table-column prop='lessonname' label='课程名'>
</el-table-column>
<el-table-column prop='location' label='上课地点'>
</el-table-column>
<el-table-column prop='lessontime' label='上课时间'></el-table-column>
<el-table-column label='操作' align=center>
<template slot-scope='scope'>
<el-button type='success' @click='handleDetail(scope.row)'>课表详情</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title='课程详情' :visible.sync='dialogFormVisible' width='30%'>
<el-form label-width='70px'>
<div><p>课程名字：{{form.lessonname}}</p></div><br>
<div><p>上课地点：{{form.location}}</p></div><br>
<div><p>上课时间：{{form.lessontime}}</p></div><br>
<!-- <div><p>任课老师：{{user.nickname}}</p></div><br> -->
<div><p>上课人数：{{form.total}}</p></div><br>
</el-form>
<div slot='footer' class='dialog-footer'>
<el-button @click='dialogFormVisible = false' type='primary'>确 定</el-button>
<!-- <el-button type='primary' @click='save'>确 定</el-button> -->
</div>
</el-dialog>
<el-dialog title='添加课程' :visible.sync='addFormVisible' width='50%'>
<el-form label-width='70px'>
<el-form-item label='课程名' >
<el-input v-model='form.lessonname' autocomplete='off'></el-input>
</el-form-item>
<el-form-item label='上课地点'>
<el-select v-model='location' placeholder='请选择' size='small'>
<el-option
v-for='item in locations'
:key='item.value'
:label='item.label'
:value='item.value'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label='上课时间'>
<el-select v-model='lessontime' placeholder='请选择' size='small'>
<el-option
v-for='item in times'
:key='item.value'
:label='item.label'
:value='item.value'>
</el-option>
</el-select>
</el-form-item>
<el-form-item label='工号' >
<el-input v-model='form.id' autocomplete='off' disabled='disabled'></el-input>
</el-form-item>
</el-form>
<div slot='footer' class='dialog-footer'>
<el-button @click='saveLesson()' type='primary'>确 定</el-button>
<!-- <el-button type='primary' @click='save'>确 定</el-button> -->
</div>
</el-dialog>
<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>
</code></pre>
</div>
</template>
<script>
export default {
name:'Chooselesson',
data(){
return{
tableData: [],
total:0,
slesson:{},
pageNum:1,
pageSize:10,
lessonname:'',
form:{},
words:[],
headerbg:'headerbg',
WordsFormVisible:false,
dialogFormVisible:false,
addFormVisible:false,
location:'',
lessontime:'',
locations: [{
value: 'C7',
label: 'C7'
}, {
value: 'C8',
label: 'C8'
}, {
value: '体育馆',
label: '体育馆'
}, {
value: '足球场',
label: '足球场'
}, {
value: '羽毛球馆',
label: '羽毛球馆'
}],
times: [{
value: '周一 3、4节',
label: '周一 3、4节'
}, {
value: '周二 3、4节',
label: '周二 3、4节'
}, {
value: '周三 1、2节',
label: '周三 1、2节'
}, {
value: '周三 3、4节',
label: '周三 3、4节'
}, {
value: '周四3、4节',
label: '周四3、4节'
}],
value: '',
user:localStorage.getItem('user')?JSON.parse(localStorage.getItem('user')):{}
}
},
created(){
this.load()
// this.getSelectedList()
},
methods:{
seeCourseComment(row){
this.WordsFormVisible=true
this.request.post('/sysLessonComment/getCommentLessonList',{
current:this.pageNum,
size:500,
lid:row.id
}).then(res =>{
console.log(res)
this.words = res.data.records
})
},
load(){
this.request.post('/manage/getTeachLessonList2',{
current:this.pageNum,
size:this.pageSize,
lessonname:this.lessonname
}).then(res =>{
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
// console.log(res.records)
})
},
handleDetail(row){
this.form=row
this.dialogFormVisible=true
},
AddLesson(){
this.request.get('/user/username/'+this.user.username).then(res =>{
// console.log('-------------'+this.user.username)
if(res.code ==='200'){
this.form = res.data
// console.log(this.form.nickname)
}
})
this.addFormVisible = true
},
saveLesson(){
let item = {
lessonname:this.form.lessonname,
location:this.location,
lessontime:this.lessontime,
price:2000,
introduce:'好课',
tid:this.form.id,
capacity:50,
total:50
}
this.request.post('/addlesson',item).then(res => {
if(res.data){
this.$message.success('添加成功')
console.log(res.data)
this.load()
}else{
this.$message.error(res.message)
}
})
this.addFormVisible = false
},
handleSizeChange(pageSize) {
// console.log(`每页 ${val} 条`);
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
// console.log(`当前页: ${val}`);
this.pageNum = pageNum
this.load()
},
reset(){
this.lessonname = '',
this.load()
},
}
}
</script>
<style>
.list{
height: 300px;
overflow:auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+, edge */
}
.list::-webkit-scrollbar {
display: none;
}
.userInfo{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-top: 30px;
}
.userInfo div{
margin-left: 9px;
}
.username{
font-weight: 500;
font-size: 18px;
}
.teachertype{
padding: 0 15px;
border: darkorange 1px solid;
font-size: 12px;
border-radius: 12px;
color:darkorange ;
}
.time{
font-size: 12px;
color: #8C939D;;
}
.content{
margin-left: 8%;
margin-top: 10px;
}
.img img{
width: 35px;
height: 35px;
border-radius: 50%;
}
.headerbg {
background-color: #eee !important;
}
</style>
<p>写一份代码说明书</p>
<p>内容：本代码为一个选课系统的前端代码，使用了Element UI框架进行开发。</p>
<p>整体结构分为三个部分：</p>
<p>1.搜索栏：包含了一个输入框和两个按钮，分别用于搜索和重置操作。</p>
<p>2.课程列表：包含了一个表格，显示了所有的课程信息，其中包含了课程名、上课地点、上课时间和操作四列。</p>
<p>3.分页器：用于控制表格的分页操作，包含了当前页数、每页显示数量、总数量和页面跳转等操作。</p>
<p>具体实现细节如下：</p>
<p>1.搜索栏：</p>
<p>在搜索栏中，我们使用了Element UI的Input和Button组件，其中Input组件用于输入搜索关键词，Button组件则分别对应了“搜索”和“重置”操作。</p>
<p>在搜索操作中，我们通过调用load()方法，向后台发送请求获取符合条件的课程信息，并将其渲染到表格中。</p>
<p>在重置操作中，我们通过将搜索关键词置为空，并调用load()方法，重新加载所有的课程信息。</p>
<p>2.课程列表：</p>
<p>在课程列表中，我们使用了Element UI的Table和TableColumn组件，分别用于渲染表格和表头信息。</p>
<p>在表格中，我们通过v-for指令和tableData数组，将所有的课程信息渲染到表格中。</p>
<p>在操作列中，我们使用了Element UI的Button组件，其中handleDetail()方法用于展示当前课程的详情信息。</p>
<p>3.分页器：</p>
<p>在分页器中，我们使用了Element UI的Pagination组件，用于控制表格的分页操作。</p>
<p>在分页器的事件中，我们通过handleSizeChange()和handleCurrentChange()方法，分别处理了每页显示数量和当前页数的改变。</p>
<p>完整代码如下：</p>
原文地址: https://www.cveoy.top/t/topic/oVjw 著作权归作者所有。请勿转载和采集!