<template><div><!--表单start--><el-form :inline="true" :model="studentVo"size="mini"><el-form-itemlabel="班级"><el-selectv-model="studentVo.cid"placeholder="请选择班级"clearable><el-optionv-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-itemlabel="姓名"><el-inputv-model="studentVo.sname"placeholder="请输入姓名"clearable></el-input></el-form-item><el-form-itemlabel="年龄"><el-col :span="11"><el-inputv-model="studentVo.startAge"placeholder="请输入开始年龄"clearable></el-input></el-col><el-colclass="line" :span="2">-</el-col><el-col :span="11"><el-inputv-model="studentVo.endAge"placeholder="请输入结束年龄"clearable></el-input></el-col></el-form-item><el-form-item><el-buttontype="primary"@click="condition(1)">查询</el-button></el-form-item></el-form><!--表单end--><el-buttontype="primary"@click="openAddDialog">添加</el-button><!--添加的弹出框start--><el-dialogtitle="添加学生" :visible.sync="addStudentDialogVisible"><el-form :model="student"label-width="80px"><el-form-itemlabel="班级列表"><el-selectv-model="student.cid"placeholder="请选择班级"><el-optionv-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-itemlabel="id"><el-inputv-model="student.sid"></el-input></el-form-item><el-form-itemlabel="名称"><el-inputv-model="student.sname"></el-input></el-form-item><el-form-itemlabel="生日"><el-date-pickertype="date"placeholder="选择生日"v-model="student.birthday"style="width: 100%;"></el-date-picker></el-form-item><el-form-itemlabel="年龄"><el-inputv-model="student.age"></el-input></el-form-item><el-form-itemlabel="性别"><el-radio-groupv-model="student.gender"><el-radiolabel="1">男</el-radio><el-radiolabel="0">女</el-radio></el-radio-group></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-button@click="addStudentDialogVisible = false">取消</el-button><el-buttontype="primary"@click="addStudent">确定</el-button></div></el-dialog><!--添加的弹出框end--><!--表格start--><el-table      :data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><templateslot-scope="scope">          {{scope.row.gender==1?"男" : "女"}}
</template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini">编辑</el-button><el-buttonsize="mini"type="danger">删除</el-button></template></el-table-column></el-table><!--表格end--><!--分页条start--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"      :current-page="studentPage.pageNum"      :page-sizes="[1, 2, 3, 5, 10]"      :page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper"      :total="studentPage.total"></el-pagination><!--分页条end--></div></template><script>// 导入axiosimportaxiosfrom'axios'exportdefault {
data() {
return {
studentVo: {    //条件查询      },
studentPage: {    //分页数据pageNum: 1,
pageSize: 3      },
addStudentDialogVisible: false,     //添加弹出框的控制变量student: {        //添加表单对象      },
classesList: [],  // 所有班级    }
  },
methods: {
asynccondition(num) {
if(num) {
this.studentPage.pageNum=num      }
// ajax查询varurl=`http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} =awaitaxios.post(url, this.studentVo)
// 保存结果this.studentPage=baseResult.data    },
handleSelectionChange(val) {
console.info('批量删除')
    },
handleSizeChange(val) {
console.log(`每页${val} 条`);
this.studentPage.pageSize=valthis.studentPage.pageNum=1// 重新开始this.condition()
    },
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.studentPage.pageNum=val// 重新开始this.condition()
    },
asyncselectAllClasses() {
// ajax 查询所有的班级varurl=`http://localhost:8888/classes`let { data: baseResult } =awaitaxios.get(url)
// 保存结果this.classesList=baseResult.data    },
openAddDialog() {
// 打开弹出框this.addStudentDialogVisible=true// 清空表单数据this.student= {}
// 查询班级列表this.selectAllClasses()
    },
asyncaddStudent() {
// 添加学生ajaxvarurl=`http://localhost:8888/student/saveOrUpdate`let { data: baseResult } =awaitaxios.post(url, this.student)
// 处理结果if(baseResult.code==20000) {
// 成功：刷新页面，成功提示，关闭弹出框this.condition()
this.$message.success(baseResult.message)
this.addStudentDialogVisible=false      } else {
// 失败：失败提示this.$message.error(baseResult.message)
      }
    }
  },
mounted() {
// 查询班级this.selectAllClasses()
// 查询学生this.condition()
  },
}
</script><style></style>

<template><div><!--表单start--><el-form :inline="true" :model="studentVo"size="mini"><el-form-itemlabel="班级"><el-selectv-model="studentVo.cid"placeholder="请选择班级"clearable><el-optionv-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-itemlabel="姓名"><el-inputv-model="studentVo.sname"placeholder="请输入姓名"clearable></el-input></el-form-item><el-form-itemlabel="年龄"><el-col :span="11"><el-inputv-model="studentVo.startAge"placeholder="请输入开始年龄"clearable></el-input></el-col><el-colclass="line" :span="2">-</el-col><el-col :span="11"><el-inputv-model="studentVo.endAge"placeholder="请输入结束年龄"clearable></el-input></el-col></el-form-item><el-form-item><el-buttontype="primary"@click="condition(1)">查询</el-button></el-form-item></el-form><!--表单end--><el-buttontype="primary"@click="openAddDialog">添加</el-button><!--添加的弹出框start--><el-dialog :title="dialogTitle" :visible.sync="addStudentDialogVisible"><el-form :model="student"label-width="80px"><el-form-itemlabel="班级列表"><el-selectv-model="student.cid"placeholder="请选择班级"><el-optionv-for="(classes,index) in classesList" :key="index" :label="classes.cname" :value="classes.cid"></el-option></el-select></el-form-item><el-form-itemlabel="id"><el-inputv-model="student.sid"></el-input></el-form-item><el-form-itemlabel="名称"><el-inputv-model="student.sname"></el-input></el-form-item><el-form-itemlabel="生日"><el-date-pickertype="date"placeholder="选择生日"v-model="student.birthday"style="width: 100%;"></el-date-picker></el-form-item><el-form-itemlabel="年龄"><el-inputv-model="student.age"></el-input></el-form-item><el-form-itemlabel="性别"><el-radio-groupv-model="student.gender"><el-radiolabel="1">男</el-radio><el-radiolabel="0">女</el-radio></el-radio-group></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-button@click="addStudentDialogVisible = false">取消</el-button><el-buttontype="primary"@click="addStudent">确定</el-button></div></el-dialog><!--添加的弹出框end--><!--表格start--><el-table      :data="studentPage.list"@selection-change="handleSelectionChange"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="180"></el-table-column><el-table-columnprop="sname"label="姓名"width="180"></el-table-column><el-table-columnprop="cid"label="班级"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"><templateslot-scope="scope">          {{scope.row.gender==1?"男" : "女"}}
</template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="openUpdateDialog(scope.row.sid)">编辑</el-button><el-buttonsize="mini"type="danger">删除</el-button></template></el-table-column></el-table><!--表格end--><!--分页条start--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"      :current-page="studentPage.pageNum"      :page-sizes="[1, 2, 3, 5, 10]"      :page-size="studentPage.pageSize"layout="total, sizes, prev, pager, next, jumper"      :total="studentPage.total"></el-pagination><!--分页条end--></div></template><script>// 导入axiosimportaxiosfrom'axios'exportdefault {
data() {
return {
studentVo: {    //条件查询      },
studentPage: {    //分页数据pageNum: 1,
pageSize: 3      },
addStudentDialogVisible: false,     //添加弹出框的控制变量student: {        //添加表单对象      },
classesList: [],  // 所有班级dialogTitle: '',  // 弹出框的标题    }
  },
methods: {
asynccondition(num) {
if(num) {
this.studentPage.pageNum=num      }
// ajax查询varurl=`http://localhost:8888/student/condition/${this.studentPage.pageSize}/${this.studentPage.pageNum}`let {data:baseResult} =awaitaxios.post(url, this.studentVo)
// 保存结果this.studentPage=baseResult.data    },
handleSelectionChange(val) {
console.info('批量删除')
    },
handleSizeChange(val) {
console.log(`每页${val} 条`);
this.studentPage.pageSize=valthis.studentPage.pageNum=1// 重新开始this.condition()
    },
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.studentPage.pageNum=val// 重新开始this.condition()
    },
asyncselectAllClasses() {
// ajax 查询所有的班级varurl=`http://localhost:8888/classes`let { data: baseResult } =awaitaxios.get(url)
// 保存结果this.classesList=baseResult.data    },
openAddDialog() {
// 设置标题this.dialogTitle='添加学生'// 打开弹出框this.addStudentDialogVisible=true// 清空表单数据this.student= {}
// 查询班级列表this.selectAllClasses()
    },
asyncopenUpdateDialog(sid) {
// 设置标题this.dialogTitle='修改学生'// 通过id查询详情varurl=`http://localhost:8888/student/${sid}`let { data: baseResult } =awaitaxios.get(url)
this.student=baseResult.data// 查询班级列表this.selectAllClasses()
// 打开弹出框this.addStudentDialogVisible=true    },
asyncaddStudent() {
// 添加学生ajaxvarurl=`http://localhost:8888/student/saveOrUpdate`let { data: baseResult } =awaitaxios.post(url, this.student)
// 处理结果if(baseResult.code==20000) {
// 成功：刷新页面，成功提示，关闭弹出框this.condition()
this.$message.success(baseResult.message)
this.addStudentDialogVisible=false      } else {
// 失败：失败提示this.$message.error(baseResult.message)
      }
    }
  },
mounted() {
// 查询班级this.selectAllClasses()
// 查询学生this.condition()
  },
}
</script><style></style>