luohairen
2024-10-29 a38b2ce4cf02b6ac7069ac89517287bf78f4dfdf
src/views/train/index.vue
@@ -8,41 +8,44 @@
            <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="班级"
@@ -51,16 +54,21 @@
                  <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">
@@ -78,12 +86,11 @@
<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: {
@@ -96,10 +103,12 @@
      open: false,
      listLoading: true,
      title: '',
      form: {},
      form: {
        status: 0
      },
      tableData: [],
      classesIds: [],
      activeName: '1',
      activeName: 'all',
      searchText: '',
      rules: {
        meetName: [
@@ -120,6 +129,12 @@
  },
  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 => {
@@ -127,6 +142,29 @@
          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)
        }
@@ -159,7 +197,7 @@
        id: null,
        meetName: null,
        classesId: null,
        status: null,
        status: 0,
        startTime: null,
        endTime: null,
        time: []
@@ -203,6 +241,7 @@
      })
    },
    handleAdd () {
      this.resetForm()
      this.open = true
      this.title = '新建房间'
    }
@@ -214,6 +253,7 @@
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}
.train-container {
  width: 100%;
  height: 100%;
@@ -225,14 +265,17 @@
    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;