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

规格项修改

master
mabo 2021-06-24 15:56:20 +08:00
parent f8f205d0e8
commit 39fd76ebdc
3 changed files with 95 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -151,7 +151,7 @@ export default {
count: 1, // 商品数量
imgIndex: 0, // 展示图片下标
currentSelceted: [], // 当前商品sku
imgList: this.detail.data.specList[0].specImage, // 商品图片列表
imgList: this.detail.data.specList[0].specImage || [], // 商品图片列表
skuDetail: this.detail.data, // sku详情
goodsSpecList: this.detail.specs, // 商品spec
promotionMap: { // 活动状态

16
seller/src/api/goods.js
View File

@ -215,13 +215,13 @@ export const getSkuPage = params => {
};
// 获取商品规格值列表
export const getSpecValuesListSellerData = (id, params) => {
return getRequest(`/goods/spec-values/values/${id}`, params);
};
// export const getSpecValuesListSellerData = (id, params) => {
// return getRequest(`/goods/spec-values/values/${id}`, params);
// };
// 添加商品规格值
export const saveSpecValuesSeller = (id, params) => {
return postRequest(`/goods/spec-values/save/${id}`, params);
};
// export const saveSpecValuesSeller = (id, params) => {
// return postRequest(`/goods/spec-values/save/${id}`, params);
// };
// 获取商品规格分页列表
export const getSpecListSellerData = params => {
@ -312,8 +312,8 @@ export const getCategoryParamsListDataSeller = (id, params) => {
};
//保存获取关联规格
export const getGoodsSpecInfoSeller = (category_id, params) => {
return getRequest(`/goods/spec/${category_id}`, params);
export const getGoodsSpecInfoSeller = (category_id) => {
return getRequest(`/goods/spec/${category_id}`);
};
//批量设置运费模板

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

@ -185,29 +185,33 @@
<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" :data="specListSelected" placeholder="请输入规格项名称" />
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除
</Button>
<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>
</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>
<AutoComplete style="width: 150px; float: left" v-model="val.value" :maxlength="30" :data="skuValue" placeholder="请输入规格值名称"></AutoComplete>
<Button type="error" style="float: left; margin-left: 10px" @click="handleCloseSkuValue($index, index)">删除</Button>
<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)"
@on-change="skuValueChange(val.value, $index, item)">
</AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuValue(item, index)">删除</Button>
</div>
</div>
<div style="float: left">
<Button type="primary" @click="addSpec($index, item)">添加规格值
</Button>
<Button type="primary" @click="addSpec($index, item)">添加规格值</Button>
</div>
</FormItem>
</Card>
</div>
</Form>
<Button class="add-sku-btn" type="primary" size="mini" @click="addSkuItem">添加规格项目
</Button>
<Button class="add-sku-btn" type="primary" size="mini" @click="addSkuItem">添加规格项目</Button>
</div>
</Panel>
<Panel name="2">
@ -523,7 +527,6 @@ export default {
check: false,
},
],
show: "1",
//提交状态
submitLoading: false,
//上传图片路径
@ -616,8 +619,9 @@ export default {
brandId: 0,
/** 计量单位 **/
goodsUnit: "",
/** 商品类型 **/
goodsType: "",
/** 路径 **/
/** 分类路径 **/
categoryPath: "",
/** 商品卖点 **/
sellingPoint: "",
@ -637,47 +641,20 @@ export default {
/** 表格数据 */
skuTableData: [],
/** 请求数据*/
/** 默认的规格参数 */
skuData: [],
/** 当前可选择的 规格名称*/
skuKey: [],
/** 当前可选择的 规格值*/
skuValue: [],
/** 默认的规格值 */
skuVals: [],
// 某一规格名下的规格值
skuVal: [],
open_panel: [1, 2],
/** 要提交的规格数据*/
skuInfo: [],
/** 当前选择的规格项*/
specSelected: "",
/** 当前选择的规格值*/
specValSelected: "",
/** 当前规格项下的规格值列表*/
specListSelected: [],
/** 当前规格项下的规格值列表*/
specList: [],
/** 当前规格项索引 */
activeSkuItemIndex: 0,
/** 当前规格项 */
activeSkuItem: {},
/** 规格图片 */
images: [],
/** 当前规格值索引 */
activeSkuValIndex: 0,
/** 当前规格值 */
activeSkuVal: {},
/** 当前百分比 */
currentPercent: 0,
/** 运费模板 **/
logisticsTemplate: [],
@ -738,6 +715,7 @@ export default {
"specId",
"specValueId",
],
skuValVisible: true,
};
},
@ -757,6 +735,7 @@ export default {
this.goodsId = this.$route.query.id;
this.GET_GoodData();
this.selectGoodsType = false;
}
//编辑模版
else if (this.$route.query.draftId) {
@ -937,7 +916,7 @@ export default {
}
return !check;
},
// 跳转商品列表
gotoGoodsList() {
this.$router.push({ name: "goods" });
},
@ -981,6 +960,7 @@ export default {
}
});
},
// 编辑时获取商品信息
async GET_GoodData() {
let response = {};
if (this.draftId) {
@ -1006,6 +986,8 @@ export default {
this.activeCategoryName3 = response.result.categoryName[2];
this.baseInfoForm.categoryId = response.result.categoryPath.split(",");
if (
response.result.goodsGalleryList &&
response.result.goodsGalleryList.length > 0
@ -1019,6 +1001,8 @@ export default {
this.categoryId = this.baseInfoForm.categoryId[2];
this.Get_SkuInfoByCategory(this.categoryId)
this.renderGoodsDetailSku(response.result.skuList);
/** 查询品牌列表 */
@ -1029,7 +1013,7 @@ export default {
this.GET_ShopGoodsLabel();
this.GET_GoodsUnit();
},
// 渲染sku数据
renderGoodsDetailSku(skuList) {
let skus = [];
let skusInfo = [];
@ -1151,16 +1135,31 @@ export default {
*/
this.renderTableData();
},
async GET_SkuSpecVal(id) {
let specValResult = await API_GOODS.getSpecValuesListSellerData(id, {
pageNumber: 1,
pageSize: 10,
specVal: this.specValSelected,
});
if (specValResult.success && specValResult.result.records.length > 0) {
this.skuValue = specValResult.result.records.map((i) => i.specValue);
} else {
this.skuValue = [];
// 编辑规格名
editSkuItem () {
this.renderTableData();
},
// 编辑规格值
async skuValueChange(val, index, item) {
/** 更新skuInfo数据 */
let _arr = cloneObj(item);
this.$set(item, "name", _arr.name);
this.$set(this.skuInfo, index, _arr);
/**
* 渲染规格详细表格
*/
this.renderTableData();
},
// 获取焦点时，取得规格名对应的规格值
changeSkuVals (name) {
if (name) {
this.skuData.forEach((e, index) => {
if (e === name) {
if (this.skuVal.length != this.skuVals[index].length) {
this.skuVal = this.skuVals[index]
}
}
})
}
},
/** 移除当前规格项 进行数据变化*/
@ -1171,6 +1170,7 @@ export default {
*/
this.renderTableData();
},
// 添加规格值的验证
validateEmpty(params) {
let flag = true;
params.forEach((item) => {
@ -1187,16 +1187,15 @@ export default {
},
/** 添加当前规格项的规格值*/
addSpec($index, item) {
this.activeSkuItemIndex = $index;
if (this.validateEmpty(this.skuInfo[$index].spec_values)) {
if (this.skuInfo[$index].spec_values.length >= 10) {
if (this.validateEmpty(item.spec_values)) {
if (item.spec_values.length >= 10) {
this.$Message.error("规格值不能大于10个！");
return;
}
this.$set(
this.skuInfo[$index].spec_values,
this.skuInfo[$index].spec_values.length,
item.spec_values,
item.spec_values.length,
{
name: item.name,
}
@ -1208,21 +1207,10 @@ export default {
this.renderTableData();
}
},
/**
* 根据规格项名称，搜索对应的规格对象（如果是服务器设置过的话）
*/
findSpec(name) {
let spec = { name: name };
this.skuData.forEach((item) => {
if (item.name === name) {
spec = item;
}
});
return spec;
},
/** 移除当前规格值 */
handleCloseSkuValue($index, index) {
this.skuInfo[$index].spec_values.splice(index, 1);
handleCloseSkuValue(item, index) {
item.spec_values.splice(index, 1);
this.baseInfoForm.regeneratorSkuFlag = true;
/**
@ -1230,19 +1218,7 @@ export default {
*/
this.renderTableData();
},
/** 选择规格值时触发 */
async skuValueChange(val, index, item) {
this.specValSelected = val;
await this.GET_SkuSpecVal(item.spec_id);
/** 更新skuInfo数据 */
let _arr = cloneObj(this.skuInfo[this.activeSkuItemIndex]);
this.$set(this.skuInfo[this.activeSkuItemIndex], "name", _arr.name);
this.$set(this.skuInfo, this.activeSkuItemIndex, _arr);
/**
* 渲染规格详细表格
*/
this.renderTableData();
},
/**
* 渲染table所需要的column 和 data
*/
@ -1310,35 +1286,34 @@ export default {
});
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp);
result = this.defaultParams(result);
// result = this.defaultParams(result);
this.skuTableData = result;
}
},
/** 自动完成表单所需方法*/
filterMethod(value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
},
/** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory() {
if (this.baseInfoForm.categoryId) {
API_GOODS.getGoodsSpecInfoSeller(this.baseInfoForm.categoryId, {}).then(
(response) => {
this.skuData = response;
if (this.skuData.length > 0) {
this.skuData.forEach((spec) => {
this.skuKey.push(spec.name);
});
Get_SkuInfoByCategory(categoryId) {
if (categoryId) {
API_GOODS.getGoodsSpecInfoSeller(categoryId).then(res => {
if(res.length) {
res.forEach(e => {
this.skuData.push(e.specName)
this.skuVals.push(e.specValue ? e.specValue.split(',') : [])
})
}
}
);
}
},
/** 自动完成表单所需方法*/
filterMethod(value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
},
/**
* 添加固有属性
*/
defaultParams(tableData) {
return tableData;
},
// defaultParams(tableData) {
// return tableData;
// },
/**
* 迭代属性，形成表格
* result 渲染的数据
@ -1367,6 +1342,7 @@ export default {
}
return this.specIterator(result, cloneTemp);
},
// 规格表格操作
handleSpan({ row, column, rowIndex, columnIndex }) {},
/** 数据改变之后 抛出数据 */
updateSkuTable(row, item) {
@ -1454,7 +1430,7 @@ export default {
/** 查询品牌列表 */
this.getGoodsBrandList();
/** 查询分类绑定的规格信息 */
this.Get_SkuInfoByCategory();
this.Get_SkuInfoByCategory(this.baseInfoForm.categoryId);
// 获取商品单位
this.GET_GoodsUnit();
// 获取当前店铺分类
@ -1485,6 +1461,7 @@ export default {
this.loading = false;
if (this.activestep++ > 2) return;
},
// 店内分类选择
selectTree(v) {
if (v.length > 0) {
// 转换null为""
@ -1499,6 +1476,7 @@ export default {
this.editTitle = menu.title;
}
},
// 店内分类选中
changeSelect(v) {
this.selectCount = v.length;
let ids = "";
@ -1581,7 +1559,7 @@ export default {
}
});
},
/** 保存至草稿箱 */
/** 保存为模板 */
saveToDraft(saveType) {
let showType = saveType === "TEMPLATE" ? "模版" : "草稿";
this.baseInfoForm.skuList = this.skuTableData;
@ -1629,7 +1607,7 @@ export default {
},
});
},
SAVE_DRAFT_GOODS() { // 保存草稿商品
SAVE_DRAFT_GOODS() { // 保存模板
API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => {
if (res.success) {
this.$Message.info("保存成功！");