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

796 lines
33 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.num" 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>
</div>
<el-table :data="tableData" border stripe :header-cell-style="{ 'text-align': 'center' }"
:scrollbar-always-on="true">
<el-table-column type="expand">
<template #default="props">
<div class="expandrowbox">
<el-row class="expand-row">
<el-col :span="6">
<span class="expand-key">学校: </span>
<span class="expand-value">{{ props.row.SchoolName }}</span>
</el-col>
<el-col :span="6">
<span class="expand-key">学制类型: </span>
<span class="expand-value">{{ props.row.EduSystem }}</span>
</el-col>
<el-col :span="6">
<span class="expand-key">入学时间: </span>
<span class="expand-value">{{ props.row.SStartTime }} </span>
</el-col>
<el-col :span="6">
<span class="expand-key">毕业时间: </span>
<span class="expand-value">{{ props.row.SEndTime }} </span>
</el-col>
</el-row>
<el-row class="expand-row">
<el-col :span="6">
<span class="expand-key">电话: </span>
<span class="expand-value">{{ props.row.Phone }}</span>
</el-col>
<el-col :span="6">
<span class="expand-key">微信: </span>
<span class="expand-value">{{ props.row.WeiXin }}</span>
</el-col>
<el-col :span="6">
<span class="expand-key">邮箱: </span>
<span class="expand-value">{{ props.row.Email }} </span>
</el-col>
<el-col :span="6">
<span class="expand-key">QQ: </span>
<span class="expand-value">{{ props.row.QQ }} </span>
</el-col>
</el-row>
<el-row class="expand-row">
<el-col :span="6">
<span class="expand-key">状态: </span>
<span class="expand-value">{{ props.row.Status == true ? '在校' : '毕业' }} </span>
</el-col>
</el-row>
</div>
</template>
</el-table-column>
<el-table-column prop="Name" align="center" label="姓名">
</el-table-column>
<el-table-column prop="Number" align="center" label="学号">
</el-table-column>
<el-table-column prop="ClassInfoName" align="center" label="班级">
</el-table-column>
<el-table-column prop="MajorName" align="center" label="专业">
</el-table-column>
<el-table-column prop="CollegeName" align="center" label="学院">
</el-table-column>
<el-table-column prop="Type" align="center" label="是否考勤">
<template v-slot="scope">
<el-switch v-model="scope.row.Type" active-color="#13ce66" inactive-color="#ff4949"
:active-value="1" :inactive-value="0" @change="onswitch(scope.row)">
</el-switch>
</template>
</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-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">
<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 { 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 {
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: ""
};
},
methods: {
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>