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.
546 lines
23 KiB
546 lines
23 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div> |
|
<div class="flex-center mgb20"> |
|
<p class="hr_tag"></p> |
|
<span>筛选</span> |
|
</div> |
|
<div> |
|
<div style="display: flex;justify-content: flex-end;"> |
|
<div> |
|
<el-input placeholder="请输入学生姓名/学校名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover"> |
|
<div class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span>学生列表</span> |
|
</div> |
|
<div> |
|
<el-button type="primary" size="small" v-auth round @click="addStudent">新增学生</el-button> |
|
<el-button type="primary" size="small" v-auth round @click="batchImport">批量导入</el-button> |
|
<el-button type="primary" size="small" v-auth round @click="delAllSelection">批量删除</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="studentData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
|
<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="account" 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> |
|
<el-table-column prop="countries" label="账号角色" align="center"> |
|
<template slot-scope="scope"> |
|
{{roleStatus(scope.row.roleId)}} |
|
</template> |
|
</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" v-auth @click="editStudent(scope.row,true)">查看</el-button> |
|
<el-button type="text" v-auth @click="editStudent(scope.row,false)">编辑</el-button> |
|
<el-button type="text" v-auth @click="resetPassword(scope.row)">重置密码</el-button> |
|
<el-button type="text" v-auth @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)" |
|
v-auth="'学生管理:禁用'" |
|
></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="isDetail ? '查看学生' : (isAdd ? '新增学生' : '编辑学生')" :visible.sync="studentVisible" |
|
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="account" label="学生账号"> |
|
<el-input v-model="form.account" placeholder="请输入学生账号" @change="accountChange"></el-input> |
|
</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="workNumber" label="学生学号"> |
|
<el-input v-model="form.workNumber" placeholder="" @change="worknumberChange"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="phone" label="手机号"> |
|
<el-input v-model="form.phone" placeholder="可用于登录平台，以及找回密码" maxlength="11" @change="phoneChange"></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="schoolId" label="所在院校"> |
|
<el-select v-model="form.schoolId" placeholder="默认为当前院校（可修改）" filterable disabled @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="uniqueIdentificationAccount" label="唯一标识"> |
|
<el-input disabled v-model="form.uniqueIdentificationAccount"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
|
<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" |
|
:action="this.api.uploadFile" |
|
:file-list="uploadList" |
|
name="file" |
|
> |
|
<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 bus from '../common/bus'; |
|
export default { |
|
name: 'dashboard', |
|
data() { |
|
return { |
|
isDetail: false, |
|
keyword: '', |
|
schoolId: 2105, |
|
form: { |
|
userName: '', |
|
account: '', |
|
phone: '', |
|
uniqueIdentificationAccount: '', |
|
workNumber: '', |
|
email: '', |
|
account: '', |
|
roleId: 4, |
|
schoolId: this.schoolId, |
|
schoolAppellationId: this.schoolId |
|
}, |
|
rules: { |
|
account: [ |
|
{ required: true, message: '请输入账号', trigger: 'blur' }, |
|
{ |
|
pattern: /^[A-Za-z0-9]*$/, |
|
message: '请输入正确的账号', |
|
trigger: 'blur' |
|
} |
|
], |
|
userName: [ |
|
{ required: true, message: '请输入学生姓名', trigger: 'blur' } |
|
], |
|
schoolId: [ |
|
{ required: true, message: '请选择所在院校', trigger: 'change' } |
|
], |
|
// uniqueIdentificationAccount: [ |
|
// { required: true, message: '请输入唯一标识', trigger: 'blur' }, |
|
// ], |
|
workNumber: [ |
|
{ required: true, message: '请输入学生学号', trigger: 'blur' }, |
|
{ |
|
pattern: /^[A-Za-z0-9]*$/, |
|
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, |
|
phoneRepeat: false, |
|
workNumberReapeat: false, |
|
isDetail: false, |
|
resetVisible: false, |
|
passwordVisible: false, |
|
passwordForm: { |
|
password: '', |
|
newPassword: '', |
|
reNewPassword: '' |
|
}, |
|
schoolList: [], |
|
uploadFaild: false, |
|
token: '' |
|
}; |
|
}, |
|
mounted() { |
|
this.form.schoolId = this.schoolId |
|
this.form.schoolAppellationId = this.schoolId |
|
this.getData() |
|
this.getSchoolData() |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.getData() |
|
},500) |
|
} |
|
}, |
|
methods: { |
|
getData() { |
|
let data = { |
|
schoolId: this.schoolId, |
|
seachContent: this.encodeString(this.keyword), |
|
page: this.pageNo, |
|
size: this.pageSize |
|
} |
|
this.$get(this.api.queryStudent,data).then(res => { |
|
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('该账号已存在') |
|
if(this.workNumberReapeat) return this.$message.warning('该学生学号已存在') |
|
if(this.phoneRepeat) return this.$message.warning('该手机号已存在') |
|
this.form.schoolName = this.schoolList.find(n => n.schoolId == this.form.schoolId).schoolName |
|
if(this.form.studentId) { |
|
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{ |
|
this.form.uniqueIdentificationAccount = new Date().getTime() |
|
this.$post(this.api.addStudent,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{ |
|
return false; |
|
} |
|
}) |
|
}, |
|
async accountChange(){ |
|
let res = await this.$get(this.api.queryAccountIsExist, { |
|
account: this.encodeString(this.form.account), |
|
schoolId: this.schoolId |
|
}); |
|
if(res.message.user.length){ |
|
this.$message.warning('该账号已存在'); |
|
this.accountReapeat = true |
|
}else{ |
|
this.accountReapeat = false |
|
} |
|
}, |
|
async worknumberChange(){ |
|
let res = await this.$get(this.api.queryWorkNumberIsExist, { |
|
workNumber: this.encodeString(this.form.workNumber), |
|
roleId: 4, |
|
schoolId: this.schoolId |
|
}); |
|
if(JSON.stringify(res.message) != '{}'){ |
|
this.$message.warning('该学生学号已存在'); |
|
this.workNumberReapeat = true |
|
}else{ |
|
this.workNumberReapeat = false |
|
} |
|
}, |
|
async phoneChange(){ |
|
let res = await this.$get(this.api.queryPhone, { phone: this.regForm.phone }); |
|
if(res.message.length != 0){ |
|
this.$message.warning('该手机号已存在'); |
|
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: this.schoolId, |
|
userName: '', |
|
account: '', |
|
phone: '', |
|
uniqueIdentificationAccount: '', |
|
workNumber: '', |
|
email: '', |
|
account: '', |
|
roleId: 4, |
|
schoolAppellationId: this.schoolId |
|
} |
|
}, |
|
currentChange(val) { |
|
this.pageNo = val; |
|
this.getData(); |
|
}, |
|
addStudent(){ |
|
this.isAdd = true |
|
this.studentVisible = true |
|
}, |
|
editStudent(row,isDetail){ |
|
this.isAdd = false |
|
this.isDetail = isDetail |
|
this.studentVisible = true |
|
this.form = Object.assign({},row) |
|
this.$nextTick(() => { |
|
this.$refs.form.clearValidate() |
|
}) |
|
}, |
|
downLoad(){ |
|
location.href = 'http://www.liuwanr.cn/template/student.xlsx' |
|
}, |
|
handleDelete(row) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
this.$post(this.api.daleteStudent,[row.studentId]).then(res => { |
|
this.$message.success('删除成功'); |
|
this.getData() |
|
}).catch(res => {}); |
|
}) |
|
.catch(() => {}); |
|
}, |
|
getRowKeys(row) { |
|
return row.userId; |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val; |
|
}, |
|
delAllSelection() { |
|
if(this.multipleSelection.length != ''){ |
|
let newArr = this.multipleSelection |
|
let delList = newArr.map(item => { |
|
return item.studentId |
|
}) |
|
this.$confirm('确定要删除选中用户吗？', '提示', { |
|
type: 'warning' |
|
}) |
|
.then(() => { |
|
let data = delList |
|
this.$post(this.api.daleteStudent,data).then(res => { |
|
this.multipleSelection = []; |
|
this.$refs.table.clearSelection() |
|
this.$message.success('删除成功'); |
|
this.getData() |
|
}).catch(res => {}); |
|
}).catch(() => {}); |
|
}else{ |
|
this.$message.error('请先选择数据 ！'); |
|
} |
|
}, |
|
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) { |
|
console.log(11,val,row) |
|
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_failureStudent}?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 scoped> |
|
.mag{ |
|
margin-right: 20px; |
|
} |
|
.no-mb /deep/.el-form-item{ |
|
margin-bottom: 0; |
|
} |
|
/deep/.el-row{ |
|
padding: 0 !important; |
|
margin-bottom: 0; |
|
} |
|
</style> |