<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<div style="font-size: 18px;font-weight: bold;">基本信息</div>
|
<el-form-item label="商品名称" prop="name">
|
<el-input v-model="form.name" maxlength="50" placeholder="请输入商品名称，不超过50个字" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品品牌" prop="brandId">
|
<el-select v-model="form.brandId" filterable placeholder="请选择，单选">
|
<el-option
|
v-for="item in brandList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="商品类别" prop="categoryId">
|
<!-- @change="changeCategory(form.categoryId)" -->
|
<el-select v-model="form.categoryId" filterable placeholder="请选择，单选">
|
<el-option
|
v-for="item in categoryList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item :label="name1" prop="attrFirstIds" v-if="name1">
|
<el-select v-model="form.attrFirstIds" multiple placeholder="请选择，支持多选">
|
<el-option
|
v-for="item in form.attrFirstList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="name2" prop="attrSecodIds" v-if="name2">
|
<el-select v-model="form.attrSecodIds" multiple placeholder="请选择，支持多选">
|
<el-option
|
v-for="item in form.attrSecodList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="指导价（元）" prop="zdPrice">
|
<el-input v-model="form.zdPrice" @input="priceCHANEG(form.zdPrice, 1)" type="number" placeholder="建议录入整数，单位元" v-trim/>
|
</el-form-item>
|
<el-form-item label="入手价（元）" prop="price">
|
<el-input v-model="form.price" @input="priceCHANEG(form.price, 2)" type="number" placeholder="建议录入整数，单位元" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品主图">
|
<el-upload
|
:action="action"
|
:file-list="form.ztList"
|
:data="{ folder: 'goods_img' }"
|
list-type="picture-card"
|
:limit="1"
|
:on-success="fileSuccess"
|
:on-exceed="exceed"
|
:on-remove="handleRemove">
|
<i class="el-icon-plus"></i>
|
<div slot="tip" class="el-upload__tip">只能上传图片格式，png格式，建议尺寸140*140px</div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="商品图片">
|
<el-upload
|
:action="action"
|
:file-list="form.files"
|
:multiple="true"
|
:data="{ folder: 'goods_img' }"
|
list-type="picture-card"
|
:on-success="fileSuccess1"
|
:on-remove="handleRemove1">
|
<i class="el-icon-plus"></i>
|
<div slot="tip" class="el-upload__tip">只能上传图片格式，png格式，建议尺寸600*600px</div>
|
</el-upload>
|
</el-form-item>
|
<template v-if="form.goodsParamList && form.goodsParamList.length > 0">
|
<div style="font-size: 18px;font-weight: bold;">参数属性值配置 <span style="font-size: 13px; font-weight: 500;">按需配置当前商品的产品参数值，单个参数值不超过30个字</span></div>
|
<el-form-item :label="item.name" v-for="(item, index) in form.goodsParamList" :key="index">
|
<el-input v-model="item.val" maxlength="30" type="text" placeholder="请输入" v-trim/>
|
</el-form-item>
|
</template>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { brand } from '@/api/system/common.js'
|
import { findListForGoodsId, create, updateById, companyCreate, companyUpdateById } from '@/api/business/goods.js'
|
export default {
|
name: 'OperaGoodsWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
name1: '',
|
name2: '',
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
categoryId: '',
|
brandId: '',
|
zdPrice: '',
|
price: '',
|
attrFirstIds: [],
|
attrFirstNames: '',
|
attrSecodIds: [],
|
attrSecodNames: '',
|
imgurl: '',
|
multifileList: [],
|
files: [],
|
ztList: [],
|
goodsParamList: [],
|
attrFirstList: [],
|
attrSecodList: []
|
},
|
// 验证规则
|
rules: {
|
name: [
|
{ required: true, message: '不能为空', trigger: 'blur' }
|
],
|
categoryId: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
brandId: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
zdPrice: [
|
{ required: true, message: '不能为空', trigger: 'blur' }
|
],
|
price: [
|
{ required: true, message: '不能为空', trigger: 'blur' }
|
]
|
},
|
options: [],
|
categoryList: [],
|
brandList: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/goods',
|
'field.id': 'id'
|
})
|
this.getbrand()
|
this.getcategory()
|
},
|
watch: {
|
'form.categoryId': {
|
immediate: true,
|
handler(news, old) {
|
if (news) {
|
this.name1 = ''
|
this.name2 = ''
|
if (old) {
|
this.form.attrFirstIds = []
|
this.form.attrSecodIds = []
|
this.form.goodsParamList = []
|
}
|
this.categoryList.forEach(item => {
|
if (item.id === news) {
|
this.name1 = item.attrFirst
|
this.name2 = item.attrSecond
|
this.form.attrFirstList = item.attrFirstList.length > 0 ? item.attrFirstList : []
|
this.form.attrSecodList = item.attrSecondList.length > 0 ? item.attrSecondList : []
|
this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList))
|
this.form.goodsParamList.forEach(item => {
|
item.pramaId = item.id
|
})
|
console.log(this.form.goodsParamList)
|
}
|
})
|
this.getcategory(1)
|
}
|
}
|
},
|
visible: {
|
handler(news, old) {
|
if (!news) {
|
this.name1 = ''
|
this.name2 = ''
|
this.form = {
|
id: null,
|
name: '',
|
categoryId: '',
|
brandId: '',
|
zdPrice: '',
|
price: '',
|
attrFirstIds: [],
|
attrFirstNames: '',
|
attrSecodIds: [],
|
attrSecodNames: '',
|
imgurl: '',
|
multifileList: [],
|
files: [],
|
ztList: [],
|
goodsParamList: [],
|
attrFirstList: [],
|
attrSecodList: []
|
}
|
}
|
}
|
}
|
},
|
methods: {
|
priceCHANEG(val, type) {
|
if (!/^[1-9]+[0-9]*$/.test(val)) {
|
this.$message.warning('只能输入正整数')
|
if (type === 1) {
|
this.form.zdPrice = ''
|
} else {
|
this.form.price = ''
|
}
|
}
|
},
|
confirm() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (this.form.attrFirstIds.length > 0) {
|
let arr = []
|
this.form.attrFirstIds.forEach(element => {
|
this.form.attrFirstList.forEach(item => {
|
if (element === item.id) {
|
arr.push(item.name)
|
}
|
})
|
})
|
this.form.attrFirstNames = arr.join(',')
|
this.form.attrFirstIds = this.form.attrFirstIds.join(',')
|
} else {
|
this.form.attrFirstNames = ''
|
this.form.attrFirstIds = ''
|
}
|
if (this.form.attrSecodIds.length > 0) {
|
let arr = []
|
this.form.attrSecodIds.forEach(element => {
|
this.form.attrSecodList.forEach(item => {
|
if (element === item.id) {
|
arr.push(item.name)
|
}
|
})
|
})
|
this.form.attrSecodNames = arr.join(',')
|
this.form.attrSecodIds = this.form.attrSecodIds.join(',')
|
} else {
|
this.form.attrSecodNames = ''
|
this.form.attrSecodIds = ''
|
}
|
if (!this.form.id) {
|
companyCreate({...this.form, type: 0})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('新建成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
} else {
|
companyUpdateById({...this.form, type: 0})
|
.then(() => {
|
this.visible = false
|
this.$tip.apiSuccess('编辑成功')
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking = false
|
})
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
exceed() {
|
this.$message.warning({
|
message: '只能上传一个图标'
|
})
|
},
|
initMuitlFiles (fileList) {
|
const list = [];
|
fileList.forEach(rawFile => {
|
list.push({ fileurl: rawFile.response.data.imgaddr, name: rawFile.response.data.imgname, url: rawFile.response.data.url })
|
});
|
return list;
|
},
|
fileSuccess1(response, file, fileList) {
|
this.form.files = fileList
|
// this.form.multifileList.push({ fileurl: response.data.imgaddr, name: response.data.imgname, url: response.data.url })
|
this.form.multifileList=this.initMuitlFiles(fileList);
|
},
|
handleRemove1(file, fileList) {
|
this.form.files = fileList
|
// this.form.multifileList = fileList
|
this.form.multifileList=this.initMuitlFiles(fileList);
|
},
|
fileSuccess(response) {
|
this.form.ztList.push({ imgaddr: response.data.imgaddr, url: response.data.url })
|
this.form.imgurl = response.data.imgaddr
|
},
|
handleRemove() {
|
this.form.ztList = []
|
this.form.imgurl = ''
|
},
|
getbrand() {
|
brand({})
|
.then(res => {
|
this.brandList = res
|
})
|
},
|
getcategory(type) {
|
findListForGoodsId(this.form.id || '')
|
.then(res => {
|
this.categoryList = res
|
if (type === 1) {
|
this.categoryList.forEach(item => {
|
if (item.id === this.form.categoryId) {
|
this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList))
|
this.form.goodsParamList.forEach(item => {
|
item.pramaId = item.id
|
})
|
console.log(this.form.goodsParamList)
|
}
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
