<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="请输入商品名称" disabled v-trim/>
|
</el-form-item>
|
<el-form-item label="商品分类" prop="categoryId">
|
<el-select v-model="form.categoryId" disabled 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" disabled 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; height: 100%; width: 100%">
|
<el-image style="width: 50px;height: 50px;" v-if="form.imgurlfull" :src="form.imgurlfull" :preview-src-list="[form.imgurlfull]"></el-image>
|
</div>
|
</el-form-item>
|
<el-form-item label="商品轮播图" prop="fileList">
|
<div v-if="form.fileList && form.length">
|
<el-image v-for="item in form.fileList" style="width: 50px;height: 50px;" :src="item.url" :preview-src-list="[item.url]"></el-image>
|
</div>
|
</el-form-item>
|
<el-form-item label="出厂价（元）" prop="price">
|
<el-input type="number" v-model="form.price" placeholder="请输入出厂价" v-trim> disabled <template slot="append"> 元</template> </el-input>
|
</el-form-item>
|
<el-form-item label="销售价（元）" prop="skuPrice">
|
<el-input type="number" v-model="form.skuPrice" placeholder="请输入销售价" disabled 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="请输入线价" disabled 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" disabled 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" disabled placeholder="请输入商品库存量" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品单位" prop="unitName">
|
<el-input v-model="form.unitName" disabled placeholder="请输入商品单位" v-trim/>
|
</el-form-item>
|
<el-form-item label="初始销量" prop="salenum">
|
<el-input type="number" v-model="form.salenum" disabled placeholder="请输入初始销量" v-trim/>
|
</el-form-item>
|
<el-form-item label="商品重量" prop="weight">
|
<el-input type="number" v-model="form.weight" disabled 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" disabled>
|
<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" disabled 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.filter(item=>item.show)" :key="'warning_'+index" style="display: block;width: 100%;" :label="'【'+(item.name)+'】系列'" >
|
<el-select v-model="item.childIdList" filterable disabled 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">
|
<div class="agree-list" v-html="form.content"></div>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import RichEditor from '@/components/common/RichEditor'
|
import { findAll as labelList } from '@/api/business/labels'
|
export default {
|
name: 'OperaGoodsInfoWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, 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: {
|
}
|
}
|
},
|
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)
|
if(this.form.id && this.form.brandList && this.form.brandList.length){
|
this.form.brandList.forEach(item1 => {
|
if (item1.id === item.id) {
|
item.childIdList = item1.childIdList
|
}
|
})
|
}
|
})
|
})
|
},
|
getWangedditor (val) {
|
this.form.content = val
|
},
|
open (title, target, type) {
|
this.title = title
|
this.form.brandIdList = []
|
this.form.fileList = []
|
this.form.imgurl = ''
|
this.form.imgurlfull = ''
|
// 新建
|
if (target == null) {
|
return
|
}
|
|
this.visible = true
|
// 编辑
|
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()
|
})
|
}
|
}
|
}
|
</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;
|
}
|
.agree-list{
|
height: 550px;
|
//max-height: 50%;
|
overflow: auto;
|
}
|
</style>
|
