531 lines
21 KiB
JavaScript
Executable File
531 lines
21 KiB
JavaScript
Executable File
const app = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
// 校验学号是否存在
|
||
const rulesSno = (rule, value, callback) => {
|
||
if (this.isEdit) {
|
||
callback();
|
||
}
|
||
// 使用 Axios 进行校验
|
||
axios
|
||
.post(
|
||
this.baseURL + 'sno/check/',
|
||
{
|
||
sno: value,
|
||
}
|
||
)
|
||
.then((res) => {
|
||
if (res.data.code === 1) {
|
||
// 请求成功
|
||
if (res.data.exists) {
|
||
callback(new Error("学号已存在"));
|
||
} else {
|
||
callback();
|
||
};
|
||
} else {
|
||
// 请求失败
|
||
callback(new Error("校验学号后端出现异常"));
|
||
};
|
||
})
|
||
.catch((err) => {
|
||
// 如果请求失败在控制台打印
|
||
console.log(err);
|
||
})
|
||
}
|
||
return {
|
||
students: [], // 所有学生信息
|
||
pageStudents: [], // 分页后当前页的学生信息
|
||
// baseURL: "http://172.29.89.96/",
|
||
baseURL: window.location.origin + '/', // 动态获取请求的url
|
||
inputStr: '', // 输入查询的关键字
|
||
selectStudents: [], // 选择复选框时把选择记录存在此集合
|
||
|
||
// === 分页相关的变量 ===
|
||
total: 0, // 数据总行数
|
||
currentpage: 1, // 当前所在的页
|
||
pagesize: 10, // 每页显示多少行
|
||
// === 弹出框表单 ===
|
||
dialogVisible: false, // 默认为不弹出状态
|
||
dialogTitle: false, // 弹出框标题默认为空
|
||
isView: false, // 标识是否是查看
|
||
isEdit: false, // 标识是否是编辑
|
||
// 添加默认空集合
|
||
studentForm: {
|
||
sno: '',
|
||
name: '',
|
||
gender: '',
|
||
birthday: '',
|
||
mobile: '',
|
||
email: '',
|
||
address: '',
|
||
image: '',
|
||
imageUrl: '',
|
||
},
|
||
// 弹出框输入校验
|
||
rules: {
|
||
sno: [
|
||
{ required: true, message: "学号不能为空", trigger: 'blur' },
|
||
{ pattern: /^[9][5]\d{3}$/, message: "学号必须是95开头的五位数字", trigger: 'blur' },
|
||
{ validator: rulesSno, trigger: 'blur' },
|
||
],
|
||
name: [
|
||
{ required: true, message: "姓名不能为空", trigger: 'blur' },
|
||
{ pattern: /^[\u4e00-\u9fa5]{2,5}$/, message: "姓名必须是2-5个汉字", trigger: 'blur' },
|
||
],
|
||
gender: [
|
||
{ required: true, message: "性别不能为空", trigger: 'change' },
|
||
],
|
||
birthday: [
|
||
{ required: true, message: "出生日期不能为空", trigger: 'change' },
|
||
],
|
||
mobile: [
|
||
{ required: true, message: "电话号码不能为空", trigger: 'blur' },
|
||
{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: "请检查电话号码是否输入正确", triggler: 'blur' },
|
||
],
|
||
email: [
|
||
{ required: true, message: "邮箱地址不能为空", trigger: 'blur' },
|
||
{
|
||
pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
|
||
message: "请检查邮箱地址是否输入正确", trigger: 'blur'
|
||
},
|
||
],
|
||
address: [
|
||
{ required: true, message: "家庭住址不能为空", trigger: 'blur' },
|
||
]
|
||
},
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
// 自动加载数据
|
||
this.getStudents();
|
||
},
|
||
// 事件
|
||
methods: {
|
||
// 获取所有学生的信息
|
||
getStudents: function () {
|
||
// 记录 this 的地址
|
||
let that = this
|
||
// 使用 Axios 实现 Ajax 请求
|
||
axios
|
||
.get(that.baseURL + "students/")
|
||
.then(function (res) {
|
||
// 请求成功后执行的函数
|
||
if (res.data.code == 1) {
|
||
// 数据返回给 students
|
||
that.students = res.data.data;
|
||
// 获取返回记录的总行数
|
||
that.total = res.data.data.length;
|
||
// 获取当前页的数据
|
||
that.getPageStudents();
|
||
// 弹窗提示
|
||
that.$message({
|
||
message: '数据加载成功！',
|
||
type: 'success'
|
||
});
|
||
console.log(that.students);
|
||
} else {
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
.catch(function (err) {
|
||
// 请求失败后执行的函数
|
||
console.log(err)
|
||
});
|
||
},
|
||
// 清除输入内容获取所有学生信息
|
||
getAllStudents() {
|
||
this.inputStr = "";
|
||
this.getStudents();
|
||
},
|
||
// 获取当前页的学生数据
|
||
getPageStudents() {
|
||
// 清空 pageStudents 中的数据
|
||
this.pageStudents = [];
|
||
// 获取当前页的数据
|
||
for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) {
|
||
// 遍历数据添加到 pageStudents 中
|
||
this.pageStudents.push(this.students[i]);
|
||
// 判断是否达到一页的要求
|
||
if (this.pageStudents.length === this.pagesize) break;
|
||
}
|
||
},
|
||
// 实现学生信息查询
|
||
queryStudents() {
|
||
// 使用Ajax请求 -- POST --> 传递 InputStr
|
||
let that = this
|
||
axios
|
||
.post(
|
||
that.baseURL + "students/query/",
|
||
{
|
||
inputstr: that.inputStr
|
||
}
|
||
)
|
||
.then(function (res) {
|
||
if (res.data.code === 1) {
|
||
// 数据返回给 students
|
||
that.students = res.data.data;
|
||
// 获取返回记录的总行数
|
||
that.total = res.data.data.length;
|
||
// 获取当前页的数据
|
||
that.getPageStudents();
|
||
// 弹窗提示
|
||
that.$message({
|
||
message: '数据加载成功！',
|
||
type: 'success'
|
||
});
|
||
} else {
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
.catch(function (err) {
|
||
console.log(err)
|
||
that.$message.error("获取后端查询结果出现异常！");
|
||
});
|
||
},
|
||
// 添加学生信息明细弹出框
|
||
addStudent() {
|
||
// 修改弹出框标题
|
||
this.dialogTitle = "添加学生明细";
|
||
// 弹出表单
|
||
this.dialogVisible = true;
|
||
},
|
||
// 根据 id 获取 image
|
||
getImageBySno(sno) {
|
||
for(oneStudent of this.students) {
|
||
// 判断
|
||
if(oneStudent.sno == sno) {
|
||
return oneStudent.image;
|
||
}
|
||
}
|
||
},
|
||
// 查看学生信息明细弹出框
|
||
viewStudent(row) {
|
||
// 修改弹出框标题
|
||
this.dialogTitle = "查看学生明细";
|
||
// 修改 isView 变量
|
||
this.isView = true;
|
||
// 弹出表单
|
||
this.dialogVisible = true;
|
||
// 深拷贝方法：
|
||
this.studentForm = JSON.parse(JSON.stringify(row));
|
||
// 获取照片
|
||
this.studentForm.image = this.getImageBySno(row.sno);
|
||
// 获取照片url
|
||
this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image;
|
||
},
|
||
// 编辑学生详细信息弹出框
|
||
updateStudent(row) {
|
||
// 修改弹出框标题
|
||
this.dialogTitle = "编辑学生明细";
|
||
// 修改 isEdit 变量
|
||
this.isEdit = true;
|
||
// 弹出表单
|
||
this.dialogVisible = true;
|
||
// 深拷贝方法：
|
||
this.studentForm = JSON.parse(JSON.stringify(row));
|
||
// 获取照片
|
||
this.studentForm.image = this.getImageBySno(row.sno);
|
||
// 获取照片url
|
||
this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image;
|
||
},
|
||
// 提交学生的表单（添加、编辑）
|
||
submitStudentForm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
// 判断提交表单事件类型，添加 or 编辑
|
||
if (this.isEdit) {
|
||
// 修改事件
|
||
this.submitUpdateStudent();
|
||
} else {
|
||
// 添加事件
|
||
this.submitAddStudent();
|
||
}
|
||
} else {
|
||
console.log('error submit!!');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
// 添加学生信息到数据库
|
||
submitAddStudent() {
|
||
// 定义 that
|
||
let that = this;
|
||
// 执行 Axios 请求
|
||
axios
|
||
.post(that.baseURL + 'student/add/', that.studentForm)
|
||
.then(res => {
|
||
// 执行成功
|
||
if (res.data.code === 1) {
|
||
// 获取所有学生信息
|
||
that.students = res.data.data;
|
||
// 获取记录条数
|
||
that.total = res.data.data.length;
|
||
// 获取分页信息
|
||
that.getPageStudents();
|
||
// 弹窗提示
|
||
that.$message({
|
||
message: '数据添加成功！',
|
||
type: 'success'
|
||
});
|
||
// 关闭弹窗
|
||
that.closeDialogForm('studentForm');
|
||
} else {
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
// 执行失败
|
||
console.log(err)
|
||
that.$message.error("添加时获取后端查询结果出现异常！");
|
||
})
|
||
},
|
||
// 编辑学生信息到数据库
|
||
submitUpdateStudent() {
|
||
// 定义 that
|
||
let that = this;
|
||
// 执行 Axios 请求
|
||
axios
|
||
.post(that.baseURL + 'student/update/', that.studentForm)
|
||
.then(res => {
|
||
// 执行成功
|
||
if (res.data.code === 1) {
|
||
// 获取所有学生信息
|
||
that.students = res.data.data;
|
||
// 获取记录条数
|
||
that.total = res.data.data.length;
|
||
// 获取分页信息
|
||
that.getPageStudents();
|
||
// 弹窗提示
|
||
that.$message({
|
||
message: '数据修改成功！',
|
||
type: 'success'
|
||
});
|
||
// 关闭弹窗
|
||
that.closeDialogForm('studentForm');
|
||
} else {
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
// 执行失败
|
||
console.log(err)
|
||
that.$message.error("修改时获取后端查询结果出现异常！");
|
||
})
|
||
},
|
||
// 删除学生信息到数据库
|
||
deleteStudent(row) {
|
||
// 等待确认
|
||
this.$confirm('是否确认删除学生信息【学号：' + row.sno + '\t姓名：' + row.name + '】？', '提示', {
|
||
confirmButtonText: '确定删除',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
// 确认删除相应事件
|
||
let that = this
|
||
// 调用后端接口
|
||
axios
|
||
.post(that.baseURL + 'student/delete/', { sno: row.sno })
|
||
.then(res => {
|
||
if (res.data.code === 1) {
|
||
// 获取所有学生信息
|
||
that.students = res.data.data;
|
||
// 获取记录数
|
||
that.total = res.data.data.length;
|
||
// 获取分页信息
|
||
that.getPageStudents();
|
||
// 弹窗提示
|
||
that.$message({
|
||
message: '数据删除成功！',
|
||
type: 'success'
|
||
});
|
||
} else {
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
// 批量删除学生信息到数据库
|
||
deleteStudents() {
|
||
// 等待确认
|
||
this.$confirm("是否确认批量删除 " + this.selectStudents.length + " 名学生信息?", '提示', {
|
||
confirmButtonText: '确定删除',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
// 确认删除相应事件
|
||
let that = this
|
||
// 调用后端接口
|
||
axios
|
||
.post(that.baseURL + 'students/delete/', { student: that.selectStudents })
|
||
.then(res => {
|
||
if (res.data.code === 1) {
|
||
// 获取所有学生信息
|
||
that.students = res.data.data;
|
||
// 获取记录数
|
||
that.total = res.data.data.length;
|
||
// 获取分页信息
|
||
that.getPageStudents();
|
||
// 弹窗提示
|
||
that.$message({
|
||
message: '数据批量删除成功！',
|
||
type: 'success'
|
||
});
|
||
} else {
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
// 关闭弹出框的表单
|
||
closeDialogForm(formName) {
|
||
// 重置表单校验
|
||
this.$refs[formName].resetFields();
|
||
// 清空弹出框集合
|
||
this.studentForm.sno = '';
|
||
this.studentForm.name = '';
|
||
this.studentForm.gender = '';
|
||
this.studentForm.birthday = '';
|
||
this.studentForm.mobile = '';
|
||
this.studentForm.email = '';
|
||
this.studentForm.address = '';
|
||
this.studentForm.image = '';
|
||
this.studentForm.imageUrl = '';
|
||
// 关闭弹出框
|
||
this.dialogVisible = false;
|
||
// 清空 isView 和 isEdit 的值
|
||
this.isView = false;
|
||
this.isEdit = false;
|
||
},
|
||
//选择学生头像后点击确定后触发的事件
|
||
uploadPicturePost(file) {
|
||
//定义that
|
||
let that = this;
|
||
//定义一个FormData类
|
||
let fileReq = new FormData();
|
||
//把照片穿进去
|
||
fileReq.append('avatar', file.file);
|
||
//使用Axios发起Ajax请求
|
||
axios(
|
||
{
|
||
method: 'post',
|
||
url: that.baseURL + 'upload/',
|
||
data: fileReq
|
||
}
|
||
).then(res => {
|
||
// 根据code判断是否成功
|
||
if (res.data.code === 1) {
|
||
//把照片给image
|
||
that.studentForm.image = res.data.name;
|
||
//拼接imageurl
|
||
that.studentForm.imageUrl = that.baseURL + "media/" + res.data.name;
|
||
} else {
|
||
//失败的提示！
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
|
||
}).catch(err => {
|
||
console.log(err);
|
||
that.$message.error("上传头像出现异常！");
|
||
})
|
||
|
||
},
|
||
// excel文件导入
|
||
uploadExcelPost(file) {
|
||
let that = this
|
||
//实例化一个formdata
|
||
//定义一个FormData类
|
||
let fileReq = new FormData();
|
||
//把照片穿进去
|
||
fileReq.append('excel', file.file);
|
||
//使用Axios发起Ajax请求
|
||
axios(
|
||
{
|
||
method: 'post',
|
||
url: that.baseURL + 'excel/import/',
|
||
data: fileReq
|
||
}
|
||
).then(res => {
|
||
// 根据code判断是否成功
|
||
if (res.data.code === 1) {
|
||
//把照片给image
|
||
that.students = res.data.data;
|
||
//计算总共多少条
|
||
that.total = res.data.data.length;
|
||
//分页
|
||
that.getPageStudents();
|
||
//弹出框体显示结果
|
||
this.$alert('本次导入完成! 成功：' + res.data.success +'失败：'+ res.data.error
|
||
, '导入结果展示', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: "本次导入失败数量为：" + res.data.error + ",具体的学号："+res.data.errors,
|
||
});
|
||
}
|
||
});
|
||
//把失败明细打印
|
||
console.log("本次导入失败数量为：" + res.data.error + ",具体的学号：");
|
||
console.log(res.data.errors);
|
||
} else {
|
||
//失败的提示！
|
||
that.$message.error(res.data.msg);
|
||
}
|
||
|
||
}).catch(err => {
|
||
console.log(err);
|
||
that.$message.error("上传Excel出现异常！");
|
||
})
|
||
|
||
},
|
||
// excel文件导出
|
||
exportToExcel(){
|
||
let that = this
|
||
axios.get(that.baseURL + 'excel/export/')
|
||
.then(res=>{
|
||
if(res.data.code ===1){
|
||
//拼接excel 的完整URL
|
||
let url = that.baseURL + 'media/'+ res.data.name;
|
||
//下载
|
||
window.open(url);
|
||
} else {
|
||
that.$message.error("导出Excel出现异常！");
|
||
}
|
||
})
|
||
.catch(err=>{
|
||
console.log(err);
|
||
});
|
||
|
||
},
|
||
// 分页时修改每页的行数
|
||
handleSizeChange(size) {
|
||
// 修改当前每页的数据行数
|
||
this.pagesize = size;
|
||
// 数据重新分页
|
||
this.getPageStudents();
|
||
},
|
||
// 调整当前的页码
|
||
handleCurrentChange(pageNumber) {
|
||
// 修改当前的页码
|
||
this.currentpage = pageNumber;
|
||
// 数据重新分页
|
||
this.getPageStudents();
|
||
},
|
||
// 选择复选框时触发的操作
|
||
handleSelectionChange(data) {
|
||
this.selectStudents = data;
|
||
console.log(data);
|
||
},
|
||
},
|
||
}) |