会议编辑删除

fuliqi

2024-06-25 3e2914339a54efb904e822eaa3dd65e67111eeb2

会议编辑删除

 src/views/meet/index.vue

@@ -8,13 +8,17 @@
  mounted() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const domain = 'ycl.easyblog.vip:8443';
    const domain = this.$route.query.domain;
    const roomName = this.$route.query.roomName;
    const userInfoStr = this.$route.query.userInfoStr;
    const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null;
    const options = {
      roomName: 'test',
      roomName: roomName,
      width: width,
      height: height,
      parentNode: this.$refs.meet,
      lang: 'zh_CN',
      userInfo: userInfo,
      configOverwrite: {
        prejoinConfig: {
          enabled: false

 src/views/train/data-list/index.vue

@@ -2,16 +2,16 @@
  <div class="list-container w-full h-full">
    <div class="list-content w-full overflow-x-hidden">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in dataList" class="margin-col">
        <el-col :span="6" v-for="item in tableData" class="margin-col">
          <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }">
            <div class="img-container w-full">
              <img src="@/assets/list-card-bg.jpg" class="width-img">
            </div>
            <div class="item-info p-3">
              <div class="info-title">{{ item.title }}</div>
              <div class="info-teacher">
              <div class="info-title">{{ item.meetName }}</div>
              <div class="info-teacherName">
                <div class="info-label">主讲:</div>
                <div class="info-text">{{ item.teacher }}</div>
                <div class="info-text">{{ item.teacherName }}</div>
              </div>
              <div class="info-time">
                <div class="info-label">开始时间:</div>
@@ -22,7 +22,9 @@
                <div class="info-text">{{ item.endTime }}</div>
              </div>
              <div class="button-container">
                <el-button @click="start">开始上课</el-button>
                <el-button @click="start(item)">开始上课</el-button>
                <el-button @click="handleUpdate(item)">编辑</el-button>
                <el-button @click="remove(item)">删除</el-button>
              </div>
            </div>
          </el-card>
@@ -33,52 +35,63 @@
</template>

<script>

export default {
  data() {
    return {
      dataList: [
  props: {
    tableData: [
        {
          title: '测试1',
        id: 1,
        meetName: '英语',
          startTime: '2024-6-13 8:00',
          endTime: '2024-6-13 8:00',
          teacher: '测试测试',
          roomName: 'test'
        teacherName: '关老师'
        },
        {
          title: '测试1',
        id: 2,
        meetName: '语文',
          startTime: '2024-6-13 8:00',
          endTime: '2024-6-13 8:00',
          teacher: '测试测试',
          roomName: 'test'
        teacherName: '测试测试'
        },
        {
          title: '测试1',
        id: 3,
        meetName: '数学',
          startTime: '2024-6-13 8:00',
          endTime: '2024-6-13 8:00',
          teacher: '测试测试',
          roomName: 'test'
        teacherName: '测试测试'
        },
        {
          title: '测试1',
        id: 4,
        meetName: '机场航空',
          startTime: '2024-6-13 8:00',
          endTime: '2024-6-13 8:00',
          teacher: '测试测试',
          roomName: 'test'
        teacherName: '测试测试'
        },
        {
          title: '测试1',
        id: 5,
          startTime: '2024-6-13 8:00',
          endTime: '2024-6-13 8:00',
          teacher: '测试测试',
          roomName: 'test'
        teacherName: '测试测试',
        }
      ]
    };
  },
  methods: {
    start () {
    handleUpdate (item) {
      this.$emit('handleUpdate',item)
    },
    remove (item) {
      this.$emit('remove',item)
    },
    start (item) {
      let routeUrl = this.$router.resolve({
        path: "/meet",
        query: {
          domain: 'ycl.easyblog.vip:8443/' + item.id,
          roomName: item.meetName,
          userInfoStr:  JSON.stringify({
            displayName: item.teacherName
          })
        }
      })
      window.open(routeUrl.href, '_blank')
      // window.open('https://ycl.easyblog.vip:8443/test');
@@ -118,7 +131,7 @@
  font-weight: bold;
}

.info-teacher {
.info-teacherName {
  display: flex;
  font-size: 14px;
}

 src/views/train/index.vue

@@ -16,8 +16,8 @@
                  </el-tabs>
                </div>
                <div class="header-search">
                  <el-input v-model="searchText" placeholder="请输入课程名称"/>
                  <el-button type="primary" class="ml-4">搜索</el-button>
                  <el-input v-model="queryParam.meetName" @input="getList" clearable @clear="getList" placeholder="请输入课程名称"/>
                  <el-button type="primary" class="ml-4" @click="getList" >搜索</el-button>
                </div>
                <div>
                  <el-button type="primary" @click="handleAdd()">添加</el-button>
@@ -26,30 +26,37 @@

              <div class="card-main flex-1 my-5 relative">
                <div class="main-content absolute top-0 bottom-0 left-0 right-0">
                  <DataList></DataList>
                  <DataList :tableData="tableData" @handleUpdate="handleUpdate" @remove = "remove"></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>
              <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-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 label="班级：" >
                <el-select
                  v-model="form.classesId"
                  placeholder="班级"
                  clearable
                >
                  <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="结束日期">
@@ -57,7 +64,7 @@
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="cancel">确 定</el-button>
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
@@ -70,25 +77,130 @@

<script>
import DataList from './data-list/index.vue'
import Pagination from '@/components/Pagination'
import { getMeets,addMeet,editMeet,deleteMeetById } from '@/api/meet'
import { myClasses } from '@/api/classes'


export default {
  components: { DataList },
  components: { DataList,Pagination},
  data () {
    return {
      queryParam: {
        status: null,
        meetName: null,
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      open: false,
      listLoading: true,
      title: '',
      form: {},
      tableData: [],
      classesIds: [],
      activeName: '1',
      searchText: '',
      rules: {
        meetName: [
          { required: true, message: '请输入房间名称', trigger: 'blur' }
        ],
        classesId: [
          { required: true, message: '请选择班级', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
    }
  },
  created () {},
  created () {
    this.getList()
    this.getClasses()
  },
  methods: {
    handleClick () {

    },
    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)
        }
      })
    },
    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: null,
        startTime: null,
        endTime: null,
        time: []
      }
    },
    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 {
                this.$message.error(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.open = true
@@ -108,9 +220,11 @@
  display: flex;
  flex-direction: column;
  align-items: center;

  .list-container {
    flex: 1;
    position: relative;
    width: 100%;
  }
}
.card-header {