<template>
|
<div class="findMgt inner-bg-style">
|
<div class="find-title">内容填充</div>
|
<hr/>
|
<el-form size="mini" ref="form" :model="form" label-width="120px">
|
<h6 v-show="!form.fileVideoList.length && !form.fileImgList.length && !form.discoveryId">
|
注：图片或视频不能共存，当您选择了一种内容填充的方式后，我们会为您隐藏与之冲突的填充方式
|
</h6>
|
<h6 v-show="form.fileImgList.length || (form.mediaType === '0'&&form.discoveryId)">
|
注：图片或视频不能共存，您当前还可上传{{9-form.fileImgList.length}}张图片
|
</h6>
|
<h6 v-show="form.fileVideoList.length || (form.mediaType === '1'&&form.discoveryId)">
|
注：图片或视频不能共存，完善文字描述即可完成内容填充
|
</h6>
|
<el-form-item label="图片："
|
v-show="(form.mediaType === '0'&&form.discoveryId) || (!form.fileVideoList.length&&!form.discoveryId)"
|
required
|
>
|
<custom-upload-img
|
:limitNumber="9"
|
@handle-success="handleImgSuccess"
|
@handle-remove="handleImgRemove"
|
:fileList="form.fileImgList"
|
:isMoreThanOneLine="true"
|
@handle-file-data="handleFileData"
|
:draggable="true"
|
:imageSize="'172 * 172'"
|
>
|
<template slot="appendPart" slot-scope="item">
|
<span class="coverImg" v-show="item.data.index === 0">封面</span>
|
</template>
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="视频样式：" required v-show="(form.mediaType === '1'&&form.discoveryId) || form.fileVideoList.length">
|
<el-select v-model="form.displayType" placeholder="请选择视频样式">
|
<el-option label="普通" value="1"></el-option>
|
<el-option label="竖屏专享" value="0"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="视频：" required v-show="(form.mediaType === '1'&&form.discoveryId) || (!form.fileImgList.length&&!form.discoveryId)">
|
<custom-upload-img
|
:limitNumber="1"
|
@handle-success="handleVideoSuccess"
|
@handle-remove="handleVideoRemove"
|
:fileList="form.fileVideoList"
|
:accept='".mp4"'
|
></custom-upload-img>
|
</el-form-item>
|
<el-form-item label="封面："
|
v-show="(form.mediaType === '1'&&form.discoveryId) || form.fileVideoList.length"
|
>
|
<custom-upload-img
|
:limitNumber="1"
|
@handle-success="handleCoverSuccess"
|
@handle-remove="handleCoverRemove"
|
:fileList="form.fileCoverList"
|
:imageSize="form.displayType === '1'? '172 * 172' : form.displayType === '0'?'215 * 172':''"
|
>
|
<template slot="appendPart">
|
<span class="coverImg">封面</span>
|
</template>
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="内容概览：" prop="content" :rules="content" v-show="form.fileImgList.length || form.fileVideoList.length || form.discoveryId">
|
<emoji-input
|
:maxlength="form.fileImgList.length ? 1000 : 30"
|
:content.sync="form.content"
|
></emoji-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
:disabled="btnIsDisabled || (form.discoveryId && !isChange)"
|
size="mini" @click="submit"
|
:loading="btnLoading"
|
>{{form.discoveryId ? '修改' : '上传'}}
|
</el-button>
|
<el-button size="mini" v-show="form.discoveryId" @click="cancel">返回</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import findMgtApi from '@/api/findMgt'
|
import emojiInput from '@/components/emoji/emojiInput.vue'
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
|
export default {
|
components: { emojiInput },
|
data() {
|
const contentValidate = (rule, value, callball) => {
|
if (this.form.fileImgList.length && value && value.length > 1000) {
|
callball(new Error('内容概览不能超过1000字'))
|
} else if (this.form.fileVideoList.length && value && value.length > 30) {
|
callball(new Error('内容概览不能超过30字'))
|
} else {
|
callball()
|
}
|
}
|
return {
|
content: [
|
{ required: true, validator: contentValidate }
|
],
|
form: {
|
discoveryId: null,
|
displayType: null, // 展现形式
|
content: null,
|
fileImgList: [],
|
fileVideoList: [],
|
fileCoverList: [],
|
mediaType: null
|
},
|
isChange: false, // 是否变化
|
flag: true, // 详情时 标记是否可以编辑
|
btnLoading: false
|
}
|
},
|
computed: {
|
// 上传按钮是否禁用
|
btnIsDisabled() {
|
let status = true
|
const img = this.form ? this.form.fileImgList.length : 0
|
// const cover = this.form ? this.form.fileCoverList.length : 0
|
const video = this.form ? this.form.fileVideoList.length : 0
|
if (video || img) {
|
if (video && this.form.displayType && this.form.content) {
|
status = false
|
} else if (img && this.form.content) {
|
status = false
|
} else {
|
status = true
|
}
|
} else {
|
status = true
|
}
|
return status
|
}
|
},
|
watch: {
|
form: {
|
handler: function(newValue, oldValue) {
|
if (this.flag && this.form.discoveryId) {
|
this.isChange = true
|
} else if (!this.form.discoveryId) {
|
this.isChange = true
|
this.flag = false
|
} else if (!this.flag && this.form.discoveryId) {
|
this.flag = true
|
}
|
},
|
deep: true
|
}
|
},
|
created() {
|
if (this.$route.query.id) {
|
this.getDetails()
|
}
|
},
|
methods: {
|
/**
|
* 获取详情
|
*/
|
async getDetails() {
|
try {
|
const res = await findMgtApi.detailsItem({ discoveryId: this.$route.query.id })
|
if (res.code === '0') {
|
const data = res.data
|
this.flag = false
|
this.form = objectCopy(res.data, this.form)
|
data.fieldId = data.fieldId.split(',')
|
if (data.mediaType === '0') {
|
data.urlList.forEach((item, index) => {
|
this.form.fileImgList.push({
|
url: item,
|
fileId: data.fieldId[index]
|
})
|
})
|
} else {
|
data.urlList.forEach((item, index) => {
|
this.form.fileVideoList.push({
|
url: item,
|
fileId: data.fieldId[index]
|
})
|
})
|
if (data.coverUrl) {
|
this.form.fileCoverList = [{
|
url: data.coverUrl,
|
fileId: data.coverId
|
}]
|
}
|
}
|
}
|
} catch (error) {
|
}
|
},
|
// 数组更新时重新获取数据
|
handleFileData(arr) {
|
this.form.fileImgList = arr
|
},
|
// 取消
|
cancel() {
|
if (this.isChange) {
|
this.$confirm('若点击确定，则您之前编辑的未保存内容都将丢失', '未保存更改', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$router.push({ name: 'findMgtList' })
|
}).catch(() => {
|
})
|
} else {
|
this.$router.push({ name: 'findMgtList' })
|
}
|
},
|
// 保存
|
submit() {
|
this.$refs.form.validate().then(res => {
|
this.btnLoading = true
|
if (this.form.discoveryId) {
|
this.editInfo()
|
} else {
|
this.addInfo() // 新增
|
}
|
})
|
},
|
// 表单数据处理
|
async handFormData() {
|
const formData = {}
|
formData.filedIdList = []
|
if (this.form.fileImgList.length) {
|
formData.mediaType = '0'
|
formData.coverId = this.form.fileImgList[0].fileId
|
formData.filedIdList = this.form.fileImgList.map(item => {
|
return item.fileId
|
})
|
formData.picInfo = await this.getImgWH(this.form.fileImgList[0].url)
|
} else {
|
formData.mediaType = '1'
|
formData.filedIdList = this.form.fileVideoList.map(item => {
|
return item.fileId
|
})
|
formData.coverId = this.form.fileCoverList.length ? this.form.fileCoverList[0].fileId : null
|
if (formData.coverId) {
|
formData.picInfo = await this.getImgWH(this.form.fileCoverList[0].url)
|
}
|
}
|
formData.content = this.form.content
|
formData.displayType = this.form.displayType
|
formData.discoveryId = this.form.discoveryId
|
return formData
|
},
|
// 获取图片宽高
|
getImgWH(src) {
|
const img = new Image()
|
img.src = src
|
const imgWH = new Promise((resolve, reject) => {
|
img.onload = () => {
|
resolve({
|
width: img.width,
|
height: img.height
|
})
|
}
|
})
|
return imgWH
|
},
|
/**
|
* 增加
|
*/
|
async addInfo() {
|
try {
|
const res = await findMgtApi.addInfo(await this.handFormData())
|
if (res.code === '0') {
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
this.btnLoading = false
|
this.$router.push({ name: 'findMgtList' })
|
} else {
|
this.btnLoading = false
|
}
|
} catch (error) {
|
this.btnLoading = false
|
}
|
},
|
/**
|
* 编辑
|
*/
|
async editInfo() {
|
try {
|
const res = await findMgtApi.editInfo(await this.handFormData())
|
if (res.code === '0') {
|
this.btnLoading = false
|
this.$message({
|
message: '修改成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'findMgtList' })
|
} else {
|
this.btnLoading = false
|
}
|
} catch (error) {
|
this.btnLoading = false
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleImgSuccess(data) {
|
this.form.fileImgList.push({
|
url: data.url,
|
fileId: data.id
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleImgRemove(file) {
|
if (this.form.fileImgList.length === 1 && !this.form.discoveryId) {
|
this.$confirm('删除最后一张图片会丢失当前所有已输入的文字内容', '删除图片', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.form.fileImgList = this.deleteFile(this.form.fileImgList, file)
|
this.form.content = null
|
}).catch(() => {
|
})
|
} else {
|
this.form.fileImgList = this.deleteFile(this.form.fileImgList, file)
|
}
|
},
|
// 删除文件
|
deleteFile(arr, file) {
|
arr = arr.filter(v => {
|
return v.url !== file.url
|
})
|
return arr
|
},
|
/**
|
* 获取上传成功的视频
|
*/
|
handleVideoSuccess(data) {
|
this.form.fileVideoList = [{
|
url: data.url,
|
fileId: data.id
|
}]
|
},
|
/**
|
* 移除视频
|
*/
|
handleVideoRemove(file) {
|
if (!this.form.discoveryId) {
|
this.$confirm('删除视频会丢失当前所有已输入的文字内容', '删除视频', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.form.fileVideoList = this.deleteFile(this.form.fileVideoList, file)
|
this.form.fileCoverList = []
|
this.form.content = null
|
this.form.displayType = null
|
}).catch(() => {
|
})
|
} else {
|
this.form.fileVideoList = this.deleteFile(this.form.fileVideoList, file)
|
}
|
},
|
/**
|
* 获取上传成功的视频
|
*/
|
handleCoverSuccess(data) {
|
this.form.fileCoverList.push({
|
url: data.url,
|
fileId: data.id
|
})
|
},
|
/**
|
* 移除视频
|
*/
|
handleCoverRemove(file) {
|
this.form.fileCoverList = this.deleteFile(this.form.fileCoverList, file)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.findMgt{
|
padding:0 20px 20px;
|
hr{
|
height:1px;
|
background-color: #ccc;
|
border:none;
|
}
|
.find-title{
|
font-size: 18px;
|
padding: 15px 0;
|
}
|
.el-form{
|
width: 950px;
|
}
|
}
|
</style>
|
