<template>
|
<div>
|
<p class="basicTip">
|
小贴士：为防止失真热区图片尺寸需与区域大小严格一致
|
</p>
|
<div>
|
<el-form-item label="热区图片：">
|
<custom-upload-img
|
@handle-success="handleSuccess"
|
@handle-remove="handleRemove"
|
:fileList="fileList"
|
:form="form"
|
:isHot="true"
|
>
|
</custom-upload-img>
|
</el-form-item>
|
<el-form-item label="商品分类：" :required="true">
|
<el-cascader ref="cascader" :options="categoryArray" :props="setProps" v-model="form.catIdArr" @change="handleChange" clearable>
|
</el-cascader>
|
</el-form-item>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import productCategoryApi from '@/api/productCategory'
|
import { mapMutations } from 'vuex'
|
|
export default {
|
props: ['form'],
|
data () {
|
return {
|
categoryArray: [],
|
setProps: {
|
value: 'catId',
|
label: 'catName',
|
children: 'childrens'
|
}
|
}
|
},
|
created () {
|
this.getCategory()
|
},
|
computed: {
|
fileList () {
|
return this.form.fileUrl ? [{ url: this.form.fileUrl, id: this.form.fileId }] : []
|
}
|
},
|
methods: {
|
...mapMutations(['updateCurrent']),
|
// 点击分类时获取值（点击即改变）
|
clickCategory (name, event) {
|
event.target.parentElement.parentElement.firstChild.click()
|
// // 点击文字 关闭选择框
|
// if (this.$refs[name].toggleDropDownVisible) {
|
// this.$refs[name].toggleDropDownVisible(false)
|
// } else {
|
// this.$refs[name][0].toggleDropDownVisible(false)
|
// }
|
},
|
/**
|
* 获取分类树
|
*/
|
getCategory () {
|
productCategoryApi.getList({ bizId: 'B02' }).then(res => {
|
if (res.data) {
|
this.categoryArray = res.data
|
}
|
})
|
},
|
/**
|
* 选择分类
|
*/
|
handleChange (val) {
|
if (val.length > 0) {
|
this.updateCurrent({ catId: val[val.length - 1] })
|
} else {
|
this.updateCurrent({ catId: null })
|
}
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (data) {
|
this.updateCurrent({ fileUrl: data.url, fileId: data.id })
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (data) {
|
this.updateCurrent({ fileUrl: null, fileId: null })
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
