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

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

@ -3,7 +3,8 @@
<!-- 选择商品类型 -->
<Modal v-model="selectGoodsType" width="550" :closable="false">
<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"/>
<div>
<h2>{{ item.title }}</h2>
@ -13,7 +14,8 @@
</div>
<div v-else class="goods-type-list">
<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"/>
<div>
<h2>{{ item.goodsName }}</h2>
@ -25,8 +27,6 @@
</Modal>
<div class="step-list">
<steps :current="activestep" simple style="height:60px;margin-top: 10px" process-status="process">
<div class="step-view">
@ -43,19 +43,22 @@
<div class="content-goods-publish" v-show="activestep === 0">
<div class="goods-category">
<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>&gt;</span>
</li>
</ul>
<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>&gt;</span>
</li>
</ul>
<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>
</li>
</ul>
@ -104,7 +107,8 @@
</Select>
</FormItem>
<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">
<span>零售型</span>
</Radio>
@ -144,17 +148,9 @@
</div>
<div>
<Icon type="ios-arrow-dropleft" @click.native="
handleGoodsPicRemoteUp(
baseInfoForm.goodsGalleryFiles,
__index
)
" />
handleGoodsPicRemoteUp(baseInfoForm.goodsGalleryFiles,__index)"/>
<Icon type="ios-arrow-dropright" @click.native="
handleGoodsPicRemoteDown(
baseInfoForm.goodsGalleryFiles,
__index
)
" />
handleGoodsPicRemoteDown(baseInfoForm.goodsGalleryFiles,__index)"/>
</div>
</div>
</template>
@ -162,8 +158,10 @@
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
<Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles" :on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl"
<Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles"
: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;">
<div style="width: 80px; height: 80px; line-height: 80px">
<Icon type="ios-camera" size="20"></Icon>
@ -184,23 +182,29 @@
<div class="sku-item" v-for="(item, $index) in skuInfo" :key="$index">
<Card :bordered="true">
<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"
@on-change="editSkuItem">
</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 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>
<AutoComplete style="width: 150px; float: left" v-if="skuValVisible" v-model="val.value" :maxlength="30" placeholder="请输入规格值名称"
:filter-method="filterMethod" :data="skuVal" @on-focus="changeSkuVals(item.name)"
<AutoComplete style="width: 150px; float: left" v-model="val.value"
:maxlength="30" placeholder="请输入规格值名称"
:filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)">
</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 style="float: left">
@ -232,7 +236,8 @@
</template>
<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 slot-scope="{ row }" slot="cost">
@ -244,7 +249,8 @@
</template>
<template slot-scope="{ row }" slot="images">
<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">
<img v-if="previewPicture !== ''" :src="previewPicture"/>
</div>
@ -261,8 +267,10 @@
<Progress v-if="img.showProgress" :percent="img.percentage" hide-info></Progress>
</template>
</div>
<Upload ref="uploadSku" :show-upload-list="false" :default-file-list="row.images" :on-success="handleSuccess" :format="['jpg', 'jpeg', 'png']"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag" :action="uploadFileUrl"
<Upload ref="uploadSku" :show-upload-list="false" :default-file-list="row.images"
: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">
<div>
<Icon type="ios-camera" size="55"></Icon>
@ -351,21 +359,25 @@
</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 }}
<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="(
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>
<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>
</div>
</div>
</Form>
@ -542,7 +554,6 @@ export default {
selectedSku: {},
//选择店铺分类
strict: true,
goodsParamsList: [],
//模版 / 草稿 id
draftId: undefined,
/** 当前激活步骤*/
@ -577,32 +588,12 @@ export default {
categoryListLevel3: [],
/** 请求的商品参数组列表 */
goodsParams: [
{
groupId: "",
groupName: "",
params: [
{
paramId: 0,
paramName: "",
paramType: 1,
paramValue: "",
required: 0,
optionList: [
{ value: 1, label: "" },
{ value: 2, label: "" },
],
},
],
},
],
goodsParams: [],
/** 当前状态/模式 默认发布商品0 编辑商品1 编辑草稿箱商品2 */
currentStatus: 0,
baseInfoForm: {
salesModel: "RETAIL",
/** 商品参数列表 */
goodsParamsList: [],
/** 商品重量 */
weight: "",
/** 商品相册列表 */
@ -630,6 +621,8 @@ export default {
regeneratorSkuFlag: false,
/** 运费模板id **/
templateId: 0,
/** 参数组*/
goodsParamsDTOList: [],
},
/** 表单数据*/
skuForm: {},
@ -658,7 +651,8 @@ export default {
/** 固定列校验提示内容 */
validatatxt: "请输入0~99999999之间的数字值",
//参数panel展示
params_panel: [],
/** 存储未通过校验的单元格位置 */
validateError: [],
baseInfoFormRule: {
@ -754,7 +748,6 @@ export default {
defaultBaseInfo() {
this.baseInfoForm = {
salesModel: "RETAIL",
goodsParamsList: [],
weight: "",
goodsGalleryFiles: [],
release: "true",
@ -770,6 +763,7 @@ export default {
updateSku: true,
regeneratorSkuFlag: false,
templateId: 0,
goodsParamsDTOList: [],
};
this.activestep = 0;
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图片
editSkuPicture(row) {
console.log(row);
@ -936,6 +967,7 @@ export default {
}
);
},
// 获取商品单位
GET_GoodsUnit() {
API_GOODS.getGoodsUnitList().then((res) => {
if (res.success) {
@ -943,6 +975,7 @@ export default {
}
});
},
// 获取当前店铺分类
GET_ShopGoodsLabel() {
API_GOODS.getShopGoodsLabelListSeller().then((res) => {
if (res.success) {
@ -1080,47 +1113,46 @@ export default {
this.renderTableData();
this.skuTableData = skus;
},
/** 查询商品参数 */
/** 根据当前分类id查询商品应包含的参数 */
GET_GoodsParams() {
API_GOODS.getCategoryParamsListDataSeller(this.categoryId).then(
(response) => {
this.goodsParams = response;
this.collapseVal = this.goodsParams.map((key) => {
if (key.groupId) {
return key.groupId;
}
});
if (!response || response.length <= 0) {
return;
}
this.goodsParams.forEach((key) => {
if (key && key.params) {
key.params.forEach((elem) => {
if (
!this.baseInfoForm.goodsParamsList.find(
(ij) => ij.paramName === elem.paramName
this.goodsParams = response;
//展开选项卡
this.goodsParams.forEach(item => {
this.params_panel.push(item.groupName)
}
)
) {
elem.optionList = elem.options.split(",");
this.baseInfoForm.goodsParamsList.push(elem);
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
}
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;
console.log(this.goodsParams);
} else {
this.baseInfoForm.goodsParamsDTOList = []
}
});
}
});
}
);
},
@ -1147,9 +1179,9 @@ export default {
// 编辑规格值
async skuValueChange(val, index, item) {
/** 更新skuInfo数据 */
let _arr = cloneObj(item);
this.$set(item, "name", _arr.name);
this.$set(this.skuInfo, index, _arr);
// let _arr = cloneObj(item);
// this.$set(item, "name", _arr.name);
// this.$set(this.skuInfo, index, _arr);
/**
* 渲染规格详细表格
*/
@ -1230,18 +1262,17 @@ export default {
renderTableData() {
this.skuTableColumn = [];
this.skuTableData = [];
let pushData = [];
//渲染头部
this.skuInfo.forEach((sku) => {
//列名称
let columnName = sku.name;
this.skuTableColumn.push({
pushData.push({
title: columnName,
key: columnName,
});
});
let pushData = [];
pushData.push(...this.skuTableColumn);
this.baseInfoForm.goodsType != "VIRTUAL_GOODS"
? pushData.push({
title: "重量",
@ -1272,27 +1303,56 @@ export default {
);
this.skuTableColumn = pushData;
console.log(this.skuTableColumn);
//克隆所有渲染的数据
let cloneTemp = cloneObj(this.skuInfo);
//数据清空一次
this.skuTableData = [];
//判定 是否存在规格分组
if (cloneTemp[0]) {
//存放最终结果
let result = [];
//循环选中的 sku 数据
cloneTemp[0].spec_values.forEach((specItem) => {
result.push({
[specItem.name]: specItem.value,
[cloneTemp[0].name]: specItem.value,
images: this.baseInfoForm.goodsGalleryFiles || [],
});
});
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp);
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获取系统设置规格信息*/
Get_SkuInfoByCategory(categoryId) {
@ -1313,36 +1373,21 @@ export default {
filterMethod(value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
},
/**
* 迭代属性，形成表格
* 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[valItem.name] = valItem.value;
table.push(obj);
});
});
result = [];
table.forEach((t) => {
result.push(t);
});
//清除当前循环的分组
cloneTemp.splice(0, 1);
} else {
return result;
// 节流函数
throttle (fn,time) {
let startTime = new Date();//初始时间
return function(){
let time_ = (new Date() - startTime) >= time;//判断时间间隔是否大于传入的time值，返回布尔值
if(time_){
fn.apply(this);
startTime = new Date();//函数执行完后更新初始时间的值
}
}
return this.specIterator(result, cloneTemp);
},
// 规格表格操作
handleSpan({ row, column, rowIndex, columnIndex }) {},
handleSpan({row, column, rowIndex, columnIndex}) {
},
/** 数据改变之后 抛出数据 */
updateSkuTable(row, item) {
let index = row._index;
@ -1500,15 +1545,16 @@ export default {
}
let flag = false;
let paramValue = "";
this.baseInfoForm.goodsParamsList.forEach((e) => {
if (
(e.required === 1 && e.paramValue === null) ||
e.paramValue === undefined
) {
flag = true;
paramValue = e.paramName;
}
});
// //参数校验
// this.baseInfoForm.goodsParamsList.forEach((e) => {
// if (
// (e.required === 1 && e.paramValue === null) ||
// e.paramValue === undefined
// ) {
// flag = true;
// paramValue = e.paramName;
// }
// });
if (flag) {
this.$Message.error(paramValue + " 参数值不能为空");
this.submitLoading = false;