feige
2025-01-02 43e1199ca0c75787fb6b52bef7d595abd115ceab
ruoyi-ui/src/views/meeting/webcast.vue
@@ -10,216 +10,264 @@
      <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>
    <!-- 搜索 -->
    <el-form :model="queryParams1">
      <el-row>
        <el-form-item label="" prop="people">
          <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 300px;
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="直播标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入直播标题" clearable style="width: 200px;
                   height: 35px;
                   text-align: left;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
      </el-row>
                   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;
          border-radius: 6px 6px 6px 6px;opacity:1;">搜索</el-button>
        <el-button size="mini" @click="resetQuery" style=" width: 65px;height: 32px; background: #FFDDE3;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="0">
      <el-col :span="4">
        <div class="module" @click="toLook">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="newRequest"
          v-hasPermi="['person:information:memo']"
        >新增</el-button>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row :gutter="0" v-loading="loading">
      <el-col :span="4" v-for="(item,i) in webcastList">
        <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>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page-sizes="pageSizes"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      style="background: #FEF7FC;"
    />
    <!-- 直播申请对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px">
        <!--        <el-form-item label="获得时间" prop="happenTime">-->
        <!--          <el-input v-model="formDat.happenTime" placeholder="请输入获得时间" clearable :style="{width: '100%'}" ></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="开始时间" prop="happenTime">
        </el-form-item> -->
        <el-form-item label="时间" prop="timeSpan">
          <el-date-picker v-model="formDat.timeSpan" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
        <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>
        <el-form-item label="会议标题" prop="meetingTitle">
          <el-input v-model="formDat.meetingTitle" placeholder="请输入会议标题" clearable :style="{width: '100%'}">
        <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="address">
          <el-input v-model="formDat.address" placeholder="请输入会议地点" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item> -->
<!--        <el-form-item label="会议室代码" prop="meetingID">
          <el-input v-model="formDat.meetingID" placeholder="请输入会议室代码" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item> -->
      <!--  <el-form-item label="可容纳人数" prop="capacity">
          <el-input v-model="formDat.capacity" placeholder="请输入可容纳人数" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item> -->
        <!-- <el-form-item label="参与人数" prop="attendance">
          <el-input v-model="formDat.attendance" placeholder="请输入参与人数" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item> -->
        <el-form-item label="申请人" prop="applicant">
          <el-input v-model="formDat.applicant" placeholder="请输入申请人" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="申请家庭或部门" prop="familyName">
          <el-input v-model="formDat.familyName" placeholder="请输入申请家庭或部门" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item> -->
        <el-form-item label="联系人" prop="name">
          <el-input v-model="formDat.name" placeholder="请输入联系人" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formDat.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <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 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%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="applyPerson">
          <el-input v-model="formDat.applyPerson" placeholder="请输入申请人" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="formDat.contactPerson" placeholder="请输入联系人" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <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>
  </div>
</template>
<script>
  import {
    listRole,
    getRole,
    delRole,
    addRole,
    updateRole,
    dataScope,
    changeRoleStatus,
    deptTreeSelect
  } from "@/api/system/role";
  import {
    treeselect as menuTreeselect,
    roleMenuTreeselect
  } from "@/api/system/menu";
  import {
    Notification,
    MessageBox,
    Message,
    Loading
  } from 'element-ui'
  //导入接口函数  --接好了
  import {
    addWebcast,
    listWebcast,
    getWebcastInfo,
    uploadPic,
    uploadPic1,
  } from "@/api/meeting/index";
  export default {
    created() {
      this.getList();
    },
    data() {
      return {
        queryParams1: [],
        showSearch: true,
        pageSizes: [12, 24, 36],
        webcastList:[],
        // 总条数
        total: 0,
        loading: true,
        dateRange: [],
        queryParams: {
          pageNum: 1,
          pageSize: 12,
          title: undefined,
          applyPerson: undefined,
          contactPerson: undefined,
          happenStartTime: undefined,
          happenEndTime: undefined
        },
        // 遮罩层
        disabled: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        formDat: {
          id: undefined,
          happenTime: undefined,
          startTime: undefined,
          endTime: undefined,
          timeSpan: undefined,
          meetingTitle: undefined,
          address: undefined,
          meetingID: undefined,
          capacity: undefined,
          attendance: undefined,
          applicant: undefined,
          familyName: undefined,
          name: undefined,
          phone: undefined,
          url: "",
          title: undefined,
          applyPerson: undefined,
          contactPerson: undefined,
          contactPhone: undefined,
          createTime: undefined,
          roomId:undefined,
          maxPerson:undefined,
          duration:undefined,
          avatar:undefined,
        },
                  uploadFileList: [],
      fileList:[],
      dialogImageUrl: '',
      dialogVisible: false,
      }
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      newRequest() {
        // this.reset();
        this.open = true;
@@ -229,12 +277,91 @@
        this.open = false;
        // this.reset();
      },
      submitDataScope() {
        console.log(this.formDat.timeSpan)
      submitDataScope: function() {
        let ul = this.fileList[0].url
        this.formDat.avatar = ul,
        // alert(this.formDat.avatar)
        this.$refs["elForm"].validate(valid => {
          if (valid && this.formDat.roomId > 0) {
            addWebcast(this.formDat).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              // 清空formDat对象的数据
              Object.keys(this.formDat).forEach(key => {
                this.formDat[key] = '';
              });
              // for(let i = 0; i <= this.fileList.length; i++)
              // {
              //   this.handleRemove(this.fileList[0]);
              // }
              // 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] = '';
            });
          }
        });
      },
      toLook(){
        this.$router.push('/meeting/webcast/webcastInfo/')
      }
      getList() {
        this.loading = true;
        // console.log(this.queryParams)
        //  listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0]
        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')
            this.total = response.data.total;
            this.loading = false;
          }
        );
      },
      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);
        }
      },
    }
  }
@@ -272,6 +399,7 @@
  }
  .module {
    /* display: flex; */
    width: 250px;
    height: 250px;
    background-color: rgb(255, 255, 255);