优化商品sku编辑，不在清空数据。commit v1
paulGao
parent
d433ff02cb
commit
913b96af5a
|
|
@ -183,7 +183,7 @@
|
|||
<Button
|
||||
type="primary"
|
||||
slot="extra"
|
||||
@click="handleCloseSkuItem($index)"
|
||||
@click="handleCloseSkuItem($index, item)"
|
||||
>
|
||||
删除规格
|
||||
</Button>
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
style="width: 150px"
|
||||
v-model="item.name"
|
||||
:maxlength="30"
|
||||
placeholder="请输入规格项名称"
|
||||
placeholder="请输入规格名称"
|
||||
:filter-method="filterMethod"
|
||||
:data="skuData"
|
||||
@on-change="editSkuItem"
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
:data="skuVal"
|
||||
@on-focus="changeSkuVals(item.name)"
|
||||
@on-change="
|
||||
skuValueChange(val.value, $index, item)
|
||||
skuValueChange(val.value, index, item)
|
||||
"
|
||||
>
|
||||
</AutoComplete>
|
||||
|
|
@ -232,7 +232,7 @@
|
|||
type="primary"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
@click="handleCloseSkuValue(item, index)"
|
||||
@click="handleCloseSkuValue(val, index)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
|
|
@ -254,6 +254,14 @@
|
|||
@click="addSkuItem"
|
||||
>添加规格项</Button
|
||||
>
|
||||
|
||||
<Button
|
||||
class="add-sku-btn"
|
||||
type="warning"
|
||||
size="small"
|
||||
@click="handleClearSku"
|
||||
>清空规格项</Button
|
||||
>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
|
|
@ -605,6 +613,7 @@ export default {
|
|||
return {
|
||||
regular,
|
||||
total: 0,
|
||||
global: 0,
|
||||
accessToken: "", //令牌token
|
||||
goodsParams: "",
|
||||
categoryId: "", // 商品分类第三级id
|
||||
|
|
@ -700,7 +709,6 @@ export default {
|
|||
shopCategory: [],
|
||||
/** 商品单位列表 */
|
||||
goodsUnitList: [],
|
||||
initSkuTableData: [],
|
||||
ignoreColumn: [
|
||||
// 添加规格时需要忽略的参数
|
||||
"_index",
|
||||
|
|
@ -823,7 +831,6 @@ export default {
|
|||
},
|
||||
// 商品图片上传成功
|
||||
handleSuccessGoodsPicture(res, file) {
|
||||
console.log(res);
|
||||
if (file.response) {
|
||||
file.url = file.response.result;
|
||||
this.baseInfoForm.goodsGalleryFiles.push(file);
|
||||
|
|
@ -885,7 +892,6 @@ export default {
|
|||
GET_GoodsUnit() {
|
||||
API_GOODS.getGoodsUnitList(this.params).then((res) => {
|
||||
if (res.success) {
|
||||
console.log(res);
|
||||
this.goodsUnitList.push(...res.result.records.map((i) => i.name));
|
||||
this.total = res.result.total;
|
||||
}
|
||||
|
|
@ -958,7 +964,7 @@ export default {
|
|||
renderGoodsDetailSku(skuList) {
|
||||
let skus = [];
|
||||
let skusInfo = [];
|
||||
skuList.map((e, skuListIndex) => {
|
||||
skuList.map((e) => {
|
||||
let sku = {
|
||||
id: e.id,
|
||||
sn: e.sn,
|
||||
|
|
@ -966,7 +972,6 @@ export default {
|
|||
cost: e.cost,
|
||||
quantity: e.quantity,
|
||||
weight: e.weight,
|
||||
_id: new Date().getTime() + skuListIndex, // 标识
|
||||
};
|
||||
e.specList.forEach((u) => {
|
||||
if (u.specName === "images") {
|
||||
|
|
@ -980,10 +985,8 @@ export default {
|
|||
skusInfo.push({
|
||||
name: u.specName,
|
||||
spec_id: u.specNameId,
|
||||
_id: new Date().getTime(),
|
||||
spec_values: [
|
||||
{
|
||||
_id: new Date().getTime(),
|
||||
id: u.specValueId,
|
||||
name: u.specName,
|
||||
value: u.specValue || "",
|
||||
|
|
@ -998,7 +1001,6 @@ export default {
|
|||
) {
|
||||
sk.spec_values.push({
|
||||
id: u.specValueId,
|
||||
_id: new Date().getTime(),
|
||||
name: u.specName,
|
||||
value: u.specValue || "",
|
||||
});
|
||||
|
|
@ -1014,7 +1016,7 @@ export default {
|
|||
skus.push(sku);
|
||||
});
|
||||
this.skuInfo = skusInfo;
|
||||
this.renderTableData();
|
||||
this.renderTableData(skus);
|
||||
this.skuTableData = skus;
|
||||
},
|
||||
|
||||
|
|
@ -1063,26 +1065,20 @@ export default {
|
|||
return;
|
||||
}
|
||||
// 写入对象，下标，具体对象
|
||||
let num = this.global++;
|
||||
this.$set(this.skuInfo, this.skuInfo.length, {
|
||||
spec_values: [
|
||||
{
|
||||
name: "规格项",
|
||||
value: "规格项值" + this.skuInfo.length,
|
||||
_id: new Date().getTime() + Math.random(0.1),
|
||||
},
|
||||
],
|
||||
name: "规格名",
|
||||
_id: new Date().getTime(),
|
||||
spec_values: [{ name: "规格名" + num, value: "" }],
|
||||
name: "规格名" + num,
|
||||
});
|
||||
this.renderTableData();
|
||||
this.renderTableData(this.skuTableData);
|
||||
},
|
||||
// 编辑规格名
|
||||
editSkuItem() {
|
||||
this.renderTableData();
|
||||
this.renderTableData(this.skuTableData);
|
||||
},
|
||||
// 编辑规格值
|
||||
async skuValueChange(val, index, item) {
|
||||
this.renderTableData();
|
||||
this.renderTableData(this.skuTableData);
|
||||
},
|
||||
// 获取焦点时，取得规格名对应的规格值
|
||||
changeSkuVals(name) {
|
||||
|
|
@ -1097,12 +1093,15 @@ export default {
|
|||
}
|
||||
},
|
||||
/** 移除当前规格项 进行数据变化*/
|
||||
handleCloseSkuItem($index) {
|
||||
handleCloseSkuItem($index, item) {
|
||||
this.skuInfo.splice($index, 1);
|
||||
this.skuTableData.forEach((e, index) => {
|
||||
delete e[item.name];
|
||||
});
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
this.renderTableData(this.skuTableData);
|
||||
},
|
||||
// 添加规格值的验证
|
||||
validateEmpty(params) {
|
||||
|
|
@ -1129,35 +1128,44 @@ export default {
|
|||
this.$set(item.spec_values, item.spec_values.length, {
|
||||
name: item.name,
|
||||
value: "",
|
||||
_id: new Date().getTime(),
|
||||
});
|
||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
this.renderTableData(this.skuTableData);
|
||||
}
|
||||
},
|
||||
|
||||
handleClearSku() {
|
||||
this.skuInfo = [];
|
||||
this.skuTableData = [];
|
||||
this.renderTableData(this.skuTableData);
|
||||
},
|
||||
/** 移除当前规格值 */
|
||||
handleCloseSkuValue(item, index) {
|
||||
item.spec_values.splice(index, 1);
|
||||
|
||||
// this.skuInfo[item.name].spec_values.splice(index, 1);
|
||||
this.skuInfo.forEach((i) => {
|
||||
if (i.name === item.name) {
|
||||
i.spec_values.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.skuTableData = this.skuTableData.filter(
|
||||
(e, index) => e[item.name] !== item.value
|
||||
);
|
||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
*/
|
||||
this.renderTableData();
|
||||
this.renderTableData(this.skuTableData);
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染table所需要的column 和 data
|
||||
*/
|
||||
renderTableData() {
|
||||
renderTableData(skus) {
|
||||
this.skuTableColumn = [];
|
||||
// this.skuTableData = [];
|
||||
let pushData = [];
|
||||
this.initSkuTableData = this.skuTableData;
|
||||
this.skuTableData = [];
|
||||
//渲染头部
|
||||
this.skuInfo.forEach((sku) => {
|
||||
// !sku.name ? (sku.name = "规格名") : "";
|
||||
|
|
@ -1202,40 +1210,39 @@ export default {
|
|||
//克隆所有渲染的数据
|
||||
let cloneTemp = cloneObj(this.skuInfo);
|
||||
|
||||
//判定 是否存在规格分组
|
||||
if (cloneTemp[0]) {
|
||||
//存放最终结果
|
||||
let result = [];
|
||||
//循环选中的 sku 数据
|
||||
cloneTemp[0].spec_values.forEach((specItem) => {
|
||||
result.push({
|
||||
[cloneTemp[0].name]: specItem.value,
|
||||
images: this.baseInfoForm.goodsGalleryFiles || [],
|
||||
_name: cloneTemp[0].name,
|
||||
...specItem,
|
||||
});
|
||||
cloneTemp[0].spec_values.forEach((specItem, index) => {
|
||||
// 如存在数据，则将数据赋值
|
||||
if (skus && skus[index] && specItem.value !== "") {
|
||||
let obj = {
|
||||
id: skus[index].id,
|
||||
sn: skus[index].sn,
|
||||
quantity: skus[index].quantity,
|
||||
cost: skus[index].cost,
|
||||
price: skus[index].price,
|
||||
[cloneTemp[0].name]: specItem.value,
|
||||
images: this.baseInfoForm.goodsGalleryFiles || [],
|
||||
};
|
||||
if (specItem.value !== "") {
|
||||
obj.id = skus[index].id;
|
||||
}
|
||||
if (skus[index].weight !== "") {
|
||||
obj.weight = skus[index].weight;
|
||||
}
|
||||
result.push(obj);
|
||||
} else {
|
||||
result.push({
|
||||
[cloneTemp[0].name]: specItem.value,
|
||||
images: this.baseInfoForm.goodsGalleryFiles || [],
|
||||
});
|
||||
}
|
||||
});
|
||||
cloneTemp.splice(0, 1);
|
||||
result = this.specIterator(result, cloneTemp);
|
||||
result = this.specIterator(result, cloneTemp, skus);
|
||||
this.skuTableData = result;
|
||||
this.skuTableData.forEach((item, index) => {
|
||||
this.initSkuTableData.forEach((sku) => {
|
||||
// 多个规格项 判断每个id数组通过赋值
|
||||
if (sku._id.length && this.scalarArrayEquals(item._id, sku._id)) {
|
||||
this.skuTableData[index] = {
|
||||
...item,
|
||||
...sku,
|
||||
};
|
||||
} else if (item.value == sku[item._name] || item._id == sku._id) {
|
||||
// // 单个规格项如果id重复 赋值
|
||||
this.skuTableData[index] = {
|
||||
...sku,
|
||||
...item,
|
||||
};
|
||||
// }
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
|
@ -1243,18 +1250,81 @@ export default {
|
|||
* result 渲染的数据
|
||||
* array spec数据
|
||||
*/
|
||||
specIterator(result, cloneTemp) {
|
||||
specIterator(result, cloneTemp, skus) {
|
||||
// console.log("-----skus-----");
|
||||
// console.log(JSON.parse(JSON.stringify(skus)));
|
||||
// console.log("-----result-----");
|
||||
// console.log(JSON.parse(JSON.stringify(result)));
|
||||
// console.log("-----cloneTemp-----");
|
||||
// console.log(JSON.parse(JSON.stringify(cloneTemp)));
|
||||
//是否还可以循环
|
||||
if (cloneTemp.length > 0) {
|
||||
let table = [];
|
||||
result.forEach((resItem) => {
|
||||
cloneTemp[0].spec_values.forEach((valItem,i) => {
|
||||
// 已有数据索引
|
||||
let findIndex = 0;
|
||||
result.forEach((resItem, index) => {
|
||||
cloneTemp[0].spec_values.forEach((valItem, _index) => {
|
||||
let obj = cloneObj(resItem);
|
||||
obj[cloneTemp[0].name] = valItem.value;
|
||||
obj._name = obj[cloneTemp[0].name];
|
||||
if (obj._id) {
|
||||
obj._id = `${obj._id},${obj._id + i}`.split(",");
|
||||
// 判断已存在数据数量是否大于渲染数据数量（认为是在编辑原存在数据的规格值）且规格值不为空且存在已存在数据，如符合条件，则认为为修改已存在数据
|
||||
if (skus.length > result.length && valItem.value !== "" && skus[findIndex]) {
|
||||
obj = cloneObj(skus[findIndex]);
|
||||
}
|
||||
let emptyFlag = false;
|
||||
// 判断是否为规格项的第一个值，如果不为第一个值则判断为新加数据
|
||||
if (cloneTemp[0].spec_values.length > 1 && valItem.value === "") {
|
||||
delete obj.id;
|
||||
delete obj.sn;
|
||||
delete obj.quantity;
|
||||
delete obj.cost;
|
||||
delete obj.price;
|
||||
delete obj.weight;
|
||||
}
|
||||
|
||||
// 判断渲染数据中是否存在空值，存在空值则判断新加数据
|
||||
for (let key in obj) {
|
||||
if (!obj[key]) {
|
||||
emptyFlag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 判断当前渲染数据是否已有数据
|
||||
if (
|
||||
skus &&
|
||||
skus[findIndex] &&
|
||||
(!skus[findIndex].id || obj.id === skus[findIndex].id) &&
|
||||
valItem.value !== "" &&
|
||||
!emptyFlag
|
||||
) {
|
||||
// 将原存在的数据放入结果中
|
||||
let originSku = skus[findIndex];
|
||||
obj = {
|
||||
sn: obj.sn || originSku.sn,
|
||||
quantity: obj.quantity || originSku.quantity,
|
||||
cost: obj.cost || originSku.cost,
|
||||
price: obj.price || originSku.price,
|
||||
weight: obj.weight || originSku.weight,
|
||||
...obj,
|
||||
};
|
||||
if (
|
||||
originSku[valItem.name] === valItem.value ||
|
||||
(obj.id && originSku.id === obj.id)
|
||||
) {
|
||||
obj.id = originSku.id;
|
||||
}
|
||||
|
||||
// 视为处理完成已存在数据，将原数据索引后移1位
|
||||
if (skus.length == result.length) {
|
||||
findIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
// 如原存在数据大于渲染数据（认为是在编辑原存在数据的规格值），且存在已存在数据，且规格值不为空。则将原数据索引后移1位
|
||||
if (skus.length > result.length && (skus[findIndex] && valItem.value !== "")) {
|
||||
findIndex++;
|
||||
}
|
||||
|
||||
obj[cloneTemp[0].name] = valItem.value;
|
||||
table.push(obj);
|
||||
});
|
||||
});
|
||||
|
|
@ -1267,7 +1337,7 @@ export default {
|
|||
} else {
|
||||
return result;
|
||||
}
|
||||
return this.specIterator(result, cloneTemp);
|
||||
return this.specIterator(result, cloneTemp, skus);
|
||||
},
|
||||
/** 根据分类id获取系统设置规格信息*/
|
||||
Get_SkuInfoByCategory(categoryId) {
|
||||
|
|
@ -1362,7 +1432,7 @@ export default {
|
|||
},
|
||||
/** 添加商品 **/
|
||||
save() {
|
||||
this.submitLoading = true;
|
||||
// this.submitLoading = true;
|
||||
this.$refs["baseInfoForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
|
||||
|
|
@ -1383,19 +1453,27 @@ export default {
|
|||
this.submitLoading = false;
|
||||
return;
|
||||
}
|
||||
submit.skuList = this.skuTableData.map((sku) => {
|
||||
// 非空判断
|
||||
delete sku._index;
|
||||
delete sku._rowKey;
|
||||
delete sku.specNameId;
|
||||
delete sku.specValueId;
|
||||
delete sku._id;
|
||||
delete sku.name;
|
||||
delete sku.value;
|
||||
delete sku._name
|
||||
return sku;
|
||||
let skuInfoNames = this.skuInfo.map((n) => n.name);
|
||||
submit.skuList = [];
|
||||
this.skuTableData.map((sku) => {
|
||||
let skuCopy = {
|
||||
cost: sku.cost,
|
||||
price: sku.price,
|
||||
quantity: sku.quantity,
|
||||
sn: sku.sn,
|
||||
images: sku.images,
|
||||
};
|
||||
if (sku.weight) {
|
||||
skuCopy.weight = sku.weight;
|
||||
}
|
||||
if (sku.id) {
|
||||
skuCopy.id = sku.id;
|
||||
}
|
||||
for (let skuInfoName of skuInfoNames) {
|
||||
skuCopy[skuInfoName] = sku[skuInfoName];
|
||||
}
|
||||
submit.skuList.push(skuCopy);
|
||||
});
|
||||
|
||||
if (submit.goodsGalleryFiles.length > 0) {
|
||||
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
|
||||
(i) => i.url
|
||||
|
|
@ -1408,7 +1486,6 @@ export default {
|
|||
submit.recommend
|
||||
? (submit.recommend = true)
|
||||
: (submit.recommend = false);
|
||||
|
||||
if (this.goodsId) {
|
||||
API_GOODS.editGoods(this.goodsId, submit).then((res) => {
|
||||
if (res.success) {
|
||||
|
|
@ -1537,4 +1614,4 @@ export default {
|
|||
.ivu-select .ivu-select-dropdown {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue