parent
ae08137d4f
commit
e2c5d72a53
8 changed files with 1088 additions and 728 deletions
@ -0,0 +1,240 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover"> |
||||
<div class="flex-between mgb20"> |
||||
<div class="flex-center"> |
||||
<p class="hr_tag"></p> |
||||
<span>成绩管理</span> |
||||
</div> |
||||
<div> |
||||
<div class="flex-between"> |
||||
<div style="margin-right: 10px;"> |
||||
<el-input placeholder="请输入考核名称/项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</div> |
||||
<el-button |
||||
type="primary" |
||||
size="small" |
||||
icon="el-icon-delete" |
||||
round |
||||
class="bt_one" |
||||
@click="delAllData" |
||||
>批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable="disabledSelection"></el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="experimentalName" label="考核名称" align="center"></el-table-column> |
||||
<el-table-column prop="experimentalClassName" label="班级" align="center"></el-table-column> |
||||
<el-table-column prop="projectName" label="项目名称" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="number" label="成绩报告数量" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="creationTime" label="创建时间" align="center"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="entry(scope.row)">成绩管理</el-button> |
||||
<el-button v-if="projectPermissions" type="text" @click="handleDelete(scope.row)" :disabled="!scope.row.isdel">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Loading } from 'element-ui' |
||||
export default { |
||||
name: 'achievement', |
||||
data() { |
||||
return { |
||||
userId: this.$store.state.userLoginId, |
||||
keyword: '', |
||||
systemId: this.$config.systemId, |
||||
projectPermissions: 0, |
||||
startingtime: '', |
||||
endtime: '', |
||||
month: '', |
||||
listData: [], |
||||
multipleSelection: [], |
||||
dateList: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '近一个月' |
||||
}, |
||||
{ |
||||
id: 6, |
||||
name: '近六个月' |
||||
} |
||||
], |
||||
projectType: [ |
||||
{ |
||||
id: 0, |
||||
name: '练习模式' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '考核模式' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '竞赛模式' |
||||
} |
||||
], |
||||
date: '', |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 1, |
||||
listDataAll: [], |
||||
loadIns: null, |
||||
}; |
||||
}, |
||||
watch: { |
||||
month: function(val){ |
||||
if(val){ |
||||
let unit = 24 * 60 * 60 * 1000 |
||||
this.date = [this.formatDate('yyyy-MM-dd',new Date(new Date().getTime() - unit * 30 * val)),this.formatDate('yyyy-MM-dd',new Date(new Date().getTime() + unit))] |
||||
}else{ |
||||
this.date = [] |
||||
} |
||||
}, |
||||
date: function(val){ |
||||
if(val){ |
||||
this.startingtime = val[0] |
||||
this.endtime = val[1] |
||||
}else{ |
||||
this.startingtime = '' |
||||
this.endtime = '' |
||||
} |
||||
this.getData() |
||||
}, |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData() |
||||
},500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.loadIns = Loading.service({ |
||||
background: 'rgba(255,255,255,.6)' |
||||
}) |
||||
let data = { |
||||
searchContant: this.encodeString(this.keyword), |
||||
startTime: this.startingtime, |
||||
endtime: this.endtime, |
||||
month: this.month, |
||||
page: this.pageNo, |
||||
size: this.pageSize, |
||||
userId: this.userId, |
||||
systemId: this.systemId, |
||||
projectPermissions: this.projectPermissions |
||||
} |
||||
this.$get(this.api.queryAchievementNew,data).then(res => { |
||||
this.listData = res.data.list |
||||
this.totals = res.data.total |
||||
this.$nextTick(() => { |
||||
this.loadIns.close() |
||||
}) |
||||
}).catch(res => { |
||||
this.loadIns.close() |
||||
}) |
||||
}, |
||||
entry(row){ |
||||
if(this.projectPermissions){ |
||||
this.$store.commit('addExperimentData',{experimentData: { |
||||
id: row.id, |
||||
name: row.projectName, |
||||
class: row.experimentalClassName, |
||||
systemId: this.systemId, |
||||
projectId: row.projectId, |
||||
experimentalName: row.experimentalName |
||||
}}) |
||||
this.$router.push('experimentTeach') |
||||
}else{ |
||||
this.$store.commit('addExperimentData',{experimentData: { |
||||
id: row.projectId, |
||||
name: row.projectName, |
||||
class: row.experimentalClassName, |
||||
systemId: this.systemId |
||||
}}) |
||||
this.$router.push('experimentVir') |
||||
} |
||||
}, |
||||
disabledSelection(row,index){ |
||||
if(row.isdel == 0) return false |
||||
return true |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm('该项目下的所有成绩报告将会删除，是否继续？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.deleteReportById}?projectIds=${row.projectId}&projectPermissions=${row.projectPermissions}&ids=${row.id ? row.id : ''}`).then(res => { |
||||
this.$message.success('删除成功'); |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
delAllData() { |
||||
if(this.multipleSelection.length != ''){ |
||||
let newArr = this.multipleSelection |
||||
let delList = newArr.map(item => { |
||||
return `projectIds=${item.projectId}` |
||||
}) |
||||
let delList1 = newArr[0].id ? newArr.map(item => { |
||||
return `ids=${item.id}` |
||||
}) : [] |
||||
|
||||
this.$confirm('该项目下的所有成绩报告将会删除，是否继续？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
let data = `${delList.join('&')}&projectPermissions=${this.projectPermissions}&${delList1.length ? delList1.join('&') : ''}` |
||||
this.$post(`${this.api.deleteReportById}?${data}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
this.$message.success('删除成功'); |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}) |
||||
.catch(() => {}); |
||||
}else{ |
||||
this.$message.error('请先选择数据 ！'); |
||||
} |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.getData(); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.no-mb /deep/.el-form-item{ |
||||
margin-bottom: 0; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,88 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="per_title" v-preventReClick @click="goback()"> |
||||
<i class="el-icon-arrow-left"></i> |
||||
<span class="per_back">返回</span> |
||||
<span class="per_school">班级名称</span> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-center mgb20 user_header"> |
||||
<p class="addhr_tag"></p> |
||||
<span>基本信息</span> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data (){ |
||||
return { |
||||
classId: this.$route.query.classId |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
goback() { |
||||
this.$router.back() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.dib{ |
||||
display: inline-block; |
||||
} |
||||
/deep/.ql-editor{ |
||||
height: 400px; |
||||
} |
||||
.rules{ |
||||
.rule-header{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 10px 20px; |
||||
color: #fff; |
||||
background-color: #9278FF; |
||||
} |
||||
.rule-body{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 15px; |
||||
|
||||
.rule-block{ |
||||
width: 40%; |
||||
padding: 15px; |
||||
text-align: center; |
||||
.rule-bd{ |
||||
padding: 10px; |
||||
margin-top: 10px; |
||||
border: 1px solid #ddd; |
||||
} |
||||
} |
||||
.connect{ |
||||
width: 50px; |
||||
line-height: 50px; |
||||
text-align: center; |
||||
border: 1px solid #ddd; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
.mr20{ |
||||
margin-right: 20px; |
||||
} |
||||
.mgb10{ |
||||
margin-bottom: 10px; |
||||
} |
||||
.flex-jc-end{ |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,103 @@ |
||||
<template> |
||||
<div class="Achievement-container"> |
||||
<div class="tabs"> |
||||
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == activeName}" @click="tabChange(index)">{{item}}</a> |
||||
</div> |
||||
|
||||
<div class="score-table" v-if="activeName == 'first'"> |
||||
<ClassStudent></ClassStudent> |
||||
</div> |
||||
<div class="score-table" v-else> |
||||
<ClassAchievement></ClassAchievement> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ClassStudent from './ClassStudent.vue'; |
||||
import ClassAchievement from './ClassAchievement.vue'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
activeName: 'first', |
||||
userId: this.$store.state.userId, |
||||
tabs: { |
||||
first: '学生管理', |
||||
second: '成绩管理' |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
ClassStudent, |
||||
ClassAchievement |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
methods: { |
||||
tabChange(index){ |
||||
this.activeName = index |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scopted> |
||||
.Achievement-container { |
||||
width: 100%; |
||||
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||
text-align: center; |
||||
overflow: hidden; |
||||
.header { |
||||
width: 97%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
margin-top: 16px; |
||||
p { |
||||
margin-top: 14px; |
||||
font-size: 20px; |
||||
font-family: MicrosoftYaHeil; |
||||
color: #333333; |
||||
} |
||||
} |
||||
.score-table { |
||||
margin: 0 auto; |
||||
margin-top: 18px; |
||||
position: relative; |
||||
.block { |
||||
position: absolute; |
||||
right: 0px; |
||||
bottom: -50px; |
||||
} |
||||
} |
||||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
background-color: #9278ff; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.tabs{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 20px 1.5% 20px; |
||||
margin: 0; |
||||
z-index: 999; |
||||
background-color: #fff; |
||||
.item{ |
||||
padding: 12px 20px; |
||||
margin-right: 10px; |
||||
color:#606266; |
||||
line-height: 1; |
||||
border-radius: 4px; |
||||
background-color: #fff; |
||||
border: 1px solid #dcdfe6; |
||||
cursor: pointer; |
||||
|
||||
&.active{ |
||||
color: #fff; |
||||
background-color: #9278ff; |
||||
border-color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,288 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div> |
||||
<div class="flex-center mgb20"> |
||||
<p class="hr_tag"></p> |
||||
<span>筛选</span> |
||||
</div> |
||||
<div> |
||||
<el-form label-width="80px"> |
||||
<div class="flex-center"> |
||||
<el-form-item label="班级年份" class="userRadio"> |
||||
<el-radio-group v-model="form.year" @change="getData"> |
||||
<el-radio v-for="(item,index) in yearsList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<div class="flex-center"> |
||||
<el-form-item label="区间年份"> |
||||
<el-date-picker v-model="startYear" align="right" type="year" style="margin-left: 10px;" :default-value="endYear" |
||||
:picker-options="startTimeOptions" @focus="clickStartTime" placeholder="开始日期" format="yyyy" value-format="yyyy" clearable></el-date-picker> |
||||
</el-form-item> |
||||
<p class="toHr">—</p> |
||||
<el-form-item label-width="0"> |
||||
<el-date-picker v-model="endYear" align="right" type="year" style="margin-left: 10px;" :default-value="startYear" |
||||
:picker-options="endTimeOptions" @focus="clickEndTime" placeholder="结束日期" format="yyyy" value-format="yyyy" clearable></el-date-picker> |
||||
</el-form-item> |
||||
</div> |
||||
</div> |
||||
<div class="flex-between no-mb"> |
||||
<div class="flex-center"> |
||||
<el-form-item label="所属学期" class="userRadio"> |
||||
<el-radio-group v-model="form.semester" @change="getData"> |
||||
<el-radio v-for="(item,index) in semesterList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</div> |
||||
<div> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入实验班级名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</el-form-item> |
||||
</div> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-center"> |
||||
<p class="hr_tag"></p> |
||||
<span>班级列表</span> |
||||
</div> |
||||
<el-row :gutter="20" class="classList-row"> |
||||
<div v-for="item in classList" :key="item"> |
||||
<el-col :span="6"> |
||||
<el-card shadow="hover" class="editor-btn mgb20"> |
||||
<div class="flex-between" @click="toEdit(item)"> |
||||
<img src="" alt=""> |
||||
<div class="flex-column"> |
||||
<p>{{item.className}}</p> |
||||
<p> |
||||
<span>创建时间：</span> |
||||
<span>{{item.classTime}}年</span> |
||||
</p> |
||||
<p> |
||||
<span>所属学期：</span> |
||||
<span>{{item.classSemester}}</span> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div class="flex-around"> |
||||
<el-button type="text" icon="el-icon-edit" @click="editClass(item)">编辑</el-button> |
||||
<el-button type="text" icon="el-icon-delete">删除</el-button> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</div> |
||||
<el-col :span="6"> |
||||
<el-card shadow="hover" class="editor-btn mgb20"> |
||||
<div> |
||||
<el-button type="text" icon="el-icon-plus" @click="addClass">创建班级</el-button> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
<!-- 添加编辑班级 --> |
||||
<el-dialog :title="classId ? '编辑班级' : '添加班级'" :visible.sync="classVisible" class="classDialog" width="30%" center> |
||||
<el-form :model="classForm" label-width="120px"> |
||||
<el-form-item label="教学班级名称"> |
||||
<el-input v-model="classForm.className" autocomplete="off"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="班级年份"> |
||||
<el-date-picker v-model="classForm.classYear" align="right" type="year" style="margin-left: 10px;" |
||||
placeholder="开始日期" format="yyyy" value-format="yyyy" clearable></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="所属学期"> |
||||
<el-select v-model="classForm.classSemester" placeholder="请选择所属学期"> |
||||
<el-option label="春季学期" value="0"></el-option> |
||||
<el-option label="秋季学期" value="1"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="classVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="classVisible = false">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import bus from '../common/bus'; |
||||
import axios from 'axios'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
form:{ |
||||
year: '', |
||||
semester: 0, |
||||
}, |
||||
keyword: '', |
||||
startYear: '', |
||||
endYear: '', |
||||
startTimeOptions: {}, |
||||
endTimeOptions: {}, |
||||
yearsList: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '2021' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2020' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2019' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2018' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2017' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2016' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2015' |
||||
} |
||||
], |
||||
semesterList: [ |
||||
{ |
||||
id: 0, |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '春季学期' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '秋季学期' |
||||
} |
||||
], |
||||
classList: [{ |
||||
id: 1, |
||||
className: '实验二班', |
||||
classTime: '2021', |
||||
classSemester: '秋季学期' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
className: '实验二班', |
||||
classTime: '2021', |
||||
classSemester: '秋季学期' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
className: '实验二班', |
||||
classTime: '2021', |
||||
classSemester: '秋季学期' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
className: '实验二班', |
||||
classTime: '2021', |
||||
classSemester: '秋季学期' |
||||
}], |
||||
classId: '', |
||||
classVisible: false, |
||||
classForm: { |
||||
className: '', |
||||
classYear: '', |
||||
classSemester: '0' |
||||
} |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
this.getData() |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
getData(){}, |
||||
//选择开始年份 |
||||
clickStartTime() { |
||||
this.startTimeOptions.disabledDate = time => { |
||||
if (this.endYear) { |
||||
if (time.getFullYear() > new Date(this.endYear).getFullYear()) { |
||||
return true |
||||
} |
||||
} else { |
||||
if (time.getFullYear() > new Date().getFullYear()) { |
||||
return true |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
//选择结束年份 |
||||
clickEndTime(){ |
||||
this.endTimeOptions.disabledDate = time => { |
||||
if (this.startYear) { |
||||
if (time.getFullYear() < new Date(this.startYear).getFullYear()) { |
||||
return true |
||||
} |
||||
} else { |
||||
if (time.getFullYear() > new Date().getFullYear()) { |
||||
return true |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
addClass(){ |
||||
this.classId = '' |
||||
this.classVisible = true |
||||
}, |
||||
editClass(item){ |
||||
this.classId = item.id |
||||
this.classVisible = true |
||||
}, |
||||
toEdit(item){ |
||||
this.$router.push({ |
||||
name: 'classedit', |
||||
query: { |
||||
classId: item.id |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.toHr{ |
||||
color: #666; |
||||
margin: -20px 0 0 10px; |
||||
} |
||||
.classList-row /deep/ .el-card__body{ |
||||
height: 100px; |
||||
} |
||||
.classDialog /deep/ .el-date-editor.el-input{ |
||||
width: 100%; |
||||
margin-left: 0!important; |
||||
} |
||||
.mag{ |
||||
margin-right: 20px; |
||||
} |
||||
/deep/.el-tabs__nav-wrap::after{ |
||||
display: none; |
||||
} |
||||
.no-mb /deep/.el-form-item{ |
||||
margin-bottom: 0; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,552 @@ |
||||
<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> |
||||
<el-input placeholder="请输入学生姓名/学校名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</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" @click="editStudent(scope.row,true)">查看</el-button> |
||||
<el-button type="text" @click="editStudent(scope.row,false)">编辑</el-button> |
||||
<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="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"></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="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="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 echarts from 'echarts' |
||||
export default { |
||||
name: 'dashboard', |
||||
data() { |
||||
return { |
||||
isDetail: false, |
||||
keyword: '', |
||||
schoolId: 2105, |
||||
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: '', |
||||
isDetail: false, |
||||
resetVisible: false, |
||||
passwordVisible: false, |
||||
passwordForm: { |
||||
password: '', |
||||
newPassword: '', |
||||
reNewPassword: '' |
||||
}, |
||||
schoolList: [], |
||||
uploadFaild: false, |
||||
token: '', |
||||
accountMsg: '' |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.form.schoolAppellationId = 2105 |
||||
this.getData() |
||||
this.getSchoolData() |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData() |
||||
},500) |
||||
} |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
let data = { |
||||
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(this.accountMsg) |
||||
if(this.workNumberRepeat) return this.$message.warning('该学生学号已存在') |
||||
if(this.phoneRepeat) return this.$message.warning('该手机号已存在') |
||||
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() |
||||
this.getStat() |
||||
}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() |
||||
this.getStat() |
||||
}else{ |
||||
this.$message.error(res.message); |
||||
} |
||||
}).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.queryWorkNumberIsExist, { |
||||
workNumber: this.encodeString(this.form.workNumber), |
||||
schoolAppellationId: this.form.schoolAppellationId |
||||
}); |
||||
if(res.status != 200){ |
||||
this.$message.warning('该学生学号已存在'); |
||||
this.workNumberRepeat = true |
||||
}else{ |
||||
this.workNumberRepeat = false |
||||
} |
||||
// }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('该手机号已存在'); |
||||
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){ |
||||
this.isAdd = false |
||||
this.isDetail = isDetail |
||||
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) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
this.$post(this.api.daleteStudent,[row.studentId]).then(res => { |
||||
this.$message.success('删除成功'); |
||||
this.getData() |
||||
this.getStat() |
||||
}).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.$refs.table.clearSelection() |
||||
this.$message.success('删除成功'); |
||||
this.getData() |
||||
this.getStat() |
||||
}).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) { |
||||
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> |
||||
Loading…
Reference in new issue