<template>
|
<div class="updateUser">
|
<el-form label-position="right" label-width="150px" :model="videoData" :rules="rules" :disabled="isDisabled" ref="user">
|
<el-form-item prop="url" label="视频" min-width="8">
|
<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">
|
<el-button size="small" type="primary">上传视频<i class="el-icon-upload el-icon--right"></i></el-button>
|
</el-upload>
|
</el-form-item>
|
<el-button v-if="!isDisabled" class="submit-button" type="primary" @click.native.prevent="onSubmit">提交</el-button>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import { deepClone, RESOURCE_TYPE } from "@/utils/helper";
|
import videoManagement from "@/api/operate/videoManagement";
|
import { FILE_ORIGINAL_PATH} from "@/utils";
|
import imageManagement from "@/api/operate/imageManagement";
|
|
export default {
|
data() {
|
const validateVideoUrl = (rule, value, callback) => {
|
if (this.videoData.url) {
|
callback();
|
} else {
|
callback(new Error('请上传视频'));
|
}
|
};
|
return {
|
videoData: {
|
belongToId: '',
|
eventSource: '',
|
regionName: '',
|
category: '',
|
id: '',
|
url: '',
|
type: ''
|
},
|
rules: {
|
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' }],
|
category: [{ required: true, trigger: 'blue', message: '请输入问题类型' }],
|
url: [{ required: true, validator: validateVideoUrl }],
|
type: [{ required: true, trigger: ['blur', 'change'], message: '请选择类型' }]
|
},
|
isDisabled: false,
|
videoList: []
|
}
|
},
|
|
created() {
|
this.videoData = deepClone(this.dialogData);
|
if (this.videoData.url) {
|
this.videoList = this.videoData.url.split(',');
|
}
|
this.isDisabled = !this.isUpdate;
|
},
|
methods: {
|
onSubmit() {
|
this.$refs.user.validate(valid => {
|
if (valid) {
|
const params = Object.assign({}, this.videoData);
|
delete params.regionName;
|
delete params.category;
|
delete params.eventSource;
|
delete params.id;
|
params.belongToId = +params.belongToId;
|
params.type="03"
|
if (this.isUpdate && !this.dialogData) {
|
videoManagement.addVideoResource(params)
|
.then(() => {
|
this.$message.success('操作成功');
|
this.$emit('closeDialog');
|
})
|
.catch(err => this.$message.error(`${err}`))
|
} else {
|
videoManagement.updateVideoResource(params)
|
.then(() => {
|
this.$message.success('操作成功');
|
this.$emit('closeDialog');
|
})
|
.catch(err => this.$message.error(`${err}`))
|
}
|
} else {
|
this.$message.warning('请检查必填项');
|
}
|
})
|
},
|
videoUpload(file) {
|
const formData = new FormData();
|
formData.append('file', file.file);
|
imageManagement.importImage(formData)
|
.then(res => {
|
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.$message.error(`${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;
|
}
|
},
|
props: {
|
dialogData: {
|
type: Object,
|
default: () => null
|
},
|
isUpdate: {
|
type: Boolean,
|
default: () => false
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.updateUser {
|
border-radius: 1px;
|
// background-color: #09152f;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.video-cover {
|
height: 169px;
|
display: flex;
|
}
|
|
.video-cover:hover {
|
background-color: #ffffff;
|
opacity: .6;
|
.video-delete-icon {
|
display: block;
|
opacity: 1;
|
}
|
}
|
|
.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 {
|
margin-left: 200px;
|
}
|
}
|
|
.updateUser::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
|
.updateUser::v-deep .el-input__inner {
|
// background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
.addPerson {
|
display: flex;
|
list-style: none;
|
padding: 0;
|
flex-wrap: wrap;
|
max-width: 280px;
|
|
li {
|
color: #fff;
|
text-align: center;
|
font-size: 30px;
|
margin-left: 10px;
|
}
|
}
|
|
.li-icon {
|
background-color: #cccccc;
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
margin: 0 auto;
|
}
|
|
.li-btn {
|
background-color: #cccccc;
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
}
|
|
.leader {
|
color: red;
|
}
|
|
.el-input, .el-select {
|
width: 280px !important;
|
}
|
</style>
|
