<template>
|
<GlobalWindow
|
v-loading="isUploading"
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules" label-width="110px" label-suffix="：" inline>
|
<el-form-item label="商品名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入商品名称" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品分类" prop="categoryId">
|
<el-select v-model="form.categoryId" placeholder="请选择所属分类" clearable filterable >
|
<el-option
|
v-for="item in labels()"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="商品品牌" prop="brandId">
|
<el-select v-model="form.brandId" placeholder="请选择商品品牌" clearable filterable >
|
<el-option
|
v-for="item in brands()"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="商品主图" prop="imgurl">
|
<div style="display: flex; align-items: center;justify-content: center; height: 100%; width: 100%">
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl}"
|
:uploadData="{folder:'goods'}"
|
@uploadSuccess="uploadAvatarSuccess"
|
@uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true"
|
style=" width: 120px;"
|
/>
|
<div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
|
建议尺寸：100px X 100px
|
支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="商品轮播图" prop="fileList">
|
<UploadImage
|
:fileList="form.fileList"
|
:uploadData="{folder:'goods'}"
|
@beginUpload="isUploading=true"
|
@endUpload="isUploading=false"/>
|
<p class="tip-warn">
|
建议尺寸：750px X 750px，上限6张
|
支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情,
|
</p>
|
</el-form-item>
|
<el-form-item label="出厂价（元）" prop="price">
|
<el-input type="number" v-model="form.price" placeholder="请输入出厂价" v-trim> <template slot="append"> 元</template> </el-input>
|
</el-form-item>
|
<el-form-item label="销售价（元）" prop="skuPrice">
|
<el-input type="number" v-model="form.skuPrice" placeholder="请输入销售价" v-trim> <template slot="append"> 元</template> </el-input>
|
</el-form-item>
|
<el-form-item label="划线价（元）" prop="showPrice">
|
<el-input type="number" v-model="form.showPrice" placeholder="请输入线价" v-trim> <template slot="append"> 元</template> </el-input>
|
</el-form-item>
|
<el-form-item label="积分抵扣额度" prop="deductRata">
|
<el-input type="number" v-model="form.deductRata" placeholder="请输入积分抵扣额度" v-trim>
|
<template slot="append">%</template>
|
</el-input>
|
<p class="tip-warn" style="margin-bottom: 1px;"><i class="el-icon-warning"></i>提醒：积分可抵扣金额占商品零售价的百分比，0.1%～100%之间 </p>
|
</el-form-item>
|
<el-form-item label="库存量" prop="stockNum">
|
<el-input type="number" v-model="form.stockNum" placeholder="请输入商品库存量" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品单位" prop="unitName">
|
<el-input v-model="form.unitName" placeholder="请输入商品单位" v-trim/>
|
</el-form-item>
|
<el-form-item label="初始销量" prop="salenum">
|
<el-input type="number" v-model="form.salenum" placeholder="请输入初始销量" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品重量" prop="weight">
|
<el-input type="number" v-model="form.weight" placeholder="请输入商品重量" v-trim>
|
<template slot="append">kg</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="是否上架" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :value="1" :label="1" >上架</el-radio>
|
<el-radio :value="0" :label="0" >下架</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="使用商品品牌" prop="brandIdList">
|
<el-select v-model="form.brandIdList" placeholder="请选择商品品牌" clearable multiple @change="changeBrand">
|
<el-option
|
v-for="item in applyBrands"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<div v-if="form.brandIdList && form.brandIdList.length" style="border:1px solid #f2f2f2; margin-left: 150px;width: 700px;padding: 20px 0 0px 0;margin-bottom: 20px;" class="el-form-item__content">
|
<!--
|
<span style="line-height: 32px;font-size: 14px;"><b style="color: #F56C6C;margin-right: 4px;font-size: 11px;">*</b>{{'【'+(item.name)+'】系列：'}}</span>
|
-->
|
<el-form-item v-for="(item,index) in applyBrands" v-if="item.show" :key="'warning_'+index" style="display: block;width: 100%;" :label="'【'+(item.name)+'】系列'" >
|
<el-select v-model="item.childIdList" filterable multiple style=" width: 500px;" clearable placeholder="请选择品牌系列" >
|
<el-option v-for="item in item.childList" :label="item.name" :value="item.id" :key="'brand_'+index+item.id"> </el-option>
|
</el-select>
|
</el-form-item>
|
<!--
|
<el-button type="danger" style="margin-left: 10px;height: 32px; " @click="delDo(index)" v-if="index>0 || form.detailList.length>1">删除</el-button>
|
-->
|
</div>
|
<el-form-item label="商品详情" prop="content">
|
<RichEditor :richData="form.content" :styleEditor="'border: 1px solid #ccc;display: inline-block;height:500px;'" @getWangedditor="getWangedditor" :readonly="false"/>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadImage from '@/components/common/UploadImage'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
import RichEditor from '@/components/common/RichEditor'
|
import { findAll as labelList } from '@/api/business/labels'
|
export default {
|
name: 'OperaGoodsWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadImage, UploadAvatarImage, RichEditor },
|
data () {
|
return {
|
isUploading: false,
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
categoryId: '',
|
brandId: '',
|
price: '',
|
fileList: [],
|
imgurl: '',
|
imgurlfull: '',
|
salenum: '',
|
type: 0,
|
info: '',
|
content: '',
|
sortnum: '',
|
skuPrice: null,
|
status: 1,
|
showPrice: null,
|
deductRata: null,
|
weight: null,
|
unitName: '',
|
stockNum: null,
|
brandIdList: [],
|
brandList: []
|
},
|
applyBrands: [],
|
// 验证规则
|
rules: {
|
name: [{ required: true, message: '请输入商品名称', tigger: 'blur' }],
|
categoryId: [{ required: true, message: '请选择所属分类' }],
|
brandIdList: [{ required: true, message: '请录入适用品牌和系列信息' }],
|
weight: [{ required: true, message: '请输入商品重量' }],
|
price: [{ required: true, message: '请输入商品出厂价' }],
|
skuPrice: [{ required: true, message: '请输入商品零售价' }],
|
deductRata: [{ required: true, message: '请输入积分抵扣比例' }],
|
status: [{ required: true, message: '请选择是否上架' }]
|
}
|
}
|
},
|
inject: ['labels', 'brands'],
|
created () {
|
this.config({
|
api: '/business/goods',
|
'field.id': 'id'
|
})
|
this.loadBrandList()
|
},
|
methods: {
|
isSeletedBrand (val) {
|
var r = false
|
if (!this.form.brandIdList || !this.form.brandIdList.length) {
|
return false
|
}
|
this.form.brandIdList.forEach(item => {
|
if (item === val.id) {
|
r = true
|
}
|
})
|
return r
|
},
|
changeBrand () {
|
this.applyBrands.forEach(item => {
|
item.show = this.isSeletedBrand(item)
|
})
|
console.log(this.form.brandIdList, this.applyBrands)
|
},
|
loadBrandList () {
|
labelList({
|
type: 14 // 适应商品品牌
|
})
|
.then(res => {
|
this.applyBrands = res
|
this.applyBrands.forEach(item => {
|
item.show = this.isSeletedBrand(item)
|
})
|
})
|
},
|
getWangedditor (val) {
|
this.form.content = val
|
},
|
open (title, target, type) {
|
this.title = title
|
this.visible = true
|
this.form.brandIdList = []
|
this.form.fileList = []
|
this.form.imgurl=''
|
this.form.imgurlfull=''
|
// debugger
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
this.form.type = type
|
})
|
this.loadBrandList()
|
return
|
}
|
// 编辑
|
this.$nextTick(async () => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.form.type = type
|
await this.loadInfo(this.form.id)
|
if (this.form.imgurl) {
|
this.form.imgurlfull = target.resourcePath + target.imgurl
|
}
|
})
|
},
|
loadInfo () {
|
this.form.brandIdList =[]
|
this.form.fileList =[]
|
this.api.detail(this.form.id).then(res => {
|
if (res && res.brandList) {
|
this.form.brandList = res.brandList
|
res.brandList.forEach(item => {
|
this.form.brandIdList.push(item.id)
|
})
|
}
|
if (res.fileList && res.fileList.length) {
|
res.fileList.forEach(item => {
|
this.form.fileList.push(
|
{
|
fileurl: item.fileurl,
|
name: item.fileName,
|
url: res.resourcePath + item.fileurl
|
}
|
)
|
})
|
console.log(this.form.fileList)
|
}
|
this.loadBrandList()
|
})
|
},
|
uploadAvatarSuccess (file) {
|
this.form.imgurlfull = file.imgurlfull
|
this.form.imgurl = file.imgurl
|
},
|
confirm () {
|
this.form.brandList = []
|
this.applyBrands.forEach(item => {
|
if (item.show) {
|
this.form.brandList.push(item)
|
}
|
})
|
if (this.form.id == null || this.form.id === '') {
|
this.__confirmCreate()
|
return
|
}
|
this.__confirmEdit()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/alertstyle.scss";
|
::v-deep .el-form-item__content {
|
flex: 0.6;
|
}
|
::v-deep .el-select {
|
width: 100%;
|
.el-input__inner {
|
width: 100%;
|
}
|
}
|
::v-deep .el-form-item__label{
|
width: 150px !important;
|
}
|
</style>
|
