Skip to content

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

添加商品09

上级 2e6905be
隐藏空白字符变更
内嵌 并排
正在显示 包含 470 行增加 和 294 行删除
src/views/system/goods/add/components/goodsparameter.vue
浏览文件 @ 0cf89f67
...@@ -5,58 +5,70 @@ ...@@ -5,58 +5,70 @@
<span class="tip-span">所有商品价格均为含税价，必须开具发票</span> <span class="tip-span">所有商品价格均为含税价，必须开具发票</span>
</p> </p>
<!-- <div v-if="(!orgGoodsPam.pamTableList || orgGoodsPam.pamTableList.length === 0)">--> <div v-show="(!orgGoodsPam.pamTableList || orgGoodsPam.pamTableList.length === 0)">
<!-- <el-table--> <el-table
<!-- border--> border
<!-- size="small"--> size="small"
<!-- :data="noSpecTable"--> :data="singleSpecTable"
<!-- style="width: 80%"--> style="width: 80%;margin-right:10%;"
<!-- >--> >
<!-- <el-table-column align="center" prop="hh1" label="协议价">--> <el-table-column align="center" prop="js_price" label="协议价">
<!-- <template slot-scope="scope">--> <template slot-scope="scope">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh1" placeholder="请输入协议价"></el-input>--> <el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input>
<!-- </template>--> </template>
<!-- </el-table-column>--> </el-table-column>
<!-- <el-table-column align="center" prop="hh2" label="结算价">--> <el-table-column align="center" prop="sl_price" label="结算价">
<!-- <template slot-scope="scope">--> <template slot-scope="scope">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh2" :disabled="true" placeholder="根据结算价自动计算"></el-input>--> <!-- <el-input size="mini" style="width:90%" v-model="scope.row.sl_price" :disabled="true" placeholder="根据结算价自动计算"></el-input>-->
<!-- </template>--> <span>{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span>
<!-- </el-table-column>--> </template>
<!-- <el-table-column align="center" prop="hh3" label="指导价">--> </el-table-column>
<!-- <template slot-scope="scope">--> <el-table-column align="center" prop="price" label="指导价">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh3" placeholder="请输入指导价"></el-input>--> <template slot-scope="scope">
<!-- </template>--> <el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input>
<!-- </el-table-column>--> </template>
<!-- <el-table-column align="center" prop="hh4" label="市场价">--> </el-table-column>
<!-- <template slot-scope="scope">--> <el-table-column align="center" prop="sc_price" label="市场价">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh4" placeholder="请输入市场价"></el-input>--> <template slot-scope="scope">
<!-- </template>--> <el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input>
<!-- </el-table-column>--> </template>
<!-- <el-table-column align="center" prop="hh5" label="库存量">--> </el-table-column>
<!-- <template slot-scope="scope">--> <el-table-column align="center" prop="stock" label="库存量">
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh5" placeholder="请输入库存量"></el-input>--> <template slot-scope="scope">
<!-- </template>--> <el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input>
<!-- </el-table-column>--> </template>
<!-- <el-table-column align="center" prop="hh6" label="库存预警">--> </el-table-column>
<!-- <template slot-scope="scope">-->
<!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh6" placeholder="请输入预警值"></el-input>--> <el-table-column align="center" prop="weight" label="重量">
<!-- </template>--> <template slot-scope="scope">
<!-- </el-table-column>--> <el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input>
<!-- <el-table-column align="center" prop="hh7" label="图片">--> </template>
<!-- <template slot-scope="scope">--> </el-table-column>
<el-table-column align="center" prop="imgs" label="图片">
<!-- </template>--> <template slot-scope="scope">
<!-- </el-table-column>--> <!-------------->
<!-- </el-table>--> <el-upload
<!-- </div>--> action="/"
class="uploadData50"
list-type="picture-card"
<div v-for="(item,index) in orgGoodsPam.pamTableList" :key="index" class="single-spe-con"> :limit="5"
:on-exceed="limit5"
:file-list="singleSpecImgList"
:http-request="(file)=> { return upLoadSingleSpecImg(file,scope.row) }"
:on-remove=" (file) => { return removeSingleSpeImg(file,scope.row)}"
></el-upload>
<!-------------->
</template>
</el-table-column>
</el-table>
</div>
<div v-show="orgGoodsPam.pamTableList.length > 0" 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-if="orgGoodsPam.pamNameList.length === 1"> <span v-show="orgGoodsPam.pamNameList.length === 1">
{{ orgGoodsPam.pamNameList[0].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index]}} {{ orgGoodsPam.pamNameList[0].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index]}}
</span> </span>
<span v-else="orgGoodsPam.pamNameList.length > 1"> <span v-show="orgGoodsPam.pamNameList.length > 1">
<span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;"> <span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;">
{{ orgGoodsPam.pamNameList[indexv].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index][indexv]}} {{ orgGoodsPam.pamNameList[indexv].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index][indexv]}}
</span> </span>
...@@ -68,39 +80,55 @@ ...@@ -68,39 +80,55 @@
:data="item" :data="item"
style="width: 80%" style="width: 80%"
> >
<el-table-column align="center" prop="hh1" label="协议价"> <el-table-column align="center" prop="js_price" label="协议价">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.hh1" placeholder="请输入协议价"></el-input> <el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="hh2" label="结算价"> <el-table-column align="center" prop="sl_price" label="结算价">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.hh2" :disabled="true" placeholder="根据结算价自动计算"></el-input> <!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh2" :disabled="true" placeholder="根据结算价自动计算"></el-input>-->
<span>{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="hh3" label="指导价"> <el-table-column align="center" prop="price" label="指导价">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.hh3" placeholder="请输入指导价"></el-input> <el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="hh4" label="市场价"> <el-table-column align="center" prop="sc_price" label="市场价">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.hh4" placeholder="请输入市场价"></el-input> <el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="hh5" label="库存量"> <el-table-column align="center" prop="stock" label="库存量">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.hh5" placeholder="请输入库存量"></el-input> <el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="hh6" label="库存预警"> <el-table-column align="center" prop="weight" label="重量">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input size="mini" style="width:90%" v-model="scope.row.hh6" placeholder="请输入预警值"></el-input> <el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="hh7" label="图片"> <el-table-column align="center" prop="thumb" label="图片">
<template slot-scope="scope"> <template slot-scope="scope">
<span
v-show="!scope.row.thumb"
class="span-img"
@click="upPreSpeImg(index,scope.row)"
></span>
<span v-show="scope.row.thumb" class="span-img-con">
<img
class="spec-img"
:src="scope.row.thumb"
alt=""
@click="changeSpeImg(index,scope.row)"
/>
<span class="span-img-del el-icon-delete del-span-block" @click="hxz"></span>
</span>
<input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*" @change="changeIMG(index,scope.row)">
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -110,6 +138,7 @@ ...@@ -110,6 +138,7 @@
</template> </template>
<script> <script>
import { UploadImg } from '@/api/module/goods';
export default { export default {
name: 'goodsparameter', name: 'goodsparameter',
props: { props: {
...@@ -122,20 +151,7 @@ export default { ...@@ -122,20 +151,7 @@ export default {
return { return {
orgGoodsPam: {}, orgGoodsPam: {},
preTableTitle: [], preTableTitle: [],
noSpecTable: [ isHoverSpeImg: false,
{
hh1: '',
hh2: '',
hh3: '',
hh4: '',
hh5: '',
hh6: '',
hh7: '',
}
],
// 规格名称数组
// goodsSpecNameList: [],
// // 每一个规格，都是一张表格
// goodsPam:[ // goodsPam:[
// { // {
// speNameList:[ '颜色','尺码' ], // speNameList:[ '颜色','尺码' ],
...@@ -150,21 +166,22 @@ export default { ...@@ -150,21 +166,22 @@ export default {
// hh7: '', // hh7: '',
// }], // }],
// }, // },
// {
// speNameList:[ '颜色','尺码' ],
// goodsParametersList: [],
// goodsPamPreTable: [ {
// hh1: '',
// hh2: '',
// hh3: '',
// hh4: '',
// hh5: '',
// hh6: '',
// hh7: '',
// } ]}
// ], // ],
// goodsPamPreTable: [], // goodsPamPreTable: [],
// goodsPamPreObj: // goodsPamPreObj:
/** 无规格 数据 */
singleSpecTable: [
{
js_price: '', // 协议价
sl_price: '', // 结算价
price: '', // 指导价
sc_price: '', // 市场价
stock: '', // 库存
weight: '', // 重量 g
imgs: '', // 图片
}
],
singleSpecImgList: [],
} // return end } // return end
}, },
watch:{ watch:{
...@@ -172,37 +189,197 @@ export default { ...@@ -172,37 +189,197 @@ export default {
//debugger //debugger
this.orgGoodsPam = val; this.orgGoodsPam = val;
//console.log(175,this.orgGoodsPam); //console.log(175,this.orgGoodsPam);
//this.preTableTitle = [];
// this.orgGoodsPam.pamDataList.forEach((item)=> {
// let preTitle = '';
// if (!Array.isArray(item)) {
// preTitle = this.orgGoodsPam.pamNameList[0].specName + '：' + item;
// }else {
// item.forEach((itemI,indexI)=> {
// preTitle += (this.orgGoodsPam.pamNameList[indexI].specName + " " + itemI) + " ";
// });
// }
// this.preTableTitle.push(preTitle);
// });
}, },
}, },
created() { created() {
//this.orgGoodsPam = this.parameterdata; //this.orgGoodsPam = this.parameterdata;
}, },
mounted() { mounted() {
//console.log("9999",this.goodsPamPreList); //console.log("9999",this.goodsPamPreList);
}, },
methods: { methods: {
// ------ 无规格，上传图片相关 ------
limit5() {
this.$message({type: 'warning',message: '只能上传5张图片'});
},
// 上传 无规格组合 的图片
upLoadSingleSpecImg(param) {
// this.loading = true;
//debugger
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
UploadImg(data).then(res => {
// this.loading = false;
if (res && res.code == 1) {
this.singleSpecImgList.push({ url: res.data.image_url });
this.singleSpecTable[0].imgs = [];
this.singleSpecImgList.forEach(item=> {
this.singleSpecTable[0].imgs.push(item.url)
})
this.$message({ message:'上传成功',type:'success'});
}else {
this.singleSpecImgList = [];
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
})
});
},
// 删除 无规格组合 的图片
removeSingleSpeImg(file) {
if(file.status === "success") {
for(let i = 0; i < this.singleSpecImgList.length; i++) {
if(file.uid === this.singleSpecImgList[i].uid) {
this.singleSpecImgList.splice(i,1);
this.singleSpecTable[0].imgs.splice(i,1);
}
}
this.$message({ type: 'success', message: '删除成功!' });
}
},
/** 规格组合 上传图片 */
// 上传图片
upPreSpeImg(index, row) {
let domRef = "hxz" + index;
//console.log(domRef,this.$refs[domRef][0]);
this.$refs[domRef][0].value = '';
this.$refs[domRef][0].click();
},
// 更换 某一个规格的图片
changeSpeImg(index, row) {
this.upPreSpeImg(index,row);
},
// 真正的上传图片方法，原生input
changeIMG(index, row) {
let curRow = row;
let inputDom = "hxz" + index;
let file = this.$refs[inputDom][0].files[0];
if( file.size > 1024 * 1024 * 3 ) {
this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
return;
}
this.getBase64(file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"img_data": this.Base64img}
UploadImg(data).then(res => {
// this.loading = false;
if (res && res.code == 1) {
curRow.thumb = res.data.image_url;
// this.singleSpecImgList.push({'url': res.data.image_url})
this.$message({ message:'上传成功',type:'success'});
}else {
this.$message({ message:'上传失败，请重新上传',type:'error'});
}
})
});
console.log(3333,file);
},
hxz() {
},
speImgHover(index,row) {
this.isHoverSpeImg = true;
},
speImgLeave(index, row) {
this.isHoverSpeImg = false;
},
// -- 通用 方法 --
// 图片转换为 base64
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
} // methods end } // methods end
} }
</script> </script>
<style scoped> <style lang="scss" type="text/stylus" scoped>
.span-img {
margin: 0;
padding: 0;
display : inline-block;
width:50px;
height:50px;
position: relative;
top:4px;
cursor: pointer;
border-radius: 6px;
border: 1px dashed #c0ccda;
background-color : #fbfdff;
}
.span-img:hover {
border: 1px dashed #1890ff;
}
.spec-img {
width: 100%;
height: 100%;
border-radius: 6px;
cursor: pointer;
position: relative;
border: none;
}
.span-img-con {
margin: 0;
padding: 0;
display : inline-block;
width:50px;
height:50px;
position: relative;
top:4px;
cursor: pointer;
border-radius: 6px;
border: 1px solid #c0ccda;
}
.span-img-del {
position: absolute;
display : inline-block;
width: 18px;
height: 18px;
font-size: 18px;
color: #333;
line-height : 18px;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
}
.del-span-block {
display : none;
}
.span-img-del:hover {
color: #F56C6C;
}
.span-img-con:hover > .del-span-block {
display : block;
}
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -231,4 +408,37 @@ p { ...@@ -231,4 +408,37 @@ p {
color: #909399; color: #909399;
font-size: 12px; font-size: 12px;
} }
// 上传图片样式
.uploadData50 {
display: inline-block;
/deep/ .el-upload--picture-card {
width: 50px;
height: 50px;
}
/deep/ .el-upload {
width: 50px;
height: 50px;
line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
width: 50px;
height: 50px;
line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
width: 50px;
height: 50px;
line-height: 50px;
}
/deep/ .avatar {
width: 50px;
height: 50px;
}
}
</style> </style>
src/views/system/goods/add/components/goodsspecifications.vue
浏览文件 @ 0cf89f67
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
size="small" size="small"
style="width: 300px" style="width: 300px"
filterable filterable
default-first-option default-first-option
:clearable="true" :clearable="true"
@change="speNameChange(speItem.specName,index)" @change="speNameChange(speItem.specName,index)"
...@@ -33,7 +32,7 @@ ...@@ -33,7 +32,7 @@
</div> </div>
<div class="spe-params-con"> <div class="spe-params-con">
<div style="display: inline-block" v-for="(itemSV,indexSV) in speItem.specValue" :key="indexSV"> <div style="display: inline-block" v-for="(itemSV,indexSV) in speItem.specValue" :key="indexSV">
<el-input v-model="itemSV.value" size="small" placeholder="请输入规格参数" class="spe-params-input-item" @blur="paramNameInputBlur()"> <el-input v-model="itemSV.value" size="small" placeholder="请输入规格参数" class="spe-params-input-item" @blur="paramNameInputBlur(index,indexSV)">
<i v-if="indexSV !== 0" slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam(index,indexSV)"></i> <i v-if="indexSV !== 0" slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam(index,indexSV)"></i>
</el-input> </el-input>
</div> </div>
...@@ -137,7 +136,6 @@ export default { ...@@ -137,7 +136,6 @@ export default {
specValue: [{value: ''}] specValue: [{value: ''}]
}; };
this.$set(this.speData,this.speData.length,specsGroup); this.$set(this.speData,this.speData.length,specsGroup);
//this.speNameListChange();
}, },
/** 删除 规格数据 */ /** 删除 规格数据 */
deleteSpe(index) { deleteSpe(index) {
...@@ -147,101 +145,31 @@ export default { ...@@ -147,101 +145,31 @@ export default {
type: 'warning' type: 'warning'
}).then(async() => { }).then(async() => {
this.speData.splice(index,1); this.speData.splice(index,1);
//this.speNameListChange(); this.specCalcResult();
//this.paramNameInputBlur();
}).catch(() => {}) }).catch(() => {})
}, },
// //
/** /** 规格名称，值改变时, 此组件 lable 和 value 绑定同一个值 */
* 规格名称，值改变时, 将id值转化为 label（name）的处理
* val 为当前options的值
* index 为当前第几个规格
* 因后台保存规格的中文名字，顾需要将 value值找到对应的label值
* */
speNameChange(val,index) { speNameChange(val,index) {
if( val ) {
console.log(1111111,val); // 当有多个值的时候，才校验，规格名称是否重复
// if( this.speData.length > 1 ) {
let coypSpeData = [];
// let obj = { specName: '' }; coypSpeData = this.speData.concat();
// if( this.speData[index].specName === currentOptions.id ) { coypSpeData.splice(index,1);
// this.speData[index].specName = currentOptions.name; for(let i = 0; i < coypSpeData.length; i++) {
// obj.specName = currentOptions.name; if( val === coypSpeData[i].specName ) {
// this.speNameList[index] = obj; this.speData[index].specName = '';
// } this.$message({type: 'error',message: '此规格名称已经使用，请重新选取或新增其他规格名称'});
// break;
// 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);
},
// 规格名称，有变化时,出规格名称下拉操作以外的其他操作
speNameListChange(index) {
//debugger
this.speNameList = [];
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); this.specCalcResult();
// 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) {
let valueObj = { value: ''} let valueObj = { value: ''}
...@@ -249,9 +177,13 @@ export default { ...@@ -249,9 +177,13 @@ export default {
}, },
/** 删除 规格参数 */ /** 删除 规格参数 */
deleteSpeParam(index,indexSV) { deleteSpeParam(index,indexSV) {
this.speData[index].specValue.splice(indexSV,1); // 先判断，删除前是否有值，如果是空，则没有必要再次计算
//console.log(119,this.speData[index].specValue); if( this.speData[index].specValue[indexSV].value ) {
//this.paramNameInputBlur(); this.speData[index].specValue.splice(indexSV,1);
this.specCalcResult();
}else {
this.speData[index].specValue.splice(indexSV,1);
}
}, },
/** /**
* 规格名称 下拉框 出现/隐藏 触发 * 规格名称 下拉框 出现/隐藏 触发
...@@ -303,12 +235,10 @@ export default { ...@@ -303,12 +235,10 @@ export default {
let options = JSON.parse(window.localStorage.getItem('localSpeOptions')); let options = JSON.parse(window.localStorage.getItem('localSpeOptions'));
this.speOptions = options; this.speOptions = options;
} }
}, },
/* 增加 规格名称 */ /* 增加 规格名称 */
addSpeName(index) { addSpeName(index) {
this.addSpecNameDialog = true; this.addSpecNameDialog = true;
// console.log(index);
}, },
// 添加规格名称，对话框的退出 // 添加规格名称，对话框的退出
...@@ -349,68 +279,65 @@ export default { ...@@ -349,68 +279,65 @@ export default {
}, },
/** 规格参数 失焦时，进行笛卡尔积算法，并渲染 商品售价 */ /** 规格参数 失焦时，进行笛卡尔积算法，并渲染 商品售价 */
paramNameInputBlur() { paramNameInputBlur(index,indexSV) {
// // 如果失焦的input中有值，才再次计算
// if( this.speData[index].specValue[indexSV].value ) {
this.specCalcResult();
// }
},
/** 规格参数 变化时，对数据进行处理后，再进行笛卡尔积算法，最终计算出商品售价的数据 */
specCalcResult() {
// 商品规格原始数据 // 商品规格原始数据
let orgSpeData = this.deepClone(this.speData); let orgSpeData = this.deepClone(this.speData);
// 进行数据处理后的数据, // 进行数据处理后的数据,
let proSpeData = this.processData(orgSpeData); let proSpeData = this.processData(orgSpeData);
console.log("看看处理的数据",proSpeData); // 需要将 所有规格名称，提出一个数组集合,
let fuck = this.cartesian(proSpeData); this.speNameList = [];
console.log("笛卡尔积的结果：",fuck); orgSpeData.forEach((item,index)=> {
return if( item.specName ) {
// // 商品规格原始数据 let obj = { specName: '' };
// let orgSpeData = this.deepClone(this.speData); // 注意, item.specValue是否一定为一个长度大于 1 的数组
// // 进行数据处理后的数据, if( item.specValue.length > 0) {
// let proSpeData = this.processData(orgSpeData); for(let i = 0; i < item.specValue.length; i++) {
if( item.specValue[i].value ) {
obj.specName = item.specName;
this.speNameList.push(obj);
break;
}
}
}
}
})
// console.log("处理后的数据",proSpeData);
// console.log("处理后的nameList",this.speNameList);
// debugger // 当处理后的数据，是一个空数组，则不需要再进行 笛卡尔积 计算，可以直接给出计算结果
// console.log("失焦触发：",this.speData); if (proSpeData.length === 0) {
// console.log("失焦触发,不生成表格的条件：",proSpeData); let goodsPam = {
// this.speNameListChange(); pamNameList: [],
// console.log(319,this.speNameList); pamDataList: [],
//debugger pamTableList: [],
// 笛卡尔积 生成所有规格组合数据 };
// if(proSpeData.length > 0) { this.$emit('calcSpeTable', goodsPam);
// proSpeData.forEach((item,index) => { } else {
// if(item.length <= 0) { let goodsParametersList = this.cartesian(proSpeData);
// proSpeData.splice(index,1); let goodsPam = {
// } pamNameList: [],
// }); pamDataList: [],
// pamTableList: [],
// let goodsParametersList = this.cartesian(proSpeData); };
// goodsPam.pamNameList = this.speNameList;
// // 组织数据 结构 goodsPam.pamDataList = goodsParametersList;
// if(this.speNameList.length > 0 && goodsParametersList.length > 0) { goodsParametersList.forEach((item)=> {
// // 所有数据 let prePamTable = [
// let goodsPam = { { js_price:'', sl_price:'', price:'', sc_price:'', stock:'', weight:'', thumb:'' }
// pamNameList: [], ];
// pamDataList: [], goodsPam.pamTableList.push(prePamTable)
// pamTableList: [], });
// }; this.$emit('calcSpeTable',goodsPam);
// 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: [],
// pamTableList: [],
// };
// this.$emit('calcSpeTable',goodsPam);
// }
// }
}, },
/** 重新计算 */
// hxz() {
//
// },
/** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */ /** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
processData(list) { processData(list) {
...@@ -418,10 +345,7 @@ export default { ...@@ -418,10 +345,7 @@ export default {
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) {
...@@ -429,32 +353,17 @@ export default { ...@@ -429,32 +353,17 @@ export default {
} }
} }
} }
result.push(childList);
if(childList.length > 0) {
result.push(childList);
}
} }
} }
return result; return result;
}, },
/** 笛卡尔积算法 */ /** 笛卡尔积算法 */
cartesian(arr) { cartesian(arr) {
// if(arr.length < 2) {
// let res = [];
// arr.forEach((item) => {
// res.push(item);
// });
// return res
// }else {
// return [].reduce.call(arr, function(col, set) {
// let res = [];
// col.forEach( c => {
// set.forEach(s => {
// let t = [].concat(Array.isArray(c) ? c : [c]);
// t.push(s);
// res.push(t);
// });
// });
// return res
// });
// }
if(arr.length < 2) { if(arr.length < 2) {
return arr[0] || []; return arr[0] || [];
}else { }else {
...@@ -505,11 +414,11 @@ export default { ...@@ -505,11 +414,11 @@ export default {
padding: 0 12px 0 0; padding: 0 12px 0 0;
box-sizing: border-box; box-sizing: border-box;
} }
.el-form-item-h__label:before { /*.el-form-item-h__label:before {*/
content: '*'; /* content: '';*/
color: #ff4949; /* color: #ff4949;*/
margin-right: 4px; /* margin-right: 4px;*/
} /*}*/
.el-form-item-h__content { .el-form-item-h__content {
margin-left: 150px; margin-left: 150px;
position: relative; position: relative;
......
src/views/system/goods/add/index.vue
浏览文件 @ 0cf89f67
...@@ -240,24 +240,81 @@ ...@@ -240,24 +240,81 @@
// //
save() { save() {
// 此处变量 有顺序 校验时，电梯至某处 // 此处变量 有顺序 校验时，电梯至某处
// 商品信息 是否填写完整 // 商品信息 是否填写完整
//let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm(); let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
// 商品规格 无需校验
// 商品售价，通过获取的数据，分别进行判断
let isGoodsPrice = true;
let spsjData = this.$refs.goodsparameter.singleSpecTable;
let spsjData2 = this.$refs.goodsparameter.orgGoodsPam;
//debugger
// 如果有，则说明有规格组合数据
if ( spsjData2.pamTableList && spsjData2.pamTableList.length > 0 ) {
//console.log(25522,spsjData2);
for(let i = 0; i < spsjData2.pamTableList.length; i++) {
console.log("外");
// for(let itemKey in spsjData2.pamTableList[i]) {
// console.log('内', spsjData2.pamTableList[i][itemKey])
// }
let obj = {};
obj = spsjData2.pamTableList[i];
for(let itemKey in obj) {
console.log('内', itemKey)
}
// for(let itemKey in spsjData2.pamTableList[i]) {
// if ( !spsjData2.pamTableList[i][itemKey] || spsjData2.pamTableList[i][itemKey].length === 0 ) {
// isGoodsPrice = false;
// break
// }else {
// isGoodsPrice = true;
// }
// }
// if( !isGoodsPrice ) {
// break
// }
}
}else {
// 无规格组合数据
let slingleSpeObj = spsjData[0];
for (let key in slingleSpeObj) {
if ( !slingleSpeObj[key] || (slingleSpeObj[key].length === 0) ) {
isGoodsPrice = false;
break
} else {
isGoodsPrice = true;
}
}
}
// 商品详情 是否填写完整
let isGoodsDetailsImgMsg = this.$refs.goodsdetailsimg.description ? true : false;
// 售后服务 是否填写完整
let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
// 商品售价，由商品规格决定，
// 如果 没有填写商品规格，那么商品售价应该获取
// console.log(258,spsjData2,spsjData);
// return;
// // 商品详情
//let isGoodsDetailsImgMsg = this.$refs.goodsdetailsimg.description ? true : false;
// // 售后服务 是否填写完整
// let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
//
// //console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据
//
// if(!isGoodsInfoMsg) { // if(!isGoodsInfoMsg) {
// this.$message({type:'error',message:'商品信息未填写完整'}); // this.$message({type:'error',message:'商品信息未填写完整'});
// this.setFloorNavMountClick(0); // this.setFloorNavMountClick(0);
// return // return
// } // }
if(!isGoodsPrice) {
this.$message({type:'error',message:'商品售价未填写完整'});
this.setFloorNavMountClick(2);
return
}
// if(!isGoodsDetailsImgMsg) { // if(!isGoodsDetailsImgMsg) {
// this.$message({type:'error',message:'请先上传描述商品详情的图片'}); // this.$message({type:'error',message:'请先上传描述商品详情的图片'});
// this.setFloorNavMountClick(3); // this.setFloorNavMountClick(3);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论