<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" 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" 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()" 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"
|
@start="start"></DataList>
|
<div id="meet" ref="meet"></div>
|
</div>
|
</div>
|
|
<pagination v-show="total>0" :total="total" :page.sync="queryParam.currentPage"
|
:limit.sync="queryParam.pageSize"
|
@pagination="getList"/>
|
</div>
|
</el-card>
|
|
<!-- 添加会议对话框 -->
|
<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-select
|
v-model="form.classesIds"
|
placeholder="班级"
|
clearable
|
multiple
|
>
|
<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>
|
<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">
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import DataList from './data-list/index.vue'
|
import Pagination from '@/components/Pagination'
|
import {getMeets, addMeet, editMeet, deleteMeetById, startMeet, editMeetClasses} from '@/api/meet'
|
import {getClassesListByMeetId, myClasses} from '@/api/classes'
|
|
export default {
|
components: { DataList, Pagination },
|
data () {
|
return {
|
queryParam: {
|
status: null,
|
meetName: null,
|
currentPage: 1,
|
pageSize: 10
|
},
|
total: 0,
|
open: false,
|
listLoading: true,
|
title: '',
|
form: {
|
status: 0,
|
},
|
changeIds: [],
|
tableData: [],
|
classesIds: [],
|
activeName: 'all',
|
searchText: '',
|
rules: {
|
meetName: [
|
{ required: true, message: '请输入房间名称', trigger: 'blur' }
|
],
|
classesId: [
|
{ required: true, message: '请选择班级', trigger: 'change' }
|
],
|
time: [
|
{ required: true, message: '请选择时间', trigger: 'change' }
|
]
|
},
|
}
|
},
|
created () {
|
this.getList()
|
this.getClasses()
|
},
|
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 => {
|
if (re.data.code === 1) {
|
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: 'www.kgmeet.com:8443/' + item.id,
|
roomName: item.meetName,
|
userInfoStr: JSON.stringify({
|
displayName: item.teacherName
|
})
|
}
|
})
|
window.open(routeUrl.href, '_blank')
|
} else {
|
this.$message.error(re.data.message)
|
}
|
})
|
},
|
handleUpdate (item) {
|
this.form = {
|
...item,
|
time: [item.startTime, item.endTime]
|
}
|
this.open = true
|
},
|
// 获取房间
|
getList () {
|
this.listLoading = true
|
getMeets(this.queryParam).then(re => {
|
const data = re.data
|
this.tableData = data.data
|
this.total = data.total
|
this.queryParam.pageIndex = data.pageNum
|
this.listLoading = false
|
})
|
},
|
cancel () {
|
this.open = false
|
this.resetForm()
|
},
|
resetForm () {
|
this.form = {
|
id: null,
|
meetName: null,
|
classesId: null,
|
status: 0,
|
startTime: null,
|
endTime: null,
|
time: []
|
},
|
this.changeIds = []
|
},
|
submitForm () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.form.startTime = this.form.time[0]
|
this.form.endTime = this.form.time[1]
|
if (this.form.id) {
|
// 修改会议表
|
editMeet(this.form).then(re => {
|
if (re.data.code === 1) {
|
this.open = false
|
this.getList()
|
this.$message.success(re.data.message)
|
}
|
});
|
} else {
|
addMeet(this.form).then(re => {
|
if (re.data.code === 1) {
|
this.open = false
|
this.getList()
|
this.$message.success(re.data.message)
|
} else {
|
this.$message.error(re.data.message)
|
}
|
})
|
}
|
} else {
|
return false
|
}
|
})
|
},
|
// 获取我的班级
|
getClasses () {
|
myClasses().then(re => {
|
this.classesIds = re.data.data
|
})
|
},
|
handleAdd () {
|
this.resetForm()
|
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;
|
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;
|
}
|
</style>
|
