feige
2025-01-02 43e1199ca0c75787fb6b52bef7d595abd115ceab
ruoyi-ui/src/views/meeting/webcast.vue
@@ -10,15 +10,8 @@
      <span>直播</span>
      <div class="button-container"></div>
      <div style="display: flex; align-items: center;">
<!--        <el-button size="mini" type="text" v-hasPermi="['person:information:memo']" style="margin-left: 200px">
          <div class="form" @click="newRequest"><el-icon style="padding-right:100px;"></el-icon>
            <span class="text" style="width: 69px;height: 26px;font-size: 16px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">直播申请</span>
          </div>
        </el-button> -->
      </div>
    </h1>
    <hr>
    <!-- 搜索 -->
@@ -30,7 +23,6 @@
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="handleQuery" style=" width: 65px; height: 32px;background: #FFDDE3;
@@ -58,13 +50,16 @@
    <el-row :gutter="0" v-loading="loading">
      <el-col :span="4" v-for="(item,i) in webcastList">
        <div class="module" @click="toLook">
        <div class="module" @click="toLook(item.id)">
          <div class="video">
            66666666
          </div>
          <span class="span1">{{ item.title }}</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">{{ item.applyPerson }}</p>
          <img :src="item.avatar"
          style="margin-left: 15px;margin-top: 190px; background-color: pink; width: 50px; height: 50px;"/>
        </div>
      </el-col>
@@ -91,22 +86,21 @@
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="formDat.endTime" type="datetime" placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item> -->
        <!--        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="formDat.startTime" type="datetime" placeholder="选择开始时间"
             value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        <el-form-item label="时长(分钟)" prop="duration">
          <el-input v-model="formDat.duration" type="number" placeholder="请输入会议时长(分钟)" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="持续时间" prop="meetingTitle">
          <el-input v-model="formDat.meetingTitle" placeholder="请输入会议标题" clearable :style="{width: '100%'}">
        <el-form-item label="房间号" prop="roomId">
          <el-input v-model="formDat.roomId" type="number" :min="1" placeholder="请输入房间号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item> -->
        </el-form-item>
        <el-form-item label="最多人数" prop="maxPerson">
          <el-input v-model="formDat.maxPerson" type="number" placeholder="请输入最多人数" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="会议标题" prop="title">
          <el-input v-model="formDat.title" placeholder="请输入会议标题" clearable :style="{width: '100%'}">
@@ -127,11 +121,58 @@
          <el-input v-model="formDat.contactPhone" placeholder="请输入联系电话" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <h4 class="form-header">主播头像 </h4>
            <el-upload
              action="#"
              accept="image/jpeg, image/png,image/jpg, image/WMF,image/gif"
              list-type="picture-card"
              :http-request="requestUpload"
              :file-list="fileList"
              :limit="1"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <template v-if="fileList">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                    style="width: 100%; height: 100%; object-fit: cover;"
                    fit="cover"
                    :preview-src-list="[file.url]"
                  >
                </template>
                <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
              </div>
            </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDataScope">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog  :visible.sync="dialogVisible">
      <img w-full :src="dialogImageUrl"    style="width: 100%; height: 100%" alt="Preview Image" />
    </el-dialog>
@@ -163,7 +204,9 @@
  import {
    addWebcast,
    listWebcast,
    getWebcastInfo
    getWebcastInfo,
    uploadPic,
    uploadPic1,
  } from "@/api/meeting/index";
  export default {
@@ -188,6 +231,8 @@
          happenStartTime: undefined,
          happenEndTime: undefined
        },
        // 遮罩层
        disabled: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
@@ -199,9 +244,16 @@
          applyPerson: undefined,
          contactPerson: undefined,
          contactPhone: undefined,
          createTime: undefined
          createTime: undefined,
          roomId:undefined,
          maxPerson:undefined,
          duration:undefined,
          avatar:undefined,
        },
                  uploadFileList: [],
      fileList:[],
      dialogImageUrl: '',
      dialogVisible: false,
      }
    },
    methods: {
@@ -226,8 +278,11 @@
        // this.reset();
      },
      submitDataScope: function() {
        let ul = this.fileList[0].url
        this.formDat.avatar = ul,
        // alert(this.formDat.avatar)
        this.$refs["elForm"].validate(valid => {
          if (valid) {
          if (valid && this.formDat.roomId > 0) {
            addWebcast(this.formDat).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
@@ -242,9 +297,17 @@
              // for(let i = 0; i < this.fileListOther.length; i++){
              //   this.handleRemoveFile(this.fileListOther[0]);
              // }
           this.fileList = []
              this.getList();
            });
          }else{
            this.$message.error("新增失败,房间号不能是负数");
            this.open = false;
            Object.keys(this.formDat).forEach(key => {
              this.formDat[key] = '';
            });
          }
        });
      },
@@ -256,16 +319,49 @@
        this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1]
        listWebcast(this.queryParams).then(response => {
            this.webcastList = response.data.data;
            // console.log(this.webcastList,'webcastListwebcastListwebcastList')
            console.log(this.webcastList,'webcastListwebcastListwebcastList')
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      toLook() {
        this.$router.push('/meeting/webcast/Home/')
      }
      toLook(id) {
        this.$router.push('/meeting/webcast/Home/' + id)
      },
    requestUpload(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this
      console.log(formData,'123123')
      uploadPic1(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        _this.fileList.push({name:response.data.fileName, url:response.data.url})
        console.log(this.fileList)
        // _this.fileList2.push({name:response.data.fileName, url:response.data.url})
        // alert('ok')
      })
    },
      handlePictureCardPreview(file) {
        alert(file.url)
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file) {
        for(let i = 0; i < this.fileList.length; i++)
        {
          if(this.fileList[i].url==file.url)
            this.$delete(this.fileList,i);
        }
      },
    }
  }
@@ -303,6 +399,7 @@
  }
  .module {
    /* display: flex; */
    width: 250px;
    height: 250px;
    background-color: rgb(255, 255, 255);