Skip to content

S
shop-new
提交 2e6905be authored 作者: huaxinzhu's avatar huaxinzhu
浏览文件
操作

添加商品，规格优化

上级 914cea70
隐藏空白字符变更
内嵌 并排
正在显示 包含 164 行增加 和 78 行删除
src/views/system/goods/add/components/goodsparameter.vue
浏览文件 @ 2e6905be
...@@ -53,15 +53,14 @@ ...@@ -53,15 +53,14 @@
<div v-for="(item,index) in orgGoodsPam.pamTableList" :key="index" class="single-spe-con"> <div v-for="(item,index) in orgGoodsPam.pamTableList" :key="index" class="single-spe-con">
<p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;"> <p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;">
<!-- <span v-html="preTableTitle[index]">--> <span v-if="orgGoodsPam.pamNameList.length === 1">
<!-- {{ preTableTitle[index] }}--> {{ orgGoodsPam.pamNameList[0].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index]}}
<!-- </span>--> </span>
<span v-for="(itemv,indexv) in orgGoodsPam.pamDataList[index]" style="margin-right:20px;"> <span v-else="orgGoodsPam.pamNameList.length > 1">
{{orgGoodsPam.pamNameList[indexv]['specName']}} <span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;">
<span>：</span> {{ orgGoodsPam.pamNameList[indexv].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index][indexv]}}
{{itemv[0]}} </span>
</span> </span>
</p> </p>
<el-table <el-table
border border
...@@ -107,7 +106,6 @@ ...@@ -107,7 +106,6 @@
</el-table> </el-table>
</div> </div>
</div> </div>
</template> </template>
......
src/views/system/goods/add/components/goodsspecifications.vue
浏览文件 @ 2e6905be
...@@ -11,17 +11,17 @@ ...@@ -11,17 +11,17 @@
size="small" size="small"
style="width: 300px" style="width: 300px"
filterable filterable
allow-create
default-first-option default-first-option
:clearable="true" :clearable="true"
@change="speNameChange" @change="speNameChange(speItem.specName,index)"
@visible-change='bv=> visibleChange(bv,"speNameDom",index)' @visible-change='bv=> visibleChange(bv,"speNameDom",index)'
> >
<el-option <el-option
v-for="(itemSN,indexSN) in speOptions" v-for="(itemSN,indexSN) in speOptions"
:key="itemSN.id" :key="itemSN.id"
:label="itemSN.name" :label="itemSN.name"
:value="itemSN.id" :value="itemSN.name"
> >
<span style="float: left" class="span-style">{{ itemSN.name }}</span> <span style="float: left" class="span-style">{{ itemSN.name }}</span>
<div class="flag"> <div class="flag">
...@@ -121,7 +121,13 @@ export default { ...@@ -121,7 +121,13 @@ export default {
/** 先获取 本地存储的localStorage **/ /** 先获取 本地存储的localStorage **/
this.getLocalSpecNameOption(); this.getLocalSpecNameOption();
}, },
watch:{}, watch:{
// "speData.specsGroup": {
// handle: function(val) {
// console.log(22222,val);
// }
// }
},
methods: { methods: {
/** 添加规格*/ /** 添加规格*/
addSpe() { addSpe() {
...@@ -131,7 +137,7 @@ export default { ...@@ -131,7 +137,7 @@ export default {
specValue: [{value: ''}] specValue: [{value: ''}]
}; };
this.$set(this.speData,this.speData.length,specsGroup); this.$set(this.speData,this.speData.length,specsGroup);
this.speNameListChange(); //this.speNameListChange();
}, },
/** 删除 规格数据 */ /** 删除 规格数据 */
deleteSpe(index) { deleteSpe(index) {
...@@ -143,33 +149,98 @@ export default { ...@@ -143,33 +149,98 @@ export default {
this.speData.splice(index,1); this.speData.splice(index,1);
//this.speNameListChange(); //this.speNameListChange();
this.paramNameInputBlur(); //this.paramNameInputBlur();
}).catch(() => {}) }).catch(() => {})
}, },
// 规格名称，下拉选值时触发 //
speNameChange() { /**
this.speNameListChange(); * 规格名称，值改变时, 将id值转化为 label（name）的处理
}, * val 为当前options的值
* index 为当前第几个规格
* 因后台保存规格的中文名字，顾需要将 value值找到对应的label值
* */
speNameChange(val,index) {
// selectedCag(vId){ console.log(1111111,val);
// console.log(vId) //
// // let obj = { specName: '' };
// }, // if( this.speData[index].specName === currentOptions.id ) {
// 规格名称，有变化时 // this.speData[index].specName = currentOptions.name;
speNameListChange() { // obj.specName = currentOptions.name;
// 将select 的value值，在 // this.speNameList[index] = obj;
// }
//
// if(this.speData.length > 1 ) {
// let restSpeData = [];
// let coypSpeData = this.speData.concat();
// coypSpeData.splice(index,1);
// restSpeData = coypSpeData;
// for( let i = 0; i < restSpeData.length; i++ ) {
// if( restSpeData[i].specName === this.speData[index].specName ) {
// this.speData[index].specName = '';
// this.speNameList.splice(index,1);
// this.$message({type: 'error',message: '此规格名称已经存在，请重新选取或命名'});
// break;
// }
// }
// }
// console.log("改变触发：所有值",this.speData);
// console.log("改变触发：",this.speNameList);
},
debugger // 规格名称，有变化时,出规格名称下拉操作以外的其他操作
speNameListChange(index) {
//debugger
this.speNameList = []; this.speNameList = [];
this.speData.forEach((item)=> { let obj = { specName: '' };
let obj = {specName: ''};
if(item.specName) { for(let i = 0; i < this.speData.length; i++) {
obj.specName = item.specName; if(this.speData[i].specName) {
obj.specName = this.speData[i].specName;
this.speNameList.push(obj); this.speNameList.push(obj);
} }
}); }
//console.log(20000,this.speNameList);
// for(let i = 0; i < this.speData.length; i++) {
// if(this.speData[i].specName) {
// let obj = {specName: ''};
// for(let j = 0; j < this.speData[i].specValue.length; j++) {
// if( this.speData[i].specValue[j].value !== '' ) {
// obj.specName = this.speData[i].specName;
// break
// }
// }
// this.speNameList.push(obj);
// }
// }
//
// if(this.speNameList.length > 0) {
// this.speNameList.forEach((item,indexs)=> {
// if(!this.speNameList.specName) {
// this.speNameList.splice(indexs,1);
// }
// });
// }
// console.log(206,this.speNameList);
// this.speData.forEach((item)=> {
// let obj = {specName: ''};
// if(item.specName) {
// for(let i = 0; i < item.specValue.length; i++) {
// if(item.specValue[i].value !== '') {
// obj.specName = item.specName;
// break;
// }
// }
// this.speNameList.push(obj);
// }
// });
}, },
// 添加规格参数 // 添加规格参数
addSpeParam(index) { addSpeParam(index) {
...@@ -180,7 +251,7 @@ export default { ...@@ -180,7 +251,7 @@ export default {
deleteSpeParam(index,indexSV) { deleteSpeParam(index,indexSV) {
this.speData[index].specValue.splice(indexSV,1); this.speData[index].specValue.splice(indexSV,1);
//console.log(119,this.speData[index].specValue); //console.log(119,this.speData[index].specValue);
this.paramNameInputBlur(); //this.paramNameInputBlur();
}, },
/** /**
* 规格名称 下拉框 出现/隐藏 触发 * 规格名称 下拉框 出现/隐藏 触发
...@@ -281,69 +352,86 @@ export default { ...@@ -281,69 +352,86 @@ export default {
paramNameInputBlur() { paramNameInputBlur() {
// 商品规格原始数据 // 商品规格原始数据
let orgSpeData = this.deepClone(this.speData); let orgSpeData = this.deepClone(this.speData);
//debugger
// 进行数据处理后的数据, // 进行数据处理后的数据,
let proSpeData = this.processData(orgSpeData); let proSpeData = this.processData(orgSpeData);
console.log("看看处理的数据",proSpeData);
let fuck = this.cartesian(proSpeData);
console.log("笛卡尔积的结果：",fuck);
return
// // 商品规格原始数据
// let orgSpeData = this.deepClone(this.speData);
// // 进行数据处理后的数据,
// let proSpeData = this.processData(orgSpeData);
// debugger
// console.log("失焦触发：",this.speData);
// console.log("失焦触发,不生成表格的条件：",proSpeData);
// this.speNameListChange();
// console.log(319,this.speNameList);
//debugger
// 笛卡尔积 生成所有规格组合数据 // 笛卡尔积 生成所有规格组合数据
if(proSpeData.length > 0) { // if(proSpeData.length > 0) {
let goodsParametersList = this.cartesian(proSpeData); // proSpeData.forEach((item,index) => {
// if(item.length <= 0) {
// 组织数据 结构 // proSpeData.splice(index,1);
if(this.speNameList.length > 0 && goodsParametersList.length > 0) { // }
// 所有数据 // });
let goodsPam = { //
pamNameList: [], // let goodsParametersList = this.cartesian(proSpeData);
pamDataList: [], //
pamTableList: [], // // 组织数据 结构
}; // if(this.speNameList.length > 0 && goodsParametersList.length > 0) {
// // 所有数据
goodsPam.pamNameList = this.speNameList; // let goodsPam = {
goodsPam.pamDataList = goodsParametersList; // pamNameList: [],
// pamDataList: [],
goodsParametersList.forEach((item)=> { // pamTableList: [],
let prePamTable = [ // };
{ hh1:'', hh2:'', hh3:'', hh4:'', hh5:'', hh6:'', hh7:'' } // goodsPam.pamNameList = this.speNameList;
]; // goodsPam.pamDataList = goodsParametersList;
goodsPam.pamTableList.push(prePamTable) //
}); // goodsParametersList.forEach((item)=> {
//console.log("最终结果",goodsPam); // let prePamTable = [
this.$emit('calcSpeTable',goodsPam); // { hh1:'', hh2:'', hh3:'', hh4:'', hh5:'', hh6:'', hh7:'' }
// ];
} // goodsPam.pamTableList.push(prePamTable)
// else { // });
// let goodsPam = { // this.$emit('calcSpeTable',goodsPam);
// pamNameList: [], // }else {
// pamDataList: [], // let goodsPam = {
// pamTableList: [], // pamNameList: [],
// }; // pamDataList: [],
// this.$emit('calcSpeTable',goodsPam); // pamTableList: [],
// } // };
// this.$emit('calcSpeTable',goodsPam);
} // }
// }
}, },
/** 重新计算 */
// hxz() {
//
// },
/** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */ /** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
processData(list) { processData(list) {
let result = []; let result = [];
if(list && list.length > 0) { if (list && list.length > 0) {
for(let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let childList = []; let childList = [];
// 规格名称填写，数据才奏效 // for (let j = 0; j < list[i].specValue.length; j++) {
// childList.push(list[i].specValue[j].value);
// }
// result.push(childList);
if(list[i].specName) { if(list[i].specName) {
for(let j = 0; j < list[i].specValue.length; j++) { for(let j = 0; j < list[i].specValue.length; j++) {
// 剔除为空的数据 if(list[i].specValue[j].value) {
if( list[i].specValue[j].value ) {
childList.push(list[i].specValue[j].value); childList.push(list[i].specValue[j].value);
} }
} }
// if(childList.length > 0) {
result.push(childList);
// }
} }
result.push(childList);
} }
} }
return result; return result;
}, },
/** 笛卡尔积算法 */ /** 笛卡尔积算法 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论