场景:后台页面根据商品规格和规格值，动态(增删改查)在表格中生成对应的sku.
如图:
代码如下:
edit.html
<template xmlns="">
<div class="app-container">
<el-form ref="form" :model="form" label-width="80px" autocomplete="off" @submit.native.prevent>
<h3>基础信息</h3>
<div style="padding-left: 60px">
<el-row>
<el-col :span="7">
<el-form-item label="spu_id">
<el-input v-model="form.id" autocomplete="off" placeholder="" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="名称" :required="true">
<el-input v-model="form.goods_name" autocomplete="off" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="商品类型" :required="true">
<el-select v-model="form.goods_type" placeholder="请选择">
<el-option
v-for="item in goodsTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="品牌" :required="true">
<el-select v-model="form.brand_code" style="width: 100%">
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="分类" :required="true">
<el-cascader
v-model="form.cate_code"
collapse-tags
clearable
:options="cateOptions"
:props="{ multiple: false, checkStrictly: true }"
filterable
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="赠品" :required="true">
<el-radio v-model="form.is_gift" label="1">否</el-radio>
<el-radio v-model="form.is_gift" label="2">是</el-radio>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="列表显示" :required="true">
<el-radio v-model="form.is_show_video" label="1">是</el-radio>
<el-radio v-model="form.is_show_video" label="2">否</el-radio>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="是否套组" :required="true">
<el-radio v-model="form.is_suite" label="1">否</el-radio>
<el-radio v-model="form.is_suite" label="2">是</el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="是否预售" :required="true">
<el-radio v-model="form.is_pre_sales" label="1">否</el-radio>
<el-radio v-model="form.is_pre_sales" label="2">是</el-radio>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="是否临期" :required="true">
<el-radio v-model="form.is_expire" label="1">否</el-radio>
<el-radio v-model="form.is_expire" label="2">是</el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="包装规格">
<el-input v-model="form.pack_spec" autocomplete="off" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="包装数量">
<el-input v-model="form.pack_count" autocomplete="off" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="销售单位">
<el-input v-model="form.unit_name" autocomplete="off" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="保质期">
<el-date-picker
v-model="form.expire_date"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="商品图片" :required="true">
<ul class="el-upload-list el-upload-list--picture-card">
<vuedraggable v-model="form.images">
<li v-for="(item, index) in form.images" :key="index" class="el-upload-list__item is-success animated">
<img :src="item" alt="" class="el-upload-list__item-thumbnail ">
<i class="el-icon-close" />
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span class="el-upload-list__item-preview" @click="viewImage(item)">
<i class="el-icon-zoom-in" />
</span>
<!-- 删除 -->
<span class="el-upload-list__item-delete" @click="delImage(index)">
<i class="el-icon-delete" />
</span>
</span>
</li>
</vuedraggable>
</ul>
<!-- <el-button size="small" type="info" @click="uploadImageDialog = true">点击上传</el-button>-->
<label for="upload-btn" class="el-button el-button--info el-button--mini">上传文件</label>
<input
v-show="false"
id="upload-btn"
ref="uploadBtn"
type="file"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="loadImg($event)"
>
<div class="el-upload__tip">第1张为主图,其它为从图.尺寸800*800</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="推荐语">
<el-input v-model="form.recommendation" autocomplete="off" placeholder="" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述" :required="true">
<tinymce v-model="form.description" :height="300" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="保管事项">
<el-select v-model="form.keep_desc_tpl_id" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in keepOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="温馨提示">
<el-select v-model="form.notice_desc_tpl_id" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in noticeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<h3>sku信息</h3>
<div style="padding-left: 60px">
<sku-edit ref="skuEdit" />
</div>
<el-form-item>
<el-button type="primary" @click="save">保存</el-button>
<router-link style="padding-left: 10px;" to="/goods/erp-goods-list">
<el-button>返回列表</el-button>
</router-link>
</el-form-item>
</el-form>
<el-dialog :visible.sync="imageViewDialog">
<img width="100%" :src="imageViewUrl" alt="">
</el-dialog>
<el-dialog
width="700px"
custom-class="image-upload"
:visible.sync="croperImageDialog"
:close-on-click-modal="false"
@close="emptyUpload"
>
<div style="display:flex;justify-content: center;">
<cropper ref="myCropper" @updateImageList="updateImageList" />
</div>
<div slot="footer">
<div class="dialog-footer-btn">
<div>
<el-button @click="croperImageDialog = false">返 回</el-button>
<el-button type="primary" @click="cropImg">确 定</el-button>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { spuCreate, spuDetail } from '@/api/goods/goods'
import { getOptions, uploadUrl } from '@/api/common/common'
import { empty } from '@/utils/index'
import Tinymce from '@/components/Tinymce/index.vue'
import skuEdit from '@/views/goods/goods/sku_edit.vue'
import { getToken } from '@/utils/auth'
import vuedraggable from 'vuedraggable'
import cropper from '@/views/goods/component/cropper.vue'
export default {
name: 'GoodsEdit',
components: { Tinymce, vuedraggable, cropper, skuEdit },
props: ['id'],
data() {
return {
salesAmountLimit: 1,
uploadImageDialog: false,
croperImageDialog: false,
imageViewDialog: false,
imageViewUrl: false,
uploadUrl: uploadUrl,
cropperDialogVisible: false,
tagOptions: [],
keepOptions: [],
noticeOptions: [],
uppy: {},
cateOptions: [],
brandOptions: [],
goodsTypeOptions: [],
uploadHeaders: {
token: getToken()
},
leftTagFileList: [],
rightTagFileList: [],
form: {},
copy: false,
initForm: {
id: '',
goods_name: '',
barcode: '',
cate_code: '',
brand_code: '',
description: '',
images: [],
pack_spec: '',
pack_count: '',
unit_name: '',
expire_date: '',
video: '',
is_expire: '1',
is_gift: '1',
is_pre_sales: '1',
video_cover: '',
is_show_video: '1',
recommendation: '',
goods_type: '1',
is_suite: '1',
merchant_id: '',
keep_desc_tpl_id: '',
notice_desc_tpl_id: '',
sku_map_list: [],
spu_attrs: []
}
}
},
computed: {},
watch: {
'form.left_tag_type': {
deep: true,
handler(newVal, oldVal) {
if ((newVal === 7 && oldVal !== 7) || (newVal !== 7 && oldVal === 7)) {
this.form.left_tag = ''
this.leftTagFileList = []
}
}
},
'form.right_tag_type': {
deep: true,
handler(newVal, oldVal) {
if ((newVal === 7 && oldVal !== 7) || (newVal !== 7 && oldVal === 7)) {
this.form.right_tag = ''
this.rightTagFileList = []
}
}
}
},
mounted() {
if (this.$route.query.copy) {
this.copy = JSON.parse(this.$route.query.copy)
}
},
activated() {
this.form = JSON.parse(JSON.stringify(this.initForm))
this.detail()
getOptions({ option_names: [
'cateOptions', 'brandOptions', 'goodsTypeOptions', 'goodsDescTplOption', 'goodsKeepTplOption'] }).then(response => {
this.goodsTypeOptions = response.data.goodsTypeOptions
this.cateOptions = response.data.cateOptions
this.brandOptions = response.data.brandOptions
this.keepOptions = response.data.goodsKeepTplOption
this.noticeOptions = response.data.goodsDescTplOption
})
},
methods: {
async save() {
// 获取 skuEdit 子组件 的信息
this.form.sku_map_list = this.$refs.skuEdit.spuInfo.sku_map_list
// is_draft =1 为草稿数据 2-为审核通过的数据
this.form.is_draft = 2
await spuCreate(this.form)
this.$message({
message: '保存成功,待审核!',
type: 'success'
})
this.form = JSON.parse(JSON.stringify(this.initForm))
this.$router.push({ path: '/goods/goods/draft-list' })
},
detail() {
const id = this.$route.query.id
const params = {}
params.id = id
if (empty(id)) {
return
}
spuDetail(params).then(response => {
this.form = response.data
this.$refs.skuEdit.spuInfo.sku_map_list = this.form.sku_map_list
this.$refs.skuEdit.spuAttrs = this.form.spu_attrs
this.form.is_expire = this.form.is_expire.toString()
this.form.is_gift = this.form.is_gift.toString()
this.form.is_show_video = this.form.is_show_video.toString()
this.form.is_suite = this.form.is_suite.toString()
this.form.is_pre_sales = this.form.is_pre_sales.toString()
this.form.is_expire = this.form.is_expire.toString()
if (this.copy) {
this.form.id = ''
}
})
},
viewImage(item) {
this.imageViewUrl = item.url
this.imageViewDialog = true
},
delImage(index) {
this.form.images.splice(index, 1)
},
loadImg(e) {
const file = e.target.files[0]
if (file.size / 1024 / 1024 > 5) {
this.$message.error('上传文件不能超过5M')
return false
}
if (!/\.(jpg|png|gif|JPG|PNG|GIF|)$/.test(file.name)) {
this.$message.info('图片类型必须是jpg,png的一种')
return false
}
const reader = new FileReader()
reader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
this.croperImageDialog = true
this.$nextTick(() => {
this.$refs.myCropper.imgLoad(file, data)
})
}
reader.readAsArrayBuffer(file)
},
emptyUpload() {
this.$refs.uploadBtn.value = ''
},
cropImg() {
this.$refs.myCropper.crop()
},
updateImageList(item) {
this.form.images.push(item.url)
this.croperImageDialog = false
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
overflow-y: auto;
height: 100%;
}
.app-container >>> .cropper-modal {
opacity: 0.5;
}
el-input {
width: 300px;
}
</style>
子组件sku_edit.html
<template>
<div class="">
<el-form ref="SkuEdit" label-width="110px">
<el-form-item label="spu规格" required>
<vuedraggable v-model="spuAttrs" @start="onStart" @end="onEnd">
<transition-group>
<template v-for="(item, index) in spuAttrs">
<div :key="index" :class="(index < (spuAttrs.length - 1)) ? 'attr_select_index' : '' ">
<div>
<el-select
v-model="item.attr"
filterable
allow-create
placeholder="选择或创建"
size="mini"
@blur="addAttr($event,item,index)"
@change="changeAttr($event, index)"
>
<el-option
v-for="(cateItem, cateIndex) in cateAttrs"
:key="cateIndex"
:label="cateItem.label"
:value="cateIndex"
/>
</el-select>
<i :key="index" class="item el-icon-sort" @mouseover="showTooltipSpec" @mouseleave="hideTooltipSpec" />
<span v-if="tooltipVisibleSpec&&index===0">拖动上下排序</span>
<i :key="index" class="el-icon-circle-plus attr_options_add" @click="spuAttrItem(1, index + 1)" />
<i v-if="spuAttrs.length>1" :key="index" class="el-icon-remove attr_options_del" @click="spuAttrItem(2,index)" />
</div>
<div style="margin-left: 20px">
<vuedraggable v-model="item.values" @start="onStart" @end="onEnd">
<transition-group style="display: flex; flex-wrap: wrap;">
<template v-for="(attrVal,vi) in item.values">
<div :key="vi">
<div style="margin-left: 15px">
<el-input
v-model="item.values[vi]"
placeholder="添加规格值"
size="mini"
style="width: 100px;"
@blur="addAttrValue($event,index, vi)"
/>
<template>
<i
:key="vi"
class="item el-icon-s-operation"
@mouseover="showTooltipSpecValue"
@mouseleave="hideTooltipSpecValue"
/>
<span v-if="tooltipVisibleSpecValue&&vi===0&&index===0">拖动左右排序</span>
<i
:key="vi"
class="el-icon-circle-plus attr_val_options_add"
@click="spuAttrValueItem(1,index)"
/>
<i
v-if="item.values.length>1"
:key="vi"
class="el-icon-remove attr_val_options_del"
@click="spuAttrValueItem(2,index,vi)"
/>
</template>
</div>
</div>
</template>
</transition-group>
</vuedraggable>
</div>
</div>
</template>
</transition-group>
</vuedraggable>
</el-form-item>
<el-form-item label="映射sku" required>
<el-table
:data="spuInfo.sku_map_list"
border
:header-row-style="tableHeaderRowStyle"
:header-cell-style="tableHeaderCellStyle"
:max-height="tableHeight"
size="mini"
style="width: 100%"
empty-text="暂无数据"
>
<el-table-column
v-for="(item,index) in spuAttrs"
:key="index"
:label="item.attr"
>
<template slot-scope="scop">
<div>{{ getAttrValue(scop.row, index) }}</div>
</template>
</el-table-column>
<el-table-column
prop="barcode"
label="商品条码"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.barcode"
size="mini"
placeholder="请输入商品条码"
@blur="addBarcode($event,scope.row,scope.$index)"
/>
</template>
</el-table-column>
<el-table-column
prop="price"
label="售价"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.price"
size="mini"
placeholder="请输入商品售价"
@blur="addPrice($event,scope.row,scope.$index)"
/>
</template>
</el-table-column>
<el-table-column
prop="market_price"
label="市场价"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.price"
size="mini"
placeholder="请输入商品市场价"
@blur="addMarketPrice($event,scope.row,scope.$index)"
/>
</template>
</el-table-column>
<el-table-column
prop="image"
label="图片"
width="100"
>
<template slot-scope="scope">
<el-upload
class="avatar-uploader"
:action="uploadUrl+'?type=image'"
:limit="1"
:show-file-list="false"
:on-success="(res,file,fileList) => {handleAvatarSuccess(res,file,fileList,scope.$index)}"
:headers="uploadHeaders"
>
<img v-if="scope.row.image!=''" :src="scope.row.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import { getOptions, uploadUrl } from '@/api/common/common'
import { spuDetail, saveSpu } from '@/api/goods/spu'
import { empty } from '@/utils'
import Common from '@/layout/mixin/Common'
import { getToken } from '@/utils/auth'
export default {
name: 'SkuEdit',
components: {
'vuedraggable': vuedraggable
},
mixins: [Common],
props: ['spu_id'],
data() {
return {
// 1-为规格 2-为规格值
changeType: 1,
// 变化内容
changeContent: '',
drag: false,
tooltipVisibleSpec: false,
tooltipVisibleSpecValue: false,
uploadUrl: uploadUrl,
spuInfo: {
sku_map_list: []
},
uploadHeaders: {
token: getToken()
},
cateAttrs: [],
cateAttrCount: 0,
spuAttrs: [],
selectMapSkuVisible: false,
skuListLoading: false,
skuList: [],
barcode: '',
goodsName: '',
selectSkuPage: 1,
selectSkuPageSize: 30,
selectSkuTotal: 0,
selectSkuMapIndex: -1
}
},
mounted() {
getOptions({ option_names: ['spuSpecOptions'] }).then(response => {
this.cateAttrs = response.data.spuSpecOptions
})
if (!empty(this.spu_id)) {
this.spuInfo.id = this.spu_id
spuDetail({ id: this.spu_id }).then(res => {
this.cateAttrCount = Object.keys(this.cateAttrs).length
this.spuInfo.sku_map_list = res.data.sku_map_list
this.spuAttrs = res.data.spu_attrs
this.$refs.imageCropperUpload.setImage([{ path: this.spuInfo.image, url: this.spuInfo.image_url }])
})
}
if (empty(this.spuAttrs)) {
this.spuAttrs = [
{
attr: '',
values: ['']
}
]
}
},
methods: {
empty,
showTooltipSpec() {
console.log('showTooltipSpec','----------')
setTimeout(() => {
this.tooltipVisibleSpec = true
}, 1000)
},
hideTooltipSpec() {
console.log('hideTooltipSpec','----------')
this.tooltipVisibleSpec = false
},
showTooltipSpecValue() {
console.log('showTooltipSpecValue','----------')
setTimeout(() => {
this.tooltipVisibleSpecValue = true
}, 1000)
},
hideTooltipSpecValue() {
console.log('hideTooltipSpecValue','----------')
this.tooltipVisibleSpecValue = false
},
onStart() {
this.drag = true
},
handleAvatarSuccess(res, file, fileList, index) {
this.spuInfo.sku_map_list[index].image = res.data[0].url
},
// 添加规格
addAttr(e, item, index) {
if (empty(e.target.value)) {
return
}
this.spuAttrs.push({
attr: e.target.value,
values: ['']
})
// 判断this.spuAttrs.attr 是否有空值，如果有空值则删除
for (let i = 0; i < this.spuAttrs.length; i++) {
if (empty(this.spuAttrs[i].attr)) {
this.spuAttrs.splice(i, 1)
}
}
},
addBarcode(e, row, index) {
this.spuInfo.sku_map_list[index].barcode = e.target.value
},
addPrice(e, row, index) {
this.spuInfo.sku_map_list[index].price = e.target.value
},
addMarketPrice(e, row, index) {
this.spuInfo.sku_map_list[index].market_price = e.target.value
},
addAttrValue(e, index, vi) {
if (empty(e.target.value)) {
return
}
this.attrSkuMap(1, index, this.spuAttrs[index].values.length - 1)
},
onEnd() {
this.drag = false
this.attrSkuMap(3, 0, 0)
},
// 选择规格名
changeAttr(e, index) {
this.spuAttrs[index].values = ['']
this.spuAttrs[index].attr = this.cateAttrs[index].label
this.attrSkuMap(3, index, -1)
},
spuAttrItem(type, index) {
if (type === 1) {
this.spuAttrs.push({
attr: '',
values: ['']
})
} else {
this.changeType = 1
this.changeContent = this.spuAttrs[index].attr
this.spuAttrs.splice(index, 1)
}
this.attrSkuMap(type, index, type === 1 ? 0 : 1)
},
// 添加|删除规格值
spuAttrValueItem(type, pIndex, subIndex) {
if (type === 1) {
this.spuAttrs[pIndex].values.push('')
} else {
this.changeType = 2
this.changeContent = this.spuAttrs[pIndex].values[subIndex]
this.spuAttrs[pIndex].values.splice(subIndex, 1)
}
this.attrSkuMap(type, pIndex, subIndex)
},
// 生成sku组合表格,处理每行数据x
generateCombinations(type, pIndex, subIndex, changeIndex = 0, spliceIndex = -1, currentCombination = [], index = 0) {
if (index >= this.spuAttrs.length) {
// 1-新增，2-删除，3-修改
if (type === 1) {
// 页面新开 新增的sku情况
if (empty(this.spuInfo.sku_map_list[changeIndex])) {
this.spuInfo.sku_map_list.push({
barcode: '',
price: '',
market_price: '',
attrs: [],
image: ''
})
// attrs 字段与页面显示无关,只为传给后端使用
for (let j = 0; j < currentCombination.length; j++) {
this.spuInfo.sku_map_list[changeIndex].attrs.push({
attr: currentCombination[j].attr,
value: currentCombination[j].value
})
}
// 页面新开 编辑的sku情况
} else if (currentCombination.length === this.spuInfo.sku_map_list[changeIndex].attrs.length) {
for (let j = 0; j < currentCombination.length; j++) {
this.spuInfo.sku_map_list[changeIndex].attrs[j].attr = currentCombination[j].attr
this.spuInfo.sku_map_list[changeIndex].attrs[j].value = currentCombination[j].value
}
} else if (currentCombination.length > this.spuInfo.sku_map_list[changeIndex].attrs.length) {
const item = currentCombination.slice(-1)
this.spuInfo.sku_map_list[changeIndex].attrs.push({
attr: item.attr,
value: item.value
})
}
} else if (type === 2) {
// 遍历currentCombination,把value 拼接组合，后面在循环中删除多余重复的行
if (this.changeType === 1) {
let currentCombinationValue = ''
for (let j = 0; j < currentCombination.length; j++) {
currentCombinationValue += currentCombination[j].value + '_'
}
for (let k = 0; k < this.spuInfo.sku_map_list.length; k++) {
if (empty(this.spuInfo.sku_map_list[k])) {
continue
}
for (let j = 0; j < this.spuInfo.sku_map_list[k].attrs.length; j++) {
if (empty(this.spuInfo.sku_map_list[k].attrs[j])) {
continue
}
if (this.changeContent === this.spuInfo.sku_map_list[k].attrs[j].attr
) {
// 删除规格
this.spuInfo.sku_map_list[k].attrs.splice(j, 1)
// 组合规格值
let itemValueCombination = ''
for (let m = 0; m < this.spuInfo.sku_map_list[k].attrs.length; m++) {
itemValueCombination += this.spuInfo.sku_map_list[k].attrs[m].value + '_'
}
this.spuInfo.sku_map_list[k].combination = itemValueCombination
}
}
}
for (let v = 0; v < this.spuInfo.sku_map_list.length; v++) {
let count = 0
if (empty(this.spuInfo.sku_map_list[v])) {
continue
}
if (currentCombinationValue === this.spuInfo.sku_map_list[v].combination) {
count++
}
// 相同规格的行只保留一条
if (count > 1) {
this.spuInfo.sku_map_list.splice(v, 1)
}
}
} else {
for (let k = 0; k < this.spuInfo.sku_map_list.length; k++) {
if (empty(this.spuInfo.sku_map_list[k]) || empty(this.spuInfo.sku_map_list[k].attrs)) {
continue
}
const attrs = this.spuInfo.sku_map_list[k]?.attrs || []
for (let j = 0; j < attrs.length; j++) {
if (this.empty(attrs[j])) {
continue
}
if (this.changeContent === attrs[j].value) {
// 删除整行
this.spuInfo.sku_map_list.splice(k, 1)
break // 如果删除了当前行，需要跳出循环
}
}
}
}
} else {
for (let j = 0; j < currentCombination.length; j++) {
this.spuInfo.sku_map_list[changeIndex].attrs[j].attr = currentCombination[j].attr
this.spuInfo.sku_map_list[changeIndex].attrs[j].value = currentCombination[j].value
}
}
changeIndex++
spliceIndex = -1
// return 之后执行 this.generateCombinations 的逻辑
return [changeIndex, spliceIndex]
}
// 规格和规格值都遍历
for (var i = 0; i < this.spuAttrs[index].values.length; i++) {
currentCombination.push({
attr: this.spuAttrs[index].attr,
value: this.spuAttrs[index].values[i]
})
// 假如有 尺寸 S M ,颜色 黄色 白色
// 第一次遍历生成 {"attr":"尺寸","value":"S"}
// 第二次遍历生成 {"attr":"尺寸","value":"S"},{"attr":"颜色","value":"黄色"}组合,然后在渲染到表格的第一行中
// changeIndex 为行数或者组合数量
// generateCombinations 自循环,遇到return [changeIndex, spliceIndex]后才往下执行
const res = this.generateCombinations(type, pIndex, subIndex, changeIndex, spliceIndex, currentCombination, index + 1)
changeIndex = res[0]
spliceIndex = res[1]
currentCombination.pop()
}
return [changeIndex, spliceIndex]
},
attrSkuMap(type, pIndex, subIndex) {
this.generateCombinations(type, pIndex, subIndex)
return
},
getAttrValue(item, i) {
return item.attrs[i].value
},
async saveSpu() {
return await saveSpu(this.spuInfo)
}
}
}
</script>
<style scoped lang="scss">
.cate_level1 {
color: #E6A23C;
}
.attr_select_index {
margin-bottom: 14px;
}
.attr_options_add, .attr_val_options_add {
margin-left: -2px;
font-size: 20px;
color: #409EFF;
cursor: pointer;
}
.item {
padding: 3px;
//background-color: #fdfdfd;
//border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
.item:hover {
background-color: #f1f1f1;
cursor: move;
}
.chosen {
border: solid 2px #3089dc !important;
}
.attr_options_del, .attr_val_options_del {
margin-left: -2px;
font-size: 20px;
color: #F56C6C;
cursor: pointer;
}
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-text {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%; /* Position the tooltip above the icon */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.avatar {
width: 30px;
height: 30px;
display: block;
}
</style>
数据结构
{
"msg": "ok",
"code": 10000,
"data": {
"id": "710432902999261184",
"goods_name": "spu测试ywz",
"cate_code": "Lthg98",
"brand_code": "UpsPhd",
"supplier_code": "",
"audit_status": 1,
"pack_spec": "101",
"pack_count": "102",
"unit_name": "103",
"expire_date": "2024-10-24",
"images": [
"https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
"https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/4508beb29e17b950796cc5961a88b520299817.png"
],
"video": "",
"video_cover": "",
"is_show_video": 1,
"description": "<p>spu测试spu测试spu测试<\/p>",
"sort": 0,
"is_gift": 1,
"goods_type": 1,
"sales_count": 0,
"is_sales_amount_limit": 1,
"recommendation": "spu测试spu测试spu测试",
"is_search": 1,
"is_pre_sales": 1,
"is_expire": 1,
"is_suite": 1,
"merchant_id": 1,
"business_type": 1,
"keep_desc_tpl_id": 2,
"notice_desc_tpl_id": 0,
"del_status": 1,
"create_time": "2024-10-31 10:06:43",
"update_time": "2024-10-31 10:06:43",
"sku_map_list": [
{
"id": 710432903292862464,
"spu_id": "710432902999261184",
"goods_code": "",
"barcode": "spu_1234561345678ywz1",
"image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
"search_weight": 0,
"sort": 0,
"sales_count": 0,
"price": "99.00",
"market_price": "199.00",
"cost_price": "0.00",
"create_time": "2024-10-31 10:06:43",
"update_time": "2024-10-31 10:06:43",
"attrs": [
{
"attr": "尺寸",
"value": "尺寸1"
},
{
"attr": "颜色",
"value": "颜色1"
}
]
},
{
"id": 710432903292862465,
"spu_id": "710432902999261184",
"goods_code": "",
"barcode": "spu_12345631345678ywz1",
"image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
"search_weight": 0,
"sort": 0,
"sales_count": 0,
"price": "99.00",
"market_price": "199.00",
"cost_price": "0.00",
"create_time": "2024-10-31 10:06:43",
"update_time": "2024-10-31 10:06:43",
"attrs": [
{
"attr": "尺寸",
"value": "尺寸1"
},
{
"attr": "颜色",
"value": "颜色2"
}
]
},
{
"id": 710432903292862466,
"spu_id": "710432902999261184",
"goods_code": "",
"barcode": "spu_123456451345678ywz1",
"image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
"search_weight": 0,
"sort": 0,
"sales_count": 0,
"price": "99.00",
"market_price": "199.00",
"cost_price": "0.00",
"create_time": "2024-10-31 10:06:43",
"update_time": "2024-10-31 10:06:43",
"attrs": [
{
"attr": "尺寸",
"value": "尺寸2"
},
{
"attr": "颜色",
"value": "颜色1"
}
]
},
{
"id": 710432903292862467,
"spu_id": "710432902999261184",
"goods_code": "",
"barcode": "spu_123456561345678ywz1",
"image": "https:\/\/img-hyg.hltmsp.com\/member\/image\/20240918\/c7865c97174a4eb92519edd42a98af74851785.png",
"search_weight": 0,
"sort": 0,
"sales_count": 0,
"price": "99.00",
"market_price": "199.00",
"cost_price": "0.00",
"create_time": "2024-10-31 10:06:43",
"update_time": "2024-10-31 10:06:43",
"attrs": [
{
"attr": "尺寸",
"value": "尺寸2"
},
{
"attr": "颜色",
"value": "颜色2"
}
]
}
],
"spu_attrs": [
{
"attr": "尺寸",
"values": [
"尺寸1",
"尺寸2"
]
},
{
"attr": "颜色",
"values": [
"颜色1",
"颜色2"
]
}
]
},
"log_id": "710498316961951744"
}
扫一扫
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
