<template>
|
<div class="app-container" style="width:100%; height: 100%;">
|
<!-- 回到顶部 -->
|
<el-backtop :bottom="150" :right="30">
|
<el-button type="primary" circle class="el-icon-top"></el-button>
|
</el-backtop>
|
|
<!-- 标题 -->
|
<h1 style="font-size:21px;padding-top:30px;display: flex;">
|
<span>直播</span>
|
<div class="button-container"></div>
|
<div style="display: flex; align-items: center;">
|
</div>
|
</h1>
|
<hr>
|
|
<!-- 搜索 -->
|
<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;
|
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;
|
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="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>
|
|
<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="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="duration">
|
<el-input v-model="formDat.duration" type="number" 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 {
|
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: {
|
startTime: undefined,
|
endTime: undefined,
|
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;
|
this.title = "直播申请";
|
},
|
cancel() {
|
this.open = false;
|
// 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 && 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] = '';
|
});
|
}
|
|
});
|
|
},
|
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);
|
}
|
},
|
|
|
|
}
|
}
|
</script>
|
<style scoped="">
|
.video {
|
background-color: black;
|
width: 90%;
|
margin-top: 5%;
|
margin-left: 5%;
|
height: 70%;
|
position: absolute;
|
}
|
|
.app-container {
|
background-color: #FEF7FC;
|
/* width: 2000px;
|
height: 1500px; */
|
}
|
|
.button-container {
|
text-align: right;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
flex-grow: 1;
|
}
|
|
.el-table {
|
border-radius: 14px 14px 14px 14px;
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.module {
|
/* display: flex; */
|
width: 250px;
|
height: 250px;
|
background-color: rgb(255, 255, 255);
|
border-color: red;
|
border-radius: 6%;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
/* margin-left: 5px;
|
margin-right: 5px; */
|
position: relative;
|
cursor: pointer;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
|
.span1 {
|
float: left;
|
font-size: 15px;
|
position: absolute;
|
bottom: 40px;
|
left: 80px;
|
}
|
|
.tubiao {
|
position: absolute;
|
bottom: 20px;
|
right: 10px;
|
}
|
|
.author {
|
position: absolute;
|
bottom: 10px;
|
left: 80px;
|
}
|
|
.form {
|
background: center/11% no-repeat url('../../assets/icons/add1.png');
|
|
}
|
</style>
|
