You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

566 lines
23 KiB

4 years ago
<template>
<div>
<el-card shadow="hover">
<div class="flex-between mgb20">
<div>
<el-button type="primary" size="small" round @click="addStudent">新增学生</el-button>
<el-button type="primary" size="small" round @click="batchImport">批量导入</el-button>
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button>
</div>
<div>
4 years ago
<el-input placeholder="请输入学生姓名/学号/账号" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
4 years ago
</div>
</div>
4 years ago
<el-table :data="studentData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="studentId">
4 years ago
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="100" label="序号" align="center">
</el-table-column>
<el-table-column prop="schoolName" label="院校" align="center"></el-table-column>
<el-table-column prop="userName" label="学生姓名" align="center">
</el-table-column>
4 years ago
<el-table-column prop="className" label="班级" align="center">
</el-table-column>
<el-table-column prop="account" label="账号" align="center">
</el-table-column>
<el-table-column prop="workNumber" label="学号" align="center">
4 years ago
</el-table-column>
<el-table-column prop="loginNumber" label="登录次数" align="center">
</el-table-column>
<el-table-column prop="lastLoginTime" label="上次登录时间" align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<template slot-scope="scope">
<el-button type="text" @click="editStudent(scope.row,true,true)">查看</el-button>
<el-button type="text" @click="editStudent(scope.row,false,false)">编辑</el-button>
4 years ago
<el-button type="text" @click="resetPassword(scope.row)">重置密码</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
<el-switch
v-model="scope.row.disableAccount"
:active-value="0"
:inactive-value="1"
style="margin: 0 5px"
@change="switchOff($event,scope.row,scope.$index)"
></el-switch>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals">
</el-pagination>
</div>
</el-card>
<el-dialog :title="isRepeat ? '查看学生' : (isAdd ? '新增学生' : '编辑学生')" :visible.sync="studentVisible"
4 years ago
width="30%" center @close="closeStudent" class="dialog" :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" :disabled="isDetail" label-width="100px">
<el-form-item prop="schoolAppellationId" label="所在院校">
<el-select v-model="form.schoolAppellationId" placeholder="默认为当前院校(可修改)" filterable @change="worknumberChange">
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="workNumber" label="学生学号">
<el-input v-model="form.workNumber" placeholder="请输入学生学号" @change="worknumberChange"></el-input>
</el-form-item>
4 years ago
<el-form-item prop="account" label="账号">
4 years ago
<el-input v-model="form.account" placeholder="请输入学生账号"></el-input>
4 years ago
</el-form-item>
<el-form-item prop="userName" label="学生姓名">
<el-input v-model="form.userName" placeholder="请输入学生姓名"></el-input>
</el-form-item>
<el-form-item prop="roleId" label="账号角色">
学生
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input v-model="form.phone" placeholder="可用于登录平台,以及找回密码" maxlength="11"></el-input>
</el-form-item>
<el-form-item prop="email" label="邮箱">
<el-input v-model="form.email" placeholder="可用于登录平台,以及找回密码"></el-input>
</el-form-item>
<el-form-item prop="uniqueIdentificationAccount" label="唯一标识">
<el-input disabled v-model="form.uniqueIdentificationAccount"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" v-if="!isRepeat">
4 years ago
<el-button @click="studentVisible = false">取消</el-button>
<el-button type="primary" @click="saveData"> </el-button>
</span>
</el-dialog>
<!-- 批量导入 -->
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" center :close-on-click-modal="false">
<div style="text-align: center">
<div style="margin-bottom: 10px;"><el-button type="primary" @click="downLoad">模板下载<i class="el-icon-download el-icon--right"></i></el-button></div>
<el-upload
accept=".xls,.xlsx"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
4 years ago
:action="this.api.uploadStudents"
:file-list="uploadList"
4 years ago
name="file"
4 years ago
:data="uploadData"
4 years ago
>
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button>
</el-upload>
<el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败查看失败原因</el-link>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="importVisible = false"> </el-button>
<el-button type="primary" @click="uploadSure"> </el-button>
</span>
</el-dialog>
<el-dialog
title="重置密码"
:visible.sync="passwordVisible"
:close-on-click-modal="false"
@close="closePassword"
width="30%">
<el-form ref="passwordForm" :model="form" label-width="60px">
<el-form-item label="原密码">
<el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
</el-form-item>
<el-form-item label="新密码">
<el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" @keyup.enter.native="editPassword"></el-input>
</el-form-item>
<el-form-item label="新密码">
<el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="editPassword"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="passwordVisible = false"> </el-button>
<el-button type="primary" @click="editPassword"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import echarts from 'echarts'
4 years ago
import qs from 'qs'
4 years ago
export default {
name: 'dashboard',
data() {
return {
isDetail: false,
isRepeat: false,
4 years ago
keyword: '',
schoolId: 2105,
4 years ago
classId: this.$route.query.classId,
4 years ago
form: {
userName: '',
account: '',
phone: '',
uniqueIdentificationAccount: '',
workNumber: '',
email: '',
account: '',
roleId: 4,
schoolId: 2105,
schoolAppellationId: ''
},
rules: {
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_-]{1,16}$/,
message: '请输入正确的账号',
trigger: 'blur'
}
],
userName: [
{ required: true, message: '请输入学生姓名', trigger: 'blur' }
],
schoolAppellationId: [
{ required: true, message: '请选择所在院校', trigger: 'change' }
],
// uniqueIdentificationAccount: [
// { required: true, message: '请输入唯一标识', trigger: 'blur' },
// ],
workNumber: [
{ required: true, message: '请输入学生学号', trigger: 'blur' }
],
phone: [
// { required: true, message: '请输入职工手机号', trigger: 'blur' },
{
pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的手机号',
trigger: 'blur'
}
],
email: [
// { required: true, message: '请输入邮箱', trigger: 'blur' },
{
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
message: '请输入正确的邮箱',
trigger: 'blur'
}
]
},
studentData:[],
pageNo: 1,
pageSize: 10,
totals: 0,
multipleSelection: [],
uploadList: [],
importVisible: false,
isAdd: true,
studentVisible: false,
accountReapeat: false,
originalAccount: '',
phoneRepeat: false,
workNumberRepeat: false,
originalWorkNumber: '',
resetVisible: false,
passwordVisible: false,
passwordForm: {
password: '',
newPassword: '',
reNewPassword: ''
},
schoolList: [],
uploadFaild: false,
token: '',
4 years ago
accountMsg: '',
uploadData: {
classId: this.$route.query.classId
}
4 years ago
};
},
mounted() {
this.form.schoolAppellationId = 2105
this.getData()
this.getSchoolData()
},
watch: {
keyword (val) {
4 years ago
this.getData()
4 years ago
}
},
methods: {
getData() {
let data = {
4 years ago
classId: this.classId,
searchContent: this.encodeString(this.keyword),
current: this.pageNo,
pageSize: this.pageSize
4 years ago
}
4 years ago
this.$post(this.api.queryStudentList,data).then(res => {
4 years ago
this.studentData = res.data.list
this.totals = res.data.totalCount
}).catch(res => {});
},
saveData() {
this.$refs.form.validate((valid) => {
if (valid) {
if(this.accountReapeat) return this.$message.warning(this.accountMsg)
// if(this.workNumberRepeat) return this.$message.warning('该学生学号已存在')
// if(this.phoneRepeat) return this.$message.warning('该手机号已存在')
if(!this.isAdd) {
4 years ago
this.form.classId = this.classId
4 years ago
this.$put(this.api.updateStudent,this.form).then(res => {
if(res.errmessage == 'success') {
this.$message.success('提交成功!');
this.studentVisible = false
this.getData()
}else{
this.$message.error(res.message);
}
}).catch(res => {});
}else{
4 years ago
this.form.classId = this.classId
if(this.form.uniqueIdentificationAccount == ''){
this.form.uniqueIdentificationAccount = new Date().getTime()
}
4 years ago
this.$post(this.api.addStudentToClass,this.form).then(res => {
// if(res.errmessage == 'success') {
4 years ago
this.$message.success('提交成功!');
this.studentVisible = false
this.getData()
// }else{
// this.$message.error(res.message);
// }
4 years ago
}).catch(res => {});
}
}else{
return false;
}
})
},
async accountChange(){
if(this.form.account !== this.originalAccount){
let res = await this.$get(this.api.queryAccountIsExist, {
account: this.encodeString(this.form.account),
schoolId: this.schoolId
});
if(res.message.user.length){
let roleId = res.message.user[0].roleId
this.accountMsg = roleId == 4 ? '该账号已存在' : (roleId.includes(',') ? '该账号已绑定老师和管理员' : `该账号已绑定${this.roleStatus(roleId)}`)
this.$message.warning(this.accountMsg)
this.accountReapeat = true
}else{
this.accountReapeat = false
}
}else{
this.accountReapeat = false
}
},
async worknumberChange(){
// if(this.form.workNumber !== this.originalWorkNumber){
let res = await this.$get(this.api.queryStudentMessage, {
4 years ago
workNumber: this.encodeString(this.form.workNumber),
schoolAppellationId: this.form.schoolAppellationId
});
if(res.data){
this.form = res.data
this.isDetail = true
4 years ago
}else{
this.isDetail = false
4 years ago
}
// if(res.status != 200){
// this.workNumberRepeat = true
// }else{
// this.workNumberRepeat = false
// }
4 years ago
// }else{
// this.workNumberRepeat = false
// }
},
async phoneChange(){
let res = await this.$get(this.api.queryPhone, { phone: this.form.phone });
if(res.message.length != 0){
// this.$message.warning('该手机号已存在');
4 years ago
this.phoneRepeat = true
}else{
this.phoneRepeat = false
}
},
batchImport(){
this.importVisible = true
this.uploadList = []
this.uploadFaild = false
},
// 获取学校/客户名称
getSchool(){
this.clearcity()
this.getSchoolData()
this.pageNo = 1
this.getData()
},
getSchoolData(){
let data = {
schoolName: '',
provinceId: '',
cityId: ''
}
this.$get(this.api.querySchool,data).then(res => {
this.schoolList = res.message
}).catch(res => {});
},
closeStudent(){
this.isDetail = false
this.$refs.form.clearValidate()
this.form = {
schoolId: 2105,
userName: '',
account: '',
phone: '',
uniqueIdentificationAccount: '',
workNumber: '',
email: '',
account: '',
roleId: 4,
schoolAppellationId: 2105
}
},
currentChange(val) {
this.pageNo = val;
this.getData();
},
addStudent(){
this.isAdd = true
this.studentVisible = true
},
editStudent(row,isDetail,isRepeat){
4 years ago
this.isAdd = false
this.isDetail = isDetail
this.isRepeat = isRepeat
4 years ago
this.studentVisible = true
this.form = Object.assign({},row)
this.originalWorkNumber = row.workNumber
this.originalAccount = row.account
this.$nextTick(() => {
this.$refs.form.clearValidate()
})
},
downLoad(){
location.href = this.api.download
},
handleDelete(row) {
4 years ago
this.$confirm('确定要删除该学生吗?', '提示', {
4 years ago
type: 'warning'
})
.then(() => {
4 years ago
let arr = []
arr.push(row.studentId)
let data = {
classId: this.classId,
studentIds: arr
}
this.$delbody(this.api.deleteStudents,data).then(res => {
4 years ago
this.$message.success('删除成功');
this.getData()
}).catch(res => {});
})
.catch(() => {});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
delAllSelection() {
if(this.multipleSelection.length != ''){
let newArr = this.multipleSelection
let delList = newArr.map(item => {
return item.studentId
})
4 years ago
this.$confirm('确定要删除选中学生吗?', '提示', {
4 years ago
type: 'warning'
})
.then(() => {
4 years ago
let data = {
classId: this.classId,
studentIds: delList
}
this.$delbody(this.api.deleteStudents,data).then(res => {
4 years ago
this.$refs.table.clearSelection()
this.$message.success('删除成功');
this.getData()
}).catch(res => {});
}).catch(() => {});
}else{
4 years ago
this.$message.error('请先选择学生 !');
4 years ago
}
},
resetPassword(row){
this.$confirm(`重置后的密码为:${this.$config.initialPassword},确定重置?`, '提示', {
}).then(() => {
this.$put(this.api.reSetPassword,[row.userId]).then(res => {
if(res.errmessage == 'success') this.$message.success('重置成功')
}).catch(res => {});
}).catch(() => {
});
},
switchOff(val,row,index) {
let data = {
studentId: row.studentId,
disableAccount: row.disableAccount ? 0 : 1
}
this.$put(this.api.disableAccount,data)
.then(res => {})
.catch(err => {});
},
closePassword() {
this.passwordForm = {
password: '',
newPassword: '',
reNewPassword: ''
}
},
editPassword(){
if(!this.passwordForm.password) return this.$message.warning('请输入原密码')
if(!this.passwordForm.newPassword) return this.$message.warning('请输入新密码')
if(!this.passwordForm.reNewPassword) return this.$message.warning('请确认新密码')
if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return this.$message.warning('请输入6位数以上的密码')
if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return this.$message.warning('输入的新密码不一致,请重新确认')
if(this.passwordForm.password === this.passwordForm.newPassword) return this.$message.warning('原密码跟新密码不能一致')
let data = this.passwordForm
data.userid = this.userId
this.$put(this.api.reSetPassword,data)
.then(res => {
if(res.errmessage == 'success'){
this.$message.success('更换成功')
this.passwordVisible = false
}
})
.catch(err => {
console.log(err);
});
},
// 上传文件
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件,如需更换,请删除上一个文件再重新选择!`
);
},
showFaild(){
location.href = `${this.api.export_failure}?token=${this.token}`
},
uploadSuccess(res, file, fileList) {
this.uploadFaild = false
if(res.errmessage == 'success'){
if(res.data.token){
this.token = res.data.token
this.uploadFaild = true
}else{
this.$message.success('上传成功')
}
}else{
res.message ? this.$message.error(res.message) : this.$message.error('上传失败,请检查数据')
}
},
uploadError(err, file, fileList) {
this.$message({
message: "上传出错,请重试!",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}`);
},
handleRemove(file, fileList) {
this.uploadList = fileList
this.uploadFaild = false
},
uploadSure(){
this.importVisible = false
this.pageNo = 1
this.keyword = ''
this.getData()
},
}
};
</script>
<style lang="scss" scoped>
.mag{
margin-right: 20px;
}
.no-mb /deep/.el-form-item{
margin-bottom: 0;
}
/deep/.el-row{
padding: 0 !important;
margin-bottom: 0;
}
.stat{
display: flex;
.item{
flex: 1;
padding: 15px;
margin-right: 20px;
box-shadow: 1px 1px 3px 1px rgba(146,120,255,.3);
box-sizing: border-box;
&:last-child{
margin-right: 0;
}
.chart{
height: 300px;
}
}
}
</style>