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

参数相关问题处理

master
Chopper 2021-06-24 17:44:43 +08:00
parent 7b2054206a
commit 3cb1edee83
1 changed files with 238 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

444
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>
@ -26,36 +28,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>
@ -67,7 +71,12 @@
<span v-show="activeCategoryName3">> {{ activeCategoryName3 }}</span> <span v-show="activeCategoryName3">> {{ activeCategoryName3 }}</span>
</p> </p>
<template v-if="!$route.query.id && draftId"> <template v-if="!$route.query.id && draftId">
<Divider>已选商品模版:{{goodsTemplates.find(item=>{return item.id == draftId}).goodsName}}</Divider> <Divider>已选商品模版:{{
goodsTemplates.find(item => {
return item.id == draftId
}).goodsName
}}
</Divider>
</template> </template>
</div> </div>
@ -84,11 +93,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">
@ -105,7 +114,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>
@ -125,18 +135,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>
@ -149,13 +159,13 @@
baseInfoForm.goodsGalleryFiles, baseInfoForm.goodsGalleryFiles,
__index __index
) )
" /> "/>
<Icon type="ios-arrow-dropright" @click.native=" <Icon type="ios-arrow-dropright" @click.native="
handleGoodsPicRemoteDown( handleGoodsPicRemoteDown(
baseInfoForm.goodsGalleryFiles, baseInfoForm.goodsGalleryFiles,
__index __index
) )
" /> "/>
</div> </div>
</div> </div>
</template> </template>
@ -163,16 +173,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>
@ -185,23 +197,30 @@
<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-if="skuValVisible" 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">
@ -225,34 +244,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>
@ -262,9 +283,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>
@ -281,7 +304,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="店内分类"
@ -309,65 +332,68 @@
<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 <FormItem
class="form-item-view-el" class="form-item-view-el"
label="物流模板" label="物流模板"
prop="templateId" prop="templateId"
> >
<Select v-model="baseInfoForm.templateId" style="width: 200px"> <Select v-model="baseInfoForm.templateId" style="width: 200px">
<Option <Option
v-for="item in logisticsTemplate" v-for="item in logisticsTemplate"
:value="item.id" :value="item.id"
:key="item.id" :key="item.id"
>{{ item.name }} >{{ item.name }}
</Option> </Option>
</Select> </Select>
</FormItem> </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">
<p slot="content">
<FormItem v-for="( params, paramsIndex) in paramsGroup.params" :key="paramsIndex"
:label="`${params.paramName}：`">
<Select v-model="params.paramName" placeholder="请选择" style="width: 200px" clearable
@on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.val)">
<Option v-for="option in params.options.split(',')" :label="option"
:value="option"></Option>
</Select>
</FormItem>
</p>
</Panel>
</Collapse>
</div>
</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>
@ -417,7 +443,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";
@ -545,7 +571,6 @@ export default {
selectedSku: {}, selectedSku: {},
//选择店铺分类 //选择店铺分类
strict: true, strict: true,
goodsParamsList: [],
//模版 / 草稿 id //模版 / 草稿 id
draftId: undefined, draftId: undefined,
/** 当前激活步骤*/ /** 当前激活步骤*/
@ -580,32 +605,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: "",
/** 商品相册列表 */ /** 商品相册列表 */
@ -633,6 +638,8 @@ export default {
regeneratorSkuFlag: false, regeneratorSkuFlag: false,
/** 运费模板id **/ /** 运费模板id **/
templateId: 0, templateId: 0,
/** 参数组*/
goodsParamsDTOList: [],
}, },
/** 表单数据*/ /** 表单数据*/
skuForm: {}, skuForm: {},
@ -643,7 +650,7 @@ export default {
/** 默认的规格参数 */ /** 默认的规格参数 */
skuData: [], skuData: [],
/** 默认的规格值 */ /** 默认的规格值 */
skuVals: [], skuVals: [],
// 某一规格名下的规格值 // 某一规格名下的规格值
@ -661,12 +668,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: "商品名称不可为纯空格",
@ -678,23 +686,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: [],
@ -735,7 +743,7 @@ export default {
this.goodsId = this.$route.query.id; this.goodsId = this.$route.query.id;
this.GET_GoodData(); this.GET_GoodData();
this.selectGoodsType = false; this.selectGoodsType = false;
} }
//编辑模版 //编辑模版
else if (this.$route.query.draftId) { else if (this.$route.query.draftId) {
@ -756,7 +764,6 @@ export default {
defaultBaseInfo() { defaultBaseInfo() {
this.baseInfoForm = { this.baseInfoForm = {
salesModel: "RETAIL", salesModel: "RETAIL",
goodsParamsList: [],
weight: "", weight: "",
goodsGalleryFiles: [], goodsGalleryFiles: [],
release: "true", release: "true",
@ -772,6 +779,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;
@ -828,6 +836,44 @@ export default {
} }
}); });
}, },
/**
* 选择参数
* @paramsGroup 参数分组
* @groupIndex 参数分组下标
* @params 参数选项
* @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
//赋予参数值
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex].paramValue = value
//参数是否索引
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex].isIndex = params.isIndex
//参数是否必填
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex].required = params.required
},
// 编辑sku图片 // 编辑sku图片
editSkuPicture(row) { editSkuPicture(row) {
console.log(row); console.log(row);
@ -918,7 +964,7 @@ export default {
}, },
// 跳转商品列表 // 跳转商品列表
gotoGoodsList() { gotoGoodsList() {
this.$router.push({ name: "goods" }); this.$router.push({name: "goods"});
}, },
gotoBack() { gotoBack() {
this.$router.go(); this.$router.go();
@ -974,7 +1020,7 @@ export default {
...response.result, ...response.result,
}; };
// console.warn(this.baseInfoForm); // console.warn(this.baseInfoForm);
this.baseInfoForm.release = "true"; this.baseInfoForm.release = "true";
this.baseInfoForm.recommend = this.baseInfoForm.recommend this.baseInfoForm.recommend = this.baseInfoForm.recommend
? "true" ? "true"
@ -987,14 +1033,14 @@ export default {
this.baseInfoForm.categoryId = response.result.categoryPath.split(","); this.baseInfoForm.categoryId = response.result.categoryPath.split(",");
if ( if (
response.result.goodsGalleryList && response.result.goodsGalleryList &&
response.result.goodsGalleryList.length > 0 response.result.goodsGalleryList.length > 0
) { ) {
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;
}); });
} }
@ -1075,51 +1121,35 @@ 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;
}
});
} }
)
// 循环参数分组
this.goodsParams.forEach((parmsGroup) => {
this.baseInfoForm.goodsParamsDTOList.forEach(paramsGroup=>{
paramsGroup.goodsParamsItemDTOList.forEach(params=>{
params.paramName=params.paramValue
})
})
}); });
} }
); );
}, },
/** 添加规格项 */ /** 添加规格项 */
addSkuItem() { addSkuItem() {
if (this.skuInfo.length >= 5) { if (this.skuInfo.length >= 5) {
@ -1136,7 +1166,7 @@ export default {
this.renderTableData(); this.renderTableData();
}, },
// 编辑规格名 // 编辑规格名
editSkuItem () { editSkuItem() {
this.renderTableData(); this.renderTableData();
}, },
// 编辑规格值 // 编辑规格值
@ -1151,7 +1181,7 @@ export default {
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) {
@ -1207,7 +1237,7 @@ export default {
this.renderTableData(); this.renderTableData();
} }
}, },
/** 移除当前规格值 */ /** 移除当前规格值 */
handleCloseSkuValue(item, index) { handleCloseSkuValue(item, index) {
item.spec_values.splice(index, 1); item.spec_values.splice(index, 1);
@ -1218,7 +1248,7 @@ export default {
*/ */
this.renderTableData(); this.renderTableData();
}, },
/** /**
* 渲染table所需要的column 和 data * 渲染table所需要的column 和 data
*/ */
@ -1239,9 +1269,9 @@ export default {
pushData.push(...this.skuTableColumn); 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(
{ {
@ -1294,10 +1324,10 @@ export default {
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)
this.skuVals.push(e.specValue ? e.specValue.split(',') : []) this.skuVals.push(e.specValue ? e.specValue.split(',') : [])
}) })
} }
} }
@ -1306,7 +1336,7 @@ export default {
}, },
/** 自动完成表单所需方法*/ /** 自动完成表单所需方法*/
filterMethod(value, option) { filterMethod(value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1; return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
}, },
/** /**
* 添加固有属性 * 添加固有属性
@ -1343,7 +1373,8 @@ export default {
return this.specIterator(result, cloneTemp); 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;
@ -1501,15 +1532,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;