commit
ae08137d4f
7 changed files with 400 additions and 14 deletions
@ -0,0 +1,88 @@ |
|||||||
|
<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,288 @@ |
|||||||
|
<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> |
||||||
|
|
Loading…
Reference in new issue