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