Student
addStudent.vue
<template>
<div>
<!-- 新增对话框 -->
<!--
title是标题
width是宽度
visible是否显示
close-on-click-model，true表示单击框体外侧，自动关闭窗体，非模态 ，false框体一直显示，模态对话框
before-close窗体关闭时事件
-->
<el-dialog
title="新增学生"
width="35%"
:visible="addDialogVisible"
:close-on-click-modal="false"
:before-close="handleClose">
<el-form
:model="formData"
:rules="rules"
ref="addForm"
label-width="100px"
label-position="left">
<el-form-item label="学号" prop="number">
<el-input v-model="formData.number" clearable></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realName">
<el-input v-model="formData.realName" clearable></el-input>
</el-form-item>
<!--
type date 是日期格式
v-model是数据双向绑定
editable开启可编辑模式
prefix-icon前置图标
value-format是数据格式化后的显示内容
-->
<el-form-item label="入学时间" prop="enrollTime">
<el-date-picker
type="date"
v-model="formData.enrollTime"
editable
prefix-icon="el-icon-date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "AddStudent",
data(){
return {
//表单数据
formData: {
number:'',
realName:'',
enrollTime:'',
},
//校验规则
rules:{
number: [{ required: true, message: '请输入学号', trigger: 'blur'}],
realName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
enrollTime: [{required: true, message: '请选择入学时间',trigger: 'blur'}]
}
}
},
props: {
//组件接收参数，用户控制对话框显示
addDialogVisible: {
type : Boolean, //类型
default: false, //默认值
}
},
methods: {
//关闭之前
handleClose(){
//先清空
this.$refs['addForm'].resetFields();
//子传父，提示关闭对话框
this.$emit('update:addDialogVisible',false);
},
//保存
onSubmit(){
this.$refs['addForm'].validate((valid)=>{
if(valid){
//校验通过
this.$appJsonPost({
url:'/student/add',
data: this.formData
}).then(res=>{
//清空
this.$refs['addForm'].resetFields();
//子传父，提示保存成功，刷新页面数据
this.$emit('addSuccess');
//提示
this.$message.success(res.msg);
}).catch(error=>{});
}
})
}
}
}
</script>
<style scoped>
</style>
StudentHome.vue
<template>
<!-- 子路由，路由出口 -->
<router-view/>
</template>
<script>
export default {
name: "StudentHome"
}
</script>
<style scoped>
</style>
StudentManage.vue
<template>
<div class="student">
<section class="search-area">
<el-row>
<!-- 布局，占2列-->
<el-col :span="2">
<el-button type="primary" icon="el-icon-plus" @click="addBtn">新增</el-button>
</el-col>
<el-col :span="10">
<el-form :model="searchForm" ref="searchForm" :inline="true">
<el-form-item>
<el-input
placeholder="请输入学生姓名模糊检索"
v-model="searchForm.searchWord"
@clear="doSearch"
@keypress.native.enter="doSearch"
clearable></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="doSearch">搜索</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</section>
<!-- 新增学生 -->
<!--
addDialogVisible是控制对话框显示的变量，
sync是简写方式
addSuccess是保存成功的事件
-->
<add-student :addDialogVisible.sync ="addDialogVisible" @addSuccess="addSuccess"/>
<!--编辑学生-->
<!--
:idToUpdate是修改项的id值
-->
<update-student :editDialogVisible.sync ="editDialogVisible" :idToUpdate="idToUpdate" @editSuccess="editSuccess"/>
<!-- 表格 -->
<section>
<!--
data是数据
border是边框
height是表格高度
size是控件尺寸
-->
<el-table
:data="tableData.rows"
border
:height="tableHeight"
size="mini"
style="width: 100%">
<el-table-column
prop="id"
label="ID"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="number"
label="学号"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="realName"
label="姓名"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="enrollTime"
label="入学时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</section>
<!-- 分页 -->
<section>
<!-- 分页控件
size-change是页条数发生变化
current-change是当前页发生变化
current-page是当前页
page-size是页条数
layout是功能按钮
total是总条数
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="searchForm.currentPage"
:page-sizes="[2, 5, 10, 20, 50, 100]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.total">
</el-pagination>
</section>
</div>
</template>
<script>
import AddStudent from "@/views/Student/AddStudent"; //引入添加组件
import UpdateStudent from "@/views/Student/UpdateStudent"; //引入修改组件
import { TOP_HEIGHT} from "@/config/Constants"; //引入常量
export default {
name: "StudentManage",
//局部注册
components: {
AddStudent,
UpdateStudent,
},
data(){
return {
//表格数据
tableData:{
rows:[],
total:0
},
//新增对话框
addDialogVisible: false,
//编辑对话框
editDialogVisible: false,
//表格查询条件
searchForm: {
currentPage: 1, //当前页
pageSize: 10, //页条数
searchWord:'' //关键词
},
//编辑时，传递的id
idToUpdate: -1,
//表格高度
tableHeight: '',
}
},
methods: {
//当前页变化
handleCurrentChange(val){
this.searchForm.currentPage = val;
//刷新数据
this.loadTable();
},
//页数量变化
handleSizeChange(val){
this.searchForm.pageSize = val;
//刷新数据
this.loadTable();
},
//删除
handleDelete(row){
//提示框
this.$confirm(`您确定要删除【${row.realName}】吗？`,'删除提示',{
confirmButtonText:'删除',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
//调用删除
this.$doGet({
url:'/student/delete',
params: {'id' : row.id},
}).then(res=>{
//提示
this.$message.success(res.msg);
//刷新数据
this.loadTable();
})
}).catch(_=>{
//点击取消时
this.$message.warning('已取消删除');
})
},
//编辑
handleEdit(row){
//传递id值
this.idToUpdate = row.id;
//打开对话框
this.editDialogVisible = true;
},
//搜索
doSearch(){
//修复bug
this.searchForm.currentPage = 1;
//刷新数据
this.loadTable();
},
//添加按钮
addBtn(){
//打开对话框
this.addDialogVisible = true;
},
//新增成功
addSuccess(){
//关闭对话框
this.addDialogVisible = false;
//加载表格数据
this.loadTable();
},
//更新成功
editSuccess(){
//关闭对话框
this.editDialogVisible = false;
//加载表格数据
this.loadTable();
},
//加载数据
loadTable(){
this.$doGet({
url:'/student/pageList',
params: this.searchForm
}).then(res => {
this.tableData.rows = res.data.content; //数据
this.tableData.total = res.data.total; //总条数
this.searchForm.currentPage = res.data.currentPage; //当前页
this.searchForm.pageSize = res.data.pageSize; //页条数
})
}
},
created(){
//计算表格高度
this.$nextTick(()=>{
this.tableHeight = window.innerHeight - TOP_HEIGHT;
});
//获取数据
this.loadTable();
}
}
</script>
<style lang="scss" scoped>
</style>
UpdateStudent.vue
<template>
<div>
<!-- 编辑对话框 -->
<!--
open是打开对话框的事件，可以加载数据
-->
<el-dialog
title="编辑学生"
width="35%"
:visible="editDialogVisible"
:close-on-click-modal="false"
:before-close="handleClose"
@open="getData">
<el-form
:model="formData"
:rules="rules"
ref="editForm"
label-width="100px"
label-position="left">
<!-- 开启id，不可编辑 -->
<el-form-item label="ID">
<el-input v-model="formData.id" disabled></el-input>
</el-form-item>
<el-form-item label="学号" prop="number">
<el-input v-model="formData.number" clearable></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realName">
<el-input v-model="formData.realName" clearable></el-input>
</el-form-item>
<el-form-item label="入学时间" prop="enrollTime">
<el-date-picker
type="date"
v-model="formData.enrollTime"
editable
prefix-icon="el-icon-date"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "UpdateStudent",
data(){
return {
//表单数据
formData: {
id:'',
number:'',
realName:'',
enrollTime:'',
},
//校验规则
rules:{
number: [{ required: true, message: '请输入学号', trigger: 'blur'}],
realName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
enrollTime: [{required: true, message: '请选择入学时间',trigger: 'blur'}]
}
}
},
props: {
//接收参数
editDialogVisible: {
type : Boolean, //类型
default: false, //默认值
},
//接收参数
idToUpdate: {
type: Number, //类型
required: true //必填
}
},
methods: {
//关闭之前
handleClose(){
//先清空
this.$refs['editForm'].resetFields();
//子传父，关闭对话框
this.$emit('update:editDialogVisible',false);
},
//保存
onSubmit(){
this.$refs['editForm'].validate((valid)=>{
if(valid){
//校验通过
this.$appJsonPost({
url:'/student/update',
data: this.formData
}).then(res=>{
//清空
this.$refs['editForm'].resetFields();
//子传父，提示更新成功，刷新数据
this.$emit('editSuccess');
//提示
this.$message.success(res.msg);
}).catch(error=>{});
}
})
},
//通过id获取学生数据
getData(){
this.$doGet({
url: '/student/findById',
params: { 'id' : this.idToUpdate }
}).then(res => {
this.formData = res.data;
});
}
}
}
</script>
<style scoped>
</style>
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
