<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;">
|
<!-- <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="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">
|
<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>
|
</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="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>
|
|
<el-form-item label="持续时间" prop="meetingTitle">
|
<el-input v-model="formDat.meetingTitle" 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>
|
|
</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>
|
|
|
</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
|
} from "@/api/meeting/index";
|
|
export default {
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.dateRange = [];
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
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
|
},
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
formDat: {
|
startTime: undefined,
|
endTime: undefined,
|
title: undefined,
|
applyPerson: undefined,
|
contactPerson: undefined,
|
contactPhone: undefined,
|
createTime: undefined
|
},
|
|
}
|
},
|
methods: {
|
newRequest() {
|
// this.reset();
|
this.open = true;
|
this.title = "直播申请";
|
},
|
cancel() {
|
this.open = false;
|
// this.reset();
|
},
|
submitDataScope: function() {
|
this.$refs["elForm"].validate(valid => {
|
if (valid) {
|
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.getList();
|
});
|
}
|
});
|
|
},
|
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() {
|
this.$router.push('/meeting/webcast/Home/')
|
}
|
|
}
|
}
|
</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 {
|
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>
|
