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

Merge branch 'ma'

master
mabo 2021-06-25 16:24:52 +08:00
parent b3863568d6 830cc3e83c
commit 7112f4cd49
1 changed files with 296 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
seller/src/views/goods/goods-seller/goodsOperation.vue
View File

@ -3,21 +3,23 @@
<!-- 选择商品类型 --> <!-- 选择商品类型 -->
<Modal v-model="selectGoodsType" width="550" :closable="false"> <Modal v-model="selectGoodsType" width="550" :closable="false">
<div class="goods-type-list" v-if="!showGoodsTemplates"> <div class="goods-type-list" v-if="!showGoodsTemplates">
<div class="goods-type-item" :class="{'active-goods-type':item.check}" @click="handleClickGoodsType(item)" v-for="(item,index) in goodsTypeWay" :key="index"> <div class="goods-type-item" :class="{'active-goods-type':item.check}" @click="handleClickGoodsType(item)"
<img :src="item.img" /> v-for="(item,index) in goodsTypeWay" :key="index">
<img :src="item.img"/>
<div> <div>
<h2>{{item.title}}</h2> <h2>{{ item.title }}</h2>
<p>{{item.desc}}</p> <p>{{ item.desc }}</p>
</div> </div>
</div> </div>
</div> </div>
<div v-else class="goods-type-list"> <div v-else class="goods-type-list">
<h2 @click="showGoodsTemplates = !showGoodsTemplates">返回</h2> <h2 @click="showGoodsTemplates = !showGoodsTemplates">返回</h2>
<div class="goods-type-item template-item" @click="handleClickGoodsTemplate(item)" v-for="(item,index) in goodsTemplates" :key="index"> <div class="goods-type-item template-item" @click="handleClickGoodsTemplate(item)"
<img :src="item.thumbnail" /> v-for="(item,index) in goodsTemplates" :key="index">
<img :src="item.thumbnail"/>
<div> <div>
<h2>{{item.goodsName}}</h2> <h2>{{ item.goodsName }}</h2>
<p>{{item.sellingPoint || ''}}</p> <p>{{ item.sellingPoint || '' }}</p>
</div> </div>
</div> </div>
@ -25,37 +27,38 @@
</Modal> </Modal>
<div class="step-list"> <div class="step-list">
<steps :current="activestep" simple style="height:60px;margin-top: 10px" process-status="process"> <steps :current="activestep" simple style="height:60px;margin-top: 10px" process-status="process">
<div class="step-view"> <div class="step-view">
<step title="选择商品品类" /> <step title="选择商品品类"/>
</div> </div>
<div class="step-view"> <div class="step-view">
<step title="填写商品详情" /> <step title="填写商品详情"/>
</div> </div>
<div class="step-view"> <div class="step-view">
<step title="商品发布成功" /> <step title="商品发布成功"/>
</div> </div>
</steps> </steps>
</div> </div>
<div class="content-goods-publish" v-show="activestep === 0"> <div class="content-goods-publish" v-show="activestep === 0">
<div class="goods-category"> <div class="goods-category">
<ul v-if="categoryListLevel1 && categoryListLevel1.length > 0"> <ul v-if="categoryListLevel1 && categoryListLevel1.length > 0">
<li v-for="(item, index) in categoryListLevel1" :class="{ activeClass: index == activeCategoryIndex1 }" @click="handleSelectCategory(item, index, 1)" :key="index"> <li v-for="(item, index) in categoryListLevel1" :class="{ activeClass: index == activeCategoryIndex1 }"
@click="handleSelectCategory(item, index, 1)" :key="index">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span>&gt;</span> <span>&gt;</span>
</li> </li>
</ul> </ul>
<ul v-if="categoryListLevel2 && categoryListLevel2.length > 0"> <ul v-if="categoryListLevel2 && categoryListLevel2.length > 0">
<li v-for="(item, index) in categoryListLevel2" :class="{ activeClass: index == activeCategoryIndex2 }" @click="handleSelectCategory(item, index, 2)" :key="index"> <li v-for="(item, index) in categoryListLevel2" :class="{ activeClass: index == activeCategoryIndex2 }"
@click="handleSelectCategory(item, index, 2)" :key="index">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span>&gt;</span> <span>&gt;</span>
</li> </li>
</ul> </ul>
<ul v-if="categoryListLevel3 && categoryListLevel3.length > 0"> <ul v-if="categoryListLevel3 && categoryListLevel3.length > 0">
<li v-for="(item, index) in categoryListLevel3" :class="{ activeClass: index == activeCategoryIndex3 }" @click="handleSelectCategory(item, index, 3)" :key="index"> <li v-for="(item, index) in categoryListLevel3" :class="{ activeClass: index == activeCategoryIndex3 }"
@click="handleSelectCategory(item, index, 3)" :key="index">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</li> </li>
</ul> </ul>
@ -83,11 +86,11 @@
<span v-if="!activeCategoryName1" v-html="baseInfoForm.category_name"></span> <span v-if="!activeCategoryName1" v-html="baseInfoForm.category_name"></span>
</FormItem> </FormItem>
<FormItem label="商品名称" prop="goodsName"> <FormItem label="商品名称" prop="goodsName">
<Input type="text" v-model="baseInfoForm.goodsName" placeholder="商品名称" clearable style="width: 260px" /> <Input type="text" v-model="baseInfoForm.goodsName" placeholder="商品名称" clearable style="width: 260px"/>
</FormItem> </FormItem>
<FormItem label="商品卖点" prop="sellingPoint"> <FormItem label="商品卖点" prop="sellingPoint">
<Input v-model="baseInfoForm.sellingPoint" type="textarea" :rows="4" style="width: 260px" /> <Input v-model="baseInfoForm.sellingPoint" type="textarea" :rows="4" style="width: 260px"/>
</FormItem> </FormItem>
<FormItem label="商品品牌" prop="brandId"> <FormItem label="商品品牌" prop="brandId">
<Select v-model="baseInfoForm.brandId" style="width: 200px"> <Select v-model="baseInfoForm.brandId" style="width: 200px">
@ -104,7 +107,8 @@
</Select> </Select>
</FormItem> </FormItem>
<FormItem class="form-item-view-el" label="销售模式" prop="salesModel"> <FormItem class="form-item-view-el" label="销售模式" prop="salesModel">
<RadioGroup type="button" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'" button-style="solid" v-model="baseInfoForm.salesModel"> <RadioGroup type="button" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'" button-style="solid"
v-model="baseInfoForm.salesModel">
<Radio title="零售型" label="RETAIL"> <Radio title="零售型" label="RETAIL">
<span>零售型</span> <span>零售型</span>
</Radio> </Radio>
@ -124,18 +128,18 @@
<h4>商品规格及图片</h4> <h4>商品规格及图片</h4>
<div class="form-item-view"> <div class="form-item-view">
<FormItem label="商品编号" prop="sn"> <FormItem label="商品编号" prop="sn">
<Input type="text" v-model="baseInfoForm.sn" placeholder="商品编号" clearable style="width: 260px" /> <Input type="text" v-model="baseInfoForm.sn" placeholder="商品编号" clearable style="width: 260px"/>
</FormItem> </FormItem>
<FormItem label="商品价格" prop="price"> <FormItem label="商品价格" prop="price">
<Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable style="width: 260px" /> <Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable style="width: 260px"/>
</FormItem> </FormItem>
<FormItem label="市场价格" prop="cost"> <FormItem label="市场价格" prop="cost">
<Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px" /> <Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px"/>
</FormItem> </FormItem>
<FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles"> <FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
<div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index"> <div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
<template v-if="item.status === 'finished'"> <template v-if="item.status === 'finished'">
<img :src="item.url" /> <img :src="item.url"/>
<div class="demo-upload-list-cover"> <div class="demo-upload-list-cover">
<div> <div>
@ -144,17 +148,9 @@
</div> </div>
<div> <div>
<Icon type="ios-arrow-dropleft" @click.native=" <Icon type="ios-arrow-dropleft" @click.native="
handleGoodsPicRemoteUp( handleGoodsPicRemoteUp(baseInfoForm.goodsGalleryFiles,__index)"/>
baseInfoForm.goodsGalleryFiles,
__index
)
" />
<Icon type="ios-arrow-dropright" @click.native=" <Icon type="ios-arrow-dropright" @click.native="
handleGoodsPicRemoteDown( handleGoodsPicRemoteDown(baseInfoForm.goodsGalleryFiles,__index)"/>
baseInfoForm.goodsGalleryFiles,
__index
)
" />
</div> </div>
</div> </div>
</template> </template>
@ -162,16 +158,18 @@
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template> </template>
</div> </div>
<Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles" :on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']" <Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl" :on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']"
:headers="accessToken" style="display: inline-block;margin-left:10px;"> :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl"
:headers="accessToken" style="display: inline-block;margin-left:10px;">
<div style="width: 80px; height: 80px; line-height: 80px"> <div style="width: 80px; height: 80px; line-height: 80px">
<Icon type="ios-camera" size="20"></Icon> <Icon type="ios-camera" size="20"></Icon>
</div> </div>
</Upload> </Upload>
<Modal title="View Image" v-model="goodsPictureVisible"> <Modal title="View Image" v-model="goodsPictureVisible">
<img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%" /> <img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%"/>
</Modal> </Modal>
</FormItem> </FormItem>
@ -184,23 +182,29 @@
<div class="sku-item" v-for="(item, $index) in skuInfo" :key="$index"> <div class="sku-item" v-for="(item, $index) in skuInfo" :key="$index">
<Card :bordered="true"> <Card :bordered="true">
<FormItem label="规格名：" class="sku-item-content-name"> <FormItem label="规格名：" class="sku-item-content-name">
<AutoComplete style="width: 150px" v-model="item.name" :maxlength="30" placeholder="请输入规格项名称" <AutoComplete style="width: 150px" v-model="item.name" :maxlength="30"
:filter-method="filterMethod" :data="skuData" placeholder="请输入规格项名称"
@on-change="editSkuItem"> :filter-method="filterMethod" :data="skuData"
</AutoComplete> @on-change="editSkuItem">
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除</Button> </AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除
</Button>
</FormItem> </FormItem>
<FormItem label="规格值：" prop="sku"> <FormItem label="规格值：" prop="sku">
<!--规格值文本列表--> <!--规格值文本列表-->
<div v-for="(val, index) in item.spec_values" :key="index" style="padding: 0px 20px 10px 0px; float: left"> <div v-for="(val, index) in item.spec_values" :key="index"
style="padding: 0px 20px 10px 0px; float: left">
<div> <div>
<AutoComplete style="width: 150px; float: left" v-if="skuValVisible" v-model="val.value" :maxlength="30" placeholder="请输入规格值名称" <AutoComplete style="width: 150px; float: left" v-model="val.value"
:filter-method="filterMethod" :data="skuVal" @on-focus="changeSkuVals(item.name)" :maxlength="30" placeholder="请输入规格值名称"
@on-change="skuValueChange(val.value, $index, item)"> :filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)">
</AutoComplete> </AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuValue(item, index)">删除</Button> <Button type="error" style="margin-left: 10px" @click="handleCloseSkuValue(item, index)">
删除
</Button>
</div> </div>
</div> </div>
<div style="float: left"> <div style="float: left">
@ -224,34 +228,36 @@
} }
" :span-method="handleSpan"> " :span-method="handleSpan">
<template slot-scope="{ row }" slot="sn"> <template slot-scope="{ row }" slot="sn">
<Input v-model="row.sn" placeholder="请输入货号" @on-change="updateSkuTable(row, 'sn')" /> <Input v-model="row.sn" placeholder="请输入货号" @on-change="updateSkuTable(row, 'sn')"/>
</template> </template>
<template slot-scope="{ row }" slot="weight" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'"> <template slot-scope="{ row }" slot="weight" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
<Input v-model="row.weight" placeholder="请输入重量" @on-change="updateSkuTable(row, 'weight')" /> <Input v-model="row.weight" placeholder="请输入重量" @on-change="updateSkuTable(row, 'weight')"/>
</template> </template>
<template slot-scope="{ row }" slot="quantity"> <template slot-scope="{ row }" slot="quantity">
<Input v-model="row.quantity" placeholder="请输入库存" @on-change="updateSkuTable(row, 'quantity')" /> <Input v-model="row.quantity" placeholder="请输入库存"
@on-change="updateSkuTable(row, 'quantity')"/>
</template> </template>
<template slot-scope="{ row }" slot="cost"> <template slot-scope="{ row }" slot="cost">
<Input v-model="row.cost" placeholder="请输入成本价" @on-change="updateSkuTable(row, 'cost')" /> <Input v-model="row.cost" placeholder="请输入成本价" @on-change="updateSkuTable(row, 'cost')"/>
</template> </template>
<template slot-scope="{ row }" slot="price"> <template slot-scope="{ row }" slot="price">
<Input v-model="row.price" placeholder="请输入价格" @on-change="updateSkuTable(row, 'price')" /> <Input v-model="row.price" placeholder="请输入价格" @on-change="updateSkuTable(row, 'price')"/>
</template> </template>
<template slot-scope="{ row }" slot="images"> <template slot-scope="{ row }" slot="images">
<Button @click="editSkuPicture(row)">编辑图片</Button> <Button @click="editSkuPicture(row)">编辑图片</Button>
<Modal v-model="showSkuPicture" :styles="{ top: '30px' }" class-name="sku-preview-modal" title="编辑图片" ok-text="结束编辑" @on-ok="updateSkuPicture()" cancel-text="取消"> <Modal v-model="showSkuPicture" :styles="{ top: '30px' }" class-name="sku-preview-modal"
title="编辑图片" ok-text="结束编辑" @on-ok="updateSkuPicture()" cancel-text="取消">
<div class="preview-picture"> <div class="preview-picture">
<img v-if="previewPicture !== ''" :src="previewPicture" /> <img v-if="previewPicture !== ''" :src="previewPicture"/>
</div> </div>
<Divider /> <Divider/>
<div class="sku-upload-list" v-for="(img, __index) in selectedSku.images" :key="__index"> <div class="sku-upload-list" v-for="(img, __index) in selectedSku.images" :key="__index">
<template v-if="img.status === 'finished'"> <template v-if="img.status === 'finished'">
<img :src="img.url" /> <img :src="img.url"/>
<div class="sku-upload-list-cover"> <div class="sku-upload-list-cover">
<Icon type="ios-eye-outline" @click="handleView(img.url)"></Icon> <Icon type="ios-eye-outline" @click="handleView(img.url)"></Icon>
<Icon type="ios-trash-outline" @click="handleRemove(img, __index)"></Icon> <Icon type="ios-trash-outline" @click="handleRemove(img, __index)"></Icon>
@ -261,9 +267,11 @@
<Progress v-if="img.showProgress" :percent="img.percentage" hide-info></Progress> <Progress v-if="img.showProgress" :percent="img.percentage" hide-info></Progress>
</template> </template>
</div> </div>
<Upload ref="uploadSku" :show-upload-list="false" :default-file-list="row.images" :on-success="handleSuccess" :format="['jpg', 'jpeg', 'png']" <Upload ref="uploadSku" :show-upload-list="false" :default-file-list="row.images"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag" :action="uploadFileUrl" :on-success="handleSuccess" :format="['jpg', 'jpeg', 'png']"
:headers="accessToken" style="display: inline-block; width: 58px"> :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload" multiple type="drag" :action="uploadFileUrl"
:headers="accessToken" style="display: inline-block; width: 58px">
<div> <div>
<Icon type="ios-camera" size="55"></Icon> <Icon type="ios-camera" size="55"></Icon>
</div> </div>
@ -280,7 +288,7 @@
</div> </div>
<h4>商品详情描述</h4> <h4>商品详情描述</h4>
<div class="form-item-view"> <div class="form-item-view">
<div class="tree-bar" > <div class="tree-bar">
<FormItem <FormItem
class="form-item-view-el" class="form-item-view-el"
label="店内分类" label="店内分类"
@ -308,65 +316,69 @@
<div class="form-item-view"> <div class="form-item-view">
<FormItem class="form-item-view-el" label="商品重量" prop="weight"> <FormItem class="form-item-view-el" label="商品重量" prop="weight">
<Input v-model="baseInfoForm.weight"> <Input v-model="baseInfoForm.weight">
<span slot="append">kg</span> <span slot="append">kg</span>
</Input> </Input>
</FormItem> </FormItem>
<FormItem
class="form-item-view-el"
label="物流模板"
prop="templateId"
>
<Select v-model="baseInfoForm.templateId" style="width: 200px">
<Option
v-for="item in logisticsTemplate"
:value="item.id"
:key="item.id"
>{{ item.name }}
</Option>
</Select>
</FormItem>
</div>
<h4>其他信息</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el" label="商品发布" prop="release">
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.release">
<Radio title="立即发布" label="true">
<span>立即发布</span>
</Radio>
<Radio title="放入仓库" label="false">
<span>放入仓库</span>
</Radio>
</RadioGroup>
</FormItem>
<FormItem class="form-item-view-el" label="商品推荐" prop="skuList">
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.recommend">
<Radio title="推荐" label="true">
<span>推荐</span>
</Radio>
<Radio title="不推荐" label="false">
<span>不推荐</span>
</Radio>
</RadioGroup>
</FormItem>
</div>
<div class="form-item-view-bottom">
<Collapse v-model="params_panel" v-for="(paramsGroup,groupIndex) in goodsParams"
:title="paramsGroup.groupName"
style="text-align: left" :key="paramsGroup.groupName">
<Panel :name="paramsGroup.groupName">
{{paramsGroup.groupName}}
<p slot="content">
<FormItem v-for="( params, paramsIndex) in paramsGroup.params" :key="paramsIndex"
:label="`${params.paramName}：`">
<Select v-model="params.paramValue" placeholder="请选择" style="width: 200px" clearable
@on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.paramValue)">
<Option v-for="option in params.options.split(',')" :label="option"
:value="option"></Option>
</Select>
</FormItem>
</p>
</Panel>
</Collapse>
</div>
<FormItem
class="form-item-view-el"
label="物流模板"
prop="templateId"
>
<Select v-model="baseInfoForm.templateId" style="width: 200px">
<Option
v-for="item in logisticsTemplate"
:value="item.id"
:key="item.id"
>{{ item.name }}
</Option>
</Select>
</FormItem>
</div> </div>
<h4>其他信息</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el" label="商品发布" prop="release">
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.release">
<Radio title="立即发布" label="true">
<span>立即发布</span>
</Radio>
<Radio title="放入仓库" label="false">
<span>放入仓库</span>
</Radio>
</RadioGroup>
</FormItem>
<FormItem class="form-item-view-el" label="商品推荐" prop="skuList">
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.recommend">
<Radio title="推荐" label="true">
<span>推荐</span>
</Radio>
<Radio title="不推荐" label="false">
<span>不推荐</span>
</Radio>
</RadioGroup>
</FormItem>
</div>
<div class="form-item-view-bottom">
<Collapse v-model="show" v-for="paramsgroup in goodsParams" :title="paramsgroup.groupName" style="text-align: left" :key="paramsgroup.groupName">
<Panel key="1" name="1">
{{ paramsgroup.groupName }}
<p slot="content">
<FormItem v-for="(
goodsParamsList, index
) in baseInfoForm.goodsParamsList" :key="index" :label="`${goodsParamsList.paramName}：`">
<Select v-model="goodsParamsList.paramValue" placeholder="请选择" style="width: 200px" clearable>
<Option v-for="option in goodsParamsList.optionList" :key="option.paramValue" :label="option" :value="option"></Option>
</Select>
</FormItem>
</p>
</Panel>
</Collapse>
</div>
</div>
</div> </div>
</Form> </Form>
</div> </div>
@ -414,7 +426,7 @@
</template> </template>
<script> <script>
import { regular } from "@/utils"; import {regular} from "@/utils";
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb"; import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
import editor from "@/views/my-components/lili/editor"; import editor from "@/views/my-components/lili/editor";
import * as API_GOODS from "@/api/goods"; import * as API_GOODS from "@/api/goods";
@ -542,7 +554,6 @@ export default {
selectedSku: {}, selectedSku: {},
//选择店铺分类 //选择店铺分类
strict: true, strict: true,
goodsParamsList: [],
//模版 / 草稿 id //模版 / 草稿 id
draftId: undefined, draftId: undefined,
/** 当前激活步骤*/ /** 当前激活步骤*/
@ -577,32 +588,12 @@ export default {
categoryListLevel3: [], categoryListLevel3: [],
/** 请求的商品参数组列表 */ /** 请求的商品参数组列表 */
goodsParams: [ goodsParams: [],
{
groupId: "",
groupName: "",
params: [
{
paramId: 0,
paramName: "",
paramType: 1,
paramValue: "",
required: 0,
optionList: [
{ value: 1, label: "" },
{ value: 2, label: "" },
],
},
],
},
],
/** 当前状态/模式 默认发布商品0 编辑商品1 编辑草稿箱商品2 */ /** 当前状态/模式 默认发布商品0 编辑商品1 编辑草稿箱商品2 */
currentStatus: 0, currentStatus: 0,
baseInfoForm: { baseInfoForm: {
salesModel: "RETAIL", salesModel: "RETAIL",
/** 商品参数列表 */
goodsParamsList: [],
/** 商品重量 */ /** 商品重量 */
weight: "", weight: "",
/** 商品相册列表 */ /** 商品相册列表 */
@ -630,6 +621,8 @@ export default {
regeneratorSkuFlag: false, regeneratorSkuFlag: false,
/** 运费模板id **/ /** 运费模板id **/
templateId: 0, templateId: 0,
/** 参数组*/
goodsParamsDTOList: [],
}, },
/** 表单数据*/ /** 表单数据*/
skuForm: {}, skuForm: {},
@ -658,12 +651,13 @@ export default {
/** 固定列校验提示内容 */ /** 固定列校验提示内容 */
validatatxt: "请输入0~99999999之间的数字值", validatatxt: "请输入0~99999999之间的数字值",
//参数panel展示
params_panel: [],
/** 存储未通过校验的单元格位置 */ /** 存储未通过校验的单元格位置 */
validateError: [], validateError: [],
baseInfoFormRule: { baseInfoFormRule: {
goodsName: [ goodsName: [
{ required: true, message: "请输入商品名称" }, {required: true, message: "请输入商品名称"},
{ {
whitespace: true, whitespace: true,
message: "商品名称不可为纯空格", message: "商品名称不可为纯空格",
@ -675,23 +669,23 @@ export default {
}, },
], ],
sn: [ sn: [
{ required: true, message: "请输入商品编号" }, {required: true, message: "请输入商品编号"},
{ validator: checkSn }, {validator: checkSn},
], ],
price: [ price: [
{ required: true, message: "请输入商品价格" }, {required: true, message: "请输入商品价格"},
{ validator: checkPrice }, {validator: checkPrice},
], ],
cost: [ cost: [
{ required: true, message: "请输入市场价格" }, {required: true, message: "请输入市场价格"},
{ validator: checkPrice }, {validator: checkPrice},
], ],
weight: [ weight: [
{ required: true, message: "请输入物流参数" }, {required: true, message: "请输入物流参数"},
{ validator: checkWeight }, {validator: checkWeight},
], ],
sellingPoint: [{ required: true, message: "请输入商品卖点" }], sellingPoint: [{required: true, message: "请输入商品卖点"}],
goodsUnit: [{ required: true, message: "请选择计量单位" }], goodsUnit: [{required: true, message: "请选择计量单位"}],
}, },
/** 品牌列表 */ /** 品牌列表 */
brandList: [], brandList: [],
@ -754,7 +748,6 @@ export default {
defaultBaseInfo() { defaultBaseInfo() {
this.baseInfoForm = { this.baseInfoForm = {
salesModel: "RETAIL", salesModel: "RETAIL",
goodsParamsList: [],
weight: "", weight: "",
goodsGalleryFiles: [], goodsGalleryFiles: [],
release: "true", release: "true",
@ -770,6 +763,7 @@ export default {
updateSku: true, updateSku: true,
regeneratorSkuFlag: false, regeneratorSkuFlag: false,
templateId: 0, templateId: 0,
goodsParamsDTOList: [],
}; };
this.activestep = 0; this.activestep = 0;
this.isPublish = true; this.isPublish = true;
@ -833,6 +827,43 @@ export default {
} }
}); });
}, },
/**
* 选择参数
* @paramsGroup 参数分组
* @groupIndex 参数分组下标
* @params 参数选项
* @paramIndex 参数下标值
* @value 参数选项值
*/
selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
groupId:'',
groupName:'',
goodsParamsItemDTOList:[]
}
}
//赋予分组id
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId = paramsGroup.groupId
//赋予分组名称
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName = paramsGroup.groupName
//参数详细为空，则赋予
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]) {
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]={
paramName:'',
paramValue:'',
isIndex:'',
required:'',
}
}
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]={
paramName: params.paramName,
paramValue: value,
isIndex: params.isIndex,
required: params.required,
}
},
// 编辑sku图片 // 编辑sku图片
editSkuPicture(row) { editSkuPicture(row) {
console.log(row); console.log(row);
@ -923,7 +954,7 @@ export default {
}, },
// 跳转商品列表 // 跳转商品列表
gotoGoodsList() { gotoGoodsList() {
this.$router.push({ name: "goods" }); this.$router.push({name: "goods"});
}, },
gotoBack() { gotoBack() {
this.$router.go(); this.$router.go();
@ -936,6 +967,7 @@ export default {
} }
); );
}, },
// 获取商品单位
GET_GoodsUnit() { GET_GoodsUnit() {
API_GOODS.getGoodsUnitList().then((res) => { API_GOODS.getGoodsUnitList().then((res) => {
if (res.success) { if (res.success) {
@ -943,6 +975,7 @@ export default {
} }
}); });
}, },
// 获取当前店铺分类
GET_ShopGoodsLabel() { GET_ShopGoodsLabel() {
API_GOODS.getShopGoodsLabelListSeller().then((res) => { API_GOODS.getShopGoodsLabelListSeller().then((res) => {
if (res.success) { if (res.success) {
@ -999,7 +1032,7 @@ export default {
) { ) {
this.baseInfoForm.goodsGalleryFiles = this.baseInfoForm.goodsGalleryFiles =
response.result.goodsGalleryList.map((i) => { response.result.goodsGalleryList.map((i) => {
let files = { url: i }; let files = {url: i};
return files; return files;
}); });
} }
@ -1080,47 +1113,46 @@ export default {
this.renderTableData(); this.renderTableData();
this.skuTableData = skus; this.skuTableData = skus;
}, },
/** 查询商品参数 */
/** 根据当前分类id查询商品应包含的参数 */
GET_GoodsParams() { GET_GoodsParams() {
API_GOODS.getCategoryParamsListDataSeller(this.categoryId).then( API_GOODS.getCategoryParamsListDataSeller(this.categoryId).then(
(response) => { (response) => {
this.goodsParams = response;
this.collapseVal = this.goodsParams.map((key) => {
if (key.groupId) {
return key.groupId;
}
});
if (!response || response.length <= 0) { if (!response || response.length <= 0) {
return; return;
} }
this.goodsParams.forEach((key) => { this.goodsParams = response;
if (key && key.params) {
key.params.forEach((elem) => { //展开选项卡
if ( this.goodsParams.forEach(item => {
!this.baseInfoForm.goodsParamsList.find( this.params_panel.push(item.groupName)
(ij) => ij.paramName === elem.paramName
)
) {
elem.optionList = elem.options.split(",");
this.baseInfoForm.goodsParamsList.push(elem);
}
if (this.$route.query.id || this.draftId) {
this.baseInfoForm.goodsParamsList =
this.baseInfoForm.goodsParamsList.map((i) => {
if (i.paramId === elem.id || i.id === elem.id) {
elem.optionList = elem.options.split(",");
i = {
...i,
...elem,
};
}
return i;
});
return;
}
});
} }
}); )
if (this.baseInfoForm.goodsParamsDTOList) {
// 已选值集合
const paramsArr = []
this.baseInfoForm.goodsParamsDTOList.forEach(group =>{
group.goodsParamsItemDTOList.forEach(param => {
param.groupId = group.groupId
paramsArr.push(param)
console.log(param);
})
})
// 循环参数分组
this.goodsParams.forEach((parmsGroup) => {
parmsGroup.params.forEach(param => {
paramsArr.forEach(arr=>{
if(param.paramName == arr.paramName){
param.paramValue = arr.paramValue
}
})
})
});
console.log(this.goodsParams);
} else {
this.baseInfoForm.goodsParamsDTOList = []
}
} }
); );
}, },
@ -1141,22 +1173,22 @@ export default {
this.renderTableData(); this.renderTableData();
}, },
// 编辑规格名 // 编辑规格名
editSkuItem () { editSkuItem() {
this.renderTableData(); this.renderTableData();
}, },
// 编辑规格值 // 编辑规格值
async skuValueChange(val, index, item) { async skuValueChange(val, index, item) {
/** 更新skuInfo数据 */ /** 更新skuInfo数据 */
let _arr = cloneObj(item); // let _arr = cloneObj(item);
this.$set(item, "name", _arr.name); // this.$set(item, "name", _arr.name);
this.$set(this.skuInfo, index, _arr); // this.$set(this.skuInfo, index, _arr);
/** /**
* 渲染规格详细表格 * 渲染规格详细表格
*/ */
this.renderTableData(); this.renderTableData();
}, },
// 获取焦点时，取得规格名对应的规格值 // 获取焦点时，取得规格名对应的规格值
changeSkuVals (name) { changeSkuVals(name) {
if (name) { if (name) {
this.skuData.forEach((e, index) => { this.skuData.forEach((e, index) => {
if (e === name) { if (e === name) {
@ -1230,23 +1262,22 @@ export default {
renderTableData() { renderTableData() {
this.skuTableColumn = []; this.skuTableColumn = [];
this.skuTableData = []; this.skuTableData = [];
let pushData = [];
//渲染头部 //渲染头部
this.skuInfo.forEach((sku) => { this.skuInfo.forEach((sku) => {
//列名称 //列名称
let columnName = sku.name; let columnName = sku.name;
this.skuTableColumn.push({ pushData.push({
title: columnName, title: columnName,
key: columnName, key: columnName,
}); });
}); });
let pushData = [];
pushData.push(...this.skuTableColumn);
this.baseInfoForm.goodsType != "VIRTUAL_GOODS" this.baseInfoForm.goodsType != "VIRTUAL_GOODS"
? pushData.push({ ? pushData.push({
title: "重量", title: "重量",
slot: "weight", slot: "weight",
}) })
: ""; : "";
pushData.push( pushData.push(
{ {
@ -1272,33 +1303,62 @@ export default {
); );
this.skuTableColumn = pushData; this.skuTableColumn = pushData;
console.log(this.skuTableColumn);
//克隆所有渲染的数据 //克隆所有渲染的数据
let cloneTemp = cloneObj(this.skuInfo); let cloneTemp = cloneObj(this.skuInfo);
//数据清空一次 //数据清空一次
this.skuTableData = []; this.skuTableData = [];
//判定 是否存在规格分组 //判定 是否存在规格分组
if (cloneTemp[0]) { if (cloneTemp[0]) {
//存放最终结果 //存放最终结果
let result = []; let result = [];
//循环选中的 sku 数据 //循环选中的 sku 数据
cloneTemp[0].spec_values.forEach((specItem) => { cloneTemp[0].spec_values.forEach((specItem) => {
result.push({ result.push({
[specItem.name]: specItem.value, [cloneTemp[0].name]: specItem.value,
images: this.baseInfoForm.goodsGalleryFiles || [], images: this.baseInfoForm.goodsGalleryFiles || [],
}); });
}); });
cloneTemp.splice(0, 1); cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp); result = this.specIterator(result, cloneTemp);
this.skuTableData = result; this.skuTableData = result;
console.log(this.skuTableData);
} }
},
/**
* 迭代属性，形成表格
* result 渲染的数据
* array spec数据
*/
specIterator(result, cloneTemp) {
//是否还可以循环
if (cloneTemp.length > 0) {
let table = [];
result.forEach((resItem) => {
cloneTemp[0].spec_values.forEach((valItem) => {
let obj = cloneObj(resItem);
obj[cloneTemp[0].name] = valItem.value;
table.push(obj);
});
});
result = [];
table.forEach((t) => {
result.push(t);
});
//清除当前循环的分组
cloneTemp.splice(0, 1);
} else {
return result;
}
return this.specIterator(result, cloneTemp);
}, },
/** 根据分类id获取系统设置规格信息*/ /** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory(categoryId) { Get_SkuInfoByCategory(categoryId) {
if (categoryId) { if (categoryId) {
API_GOODS.getGoodsSpecInfoSeller(categoryId).then(res => { API_GOODS.getGoodsSpecInfoSeller(categoryId).then(res => {
if(res.length) { if (res.length) {
res.forEach(e => { res.forEach(e => {
this.skuData.push(e.specName) this.skuData.push(e.specName)
const vals = e.specValue ? e.specValue.split(',') : [] const vals = e.specValue ? e.specValue.split(',') : []
@ -1313,36 +1373,21 @@ export default {
filterMethod(value, option) { filterMethod(value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1; return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
}, },
// 节流函数
/** throttle (fn,time) {
* 迭代属性，形成表格 let startTime = new Date();//初始时间
* result 渲染的数据 return function(){
* array spec数据 let time_ = (new Date() - startTime) >= time;//判断时间间隔是否大于传入的time值，返回布尔值
*/ if(time_){
specIterator(result, cloneTemp) { fn.apply(this);
//是否还可以循环 startTime = new Date();//函数执行完后更新初始时间的值
if (cloneTemp.length > 0) { }
let table = [];
result.forEach((resItem) => {
cloneTemp[0].spec_values.forEach((valItem) => {
let obj = cloneObj(resItem);
obj[valItem.name] = valItem.value;
table.push(obj);
});
});
result = [];
table.forEach((t) => {
result.push(t);
});
//清除当前循环的分组
cloneTemp.splice(0, 1);
} else {
return result;
} }
return this.specIterator(result, cloneTemp);
}, },
// 规格表格操作 // 规格表格操作
handleSpan({ row, column, rowIndex, columnIndex }) {}, handleSpan({row, column, rowIndex, columnIndex}) {
},
/** 数据改变之后 抛出数据 */ /** 数据改变之后 抛出数据 */
updateSkuTable(row, item) { updateSkuTable(row, item) {
let index = row._index; let index = row._index;
@ -1500,15 +1545,16 @@ export default {
} }
let flag = false; let flag = false;
let paramValue = ""; let paramValue = "";
this.baseInfoForm.goodsParamsList.forEach((e) => { // //参数校验
if ( // this.baseInfoForm.goodsParamsList.forEach((e) => {
(e.required === 1 && e.paramValue === null) || // if (
e.paramValue === undefined // (e.required === 1 && e.paramValue === null) ||
) { // e.paramValue === undefined
flag = true; // ) {
paramValue = e.paramName; // flag = true;
} // paramValue = e.paramName;
}); // }
// });
if (flag) { if (flag) {
this.$Message.error(paramValue + " 参数值不能为空"); this.$Message.error(paramValue + " 参数值不能为空");
this.submitLoading = false; this.submitLoading = false;