<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一般设置为5,10,15,20--> <!--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>