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

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

master
paulGao 2022-05-19 17:22:22 +08:00
parent d433ff02cb
commit 913b96af5a
1 changed files with 163 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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