From 913b96af5a6e83d6dda62b13db21d2f48e82b681 Mon Sep 17 00:00:00 2001 From: paulGao Date: Thu, 19 May 2022 17:22:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81sku?= =?UTF-8?q?=E7=BC=96=E8=BE=91=EF=BC=8C=E4=B8=8D=E5=9C=A8=E6=B8=85=E7=A9=BA?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E3=80=82commit=20v1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goods/goods-seller/goodsOperationSec.vue | 249 ++++++++++++------ 1 file changed, 163 insertions(+), 86 deletions(-) diff --git a/seller/src/views/goods/goods-seller/goodsOperationSec.vue b/seller/src/views/goods/goods-seller/goodsOperationSec.vue index 2c229df6..41a1cdeb 100644 --- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue +++ b/seller/src/views/goods/goods-seller/goodsOperationSec.vue @@ -183,7 +183,7 @@ @@ -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) " > @@ -232,7 +232,7 @@ type="primary" size="small" style="margin-left: 10px" - @click="handleCloseSkuValue(item, index)" + @click="handleCloseSkuValue(val, index)" > 删除 @@ -254,6 +254,14 @@ @click="addSkuItem" >添加规格项 +   + @@ -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; } - + \ No newline at end of file