student-dx-intelligence-main/src/views/student-information/student-information.vue

858 lines
34 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style lang="scss" scoped>
@import "../table.scss";
</style>
<template>
<div>
<el-card>
<!--border stripe,表示加上斑马线-->
<!--header-row-class-name="headerBg",表示设置表头颜色样式headerBg为一个style样式类-->
<div class="seachbox">
<!-- <el-select v-model="queryParams.collegeId" placeholder="学院" size="small" @change="Changecollege"
filterable clearable class="ml-5 seachbox_input">
<el-option v-for="item in collegeList" :key="item.name" :label="item.name" :value="item.value" />
</el-select> -->
<!-- <el-select v-model="queryParams.majorId" placeholder="专业" filterable clearable @change="Changemajor"
size="small" class="ml-5 seachbox_input">
<el-option v-for="item in majorList" :key="item.name" :label="item.name" :value="item.value" />
</el-select> -->
<el-select v-model="queryParams.classId" placeholder="班级" filterable clearable size="small"
class="ml-5 seachbox_input">
<el-option v-for="item in classList" :key="item.name" :label="item.name" :value="item.value" />
</el-select>
<el-input v-model.trim="queryParams.sname" placeholder="姓名" clearable class="ml-5 seachbox_input"
size="small" style="margin:0px 20px 0px 0px"></el-input>
<!-- <el-input v-model.trim="queryParams.Phone" placeholder="电话" class="ml-5 seachbox_input" size="small"
style="margin:0px 20px 0px 0px" clearable></el-input> -->
<el-button class="ml-5" type="primary" @click="gettableinfo(1)">搜索</el-button>
</div>
<div class="seachbox">
<el-button type="success" @click="addbox" class="seachboxadd">
<el-icon class="el-icon-left">
<Plus :size="30" />
</el-icon>
<div> 新 增 </div>
</el-button>
<el-button type="primary" @click="daortanshows" class="seachboxadd">
<el-icon class="el-icon-left">
<Upload :size="30" />
</el-icon>
<div> 导入学生信息</div>
</el-button>
</div>
<el-table :data="tableData" border stripe :header-cell-style="{ 'text-align': 'center' }"
:scrollbar-always-on="true">
<el-table-column prop="Name" align="center" label="姓名">
</el-table-column>
<el-table-column prop="ClassInfoName" align="center" label="班级">
</el-table-column>
<el-table-column prop="Number" align="center" label="学号">
</el-table-column>
<el-table-column prop="Phone" align="center" label="电话">
</el-table-column>
<el-table-column prop="Email" align="center" label="邮箱">
</el-table-column>
<el-table-column label="操作" align="center" width="150" fixed="right">
<template v-slot="scope">
<el-row class="rowcenter">
<Edit-Button permission="StudentColumns:Edit" content="编辑"
@clicknative="edititem(scope.row)"></Edit-Button>
<Delete-Button permission="StudentColumns:Delete" @confirm="delitem(scope.row)"
content="删除"></Delete-Button>
</el-row>
</template>
</el-table-column>
</el-table>
<div class="paginationbox">
<!--内边距空一些-->
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pageobj.pageNum" :page-sizes="pageobj.pageSizeOptions" :page-size="pageobj.pageSize"
layout="total, sizes, prev, pager, next" :total="pageobj.Total">
</el-pagination>
<!--1.page-sizes一般设置为5101520-->
<!--1.page-size一般设置为10即每页10个-->
</div>
</el-card>
<el-dialog title="导入学生信息" v-model="uploadkaowushow" draggable width="550px" center>
<div class="selectupbox" style="display: flex;align-items: center;justify-content: center;">
<!-- <el-select v-model="classId" placeholder="请选择考试计划" :disabled="kshfile" filterable clearable
class="ml-5 seachbox_input">
<el-option v-for="item in planNamelist" :key="item.name" :label="item.name" :value="item.value" />
</el-select> -->
<el-select v-model="classId" placeholder="请选择班级" filterable clearable size="small"
class="ml-5 seachbox_input">
<el-option v-for="item in classList1" :key="item.name" :label="item.name"
:value="item.value" />
</el-select>
<div class="uploadanniubox">
<el-button :icon="Search" type="success"
@click.native="$refs.studentList.click()">导入学生信息</el-button>
</div>
<div class="xiazaiuploadbox">
<a :href="urlStr1 + '/template/学生信息模板.xls'" style="color: #409EFF;display: block"
download="filename">
<p slot="title" style="margin: 16px">
<Icon type="ios-download-outline"></Icon>
下载模板
</p>
</a>
</div>
</div>
<form method="post" enctype="multipart/form-data" name="form1">
<!-- <input id="inputFile" type="file" ref="file" style="display: none" accept=".xls,.xlsx"
@change="getFile($event)" /> -->
<input id="inputStudent" type="file" ref="studentList" style="display: none" accept=".xls,.xlsx"
@change="studentFile($event)" />
</form>
<div slot="footer" style="text-align:center ; margin-top: 20px;">
<el-button @click="uploadkaowushow = false">取 消</el-button>
</div>
</el-dialog>
<el-drawer v-model="drawerform" :title="drawerformtitle" :append-to-body="false">
<!-- 新增修改左侧框 -->
<div class="demo-drawer__content">
<el-form label-position="right" ref="ruleForm" :rules="rules" label-width="100px" :model="formItem">
<p slot="title" style="color: #1ea0ff;border-left: 2px solid #1ea0ff;padding-left: 8px;">基本信息</p>
<el-form-item label="姓名" prop="Name">
<el-input v-model.trim="formItem.Name" placeholder="请输入姓名" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="学号" prop="Num">
<el-input v-model.trim="formItem.Num" placeholder="请输入学号" maxlength="20"
autocomplete="off"></el-input>
</el-form-item> -->
<!-- <el-form-item label="学制" prop="EduSystem">
<el-input v-model.trim="formItem.EduSystem" placeholder="请输入学制(例如:全日制)" maxlength="20"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="学业期限" prop="date">
<el-date-picker v-model="formItem.date" value-format="YYYY-MM-DD" type="daterange"
placeholder="请选择学业期限" range-separator="至" start-placeholder="入学时间" end-placeholder="毕业时间" />
</el-form-item> -->
<!-- <el-form-item label="学校" prop="schoolId">
<el-select v-model="formItem.schoolId" disabled placeholder="请选择学校" filterable clearable
size="small" class="ml-5 seachbox_input">
<el-option v-for="item in schoolList" :key="item.name" :label="item.name"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="学院" prop="collegeId">
<el-select v-model="formItem.collegeId" placeholder="请选择学院" @change="Changecollege1" filterable
clearable size="small" class="ml-5 seachbox_input">
<el-option v-for="item in collegeList1" :key="item.name" :label="item.name"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="专业" prop="majorId">
<el-select v-model="formItem.majorId" placeholder="请选择专业" @change="Changemajor1" filterable
clearable size="small" class="ml-5 seachbox_input">
<el-option v-for="item in majorList1" :key="item.name" :label="item.name"
:value="item.value" />
</el-select>
</el-form-item> -->
<el-form-item label="班级" prop="classId">
<el-select v-model="formItem.classId" placeholder="请选择班级" filterable clearable size="small"
class="ml-5 seachbox_input" style="width: 100%;">
<el-option v-for="item in classList1" :key="item.name" :label="item.name"
:value="item.value" />
</el-select>
</el-form-item>
<p slot="title" style="color: #1ea0ff;border-left: 2px solid #1ea0ff;padding-left: 8px;">联系方式</p>
<el-form-item label="电话" prop="Phone">
<el-input v-model.trim="formItem.Phone" placeholder="请输入电话" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="QQ号" prop="QQ">
<el-input v-model.trim="formItem.QQ" placeholder="请输入QQ号" autocomplete="off"></el-input>
</el-form-item> -->
<el-form-item label="邮箱" prop="Email">
<el-input v-model.trim="formItem.Email" placeholder="请输入邮箱" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="微信号" prop="WeiXin">
<el-input v-model.trim="formItem.WeiXin" placeholder="请输入微信号" autocomplete="off"></el-input>
</el-form-item> -->
</el-form>
<div class="demo-drawer__footer" v-if="!isedit">
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
<div class="demo-drawer__footer" v-if="isedit">
<el-button type="primary" @click="editsubmitForm('ruleForm')">提交</el-button>
<el-button @click="editresetForm('ruleForm')">重置</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import axios from "axios";
import {
getToken,
} from '@/utils/auth'
import { getinfoData, getstudenlevel3, getschooList, deltableinfo, getdetail, setStudentType, posteditinfo, getschoolid } from "@/api/studentinformation.js";
import E from 'wangeditor';
export default {
name: "student-information_index",
components: {
// canEditTable,
},
data() {
return {
urlStr1: import.meta.env.VITE_APP_URL,
formItem: {
schoolId: '',
date: [],
collegeId: "",
majorId: "",
classId: "",
falseStartTime: "",
StartTime: "",
falseEndTime: "",
EndTime: "",
EduSystem: "全日制",
Name: "",
Num: "",
Phone: "",
Email: "",
QQ: "",
WeiXin: "",
refName: "createStudent",
},
schoolList: [],
tableData: [],
pageobj: {
oldTotal: 0,
oldCurrent: 1,
Total: 0,
pageSize: 10,
pageNum: 1,
pageSizeOptions: [10, 20, 50, 100, 150, 200],
},
isedit: false,
drawerform: false,
schoolId: 0,
queryParams: {
sname: "",
num: "",
classId: "",
majorId: "",
collegeId: "",
},
collegeList: [],
collegeList1: [],
majorList: [],
majorList1: [],
classList: [],
classList1: [],
rules: {
Name: [
{ required: true, message: '请输入姓名', trigger: 'change' },
{ min: 2, max: 30, message: '长度在 2 到30 个字符', trigger: 'change' }
],
Num: [
{ required: true, message: '请输入工号', trigger: 'change' },
{ min: 3, max: 20, message: '长度在 3到 20个字符', trigger: 'change' }
],
EduSystem: [
{ required: true, message: '请输入学制', trigger: 'change' },
{ min: 3, max: 20, message: '长度在 3到 20个字符', trigger: 'change' }
],
classId: [
{ required: true, message: "班级不能为空", trigger: "change" },
],
date: [
{
type: 'array',
trigger: "change",
required: true,
message: '请选择学业期限',
fields: {
//tpye类型试情况而定,所以如果返回的是date就改成date
0: { type: 'string', required: true, message: '入学时间' },
1: { type: 'string', required: true, message: '毕业时间' }
}
}
],
},
drawerformtitle: "",
uploadkaowushow: false,
classId: '',
kshfile: false,
};
},
methods: {
daortanshows() {
//导入弹框打开
this.uploadkaowushow = true;
this.kshfile = false;
this.classId = '';
this.SelectClassList1('','s')
},
studentFile(event) {
//导入考生信息
let vm = this;
let file = event.target.files[0];
event.preventDefault();
let formData = new FormData();
formData.append("file", file);
let url = this.urlStr1 + '/api/Student/Upload?classinfoId=' + vm.classId;
const options = {
method: 'POST',
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Authorization': `bearer ${getToken('USER-TOKEN')}`
},
data: formData,
url,
}
axios(options).then((res) => {
let data = res.data;
if (data == 1) {
this.$message({
message: '导入成功',
type: 'success'
});
this.uploadkaowushow = false;
this.gettableinfo(this.pageobj.pageNum);
} else if (data == 2) {
this.$message({
message: '文件中没有数据',
type: 'error'
});
} else if (data == 3) {
this.$message({
message: '选择的模板错误',
type: 'error'
});
} else {
this.$message({
message: '导入失败,错误状态' + data,
type: 'error'
});
}
event.target.type = "text";
event.target.value = "";
event.target.type = "file";
event.target.name = "file";
vm.$forceUpdate();
}).catch((err) => {
this.$message({
message: '请求失败!',
type: 'error'
});
});
},
onswitch(row) {
// debugger
//点击设置是否考勤
setStudentType({
Number: row.Number,
Type: row.Type,
}).then((res) => {
let data = res;
if (data == 1) {
this.$message({
message: '设置成功',
type: 'success'
});
} else if (data == -2) {
this.$message({
message: '权限错误,请保证您有超级管理员或者校级管理员权限!',
type: 'error'
});
} else {
this.$message({
message: '设置失败',
type: 'error'
});
}
})
.catch((err) => {
this.$message({
message: "设置请求失败",
type: 'error'
});
});
},
// 搜索框之学院、专业、班级
SelectCollegeList() {
//学院
getstudenlevel3({ SelectCollegeList: '' })
.then((res) => {
this.collegeList = res
})
},
SelectMajorList(id, s) {
//专业
getstudenlevel3({
CollegeId: id,
Signal: s,
})
.then((res) => {
this.majorList = res
})
},
SelectClassList(id, s) {
//班级
getstudenlevel3({
Id: id,
Signal: s,
})
.then((res) => {
this.classList = res
})
},
Changecollege() {
//触发学院
this.queryParams.majorId = '';
this.queryParams.classId = '';
this.SelectMajorList(this.queryParams.collegeId, 'c');//专业
this.SelectClassList(this.queryParams.collegeId, 'c');//班级
},
Changemajor() {
//触发专业
this.queryParams.classId = '';
this.SelectClassList(this.queryParams.majorId, "m");
},
getschool() {
//获取学校列表
getschooList({
GetSchoolList: "",
}).then((res) => {
let data = res;
this.schoolList = data;
this.getschooidinfo();
})
.catch((err) => {
this.$message({
message: "获取学校列表失败",
type: 'error'
});
});
},
getschooidinfo() {
//获取学校id
getschoolid({
GetSchoolId: "",
}).then((res) => {
// debugger
let data = res;
this.formItem.schoolId = data;
})
.catch((err) => {
this.$message({
message: "获取学校id失败",
type: 'error'
});
});
},
handleCurrentChange(e) {
//切换页码
// debugger
this.pageobj.pageNum = Math.ceil(e);
this.gettableinfo(this.pageobj.pageNum);
},
handleSizeChange(e) {
//切换每页显示数
this.pageobj.pageSize = Math.ceil(e);
this.pageobj.pageNum = 1;
this.gettableinfo(this.pageobj.pageNum);
},
// 新增班级之学院、专业、班级
SelectCollegeList1() {
//学院
getstudenlevel3({ SelectCollegeList: '' })
.then((res) => {
this.collegeList1 = res
})
},
SelectMajorList1(id, s) {
//专业
getstudenlevel3({
CollegeId: id,
Signal: s,
})
.then((res) => {
this.majorList1 = res
})
},
SelectClassList1(id, s) {
//班级
getstudenlevel3({
Id: id,
Signal: s,
})
.then((res) => {
this.classList1 = res
})
},
Changecollege1() {
//触发学院
this.formItem.majorId = '';
this.formItem.classId = '';
this.SelectMajorList1(this.formItem.collegeId, 'c');//专业
this.SelectClassList1(this.formItem.collegeId, 'c');//班级
},
Changemajor1() {
//触发专业
this.formItem.classId = '';
this.SelectClassList1(this.formItem.majorId, "m");
},
gettableinfo(pageNum) {
//获取学校列表
this.pageobj.pageNum = pageNum;
getinfoData({
oldTotal: this.pageobj.oldTotal,
oldCurrent: this.pageobj.oldCurrent,
pageSize: this.pageobj.pageSize,
pageNum: pageNum,
Name: this.queryParams.sname,
Number: this.queryParams.num,
ClassInfoId: this.queryParams.classId,
MajorId: this.queryParams.majorId,
CollegeId: this.queryParams.collegeId,
SchoolId: '',
}).then((res) => {
let data = res;
if (data.length > 0) {
this.pageobj.Total = data[0].total;
} else {
this.pageobj.Total = 0;
this.pageobj.pageNum = 1;
}
this.tableData = data;
})
.catch((err) => {
// console.log(err);
});
},
addbox() {
// debugger
//新增信息
this.isedit = false;
this.drawerform = true
setTimeout(() => {
this.$data.formItem = JSON.parse(JSON.stringify(this.$options.data().formItem));
this.$refs['ruleForm'].resetFields();
this.drawerformtitle = '新增学生信息';
this.getschool();//学校
this.SelectCollegeList1();//学院
this.SelectMajorList1('', 's');//专业
this.SelectClassList1('', 's');//班级
}, 200);
},
delitem(info) {
// debugger
//删除数据
deltableinfo({ id: info.StudentId, }).then((res) => {
let data = res;
if (data == 1) {
this.$message({
message: '删除成功',
type: 'success'
});
this.gettableinfo(1);
} else if (data == 2) {
this.$message({
message: '删除失败',
type: 'error'
});
}
}).catch((err) => {
this.$message({
message: '删除请求失败',
type: 'error'
});
});
},
submitForm(formName) {
//新增提交
this.$refs[formName].validate((valid) => {
if (valid) {
// debugger
let datas = {
ClassInfoId: this.formItem.classId,
Name: this.formItem.Name,
Number: this.formItem.Num,
EduSystem: this.formItem.EduSystem,
WeiXin: this.formItem.WeiXin,
QQ: this.formItem.QQ,
Phone: this.formItem.Phone,
Email: this.formItem.Email,
StartTime: this.formItem.date[0],
EndTime: this.formItem.date[1],
};
posteditinfo(datas).then((res) => {
let data = res;
if (data == 1) {
this.$message({
message: '新增成功',
type: 'success'
});
this.drawerform = false;
this.gettableinfo(this.pageobj.pageNum);
} if (data == 2) {
this.$message({
message: '姓名不能为空',
type: 'error'
});
} else if (data == 3) {
this.$message({
message: '工号不能为空',
type: 'error'
});
} else if (data == 4) {
this.$message({
message: '学生类型不能为空',
type: 'error'
});
} else if (data == 5) {
this.$message({
message: '班级不能为空',
type: 'error'
});
} else if (data == 6) {
this.$message({
message: '邮箱格式不正确',
type: 'error'
});
} else if (data == 7) {
this.$message({
message: '手机号码格式不正确',
type: 'error'
});
} else if (data == 8) {
this.$message({
message: '添加的学生学号已存在',
type: 'error'
});
} else if (data == 9) {
this.$message({
message: '学制不能为空',
type: 'error'
});
}
})
.catch((err) => {
this.$message({
message: '新增学生信息请求失败!',
type: 'error'
});
});
} else {
// console.log('error submit!!');
return false;
}
});
},
editsubmitForm(formName) {
//修改提交
this.$refs[formName].validate((valid) => {
if (valid) {
//debugger
let datas = {
StudentId: this.formItem.StudentId,
ClassInfoId: this.formItem.classId,
Name: this.formItem.Name,
Number: this.formItem.Num,
Phone: this.formItem.Phone,
Email: this.formItem.Email,
QQ: this.formItem.QQ,
EduSystem: this.formItem.EduSystem,
StartTime: this.formItem.date[0],
EndTime: this.formItem.date[1],
WeiXin: this.formItem.WeiXin,
Status: true,
};
posteditinfo(datas).then((res) => {
let data = res;
if (data == 1) {
this.$message({
message: '修改成功',
type: 'success'
});
this.drawerform = false;
this.gettableinfo(this.pageobj.pageNum);
} if (data == 2) {
this.$message({
message: '姓名不能为空',
type: 'error'
});
} else if (data == 3) {
this.$message({
message: '工号不能为空',
type: 'error'
});
} else if (data == 4) {
this.$message({
message: '学生类型不能为空',
type: 'error'
});
} else if (data == 5) {
this.$message({
message: '班级不能为空',
type: 'error'
});
} else if (data == 6) {
this.$message({
message: '邮箱格式不正确',
type: 'error'
});
} else if (data == 7) {
this.$message({
message: '手机号码格式不正确',
type: 'error'
});
} else if (data == 8) {
this.$message({
message: '添加的学生学号已存在',
type: 'error'
});
} else if (data == 9) {
this.$message({
message: '学制不能为空',
type: 'error'
});
}
})
.catch((err) => {
this.$message({
message: '修改学生信息请求失败!',
type: 'error'
});
});
} else {
// console.log('error submit!!');
return false;
}
});
},
getinfodetail(id) {
//获取编辑信息
getdetail({ gsids: id }).then((res) => {
// debugger
let data = res;
this.formItem = {
StudentId: data.StudentId,
schoolId: data.SchoolId,
date: [data.StartTime || "", data.EndTime || ""],
collegeId: data.CollegeId,
majorId: data.MajorId,
classId: data.ClassInfoId,
falseStartTime: data.StartTime,
StartTime: data.StartTime,
falseEndTime: data.EndTime,
EndTime: data.EndTime,
EduSystem: data.EduSystem,
Name: data.Name,
Num: data.Number,
Phone: data.Phone || "",
Email: data.Email || "",
QQ: data.QQ || '',
WeiXin: data.WeiXin || '',
}
this.drawerformtitle = '修改学生信息';
})
.catch((err) => {
this.$message({
message: '详情获取失败!',
type: 'error'
});
});
},
edititem(info) {
//获取修改详情
//debugger
this.isedit = true;
this.drawerform = true
this.drawerformtitle = '编辑学生信息';
this.getinfodetail(info.StudentId);//获取详情
this.SelectCollegeList1();//学院
this.SelectMajorList1('', 's');//专业
this.SelectClassList1('', 's');//班级
},
resetForm(formName) {
//新增重置
this.$refs[formName].resetFields();
this.getschool();//学校
this.SelectCollegeList1();//学院
this.SelectMajorList1('', 's');//专业
this.SelectClassList1('', 's');//班级
},
editresetForm(formName) {
this.getinfodetail(this.formItem.StudentId);//获取详情
this.getschool();//学校
this.SelectCollegeList1();//学院
this.SelectMajorList1('', 's');//专业
this.SelectClassList1('', 's');//班级
}
},
mounted() {
//this.getschool();
// this.getteachertype();
// this.getCollege();
// this.SelectTeaStatusList();
this.getschool();//学校
this.SelectCollegeList();//学院
this.SelectMajorList('', 's');//专业
this.SelectClassList('', 's');//班级
this.gettableinfo(1);
},
activated() {
},
created() {
},
};
</script>