<template>
<div>
<h3>我的授课课程</h3>
<!--面包屑导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>课程管理</el-breadcrumb-item>
<el-breadcrumb-item>授课课程</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索与添加区域 -->
<!-- :gutter="20"两个row之间的距离 -->
<el-row :gutter="20">
<!-- 总共是24份,:span="7"是占据7份 -->
<el-col :span="8">
<!-- 查询条件 -->
<el-input placeholder="请输入内容" v-model="queryInfo.condition" clearable @clear="getUserList">
<template #append>
<!-- 查询用户 -->
<el-button icon="el-icon-search" @click="getUserList"></el-button>
</template>
</el-input>
</el-col>
<!-- 占据4份 -->
<el-col :span="4">
<!-- 添加用户按钮-->
<el-button type="primary" @click="addDialogVisible = true">添加课程</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<!-- :data="userlist"设置数据源 border添加边框线 stripe隔行变色 -->
<el-table :data="courselist" border stripe>
<!-- type="index"表示本行是索引列 -->
<el-table-column type="index"></el-table-column>
<!-- 每一列的数据 prop是设置数据源的字段-->
<el-table-column label="课程ID" prop="课程ID"></el-table-column>
<el-table-column label="教学班级" prop="教学班级"></el-table-column>
<el-table-column label="课程名" prop="课程名"></el-table-column>
<el-table-column label="授课教师" prop="授课教师"></el-table-column>
<el-table-column label="课程状态">
<!-- 如果同时给这一行指定了作用域插槽,那么这一行的prop="mg_state"就会被覆盖,所以就可以删了 -->
<template v-slot="slotProps">
<!-- slotProps.row就是当前这一行的数据 -->
<!-- 这里不用父组件对子组件的内容进行加工,所以不用在子组件中写<slot :info='item'>我是默认内容</slot> -->
<el-switch v-model="slotProps.row.开课状态==1" @change="userStageChanged(slotProps.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template v-slot="slotProps">
{{slotProps.row.mg_state ? "" : ""}}
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(slotProps.row)"></el-button>
<!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCourseById(slotProps.row.课程ID)"></el-button>
<!-- 分配角色按钮 -->
<!-- effect="dark"设置的没有效果,不知道为啥,以后解决!!!!!!!!!! -->
<!-- :enterable="false"设置鼠标进入的时候也会自动隐藏,否则鼠标放上去会一直显示 -->
<el-tooltip effect="dark" content="发起签到" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(slotProps.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<!-- 添加用户的对话框 -->
<el-dialog title="添加课程" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<!-- 内容主体区域表单 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<!-- 通过prop="username"指定具体的校验规则 -->
<el-form-item label="课程名" prop="coursename">
<el-input v-model="addForm.coursename"></el-input>
</el-form-item>
<el-form-item label="授课教师">
<el-input v-model="addForm.teacher" readonly="readonly" ></el-input>
</el-form-item>
<el-col :span="12">
<el-form-item label="教学班级">
<el-select v-model="addForm.class" clearable placeholder="请选择班级">
<el-option v-for="(item,index) in classlist" :key="index" :label="item.班级" :value="item.班级"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开课状态">
<el-select v-model="addForm.isopenstu" clearable placeholder="请选择班级状态">
<el-option label="暂不开课" :value="0"></el-option>
<el-option label="立即开课" :value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
<!-- 底部区域 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCourse">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 修改课程的对话框 -->
<el-dialog title="修改课程" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
<!-- 内容主体区域表单 -->
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="课程ID" >
<el-input v-model="editForm.classid" disabled></el-input>
</el-form-item>
<el-form-item label="课程名" prop="coursename">
<el-input v-model="editForm.coursename" ></el-input>
</el-form-item>
<el-form-item label="授课教师">
<el-input v-model="editForm.teacher" disabled></el-input>
</el-form-item>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="教学班级">-->
<!-- <el-select v-model="editForm.class" clearable placeholder="请选择班级">-->
<!-- <el-option v-for="(item,index) in classlist" :key="index" :label="item.班级" :value="item.班级"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-form-item label="教学班级">
<el-input v-model="editForm.class" disabled></el-input>
</el-form-item>
<el-col :span="12">
<el-form-item label="开课状态">
<el-select v-model="editForm.isopenstu" clearable placeholder="请选择班级状态">
<el-option label="暂不开课" :value="0"></el-option>
<el-option label="立即开课" :value="1"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
<!-- 底部区域 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editCourseInfo">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// 获取用户列表的参数对象
queryInfo: {
condition: '',
// 当前的页数
pagenum: 1,
// 当前页显示多少条
pagesize: 5
},
// 课程列表
courselist: [],
user:"",
// 总条数
total: 0,
// 班级列表
classlist: [],
// 添加用户对话框的显示和隐藏
addDialogVisible: false,
// 添加用户的表单数据对象
addForm: {
coursename: '',
teacher: '',
class: '',
isopenstu: 1
},
// 添加用户表单的验证规则对象
addFormRules: {
coursename: [
{ required: true, message: '请输入课程名', trigger: 'blur' },
{ min: 3, max: 10, message: '课程名的长度在3-10个字符之间', trigger: 'blur' }
],
isopenstu: [
{ required: true, message: '请选择课程状态', trigger: 'blur' },
{ min: 0, max: 1, message: '必须选择一个', trigger: 'blur' }
],
// mobile: [
// { required: true, message: '请输入手机', trigger: 'blur' },
// { validator: checkMobile, trigger: 'blur' }
// ]
},
// 修改用户对话框的显示和隐藏
editDialogVisible: false,
// 修改用户的表单数据对象
editForm: {
classid:null,
coursename: '',
teacher: '',
class: '',
isopenstu: 1
},
// 修改用户表单的验证规则对象
editFormRules: {
coursename: [
{ required: true, message: '请输入课程名', trigger: 'blur' },
{ min: 3, max: 10, message: '课程名的长度在3-10个字符之间', trigger: 'blur' }
],
// mobile: [
// { required: true, message: '请输入手机', trigger: 'blur' },
// { validator: checkMobile, trigger: 'blur' }
// ]
},
}
},
created() {
this.getUserList()
this.user=window.sessionStorage.getItem('user');
this.addForm.teacher=window.sessionStorage.getItem('user');
},
computed:{
thiscondition:function () {
var s = this.queryInfo.condition;
console.log(s)
if (s==""){
this.getUserList()
}
return s;
}
},
methods:{
//获取授课课程
async getUserList() {
var nam=window.sessionStorage.getItem('user')
const { data: res } = await this.$http.get('StuUser/Mycourse',
{params:{name:nam,pagenum:this.queryInfo.pagenum,
pagesize:this.queryInfo.pagesize,condition:this.queryInfo.condition}})
const { data: cla } = await this.$http.get('StuUser/class')
if (res.code !== 200) return this.$message.error('暂无符合条件的课程')
if (cla.code !== 200) return this.$message.error('班级搜索失败')
this.courselist = res.data;
this.classlist = cla.class;
this.total = res.total; //条数
console.log(cla.class)
},
// 监听分页size改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize // 当前页显示多少条
// 重新请求数据
this.getUserList()
},
// 监听页码值改变
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage // 当前的页数
// 重新请求数据
this.getUserList()
},
// 监听课程状态的改变
async userStageChanged(userInfo) {
console.log(userInfo)
userInfo.开课状态 = (userInfo.开课状态==1)?0:1;
const { data: res } = await this.$http.put(`StuUser/${userInfo.课程ID}`,{"status":userInfo.开课状态});
console.log(res)
if (res.code !== 200) {
userInfo.开课状态 = (userInfo.开课状态===1)?0:1;
return this.$message.error('课程状态更新失败')
}
this.$message.success('课程状态更新成功')
},
// 监听添加课程对话框关闭事件
addDialogClosed() {
// 重置对话框
this.$refs.addFormRef.resetFields()
},
// 点击按钮,添加用户
addCourse() {
this.$refs.addFormRef.validate(async valid => {
// 校验成功
if (valid) {
console.log(this.addForm.coursename)
const { data: res } = await this.$http.post('StuUser/addCourse',this.addForm);
console.log(res)
if (res.code !== 200) {
this.$message.error('添加课程失败')
}
this.$message.success('添加课程成功')
// 隐藏对话框
this.addDialogVisible = false
// 刷新
this.getUserList()
}
})
},
// 展示修改用户信息的对话框
async showEditDialog(data) {
console.log(data)
this.editForm['classid']=data['课程ID']
this.editForm['coursename']=data['课程名']
this.editForm['teacher']=data['授课教师']
this.editForm['class']=data['教学班级']
this.editForm['isopenstu']=data['开课状态']
console.log(this.editForm)
this.$message.success('请修改课程信息')
this.editDialogVisible = true
},
// 编辑对话框的关闭操作
editDialogClosed() {
this.$refs.editFormRef.resetFields()
},
// 修改课程信息提交
editCourseInfo() {
this.$refs.editFormRef.validate(async valid => {
// console.log(valid)
if (valid) {
// 发起修改用户信息的请求
console.log(this.editForm.isopenstu)
const { data: res } = await this.$http.put(`StuUser/upCourse/${this.editForm.classid}`,
{"status":this.editForm.isopenstu,"coursename":this.editForm.coursename});
// const { data: res } = await this.$http.get('Cuser/upCourse',{params:this.editForm})
if (res.code !== 200) {
return this.$message.error('更新课程信息失败')
}
this.editDialogVisible = false
this.getUserList()
this.$message.success('更新课程信息成功')
}
})
},
// 根据id删除用户信息
async removeCourseById(id) {
// console.log(id)
// 需要挂载ElMessageBox.confirm才可以这样使用
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// 如果删除成功,则返回字符串confirm,如果取消了,则一定要捕获错误,然后取消之后返回字符串cancel
// console.log(confirmResult)
if (confirmResult !== 'confirm') {
return this.$message.info('已经取消了删除')
}
// const { data: res } = await this.$http.post('/StuUser?id=' + id)
// const { data: res } = await this.$http.post('/StuUser/' + id)
const { data: res } = await this.$http.delete('/StuUser/' + id)
console.log(res)
if (res.code !== 200) {
return this.$message.err('删除课程失败')
}
this.$message.success('删除课程成功')
this.getUserList()
},
}
}
</script>
<style scoped>
</style>
function errorReturn(msg){
var m = "网络异常，请重新尝试";
if(msg){
m = msg;
}
//弹出消息 2秒后关闭
layer.msg(m,{
time:2000
},function(){
//关闭当前窗体
parent.layer.close(parent.layer.getFrameIndex(window.name));
})
}
var form; //全局存放一个叫form的组件
$(document).ready(function(){
form = layui.form;
/**
* 初始化数据设置
*/
var load = layer.load(2); // 2号样式
$.ajax({
url:config.url + "/back/adminType/getAdminTypeData",
data:{
key:"typeId"
},
async:false,
success:function(res){
console.log(res);
//请求成功
if(res.state == 'ok'){
var list = res.data;
$.each(list,function(index,item){
$("[name='typeId']").append("<option value='"+item.typeId+"'>"+item.roleName+"</option>");
form.render("select"); //手动刷新渲染
})
}else if(res.state == 'fail'){
//请求失败
errorReturn(res.msg);
}
},error:function(){
//网络错误 关闭当前窗体
errorReturn();
}
})
$.ajax({
url:config.url + "/statedata/getStateDataByKey",
data:{
key:"adminStatus"
},
async:false,
success:function(res){
// console.log(res);
//请求成功
if(res.state == 'ok'){
var list = res.data;
for(var i=0;i<list.length;i++){
$(".adminStatus").append("<input type='radio' name='adminStatus' value='"+list[i].valueId+"' title='"+list[i].value+"' />");
$("[name='adminStatus']:first").prop("checked",true)
form.render("radio"); //手动刷新渲染
}
layer.close(load); //关闭加载框
}else if(res.state == 'fail'){
//请求失败
errorReturn(res.msg);
}
},error:function(){
//网络错误 关闭当前窗体
errorReturn();
}
})
// 性别
$.ajax({
url:config.url + "/statedata/getStateDataByKey",
data:{
key:"sex"
},
async:false,
success:function(res){
// console.log(res);
//请求成功
if(res.state == 'ok'){
var list = res.data;
for(var i=0;i<list.length;i++){
$("[name='sex']").append("<option value='"+list[i].valueId+"'>"+list[i].value+"</option>")
}
form.render("select")
layer.close(load); //关闭加载框
}else if(res.state == 'fail'){
//请求失败
errorReturn(res.msg);
}
},error:function(){
//网络错误 关闭当前窗体
errorReturn();
}
})
/**
* 校验功能设置
*/
form.verify({
adminName:function(value){
if(value.length >12 || value.length <4){
return "用户名长度需在4-12位之间";
}
//TODO 用户名重复性校验
var load = layer.load(2); // 2号加在样式
var flag = false;
var msg = "";
$.ajax({
url:config.url + "/back/admin/checkAdminName",
data:{
adminName:value
},
async:false,
success:function(res){
layer.close(load); //关闭加载框
// console.log(res);
//请求成功
if(res.state == 'ok'){
}else if(res.state == 'fail'){
flag = true;
msg = res.msg;
}
},error:function(){
//网络错误 关闭当前窗体
errorReturn();
}
});
if(flag){
return msg;
}
},
pwd:function(value){
if(value.length >12 || value.length <4){
return "密码长度需在4-12位之间";
}
var pwd = $("[name='pwd']").val();
var pwdAgain = $("[name='pwdAgain']").val();
if(pwd != pwdAgain){
return "两次密码输入不一致";
}
}
})
/**
* 提交功能
*/
form.on("submit(add)",function(obj){
console.log(obj);
//TODO adjax里关闭窗体
//TODO 提交obj.field即可
var load = layer.load(2); // 2号加在样式
$.ajax({
url:config.url + "/back/admin/add",
data:obj.field,
async:false,
success:function(res){
//请求成功
if(res.state == 'ok'){
layer.msg(res.msg,{
time:1500
},function(){
//关闭当前窗体
parent.layer.close(parent.layer.getFrameIndex(window.name));
//TODO 调用表格刷新
parent.table.reload("list");
})
}else if(res.state == 'fail'){
layer.msg(res.msg);
layer.close(load);
}
},error:function(){
//网络错误 关闭当前窗体
errorReturn();
}
});
return false;
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel='stylesheet' href='../../lib/layui/css/layui.css'>
</head>
<body style="padding: 20px 40px 0 0">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 用户名</label>
<div class="layui-input-block">
<input type="text" name="adminName" required lay-verify="required|adminName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 身份证号</label>
<div class="layui-input-block">
<input type="text" name="idCard" required lay-verify="required|idCard|identity" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 手机号</label>
<div class="layui-input-block">
<input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 密码</label>
<div class="layui-input-block">
<input type="password" name="pwd" required lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 确认密码</label>
<div class="layui-input-block">
<input type="password" name="pwdAgain" required lay-verify="required|pwd" placeholder="请再次密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 状态</label>
<div class="layui-input-block adminStatus">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 性别</label>
<div class="layui-input-block">
<select name="sex" lay-verify="required" >
<option value="">未选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red;">*</span> 权限</label>
<div class="layui-input-block">
<select name="typeId" lay-verify="required" >
<option value="">未选择</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="mark" placeholder="请输入备注" lay-verify="mark"></textarea>
</div>
</div>
<div class="layui-form-item" style="display:none">
<label class="layui-form-label">isdel</label>
<div class="layui-input-block">
<!-- <input style="display:none" type="text" name="announcementId"> -->
<input disabled type="number" name="isdel" value="0">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="add">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
<script src="../config.js"></script>
<script src='../../lib/jquery.js'></script>
<script src='../../lib/layui/layui.js'></script>
<script src='js/add.js'></script>
</html>
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
