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

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

@ -3,7 +3,8 @@
<!-- 选择商品类型 --> <!-- 选择商品类型 -->
<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)"
v-for="(item,index) in goodsTypeWay" :key="index">
<img :src="item.img"/> <img :src="item.img"/>
<div> <div>
<h2>{{ item.title }}</h2> <h2>{{ item.title }}</h2>
@ -13,7 +14,8 @@
</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)"
v-for="(item,index) in goodsTemplates" :key="index">
<img :src="item.thumbnail"/> <img :src="item.thumbnail"/>
<div> <div>
<h2>{{ item.goodsName }}</h2> <h2>{{ item.goodsName }}</h2>
@ -26,7 +28,6 @@
</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">
@ -43,19 +44,22 @@
<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>
@ -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>
@ -163,8 +173,10 @@
<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']"
: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;"> :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>
@ -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"
placeholder="请输入规格项名称"
:filter-method="filterMethod" :data="skuData" :filter-method="filterMethod" :data="skuData"
@on-change="editSkuItem"> @on-change="editSkuItem">
</AutoComplete> </AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除</Button> <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="请输入规格值名称"
:filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)"> @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">
@ -233,7 +252,8 @@
</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">
@ -245,7 +265,8 @@
</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>
@ -262,8 +283,10 @@
<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']"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload" multiple type="drag" :action="uploadFileUrl"
:headers="accessToken" style="display: inline-block; width: 58px"> :headers="accessToken" style="display: inline-block; width: 58px">
<div> <div>
<Icon type="ios-camera" size="55"></Icon> <Icon type="ios-camera" size="55"></Icon>
@ -352,21 +375,24 @@
</FormItem> </FormItem>
</div> </div>
<div class="form-item-view-bottom"> <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"> <Collapse v-model="params_panel" v-for="(paramsGroup,groupIndex) in goodsParams"
<Panel key="1" name="1"> :title="paramsGroup.groupName"
{{ paramsgroup.groupName }} style="text-align: left" :key="paramsGroup.groupName">
<Panel :name="paramsGroup.groupName">
<p slot="content"> <p slot="content">
<FormItem v-for="( <FormItem v-for="( params, paramsIndex) in paramsGroup.params" :key="paramsIndex"
goodsParamsList, index :label="`${params.paramName}：`">
) in baseInfoForm.goodsParamsList" :key="index" :label="`${goodsParamsList.paramName}：`"> <Select v-model="params.paramName" placeholder="请选择" style="width: 200px" clearable
<Select v-model="goodsParamsList.paramValue" placeholder="请选择" style="width: 200px" clearable> @on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.val)">
<Option v-for="option in goodsParamsList.optionList" :key="option.paramValue" :label="option" :value="option"></Option> <Option v-for="option in params.options.split(',')" :label="option"
:value="option"></Option>
</Select> </Select>
</FormItem> </FormItem>
</p> </p>
</Panel> </Panel>
</Collapse> </Collapse>
</div> </div>
</div> </div>
</div> </div>
</Form> </Form>
@ -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: {},
@ -661,7 +668,8 @@ export default {
/** 固定列校验提示内容 */ /** 固定列校验提示内容 */
validatatxt: "请输入0~99999999之间的数字值", validatatxt: "请输入0~99999999之间的数字值",
//参数panel展示
params_panel: [],
/** 存储未通过校验的单元格位置 */ /** 存储未通过校验的单元格位置 */
validateError: [], validateError: [],
baseInfoFormRule: { baseInfoFormRule: {
@ -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);
@ -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.goodsParams.forEach((parmsGroup) => {
this.baseInfoForm.goodsParamsList.push(elem); this.baseInfoForm.goodsParamsDTOList.forEach(paramsGroup=>{
} paramsGroup.goodsParamsItemDTOList.forEach(params=>{
if (this.$route.query.id || this.draftId) { params.paramName=params.paramValue
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;
}
});
}
}); });
} }
); );
}, },
/** 添加规格项 */ /** 添加规格项 */
addSkuItem() { addSkuItem() {
if (this.skuInfo.length >= 5) { if (this.skuInfo.length >= 5) {
@ -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;