<!--
|
* @Author: 张嘉彬
|
* @Date: 2021-10-27 15:12:29
|
* @Description:
|
-->
|
<template>
|
<div class="basicSet">
|
<div>
|
<el-form-item label="专区名称：" :required="true">
|
<el-input class="diyInput" v-model.trim="form.activityName" placeholder="请输入专区名称"
|
maxlength="15" show-word-limit></el-input>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item label="背景图片：" :required="true">
|
<custom-upload-img :limitNumber="999" @handle-success="handleBgSuccess"
|
@handle-remove="handleBgRemove" :fileList="fileBgList"
|
@handle-file-data="handleFileData" :multiple="true" :draggable="true">
|
</custom-upload-img>
|
</el-form-item>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations, mapState } from 'vuex'
|
export default {
|
props: ['form'],
|
data () {
|
return {
|
fileBgList: []
|
}
|
},
|
watch: {
|
diyListFirst: {
|
handler (newValue, oldvalue) {
|
this.form.activityName = newValue.activityName
|
newValue.bgImg.forEach((item) => {
|
this.fileBgList.push(item)
|
})
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
...mapState(['diyList']),
|
diyListFirst () {
|
return this.diyList[0]
|
}
|
},
|
methods: {
|
...mapMutations(['updateDiylistById']),
|
// 数组更新时重新获取数据
|
handleFileData (arr) {
|
this.updateDiylistById({ id: 'basicSet', update: { bgImg: arr } })
|
this.fileBgList = arr
|
},
|
// 移除文件数组
|
removeFile (arr, data) {
|
return arr.filter((v) => {
|
return v.id !== data.id
|
})
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleBgSuccess (data) {
|
const arr = JSON.parse(JSON.stringify(this.diyList[0].bgImg))
|
arr.push({
|
id: data.id,
|
url: data.url
|
})
|
this.updateDiylistById({ id: 'basicSet', update: { bgImg: arr } })
|
this.fileBgList.push({
|
url: data.url,
|
id: data.id
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleBgRemove (data) {
|
const arr = JSON.parse(JSON.stringify(this.diyList[0].bgImg))
|
this.updateDiylistById({
|
id: 'basicSet',
|
update: {
|
bgImg: this.removeFile(arr, data)
|
}
|
})
|
this.fileBgList = this.removeFile(this.fileBgList, data)
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
.basicSet {
|
}
|
</style>
|
