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 @@
<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;">
<!-- <span v-html="preTableTitle[index]">-->
<!-- {{ preTableTitle[index] }}-->
<!-- </span>-->
<span v-for="(itemv,indexv) in orgGoodsPam.pamDataList[index]" style="margin-right:20px;">
{{orgGoodsPam.pamNameList[indexv]['specName']}}
<span>：</span>
{{itemv[0]}}
<span v-if="orgGoodsPam.pamNameList.length === 1">
{{ orgGoodsPam.pamNameList[0].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index]}}
</span>
<span v-else="orgGoodsPam.pamNameList.length > 1">
<span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;">
{{ orgGoodsPam.pamNameList[indexv].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index][indexv]}}
</span>
</span>
</p>
<el-table
border
......@@ -107,7 +106,6 @@
</el-table>
</div>
</div>
</template>
......
src/views/system/goods/add/components/goodsspecifications.vue
浏览文件 @ 2e6905be
......@@ -11,17 +11,17 @@
size="small"
style="width: 300px"
filterable
allow-create
default-first-option
:clearable="true"
@change="speNameChange"
@change="speNameChange(speItem.specName,index)"
@visible-change='bv=> visibleChange(bv,"speNameDom",index)'
>
<el-option
v-for="(itemSN,indexSN) in speOptions"
:key="itemSN.id"
:label="itemSN.name"
:value="itemSN.id"
:value="itemSN.name"
>
<span style="float: left" class="span-style">{{ itemSN.name }}</span>
<div class="flag">
......@@ -121,7 +121,13 @@ export default {
/** 先获取 本地存储的localStorage **/
this.getLocalSpecNameOption();
},
watch:{},
watch:{
// "speData.specsGroup": {
// handle: function(val) {
// console.log(22222,val);
// }
// }
},
methods: {
/** 添加规格*/
addSpe() {
......@@ -131,7 +137,7 @@ export default {
specValue: [{value: ''}]
};
this.$set(this.speData,this.speData.length,specsGroup);
this.speNameListChange();
//this.speNameListChange();
},
/** 删除 规格数据 */
deleteSpe(index) {
......@@ -143,33 +149,98 @@ export default {
this.speData.splice(index,1);
//this.speNameListChange();
this.paramNameInputBlur();
//this.paramNameInputBlur();
}).catch(() => {})
},
// 规格名称，下拉选值时触发
speNameChange() {
this.speNameListChange();
},
//
/**
* 规格名称，值改变时, 将id值转化为 label（name）的处理
* val 为当前options的值
* index 为当前第几个规格
* 因后台保存规格的中文名字，顾需要将 value值找到对应的label值
* */
speNameChange(val,index) {
// selectedCag(vId){
// console.log(vId)
console.log(1111111,val);
//
// let obj = { specName: '' };
// if( this.speData[index].specName === currentOptions.id ) {
// this.speData[index].specName = currentOptions.name;
// obj.specName = currentOptions.name;
// this.speNameList[index] = obj;
// }
//
// },
// 规格名称，有变化时
speNameListChange() {
// 将select 的value值，在
// 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.speData.forEach((item)=> {
let obj = {specName: ''};
if(item.specName) {
obj.specName = item.specName;
let obj = { specName: '' };
for(let i = 0; i < this.speData.length; i++) {
if(this.speData[i].specName) {
obj.specName = this.speData[i].specName;
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) {
......@@ -180,7 +251,7 @@ export default {
deleteSpeParam(index,indexSV) {
this.speData[index].specValue.splice(indexSV,1);
//console.log(119,this.speData[index].specValue);
this.paramNameInputBlur();
//this.paramNameInputBlur();
},
/**
* 规格名称 下拉框 出现/隐藏 触发
......@@ -281,37 +352,52 @@ export default {
paramNameInputBlur() {
// 商品规格原始数据
let orgSpeData = this.deepClone(this.speData);
//debugger
// 进行数据处理后的数据,
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) {
let goodsParametersList = this.cartesian(proSpeData);
// 组织数据 结构
if(this.speNameList.length > 0 && goodsParametersList.length > 0) {
// 所有数据
let goodsPam = {
pamNameList: [],
pamDataList: [],
pamTableList: [],
};
goodsPam.pamNameList = this.speNameList;
goodsPam.pamDataList = goodsParametersList;
goodsParametersList.forEach((item)=> {
let prePamTable = [
{ hh1:'', hh2:'', hh3:'', hh4:'', hh5:'', hh6:'', hh7:'' }
];
goodsPam.pamTableList.push(prePamTable)
});
//console.log("最终结果",goodsPam);
this.$emit('calcSpeTable',goodsPam);
}
// else {
// if(proSpeData.length > 0) {
// proSpeData.forEach((item,index) => {
// if(item.length <= 0) {
// proSpeData.splice(index,1);
// }
// });
//
// let goodsParametersList = this.cartesian(proSpeData);
//
// // 组织数据 结构
// if(this.speNameList.length > 0 && goodsParametersList.length > 0) {
// // 所有数据
// let goodsPam = {
// pamNameList: [],
// pamDataList: [],
// pamTableList: [],
// };
// goodsPam.pamNameList = this.speNameList;
// goodsPam.pamDataList = goodsParametersList;
//
// goodsParametersList.forEach((item)=> {
// let prePamTable = [
// { hh1:'', hh2:'', hh3:'', hh4:'', hh5:'', hh6:'', hh7:'' }
// ];
// goodsPam.pamTableList.push(prePamTable)
// });
// this.$emit('calcSpeTable',goodsPam);
// }else {
// let goodsPam = {
// pamNameList: [],
// pamDataList: [],
......@@ -319,31 +405,33 @@ export default {
// };
// this.$emit('calcSpeTable',goodsPam);
// }
}
// }
},
/** 重新计算 */
// hxz() {
//
// },
/** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
processData(list) {
let result = [];
if(list && list.length > 0) {
for(let i = 0; i < list.length; i++) {
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
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) {
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);
}
}
// if(childList.length > 0) {
result.push(childList);
// }
}
result.push(childList);
}
}
return result;
},
/** 笛卡尔积算法 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论