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

!16 优化商品sku编辑，不在清空数据。commit v1 

Merge pull request !16 from OceansDeep/dev-gl
master
OceansDeep 2022-05-19 09:32:57 +00:00 committed by Gitee
parent a3f5212bbc cd0c90ace8
commit 256ada983b
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
1 changed files with 163 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@ -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
>
&nbsp;
<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: '规格名'+this.skuInfo.length,
value: '',
['_id'+this.skuInfo.length]: new Date().getTime() + Math.random(0.1),
},
],
name: '规格名'+this.skuInfo.length,
['_id'+this.skuInfo.length]: 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) {
@ -1130,35 +1129,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,45 +1210,39 @@ export default {
this.skuTableColumn = pushData;
//克隆所有渲染的数据
let cloneTemp = cloneObj(this.skuInfo);
//判定 是否存在规格分组
if (cloneTemp[0]) {
//存放最终结果
let result = [];
//循环选中的 sku 数据
cloneTemp[0].spec_values.forEach((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 || [],
_name: cloneTemp[0].name,
...specItem,
});
});
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp);
this.skuTableData = result;
console.log(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,
};
// }
}
});
});
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp, skus);
this.skuTableData = result;
}
},
/**
@ -1248,20 +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},${cloneTemp[0].spec_values[i+1]?._id }`.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);
});
});
@ -1274,7 +1337,7 @@ export default {
} else {
return result;
}
return this.specIterator(result, cloneTemp);
return this.specIterator(result, cloneTemp, skus);
},
/** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory(categoryId) {
@ -1378,7 +1441,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));
@ -1399,19 +1462,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
@ -1424,7 +1495,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) {