| | |
| | | <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; |
| | |
| | | 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); |
| | | } |
| | | }, |
| | | |
| | | |
| | | |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | .module { |
| | | /* display: flex; */ |
| | | width: 250px; |
| | | height: 250px; |
| | | background-color: rgb(255, 255, 255); |