views
index
<template>
<div class="index-area">
<h1>学生成绩管理系统</h1>
<p>
您好，<span style="color: red;margin-right:7px;font-size: 22px;">{{userName}}</span>
<span style="font-style: italic;font-weight: bold;">欢迎使用</span>
</p>
</div>
</template>
<script>
export default {
name: "Index",
computed:{
userName(){
return this.$store.getters.userInfo.userName;
}
}
}
</script>
<style lang="scss" scoped>
.index-area{
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-70%);
text-align: center;
h1{
font-size: 30px;
font-family: 微软雅黑,Sans-serif,serif;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #cccccc;
}
}
</style>
score
addScore.vue
<template>
<div>
<el-row>
<!--布局，占8列，位移1列 -->
<el-col :span="8" :offset="1">
<el-form
:model="formData"
:rules="rules"
ref="addForm"
label-width="100px"
label-position="left">
<!--
v-for循环
label是下拉框显示的标题
key是索引
value是下拉框的值
-->
<el-form-item label="学生" prop="studentId">
<el-select v-model="formData.studentId">
<el-option
v-for="item in studentList"
:label="item.realName"
:key="item.id"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="考试名称" prop="examName">
<el-input v-model="formData.examName" clearable></el-input>
</el-form-item>
<!--
precision是精度，即小数位
step是步长
min是最小值
max最大值
-->
<el-form-item label="语文" prop="scoreCn">
<el-input-number v-model="formData.scoreCn" :precision="1" :step="0.5" :min="0" :max="150"></el-input-number>
</el-form-item>
<el-form-item label="英语" prop="scoreEn">
<el-input-number v-model="formData.scoreEn" :precision="1" :step="0.5" :min="0" :max="150"></el-input-number>
</el-form-item>
<el-form-item label="数学" prop="scoreMath">
<el-input-number v-model="formData.scoreMath" :precision="1" :step="0.5" :min="0" :max="150"></el-input-number>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="handleClose">关 闭</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "AddScore",
data(){
return {
//表单数据
formData: {
studentId:'',
examName:'',
scoreCn:'',
scoreEn:'',
scoreMath:'',
},
//校验规则
rules:{
studentId: [{ required: true, message: '请选择学生', trigger: 'change'}],
examName: [{ required: true, message: '请输入考试名称', trigger: 'blur'}],
scoreCn: [{ required: true, message: '请输入成绩', trigger: 'blur'}],
scoreEn: [{required: true, message: '请输入成绩', trigger: 'blur'}],
scoreMath: [{required: true, message: '请输入成绩',trigger: 'blur'}]
},
//下拉框数据
studentList:[],
}
},
methods: {
//关闭之前
handleClose(){
//先清空
this.$refs['addForm'].resetFields();
//关闭页签tab
this.$store.dispatch('closeTab',this.$router.currentRoute.path);
//路由跳转
this.$router.replace('/score/manage');
},
//保存
onSubmit(){
this.$refs['addForm'].validate((valid)=>{
if(valid){
//校验通过
this.$appJsonPost({
url:'/score/add',
data: this.formData
}).then(res=>{
//保存完成，先清空
this.$refs['addForm'].resetFields();
//提示
this.$message.success(res.msg);
//路由跳转
this.$router.replace('/score/manage');
}).catch(error=>{});
}
})
},
//获取学生下拉框数据
getStudent(){
this.$doGet({
url:'/student/findAll',
}).then(res=>{
this.studentList = res.data;
});
}
},
created(){
//页面初始化，就调用
this.getStudent();
}
}
</script>
<style scoped>
</style>
scoreHome.vue
<template>
<!-- 子路由 ，路由出口 -->
<router-view/>
</template>
<script>
export default {
name: "ScoreHome"
}
</script>
<style scoped>
</style>
scoreManage.vue
<template>
<div class="score">
<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>
<!-- 布局，占10列 -->
<el-col :span="10">
<!-- model是绑定数据，ref是表单id，inline是行展示 -->
<el-form :model="searchForm" ref="searchForm" :inline="true">
<el-form-item>
<!--
placeholder是占位文字
v-model是数据双向绑定
clear是清除内容触发的事件
keypress是按键事件
native是开启原生事件的关键词
enter是回车事件
clearable是开启输入框右侧关闭清除叉按钮的
-->
<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>
<!-- 表格 -->
<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>
<!-- formatter是对行进行格式化内容的函数 -->
<el-table-column
prop="studentId"
label="学生姓名"
:formatter="format1"
show-overflow-tooltip>
<!-- <template slot-scope="scope">-->
<!-- <span>{{studentList.find((item)=> item.id === scope.row.studentId).realName }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column
prop="examName"
label="考试名称"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="scoreCn"
label="语文"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="scoreEn"
label="英语"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="scoreMath"
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 {mapActions,mapGetters} from 'vuex' //引入vuex函数
import { TOP_HEIGHT } from "@/config/Constants"; //引入常量，
export default {
name: "ScoreManage",
data(){
return {
//表格数据
tableData:{
rows:[],
total:0
},
//表格查询条件
searchForm: {
//当前页
currentPage: 1,
//页条数
pageSize: 10,
//关键字
searchWord:''
},
//表格高度
tableHeight:'',
}
},
computed:{
//使用函数从vuex中获取数据
...mapGetters(['studentList']),
},
methods: {
//使用函数将vuex的方法解析到这里，可以直接调用
...mapActions(['getStudentList']),
//格式内容
// row 行，column是列，cellValue是单元格的数据，index是行索引
format1(row, column, cellValue, index){
//从数据中查找 ，符合条件的，返回该对象
let obj = this.studentList.find((item)=> item.id === cellValue);
//此对象存在，返回值，不存在，返回默认字符串
return obj ? obj.realName : '此学生已删除';
// if(obj){
// return obj.realName;
// }else {
// return '此学生已删除'
// }
},
//当前页变化
handleCurrentChange(val){
this.searchForm.currentPage = val;
//刷新表格数据
this.loadTable();
},
//页数量变化
handleSizeChange(val){
this.searchForm.pageSize = val;
//刷新表格数据
this.loadTable();
},
//删除
handleDelete(row){
//提示框
this.$confirm(`您确定要删除【${row.examName}】吗？`,'删除提示',{
confirmButtonText:'删除',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
//调用删除
this.$doGet({
url:'/score/delete',
params: {'id' : row.id},
}).then(res=>{
//提示删除成功
this.$message.success(res.msg);
//刷新数据
this.loadTable();
})
}).catch(_=>{
this.$message.warning('已取消删除');
})
},
//编辑
handleEdit(row){
//路由 跳转 ，带参数
this.$router.replace({
name:'UpdateScore',
query:{
//接收参数
idToUpdate: row.id,
}
});
},
doSearch(){
//修复bug
this.searchForm.currentPage = 1;
//刷新数据
this.loadTable();
},
addBtn(){
//添加时，跳转路由，打开页签
this.$router.replace('/score/add');
},
loadTable(){
//加载数据
this.$doGet({
url:'/score/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();
//获取学生列表
this.getStudentList();
}
}
</script>
<style lang="scss" scoped>
</style>
UdateScore.vue
<template>
<div>
<el-row>
<!-- 布局，占8列，位移1列 -->
<el-col :span="8" :offset="1">
<el-form
:model="formData"
:rules="rules"
ref="editForm"
label-width="100px"
label-position="left">
<!-- 开始id显示，disabled设置为不可修改 -->
<el-form-item label="ID">
<el-input v-model="formData.id" disabled></el-input>
</el-form-item>
<el-form-item label="学生" prop="studentId">
<el-select v-model="formData.studentId">
<el-option
v-for="item in studentList"
:label="item.realName"
:key="item.id"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="考试名称" prop="examName">
<el-input v-model="formData.examName" clearable></el-input>
</el-form-item>
<el-form-item label="语文" prop="scoreCn">
<el-input-number v-model="formData.scoreCn" :precision="1" :step="0.5" :min="0" :max="150"></el-input-number>
</el-form-item>
<el-form-item label="英语" prop="scoreEn">
<el-input-number v-model="formData.scoreEn" :precision="1" :step="0.5" :min="0" :max="150"></el-input-number>
</el-form-item>
<el-form-item label="数学" prop="scoreMath">
<el-input-number v-model="formData.scoreMath" :precision="1" :step="0.5" :min="0" :max="150"></el-input-number>
</el-form-item>
</el-form>
<div>
<el-button type="primary" @click="onSubmit">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "UpdateScore",
data(){
return {
//表单数据
formData: {
id:'',
studentId:'',
examName:'',
scoreCn:'',
scoreEn:'',
scoreMath:'',
},
//校验规则
rules:{
studentId: [{ required: true, message: '请选择学生', trigger: 'change'}],
examName: [{ required: true, message: '请输入考试名称', trigger: 'blur'}],
scoreCn: [{ required: true, message: '请输入成绩', trigger: 'blur'}],
scoreEn: [{required: true, message: '请输入成绩', trigger: 'blur'}],
scoreMath: [{required: true, message: '请输入成绩',trigger: 'blur'}]
},
//学生下拉框数据
studentList:[],
}
},
computed:{
//计算属性，接收请求路径的参数
idToUpdate(){
return this.$route.query.idToUpdate;
}
},
methods: {
//关闭之前
handleClose(){
//先清空
this.$refs['editForm'].resetFields();
//关闭当前页页签tab
this.$store.dispatch('closeTab',this.$router.currentRoute.path);
//路由跳转
this.$router.replace('/score/manage');
},
//保存
onSubmit(){
this.$refs['editForm'].validate((valid)=>{
if(valid){
//校验通过
this.$appJsonPost({
url:'/score/update',
data: this.formData
}).then(res=>{
//先清空
this.$refs['editForm'].resetFields();
//关闭当前页
this.$store.dispatch('closeTab',this.$router.currentRoute.path);
//提示
this.$message.success(res.msg);
//路由跳转
this.$router.replace('/score/manage');
}).catch(error=>{});
}
})
},
//获取学生列表
getStudent(){
this.$doGet({
url:'/student/findAll',
}).then(res=>{
this.studentList = res.data;
});
},
//通过id获取成绩数据
getData(){
this.$doGet({
url:'/score/findById',
//参数
params: { id : this.idToUpdate }
}).then(res=>{
this.formData = res.data;
});
}
},
created(){
//获取学生列表
this.getStudent();
//获取修改项成绩数据
this.getData();
}
}
</script>
<style scoped>
</style>
