| | |
| | | <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 v-model="activeName" @tab-click="handleClick" size="small"> |
| | | <el-tab-pane label="全部" name="all"></el-tab-pane> |
| | | <el-tab-pane label="未开始" name="0"></el-tab-pane> |
| | | <el-tab-pane label="进行中" name="1"></el-tab-pane> |
| | | <el-tab-pane label="已结束" name="2"></el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | <div class="header-search"> |
| | | <el-input v-model="queryParam.meetName" @input="getList" clearable @clear="getList" placeholder="请输入课程名称"/> |
| | | <el-button type="primary" class="ml-4" @click="getList" >搜索</el-button> |
| | | <el-input v-model="queryParam.meetName" @input="getList" clearable @clear="getList" size="small" |
| | | placeholder="请输入课程名称"/> |
| | | <el-button type="primary" class="ml-4" style="margin-left: 5px" size="small" @click="getList">搜索</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button type="primary" @click="handleAdd()">添加</el-button> |
| | | <el-button type="primary" @click="handleAdd()" size="small">添加</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 :tableData="tableData" @handleUpdate="handleUpdate" @remove = "remove"></DataList> |
| | | <DataList :tableData="tableData" @handleUpdate="handleUpdate" @remove="remove" |
| | | @start="start"></DataList> |
| | | <div id="meet" ref="meet"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize" |
| | | <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" |
| | | :limit.sync="queryParam.pageSize" |
| | | @pagination="getList"/> |
| | | </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-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false"> |
| | | <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="班级:" > |
| | | <el-form-item label="班级"> |
| | | <el-select |
| | | v-model="form.classesId" |
| | | placeholder="班级" |
| | |
| | | <el-option v-for="item in classesIds" :key="item.id" :label="item.className" :value="item.id"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="上课时间" prop="time" > |
| | | <el-date-picker |
| | | v-model="form.time" |
| | | type="datetimerange" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | <el-form-item label="上课时间" prop="time"> |
| | | <el-date-picker |
| | | v-model="form.time" |
| | | type="datetimerange" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="状态"> |
| | | <el-radio v-model="form.status" :label="0" :disabled="!form.id">待开始</el-radio> |
| | | <el-radio v-model="form.status" :label="1" :disabled="!form.id">进行中</el-radio> |
| | | <el-radio v-model="form.status" :label="2" :disabled="!form.id">已结束</el-radio> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | |
| | | <script> |
| | | import DataList from './data-list/index.vue' |
| | | import Pagination from '@/components/Pagination' |
| | | import { getMeets,addMeet,editMeet,deleteMeetById } from '@/api/meet' |
| | | import { getMeets, addMeet, editMeet, deleteMeetById, startMeet } from '@/api/meet' |
| | | import { myClasses } from '@/api/classes' |
| | | |
| | | |
| | | export default { |
| | | components: { DataList,Pagination}, |
| | | components: { DataList, Pagination }, |
| | | data () { |
| | | return { |
| | | queryParam: { |
| | |
| | | open: false, |
| | | listLoading: true, |
| | | title: '', |
| | | form: {}, |
| | | form: { |
| | | status: 0 |
| | | }, |
| | | tableData: [], |
| | | classesIds: [], |
| | | activeName: '1', |
| | | activeName: 'all', |
| | | searchText: '', |
| | | rules: { |
| | | meetName: [ |
| | |
| | | }, |
| | | methods: { |
| | | handleClick () { |
| | | if (this.activeName !== 'all') { |
| | | this.queryParam.status = this.activeName |
| | | } else { |
| | | this.queryParam.status = null |
| | | } |
| | | this.getList() |
| | | }, |
| | | remove (item) { |
| | | deleteMeetById(item.id).then(re => { |
| | |
| | | this.open = false |
| | | this.getList() |
| | | this.$message.success(re.data.message) |
| | | } else { |
| | | this.$message.error(re.data.message) |
| | | } |
| | | }) |
| | | }, |
| | | start (item) { |
| | | // 修改房间状态为进行中 |
| | | item.status = 1 |
| | | startMeet(item).then(re => { |
| | | if (re.data.code === 1) { |
| | | this.getList() |
| | | let routeUrl = this.$router.resolve({ |
| | | path: '/meet', |
| | | query: { |
| | | meetId: item.id, |
| | | domain: 'ycl.easyblog.vip:8443/' + item.id, |
| | | roomName: item.meetName, |
| | | userInfoStr: JSON.stringify({ |
| | | displayName: item.teacherName |
| | | }) |
| | | } |
| | | }) |
| | | window.open(routeUrl.href, '_blank') |
| | | } else { |
| | | this.$message.error(re.data.message) |
| | | } |
| | |
| | | id: null, |
| | | meetName: null, |
| | | classesId: null, |
| | | status: null, |
| | | status: 0, |
| | | startTime: null, |
| | | endTime: null, |
| | | time: [] |
| | |
| | | }) |
| | | }, |
| | | handleAdd () { |
| | | this.resetForm() |
| | | this.open = true |
| | | this.title = '新建房间' |
| | | } |
| | |
| | | :deep(.el-tabs__nav-wrap:after) { |
| | | display: none; |
| | | } |
| | | |
| | | .train-container { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | flex: 1; |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .card-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .header-search { |
| | | display: flex; |
| | | align-items: center; |