<template>
|
<div class="train-container ">
|
|
<div class="list-container">
|
<div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
|
<div class="list-wrapper">
|
<el-card :body-style="{ height: '100%' }">
|
<div class="card-wrapper">
|
<div class="card-header">
|
<div class="header-tab">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="全部" name="1"></el-tab-pane>
|
<el-tab-pane label="未开始" name="2"></el-tab-pane>
|
<el-tab-pane label="进行中" name="3"></el-tab-pane>
|
<el-tab-pane label="已结束" name="4"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="header-search">
|
<el-input v-model="searchText" placeholder="请输入课程名称"/>
|
<el-button type="primary" class="ml-4">搜索</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="handleAdd()">添加</el-button>
|
</div>
|
</div>
|
|
<div class="card-main flex-1 my-5 relative">
|
<div class="main-content absolute top-0 bottom-0 left-0 right-0">
|
<DataList></DataList>
|
<div id="meet" ref="meet"></div>
|
</div>
|
</div>
|
|
<div class="card-footer flex justify-center mb-7 shrink-0">
|
<el-pagination background layout="prev, pager, next" :total="1000"/>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 添加题目对话框 -->
|
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
<el-form label-width="80px" ref="form" :model="form" :rules="rules" >
|
<el-form-item label="房间名" prop="meetName" >
|
<el-input v-model="form.meetName" placeholder="请输入房间名" style="width: 300px"></el-input>
|
</el-form-item>
|
<el-form-item label="班级" prop="classesId" >
|
<el-select v-model="form.classesId" placeholder="请选择班级" />
|
</el-form-item>
|
<el-form-item label="上课时间" prop="time" >
|
<el-date-picker
|
v-model="form.time"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="cancel">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import DataList from './data-list/index.vue'
|
|
export default {
|
components: { DataList },
|
data () {
|
return {
|
open: false,
|
title: '',
|
form: {},
|
activeName: '1',
|
searchText: '',
|
}
|
},
|
created () {},
|
methods: {
|
handleClick () {
|
|
},
|
cancel() {
|
this.open = false
|
},
|
handleAdd () {
|
this.open = true
|
this.title = '新建房间'
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-tabs__nav-wrap:after) {
|
display: none;
|
}
|
.train-container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.list-container {
|
flex: 1;
|
position: relative;
|
}
|
}
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-shrink: 0;
|
}
|
.header-search {
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
