| | |
| | | <template> |
| | | <div class="updateUser"> |
| | | <el-form label-position="right" label-width="150px" :model="videoData" :rules="rules" :disabled="isDisabled" ref="user"> |
| | | <el-form-item prop="belongToId" label="所属事件编号"> |
| | | <el-input v-model="videoData.belongToId"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="eventSource" label="事件来源"> |
| | | <el-input v-model="videoData.eventSource"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="category" label="问题类别"> |
| | | <el-input v-model="videoData.category"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="type" label="类型"> |
| | | <el-select v-model="videoData.type"> |
| | | <el-option v-for="item in getResourceType()" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item prop="regionName" label="社区名称"> |
| | | <el-input v-model="videoData.regionName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="id" label="视频Id"> |
| | | <el-input v-model="videoData.id"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="url" label="视频" min-width="8"> |
| | | <template v-if="videoList"> |
| | | <video controls v-for="video in videoList" :src="video" :key="video" width="300px" height="200px" /> |
| | | <template v-if="videoList" > |
| | | <div class="video-cover" v-for="video in videoList" :key="video"> |
| | | <i v-if="isUpdate" @click="handleDelete(video)" class="el-icon-delete video-delete-icon"></i> |
| | | <video controls :src="video" width="100%" height="100%"/> |
| | | </div> |
| | | </template> |
| | | <el-upload |
| | | v-if="isUpdate" |
| | | class="avatar-uploader" |
| | | action="" |
| | | ref="image" |
| | | :limit="4" |
| | | :show-file-list="false" |
| | | :auto-upload="true" |
| | | :http-request="videoUpload"> |
| | |
| | | <script> |
| | | import { deepClone, RESOURCE_TYPE } from "@/utils/helper"; |
| | | import videoManagement from "@/api/operate/videoManagement"; |
| | | import { FILE_ORIGINAL_URL } from "@/utils"; |
| | | import { FILE_ORIGINAL_PATH} from "@/utils"; |
| | | import imageManagement from "@/api/operate/imageManagement"; |
| | | |
| | | export default { |
| | |
| | | belongToId: [{ required: true, trigger: 'blur', message: '请输入所属事件编号' }], |
| | | eventSource: [{ required: true, trigger: 'blur', message: '请输入事件来源' }], |
| | | regionName: [{ required: true, trigger: 'blur', message: '请输入社区名称' }], |
| | | id: [{ required: true, trigger: 'blur', message: '请输入图片Id' }], |
| | | id: [{ required: true, trigger: 'blur', message: '请输入视频Id' }], |
| | | category: [{ required: true, trigger: 'blue', message: '请输入问题类型' }], |
| | | url: [{ required: true, validator: validateVideoUrl }], |
| | | type: [{ required: true, trigger: ['blur', 'change'], message: '请选择类型' }] |
| | | }, |
| | | isDisabled: false, |
| | | videoList: null |
| | | videoList: [] |
| | | } |
| | | }, |
| | | |
| | |
| | | delete params.eventSource; |
| | | delete params.id; |
| | | params.belongToId = +params.belongToId; |
| | | params.type="03" |
| | | if (this.isUpdate && !this.dialogData) { |
| | | videoManagement.addVideoResource(params) |
| | | .then(() => { |
| | |
| | | formData.append('file', file.file); |
| | | imageManagement.importImage(formData) |
| | | .then(res => { |
| | | this.$refs.image.clearFiles(); |
| | | this.$set(this.videoData, 'url', FILE_ORIGINAL_URL + res.url1); |
| | | const url = res.url1 ?? res.url2 ?? res.url3 ?? res.url4; |
| | | const videoUrl = FILE_ORIGINAL_PATH + url; |
| | | this.videoList.push(videoUrl); |
| | | this.$set(this.videoData, 'url', this.videoList.join(',')); |
| | | this.$message.success('上传成功'); |
| | | }) |
| | | .catch(err => { |
| | |
| | | this.$refs.image.clearFiles(); |
| | | }) |
| | | }, |
| | | |
| | | handleDelete(data) { |
| | | this.videoList = this.videoList.filter(item => item !== data); |
| | | this.videoData.url = this.videoList.join(','); |
| | | }, |
| | | |
| | | getResourceType(value) { |
| | | return value ? RESOURCE_TYPE.find(item => item.value === value) : RESOURCE_TYPE; |
| | | } |
| | |
| | | <style lang="scss" scoped> |
| | | .updateUser { |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | .avatar-uploader .el-upload { |
| | | border: 1px solid #ffffff; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | overflow: hidden; |
| | | |
| | | .video-cover { |
| | | height: 169px; |
| | | display: flex; |
| | | } |
| | | .avatar-uploader .el-upload:hover { |
| | | border-color: #409EFF; |
| | | |
| | | .video-cover:hover { |
| | | background-color: #ffffff; |
| | | opacity: .6; |
| | | .video-delete-icon { |
| | | display: block; |
| | | opacity: 1; |
| | | } |
| | | } |
| | | .avatar-uploader-icon { |
| | | font-size: 14px; |
| | | color: #8c939d; |
| | | width: 50px; |
| | | height: 50px; |
| | | line-height: 50px; |
| | | text-align: center; |
| | | |
| | | .video-delete-icon { |
| | | position: absolute; |
| | | color: red; |
| | | left: calc(100% - 160px); |
| | | top: calc(100% - 150px); |
| | | z-index: 2; |
| | | height: 14px; |
| | | font-size: 24px; |
| | | display: none; |
| | | } |
| | | |
| | | .submit-button { |
| | |
| | | } |
| | | |
| | | .updateUser::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | |