zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved: 优化sku编辑

master
misworga831 2024-01-22 14:09:00 +08:00
parent 77732e766a
commit de89249d3e
4 changed files with 326 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
buyer/src/components/goodsDetail/ShowGoods.vue
View File

@ -5,9 +5,8 @@
<div class="item-detail-left">
<!-- 大图、放大镜 -->
<!-- <div id="dplayer"></div> -->
<div class="item-detail-big-img">
<pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
<div class="item-detail-big-img" v-if="imgList[imgIndex]">
<pic-zoom :url="imgList[imgIndex].url || imgList[imgIndex]" :scale="2"></pic-zoom>
</div>
<!-- <div id="dplayer"></div> -->
@ -19,7 +18,7 @@
v-for="(item, index) in imgList"
:key="index"
>
<img :src="item.url" />
<img :src="item.url || item"/>
</div>
</div>
@ -581,9 +580,12 @@ export default {
swiperGoodsImg() {
this.skuDetail.specList.forEach((e) => {
if (e.specName === "images") {
this.imgList = e.specImage;
this.imgList = this.skuDetail.goodsGalleryList;
}
});
if (!this.imgList) {
this.imgList = [this.skuDetail.original];
}
},
},

3
buyer/src/pages/GoodsDetail.vue
View File

@ -130,6 +130,9 @@ export default {
});
this.categoryBar = cateArr;
this.$set(this, "goodsMsg", res.result);
if (!this.goodsMsg.data.intro) {
this.goodsMsg.data.intro = ''
}
// 判断是否收藏
if (this.Cookies.getItem("userInfo")) {
isStoreCollection("STORE", this.goodsMsg.data.storeId).then((res) => {

6
seller/src/views/goods/goods-seller/addGoods.scss
View File

@ -342,18 +342,14 @@ div.base-info-item {
}
.sku-upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
margin-right: 8px;
}
.preview-picture {

381
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<Modal title="预览图片" v-model="visible">
<img :src="previewPicture" v-if="visible" style="width: 100%">
<Modal v-model="visible" title="预览图片">
<img v-if="visible" :src="previewPicture" style="width: 100%">
</Modal>
<div class="content-goods-publish">
<Form ref="baseInfoForm" :label-width="120" :model="baseInfoForm" :rules="baseInfoFormRule">
@ -16,7 +16,8 @@
<span> &gt; {{ this.baseInfoForm.categoryName[2] }}</span>
</FormItem>
<FormItem label="商品名称" prop="goodsName">
<Input v-model="baseInfoForm.goodsName" clearable placeholder="商品名称" style="width: 260px" type="text" />
<Input v-model="baseInfoForm.goodsName" clearable placeholder="商品名称" style="width: 260px"
type="text"/>
</FormItem>
<FormItem label="商品价格" prop="price">
@ -29,7 +30,8 @@
<Select v-model="baseInfoForm.brandId" filterable style="width: 200px">
<Option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></Option>
</Select>
<Button shape="circle" icon="md-refresh" @click="refresh('brand')" class="refresh-icon" type="text"></Button>
<Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
@click="refresh('brand')"></Button>
</FormItem>
</div>
<h4>商品交易信息</h4>
@ -39,7 +41,8 @@
<Option v-for="(item, index) in goodsUnitList" :key="index" :value="item">{{ item }}
</Option>
</Select>
<Button shape="circle" icon="md-refresh" @click="refresh('goodsUnit')" class="refresh-icon" type="text"></Button>
<Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
@click="refresh('goodsUnit')"></Button>
</FormItem>
<FormItem class="form-item-view-el" label="销售模式" prop="salesModel">
<RadioGroup v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'" v-model="baseInfoForm.salesModel"
@ -98,12 +101,13 @@
</div>
<h4>商品规格及图片</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
<FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
<div style="display: flex; flex-wrap: flex-start">
<vuedraggable :animation="200" :list="baseInfoForm.goodsGalleryFiles">
<div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index" class="demo-upload-list">
<div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index"
class="demo-upload-list">
<template>
<img :src="item.url" />
<img :src="item"/>
<div class="demo-upload-list-cover">
<div>
<Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item.url)"></Icon>
@ -113,44 +117,54 @@
</template>
</div>
</vuedraggable>
<div style="width: 148px; height: 148px; line-height: 148px;border: 1px dashed #dcdee2;" @click="handleCLickImg('goodsGalleryFiles')">
<Upload ref="upload"
:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"
:format="['jpg', 'jpeg', 'png', 'webp']"
:headers="{ ...accessToken }"
:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"
:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"
:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple
style="margin-left: 10px"
type="drag">
<div style="width: 148px; height: 148px; line-height: 148px">
<Icon size="20" type="md-add"></Icon>
</div>
<!--<Upload ref="upload" :action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"-->
<!--:format="['jpg', 'jpeg', 'png']" :headers="{ ...accessToken }" :max-size="2048"-->
<!--:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"-->
<!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple type="drag">-->
<!--<div style="width: 148px; height: 148px; line-height: 148px">-->
<!--<Icon size="20" type="md-add"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</Upload>
</div>
<Modal v-model="goodsPictureVisible" title="View Image">
<img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%"/>
</Modal>
</FormItem>
<div class="flex mb-10">
<div class="goods-video-label">
上传视频
</div>
<div class="flex goods-video" >
<FormItem>
<div style="color: grey">主图仅支持png，jpg，jpeg格式，宽高至少600*600px，大小2M内，可拖拽调整主图顺序</div>
</FormItem>
<FormItem class="form-item-view-el" label="主图视频" prop="goodsVideo">
<div class="goods-video">
<div v-if="baseInfoForm.goodsVideo">
<div>
<Upload ref="upload" :action="uploadFileUrl" v-if="!baseInfoForm.goodsVideo" style="width: 150px; height: 150px;"
:format="['mp4', 'avi',]" :headers="{ ...accessToken }" :max-size="10240"
:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"
:on-success="handleSuccessGoodsVideo" :show-upload-list="false" type="drag">
<div style="width: 148px; height: 148px; line-height: 148px">
<Icon size="20" type="md-add"></Icon>
<video :src="baseInfoForm.goodsVideo" class="video" controls style="max-width: 300px;"/>
</div>
</div>
<Upload ref="upload" :action="uploadFileUrl" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']"
:headers="{ ...accessToken }"
:max-size="10240" :on-error="() => { loadingVideo = false }"
:on-exceeded-size="handleVideoMaxSize"
:on-format-error="handleFormatError" :on-progress="() => { loadingVideo = true }"
:on-success="handleSuccessGoodsVideo" :show-upload-list="false"
multiple
style="margin-left: 10px" type="drag">
<Button :loading="loadingVideo" icon="ios-cloud-upload-outline" type="text">
<span v-if="!loadingVideo">
{{ baseInfoForm.goodsVideo ? "已" : "" }}上传视频
</span>
<span v-else>
正在上传...
</span>
</Button>
</Upload>
<span class="theme_color" v-if="baseInfoForm.goodsVideo">已成功上传视频</span>
</div>
<Button class="view-video" v-if="baseInfoForm.goodsVideo" @click="showGoodsVideo = true">查看视频</Button>
<Button type="primary" v-if="baseInfoForm.goodsVideo" @click="baseInfoForm.goodsVideo = ''">删除视频</Button>
</div>
</div>
</FormItem>
<div class="layout" style="width: 100%">
<Collapse v-model="open_panel">
<Panel name="1">
@ -159,68 +173,125 @@
<Form>
<div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
<Card :bordered="true" class="ivu-card-body">
<Button slot="extra" type="primary" @click="handleCloseSkuItem($index, item)">
删除规格项
</Button>
<a slot="extra" style="margin-left: 6px">
<Icon size="20" type="md-trash" @click="handleCloseSkuItem($index, item)"></Icon>
</a>
<div>
<FormItem class="sku-item-content-val flex" label="规格项名">
<AutoComplete v-model="item.name" :data="skuData" :filter-method="filterMethod"
<div style="display: flex;margin-bottom: 10px;font-weight: bold">规格项</div>
<FormItem class="sku-item-content-val flex" label="">
<div>
<AutoComplete v-model="item.name" :filter-method="filterMethod"
:maxlength="30" placeholder="请输入规格项名称" style="width: 150px"
@on-focus="changeSkuItem(item.name)" @on-change="
editSkuItem(item.name, $index, item)
">
</AutoComplete>
</FormItem>
<iSwitch v-if="$index === 0" style="margin-left: 10px" size="small" @on-change="changeSkuOpenImage" v-model="openImage" /><span v-if="$index === 0" style="margin-left: 5px">添加规格图片</span>
</div>
<div class="flex sku-val">
</FormItem>
</div>
<div class="sku-val">
<div style="margin-bottom: 10px;font-weight: bold;display: flex">规格值</div>
<Form :model="item" class="flex">
<!--规格值文本列表-->
<FormItem v-for="(val, index) in item.spec_values" :key="index"
class="sku-item-content-val flex" label="规格项">
<AutoComplete ref="input" v-model="val.value" :data="skuVal" :filter-method="filterMethod"
:maxlength="10" placeholder="请输入规格项" style="width: 150px"
@on-focus="changeSkuVals(val, item.name)" @on-blur="checkSkuVal(val, index)"
@on-change="skuValueChange(val, index, item, $index)">
class="sku-item-content-val flex" label="" style="line-height: 32px;">
<div style="display: flex; justify-content: center; align-items: center;">
<AutoComplete ref="input" v-model="val.value"
:filter-method="filterMethod"
:maxlength="30" placeholder="请输入规格值" style="width: 180px"
@on-focus="changeSkuVals(val, item.name)"
@on-blur="checkSkuVal(val, index)"
@on-change="skuValueChange(val, index, item)">
</AutoComplete>
<a style="margin-left: 6px" v-if="val.value && val.value !== ''">
<Icon size="15" type="md-trash" @click="handleCloseSkuValue(val, index, item)"></Icon>
</a>
</div>
<div v-if="$index === 0 && openImage" style="margin-top: 10px">
<vuedraggable :animation="200" :list="val.images"
>
<div v-for="(img, __index) in val.images" :key="__index"
class="sku-upload-list"
style="width: 180px;height: 140px">
<template>
<img
:src="img"
style="width: 180px;height: 140px"
/>
<div class="sku-upload-list-cover">
<div style="margin-top: 50px" >
<Icon size="25" type="md-search" @click="handleView(img)"></Icon>
<Icon size="25" type="md-trash" @click="handleRemove(val.images, __index)"></Icon>
</div>
</div>
</template>
</div>
</vuedraggable>
<Upload ref="uploadSku" :action="uploadFileUrl"
v-if="val.images < 1"
:before-upload="handleBeforeUpload"
:format="['jpg', 'jpeg', 'png', 'webp']"
:headers="{ ...accessToken }"
:max-size="2048"
:on-error="() => { $Spin.hide(); }"
:on-exceeded-size="handleMaxSize"
:on-format-error="handleFormatError"
:on-progress="() => { $Spin.show(); }"
:on-success="(res, file) => {
handleSuccess(res, file, val.images)
}"
:show-upload-list="false"
style="width: 180px;height: 140px;margin-right: 10px" type="drag">
<div>
<Icon size="136" type="ios-camera"></Icon>
</div>
</Upload>
</div>
</FormItem>
<FormItem v-if="item.spec_values.length < 10 && item.spec_values.length >= 1 && item.spec_values[0].value !== ''" class="sku-item-content-val flex" label="" style="line-height: 32px;">
<AutoComplete ref="input" v-model="newSkuValues[$index]"
:filter-method="filterMethod"
:maxlength="30" placeholder="自定义规格值" style="width: 180px"
@on-blur="addSpec($index, item)"
v-on:keyup.native.enter="addSpec($index, item)">
</AutoComplete>
<Button size="small" style="margin-left: 10px" type="primary"
@click="handleCloseSkuValue(val, index, item)">
删除
</Button>
</FormItem>
</Form>
</div>
<div>
<Button @click="addSpec($index, item)">添加规格值
</Button>
</div>
</Card>
</div>
</Form>
<!--{{skuInfo}}-->
<Button class="add-sku-btn" size="small" type="primary" @click="addSkuItem">添加规格项
<div style="display: flex">
<Button class="add-sku-btn" type="primary" @click="addSkuItem">添加规格项
</Button>
</div>
&nbsp;
<Button class="add-sku-btn" size="small" type="warning" @click="handleClearSku">清空规格项
</Button>
<!-- <Button class="add-sku-btn" size="small" type="warning" @click="handleClearSku">清空规格项-->
<!-- </Button>-->
</div>
</Panel>
<Panel name="2">
规格详细
<div slot="content">
<div slot="content">
<div v-if="needToloadSku" class="topinfo" @click="handleLoadingSkuData">点击加载sku数据</div>
<div slot="content" :class="needToloadSku ? 'mask': ''">
<Table :columns="skuTableColumn" :data="skuTableData" class="mt_10" style="
width: 100%;
.ivu-table-overflowX {
overflow-x: hidden;
}
">
<!--<template slot="alertQuantity" slot-scope="{ row }">-->
<!--<Input v-model="row.alertQuantity" clearable placeholder="请输入库存预警" @on-change="updateSkuTable(row, 'alertQuantity')">-->
<!--<span slot="append">{{baseInfoForm.goodsUnit || ""}}</span>-->
<!--</Input>-->
<!--</template>-->
"
@mouseenter="handleMouseEnter">
<template slot="sn" slot-scope="{ row }">
<Input v-model="row.sn" clearable placeholder="请输入货号" @on-change="updateSkuTable(row, 'sn')" />
<Input v-model="row.sn" clearable placeholder="请输入货号"
@on-change="updateSkuTable(row, 'sn')"/>
</template>
<div v-if="baseInfoForm.goodsType !== 'VIRTUAL_GOODS'" slot="weight" slot-scope="{ row }">
<Input v-model="row.weight" clearable placeholder="请输入重量"
@ -236,12 +307,12 @@
}}</span>
</Input>
</template>
<!-- <template slot="cost" slot-scope="{ row }">
<template slot="cost" slot-scope="{ row }">
<Input v-model="row.cost" clearable placeholder="请输入成本价"
@on-change="updateSkuTable(row, 'cost')">
<span slot="append">元</span>
</Input>
</template> -->
</template>
<template slot="price" slot-scope="{ row }">
<Input v-model="row.price" clearable placeholder="请输入价格"
@on-change="updateSkuTable(row, 'price')">
@ -263,44 +334,6 @@
<span slot="append">元</span>
</Input>
</template>
<template slot="images" slot-scope="{ row }">
<div @mouseover="mouseOver(row)" @mouseleave="mouseLeave"><Button @click="editSkuPicture(row)"
type="error">编辑图片 ！</Button></div>
<Modal v-model="showSkuPicture" :styles="{ top: '30px' }" cancel-text="取消"
class-name="sku-preview-modal" ok-text="结束编辑" title="编辑图片" @on-ok="updateSkuPicture()">
<div class="preview-picture">
<img v-if="previewPicture !== ''" :src="previewPicture" />
</div>
<Divider />
<div style="display: flex;align-items: flex-start;">
<vuedraggable :animation="200" :list="selectedSku.images" style="display: inline-block">
<div v-for="(img, __index) in selectedSku.images" :key="__index" class="sku-upload-list">
<template>
<img :src="img.url" />
<div class="sku-upload-list-cover">
<Icon type="md-search" @click="handleView(img.url)"></Icon>
<Icon type="md-trash" @click="handleRemove(img, __index)"></Icon>
</div>
</template>
</div>
</vuedraggable>
<div style="display: inline-block; width: 60px; height: 60px;border: 1px dashed #dcdee2;border-radius: 4px;" @click="handleCLickImg('selectedSkuImages')">
<div>
<Icon size="55" type="ios-camera"></Icon>
</div>
</div>
</div>
<!--<Upload ref="uploadSku" :action="uploadFileUrl" :before-upload="handleBeforeUpload"-->
<!--:format="['jpg', 'jpeg', 'png']" :headers="{ ...accessToken }" :max-size="2048"-->
<!--:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"-->
<!--:on-success="handleSuccess" :show-upload-list="false" multiple-->
<!--style="display: inline-block; width: 58px" type="drag">-->
<!--<div>-->
<!--<Icon size="55" type="ios-camera"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</Modal>
</template>
</Table>
</div>
</div>
@ -311,10 +344,10 @@
<h4 v-if="showContent">规格描述内容</h4>
<div v-if="showContent" class="form-item-view">
<div>
<FormItem class="form-item-view-el" :label="contentImage">
<FormItem :label="contentImage" class="form-item-view-el">
<!-- {{item.url}} -->
<div style="width:100%;display:flex;" v-for="(item, index) in listImages.images" :key="index">
<img style="width:100px;flex:1;margin-top:10px;cursor:pointer;" :src="item.url"
<div v-for="(item, index) in listImages.images" :key="index" style="width:100%;display:flex;">
<img :src="item.url" style="width:100px;flex:1;margin-top:10px;cursor:pointer;"
@click="handleView(item.url)"/>
</div>
</FormItem>
@ -358,7 +391,8 @@
<Option v-for="item in logisticsTemplate" :key="item.id" :value="item.id">{{ item.name }}
</Option>
</Select>
<Button shape="circle" icon="md-refresh" @click="refresh('template')" class="refresh-icon" type="text"></Button>
<Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
@click="refresh('template')"></Button>
</FormItem>
<FormItem v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="商品重量"
prop="weight">
@ -397,7 +431,8 @@
<p slot="content">
<FormItem v-for="(params, paramsIndex) in paramsGroup.params" :key="paramsIndex"
:label="`${params.paramName}：`">
<Select v-model="params.paramValue" clearable placeholder="请选择" style="width: 200px" @on-change="
<Select v-model="params.paramValue" clearable placeholder="请选择" style="width: 200px"
@on-change="
selectParams(
paramsGroup,
groupIndex,
@ -406,7 +441,8 @@
params.paramValue
)
">
<Option v-for="option in params.options.split(',')" :key="option" :label="option" :value="option">
<Option v-for="option in params.options.split(',')" :key="option" :label="option"
:value="option">
</Option>
</Select>
</FormItem>
@ -438,8 +474,8 @@
<!--<Modal width="1200px" v-model="picModalFlag">-->
<!--<ossManage @callback="callbackSelected" ref="ossManage" />-->
<!--</Modal>-->
<Modal width="1200px" v-model="picModalFlag" @on-ok="confirmUrls">
<ossManage @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
<Modal v-model="picModalFlag" width="1200px" @on-ok="confirmUrls">
<ossManage ref="ossManage" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>
</Modal>
</div>
@ -489,13 +525,14 @@ export default {
};
return {
regular,
openImage: false,
needToloadSku: false,
total: 0,
goodsVideo: "",
showContent: false,
listImages: [],
newSkuValues: [],
contentImage: "",
visible: false, // 图片预览
previewImage: '', // 预览图片地址
global: 0,
accessToken: "", //令牌token
@ -670,6 +707,31 @@ export default {
this.selectedFormBtnName = val;
// this.picIndex = index;
},
handleLoadingSkuData() {
this.needToloadSku = false
this.renderTableData(this.skuTableData)
},
changeSkuOpenImage() {
this.skuTableData.forEach(item => {
item.images = []
})
if (this.skuInfo.length > 0 && this.skuInfo[0].spec_values.length > 0) {
this.skuInfo[0].spec_values.forEach(item => {
item.images = []
})
}
},
onAddSku(index) {
if (!this.newSkuValues[index]) {
this.$Message.error('请输入规格值')
return
}
this.skuInfo[index].spec_values.push({
name: this.newSkuValues[index].name,
value: this.newSkuValues[index],
images: this.openImage ? [] : this.baseInfoForm.goodsGalleryFiles
})
},
// 图片选择后回调
callbackSelected(val) {
this.picModalFlag = false;
@ -766,7 +828,7 @@ export default {
editSkuPicture(row) {
this.showContent = false
if (row.images && row.images.length > 0) {
this.previewPicture = row.images[0].url;
this.previewPicture = row.images[0];
}
this.selectedSku = row;
this.showSkuPicture = true;
@ -794,14 +856,8 @@ export default {
},
// 移除已选图片
handleRemove(item, index) {
this.selectedSku.images = this.selectedSku.images.filter(
(i) => i.url !== item.url
);
if (this.selectedSku.images.length > 0 && index === 0) {
this.previewPicture = this.selectedSku.images[0].url;
} else if (this.selectedSku.images.length < 0) {
images.splice(index, 1)
this.previewPicture = "";
}
},
// 查看商品大图
handleViewGoodsPicture(url) {
@ -811,7 +867,7 @@ export default {
// 移除商品图片
handleRemoveGoodsPicture(file) {
this.baseInfoForm.goodsGalleryFiles =
this.baseInfoForm.goodsGalleryFiles.filter((i) => i.url !== file.url);
this.baseInfoForm.goodsGalleryFiles.filter((i) => i !== file);
},
// 更新sku图片
updateSkuPicture() {
@ -820,13 +876,14 @@ export default {
this.skuTableData[_index] = this.selectedSku;
},
// sku图片上传成功
handleSuccess(res, file) {
handleSuccess(res, file, images) {
this.$Spin.hide();
if (file.response) {
file.url = file.response.result;
if (this.selectedSku.images) {
this.selectedSku.images.push(file);
if (images) {
images.push(file.url);
} else {
this.selectedSku.images = [file];
images = [file.url];
}
this.previewPicture = file.url;
}
@ -898,7 +955,7 @@ export default {
handleSuccessGoodsPicture(res, file) {
if (file.response) {
file.url = file.response.result;
this.baseInfoForm.goodsGalleryFiles.push(file);
this.baseInfoForm.goodsGalleryFiles.push(file.url);
}
},
// 图片格式不正确
@ -1018,7 +1075,7 @@ export default {
) {
this.baseInfoForm.goodsGalleryFiles =
response.result.goodsGalleryList.map((i) => {
return { url: i };
return i;
});
}
@ -1074,6 +1131,11 @@ export default {
// alertQuantity: e.alertQuantity,
weight: e.weight,
};
if (e.goodsGalleryList && e.goodsGalleryList.length >= 1) {
this.openImage = true
} else {
this.openImage = false
}
e.specList.forEach((u) => {
if (u.specName === "images") {
sku.images = u.specImage;
@ -1091,6 +1153,7 @@ export default {
id: u.specValueId,
name: u.specName,
value: u.specValue || "",
images: e.goodsGalleryList || []
},
],
});
@ -1104,6 +1167,7 @@ export default {
id: u.specValueId,
name: u.specName,
value: u.specValue || "",
images: e.goodsGalleryList || []
});
}
if (!sk.spec_id && u.specName === "specId") {
@ -1182,7 +1246,7 @@ export default {
}
// 写入对象，下标，具体对象
this.$set(this.skuInfo, this.skuInfo.length, {
spec_values: [{ name: "", value: "" }],
spec_values: [{name: "", value: "", images: []}],
name: "",
});
@ -1374,16 +1438,26 @@ export default {
},
/** 添加当前规格项的规格值*/
addSpec($index, item) {
if (!this.newSkuValues[$index]) {
this.$Message.error("请输入规格值");
return;
}
if (this.validateEmpty(item.spec_values)) {
if (item.spec_values.length >= 10) {
this.$Message.error("规格值不能大于10个！");
return;
}
let beforeLength = item.spec_values.length;
this.$set(item.spec_values, item.spec_values.length, {
let itemValue = {
name: item.name,
value: "",
});
value: this.newSkuValues[$index],
};
if (this.openImage) {
itemValue.images = []
} else {
itemValue.images = this.baseInfoForm.goodsGalleryFiles
}
this.$set(item.spec_values, item.spec_values.length, itemValue);
if (item.spec_values.length > 1) {
let index = beforeLength;
let filterSkuInfo = this.skuInfo.filter((i) => i.name !== item.name);
@ -1395,7 +1469,7 @@ export default {
index = 1;
for (let i = 0; i < totalLength; i++) {
let find = cloneObj(this.skuTableData[index - 1]);
find[item.name] = "";
find[item.name] = this.newSkuValues[$index];
find.id = "";
find.price && (find.price = "");
find.sn && (find.sn = "");
@ -1410,7 +1484,7 @@ export default {
} else {
for (let i = 0; i < totalLength; i++) {
let find = cloneObj(this.skuTableData[index - 1]);
find[item.name] = "";
find[item.name] = this.newSkuValues[$index];
find.id = "";
find.price && (find.price = "");
find.sn && (find.sn = "");
@ -1425,6 +1499,7 @@ export default {
}
}
this.baseInfoForm.regeneratorSkuFlag = true;
this.newSkuValues[$index] = "";
}
},
handleClearSku() {
@ -1510,10 +1585,6 @@ export default {
title: "货号",
slot: "sn",
},
{
title: "图片",
slot: "images",
}
);
this.skuTableColumn = pushData;
@ -1734,6 +1805,7 @@ export default {
}
let skuInfoNames = this.skuInfo.map((n) => n.name);
submit.skuList = [];
let containEmptyImage = false;
this.skuTableData.map((sku) => {
let skuCopy = {
cost: 1,
@ -1741,8 +1813,20 @@ export default {
quantity: sku.quantity,
// alertQuantity: sku.alertQuantity,
sn: sku.sn,
images: sku.images,
images: [],
};
if (this.openImage) {
this.skuInfo[0].spec_values.forEach(item => {
if (!item.images || item.images.length === 0) {
containEmptyImage = true;
return;
}
if (item.value === sku[this.skuInfo[0].name]) {
skuCopy.images = item.images
}
})
}
if (sku.weight) {
skuCopy.weight = sku.weight;
}
@ -1757,9 +1841,14 @@ export default {
}
submit.skuList.push(skuCopy);
});
if (containEmptyImage) {
this.$Message.error("开启规格图片，所有规格图片不能为空！");
this.submitLoading = false;
return;
}
if (submit.goodsGalleryFiles.length > 0) {
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
(i) => i.url
(i) => i
);
}
/** 参数校验 **/
@ -1801,7 +1890,7 @@ export default {
this.baseInfoForm.skuList = this.skuTableData;
if (this.baseInfoForm.goodsGalleryFiles.length > 0) {
this.baseInfoForm.goodsGalleryList =
this.baseInfoForm.goodsGalleryFiles.map((i) => i.url);
this.baseInfoForm.goodsGalleryFiles.map((i) => i);
}
this.baseInfoForm.categoryName = [];
this.baseInfoForm.saveType = "TEMPLATE";
@ -1933,9 +2022,11 @@ export default {
.mb-10 {
margin-bottom: 10px;
}
.view-video {
margin: 0 10px;
}
.refresh-icon {
margin-left: 10px;
}