Skip to content

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

添加商品03

上级 36397264
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 430 行增加 和 587 行删除
src/views/system/goods/add/components/goodsparameter.vue
浏览文件 @ 1f1201d7
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="4" >
<div class="grid-content bg-purple">
<p>参数</p>
<p style="font-size:12px;">根据商品特性设置相符的商品参数</p>
</div>
</el-col>
<el-col :span="20" style="border-left:2px solid #fff;">
<div class='tablessst'>
<p class="col_p">参数名称</p>
<p class='col_pr'>参数值 拖动行可进行排序</p>
</div>
<div v-for="(item,index) in goodsPram" :key="index" v-dragging="{ list: goodsPram, item: item, group: 'knowTab' }" class='tablesss'>
<p class="col_p"><el-input v-model="item.title" placeholder="如尺码,颜色等" style="width:calc(100% - 20px)"></el-input></p>
<p class='col_pr'>
<el-input v-model="item.value" placeholder="根据参数进行设置, 如 S/M/L/XL/XXl, 或红/黄/蓝" style="width:calc(100% - 200px)"></el-input>
<el-button icon="el-icon-close" style="margin-left:10px;" @click="deletearrinput(index)"></el-button>
<el-button style="margin-left:10px;">拖动排序</el-button>
</p>
</div>
<div class="goods-parameter">
<p class="tip-p">
<el-link class="edit-type-span el-icon-search" type="primary" :underline="false">查看各类价格说明</el-link>
<span class="tip-span">所有商品价格均为含税价，必须开具发票</span>
</p>
<div v-for="(item,index) in goodsPamPreList" :key="index" class="single-spe-con">
<p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;">
<span style="font-size: 12px;color: #909399;margin: 0 8px 0 0">第{{ index + 1 }}个规格</span>
<span style="margin-right: 20px;" v-for="(itemGS,indexGS) in item" :key="itemGS">
<span>{{ goodsSpecNameList[indexGS] }}：</span>
<span>{{ itemGS }}</span>
</span>
</p>
<el-button @click="addguild()" icon="el-icon-plus" style="margin-top:20px;"> 添加参数</el-button>
</el-col>
</el-row>
<!-- <el-button type="primary" @click="handleinfomationclick('ruleForm')">下一步</el-button>-->
<el-button >重置</el-button>
<el-table
border
size="small"
:data="goodsPamPreTable"
style="width: 80%"
>
<el-table-column align="center" prop="hh1" label="协议价">
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.agreementPrice/100 }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh2" label="结算价">
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.guidePrice/100 }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh3" label="指导价">
<!-- <template slot-scope="scope">-->
<!-- <el-input v-model="scope.row.salePrice" size="mini"/>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh7" label="市场价">
<!-- <template slot-scope="scope">-->
<!-- <el-input v-model="scope.row.salePrice" size="mini"/>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hh4" label="库存量">
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.row.salePrice*100 + scope.row.freight - scope.row.agreementPrice)/100 }}</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column align="center" prop="hhh5" label="库存预警"></el-table-column>
<el-table-column align="center" prop="hh6" label="图片"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'goodsmeter',
name: 'goodsparameter',
props: {
parameterdata: {
type: Object,
......@@ -41,102 +62,82 @@ export default {
},
data() {
return {
goodsPram:[{
id:0,
title:'',
value:''
}]
}
goodsPam: [],
// 规格名称数组
goodsSpecNameList: [],
// 每一个规格，都是一张表格
goodsPamPreList:[],
goodsPamPreTable: [
{
hh1: '',
hh2: '',
hh3: '',
hh4: '',
hh5: '',
hh6: '',
}
],
// goodsPamPreObj:
} // return end
},
components:{
'hello':{
render:function(createElement){
return createElement(
'h'+this.level,
this.$se
)
watch:{
'parameterdata.hu1': function(val) {
this.goodsSpecNameList = val;
},
'parameterdata.hu2':function(val) {
console.log(100000,val)
this.goodsPamPreList = [];
this.goodsPamPreList = val;
}
}
},
mounted() {
// this.driver = new Driver()
this.$dragging.$on('dragged', (value) => {
//因为我这在排序的时候不需要做处理，所以空着就行
// debugger
})
created() {
//this.goodsSpecNameList = this.parameterdata
// _this.$Bus.$on("calcSpeTable",function(val) {
// console.log(37,val);
// _this.goodsSpecNameList = val.hu1;
// _this.goodsPamPreList = val.hu2;
// this.$forceUpdate()
// });
},
watch:{
goodsPram:{
handler(val, oldVal){
this.$emit('parameterclicks',val)
},
deep:true
},
parameterdata(curVal,oldVal){
if(curVal){
this.goodsPram= curVal
}
}
mounted() {
console.log("9999",this.goodsPamPreList);
},
methods: {
handleinfomationclick(formName) {
this.$emit('parameterclicks',this.goodsPram)
},
addguild(){
let arrchild={
id:0,
title:'',
value:''
}
this.$set(this.goodsPram, this.goodsPram.length,arrchild)
},
deletearrinput(index){
this.goodsPram.splice(index,1)
},
}
} // methods end
}
</script>
<style scoped>
.app-container{
width:100%;
height:100%;
background: #f8f8f8;
}
ul,li{
list-style: none;
p {
margin: 0;
padding:0;
padding: 0;
}
.ullist{
border: 1px solid #e7eaec;
padding: 10px;
margin-bottom: 10px;
}
.el-input-group{
width:calc(100% - 60px);
.tip-p {
margin: 0 0 20px 0;
}
.col_p{
width:30%;
float:left;
.goods-parameter {
padding: 15px 0;
margin-top: 18px;
}
.col_pr{
width:70%;
float:left;
.edit-type-span {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
.tablesss{
height:70px;
border-bottom: 1px solid #e6ebf5;
.single-spe-con {
margin: 25px 0;
}
.tablessst{
height:50px;
border-bottom: 1px solid #e6ebf5;
/* 一般提示性文字 */
.tip-span {
color: #909399;
font-size: 12px;
}
</style>
src/views/system/goods/add/components/goodsspecifications.vue
浏览文件 @ 1f1201d7
<template>
<div class="goods-specifications">
<div class="el-form-item-h" v-for="(speItem,index) in speData" :key="index">
<label class="el-form-item-h__label">规格名称：</label>
<div class="el-form-item-h__content">
<el-select
:ref="'speNameDom' + index "
v-model="speItem.speName"
size="small"
style="width: 300px"
filterable
allow-create
default-first-option
:clearable="true"
@visible-change='bv=> visibleChange(bv,"speNameDom",index)'
>
<el-option
v-for="(itemSN,indexSN) in speOptions"
:key="itemSN.id"
:label="itemSN.title"
:value="itemSN.id"
>
<span style="float: left" class="span-style">{{ itemSN.title }}</span>
<div class="flag">
<svg-icon icon="edit" iconClass="template_edit_style" @click="addSpeName(index)"/>
<div class="spe-con" v-for="(speItem,index) in speData" :key="index">
<div class="el-form-item-h" >
<label class="el-form-item-h__label">规格名称：</label>
<div class="el-form-item-h__content">
<div>
<el-select
:ref="'speNameDom' + index "
v-model="speItem.specName"
size="small"
style="width: 300px"
filterable
allow-create
default-first-option
:clearable="true"
@change="speNameChange"
@visible-change='bv=> visibleChange(bv,"speNameDom",index)'
>
<el-option
v-for="(itemSN,indexSN) in speOptions"
:key="itemSN.id"
:label="itemSN.title"
:value="itemSN.title"
>
<span style="float: left" class="span-style">{{ itemSN.title }}</span>
<div class="flag">
<svg-icon icon="edit" iconClass="template_edit_style" @click="addSpeName(index)"/>
</div>
</el-option>
</el-select>
<!--<span>数据填写不完整</span>-->
</div>
<div class="spe-params-con">
<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()">
<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>
</div>
</el-option>
</el-select>
<div class="spe-params-con">
<el-input v-model="fuck" size="small" placeholder="请输入规格参数" class="spe-params-input-item">
<i slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam()"></i>
</el-input>
<el-button type="primary" plain class="el-icon-plus" size="mini">添加规格参数</el-button>
<el-button type="primary" plain class="el-icon-plus" size="mini" @click="addSpeParam(index)">添加规格参数</el-button>
</div>
</div>
</div>
<div style="margin-right:auto;" v-if="(speData.length > 1) && speData.length !== 1">
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteSpe(index)">删除该规格</el-button>
</div>
</div>
<el-button @click="fuc">增 加</el-button>
<el-button @click="addSpe" class="el-icon-plus" size="mini">添加规格</el-button>
<!-- <el-button type="primary" plain class="el-icon-plus" size="mini" @click="hhxx()">生成数据</el-button>-->
</div>
</template>
......@@ -46,46 +59,85 @@ export default {
name: "GoodsSpecifications",
props: {
specificationsdata: {
type: Object,
type: Array,
required: true
}
},
data() {
return {
speData: [], // 商品规格总数据
singleSpeData: {
speName: '', // 规格名称
specsGroup: {
specName: '', // 规格名称
score: '',
specValue: []
},
fuck:'',
speParamName:{
value: ''
},
speOptions: [{
id: '1',
title: '北京'
title: '颜色'
}, {
id: '2',
title: '上海'
title: '尺码'
}],
// 规格名称，value组成的数组
speNameList: []
};
},
created() {
this.$set(this.specsGroup.specValue,this.specsGroup.specValue.length,this.speParamName);
this.speData = [];
this.$set(this.speData,this.speData.length,this.singleSpeData);
// console.log(71,this.speData);
// this.$set(this.speData,this.speData.length,this.singleSpeData);
// this.speData.push(this.singleSpeData);
// this.speData.push(this.singleSpeData);
this.$set(this.speData,this.speData.length,this.specsGroup);
//console.log(71,this.specsGroup.specValue);
},
mounted() {},
watch:{},
methods: {
fuc() {
let singleSpeData = {
speName: '', // 规格名称
/** 添加规格*/
addSpe() {
let specsGroup = {
specName: '', // 规格名称
score: '',
specValue: [{value: ''}]
};
//this.$set(this.speData,this.speData.length,singleSpeData);
this.speData.push(singleSpeData);
this.$set(this.speData,this.speData.length,specsGroup);
this.speNameListChange();
},
/** 删除 规格数据 */
deleteSpe(index) {
this.$confirm('是否删除当前规格的所有数据？', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
this.speData.splice(index,1);
this.speNameListChange();
}).catch(() => {})
},
// 规格名称，下拉选值时触发
speNameChange() {
this.speNameListChange();
},
// 规格名称，有变化时
speNameListChange() {
this.speNameList = [];
this.speData.forEach((item)=> {
if(item.specName) {
this.speNameList.push(item.specName);
}
});
},
// 添加规格参数
addSpeParam(index) {
let valueObj = { value: ''}
this.$set(this.speData[index].specValue,this.speData[index].specValue.length,valueObj);
},
/** 删除 规格参数 */
deleteSpeParam(index,indexSV) {
this.speData[index].specValue.splice(indexSV,1);
//console.log(119,this.speData[index].specValue);
},
/**
* 规格名称 下拉框 出现/隐藏 触发
......@@ -99,7 +151,6 @@ export default {
let _this = this;
let realRefName = refName + index;
//console.log(realRefName);
// debugger
if(visible) {
// 动态绑定 ref的值的时候，下面的dom需要 加一个 [0],非常重要
const speNameDom = _this.$refs[realRefName][0];
......@@ -134,19 +185,70 @@ export default {
addSpeName(index) {
//console.log(index);
},
//
change(index) {
console.log(127,index);
//this.speData[index]
/** 规格参数 失焦时，进行笛卡尔积算法，并渲染 商品售价 */
paramNameInputBlur() {
// 商品规格原始数据
let orgSpeData = this.deepClone(this.speData);
// 进行数据处理后的数据,
let proSpeData = this.processData(orgSpeData);
// 笛卡尔积 生成所有规格组合数据
let goodsParametersList = this.cartesian(proSpeData);
if(this.speNameList.length > 0 && goodsParametersList.length > 0) {
let hufei = {
hu1: [],
hu2: []
}
hufei.hu1 = this.speNameList;
hufei.hu2 = goodsParametersList;
this.$emit('calcSpeTable',hufei);
// console.log("规格名称：",hufei);
}
},
/**
* 删除 规格参数
*
* */
deleteSpeParam() {
console.log("点击啦");
/** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
processData(list) {
let result = [];
if(list && list.length > 0) {
for(let i = 0; i < list.length; i++) {
let childList = [];
// 规格名称填写，数据才奏效
if(list[i].specName) {
for(let j = 0; j < list[i].specValue.length; j++) {
// 剔除为空的数据
if( list[i].specValue[j].value ) {
childList.push(list[i].specValue[j].value);
}
}
// if(childList.length > 0) {
result.push(childList);
// }
}
}
}
return result;
},
/** 笛卡尔积算法 */
cartesian(arr) {
if(arr.length < 2) {
return arr[0] || [];
}
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
});
}
}, // methods end
};
</script>
......@@ -155,10 +257,15 @@ export default {
padding: 15px 0;
margin-top: 18px;
}
.spe-con {
display: flex;
justify-content: flex-start;
}
/* 仿 element 的from-item 样式，注意，size为 samll */
.el-form-item-h {
margin: 0 0 20px 0;
width:80%;
margin: 0 20px 20px 0;
padding: 20px 0 0;
background: #F7F8FA;
border: 1px solid #E5E5E5;
......
src/views/system/goods/add/index.vue
浏览文件 @ 1f1201d7
......@@ -35,19 +35,21 @@
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
<GoodsSpecifications :specificationsdata="specificationsdata"/>
<GoodsSpecifications ref="goodsspecifications" :specificationsdata="specificationsdata" @calcSpeTable="calcSpeTable"/>
</div>
</div>
<!-- 商品售价 -->
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品售价</p>
<GoodsParameter ref="goodsparameter" :parameterdata="parameterdata" />
</div>
</div>
<!-- 商品详情 -->
<div class="floor-item">
<div class="floor-item-box">
<p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
<Goodsimg ref="goodsdetailsimg" :imgdata="imgdata"/>
</div>
</div>
<!-- 售后及服务 -->
......@@ -77,6 +79,8 @@
import { getAreaList } from '@/api/module/retreat/address';
import Goodsinfomation from './components/goodsinfomation';
import GoodsSpecifications from './components/goodsspecifications';
import GoodsParameter from './components/goodsparameter';
import Goodsimg from './components/goodsimg';
import Goodsaftersale from './components/goodsaftersale';
export default {
......@@ -84,6 +88,8 @@
components: {
Goodsinfomation,
GoodsSpecifications,
GoodsParameter,
Goodsimg,
Goodsaftersale,
},
data() {
......@@ -108,7 +114,7 @@
{ id: 2, name: '商品规格' },
{ id: 3, name: '商品售价' },
{ id: 4, name: '商品详情' },
{ id: 5, name: '售后及服务' },
{ id: 5, name: '售后及服务' }
],
/* 商品信息 */
goodsinfodata: {
......@@ -116,9 +122,11 @@
categoryStr: ''
},
/* 商品规格 */
specificationsdata: {
},
specificationsdata: [],
/* 商品售价 */
parameterdata: {},
/* 商品详情 */
imgdata: {},
/* 售后及服务 */
goodsaftersale: {
......@@ -138,6 +146,25 @@
},
methods: {
// 规格子组件，传给父组件的数据
calcSpeTable(data) {
let data1 = data;
this.parameterdata = data1;
console.log(153,this.parameterdata);
this.parameterdata['']
let obj = {
hh1: '',
hh2: '',
hh3: '',
hh4: '',
hh5: '',
hh6: '',
}
// for(let i = 0; i < this.data1.hu2.length; i++) {
// this.data1.hu2[i]['obj'] = obj;
// }
},
// 只有点击完最后一级，才会有值
SSQChange() {
if(this.SSQList && this.SSQList.length > 0) {
......@@ -225,22 +252,37 @@
//
save() {
// 此处变量 有顺序 校验时，电梯至某处
// 商品信息 是否填写完整
let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
// 售后服务 是否填写完整
let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
//console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据
//console.log(2222,isGoodsAfterSaleMsg,isGoodsInfoMsg);
if(!isGoodsInfoMsg) {
this.$message({type:'error',message:'商品信息未填写完整'});
this.setFloorNavMountClick(0);
return
}
if(!isGoodsAfterSaleMsg) {
this.$message({type:'error',message:'售后及服务未填写完整'});
this.setFloorNavMountClick(4);
return
}
// // 商品信息 是否填写完整
// let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm();
// // 商品详情
// let isGoodsDetailsImgMsg = this.$refs['goodsdetailsimg'].validateGoodsDeImgForm();
// // 售后服务 是否填写完整
// let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
//
// //console.log(212,this.$refs.goodsaftersale.goodsAfterSaleForm) // 主动获取子组件数据
//
// if(!isGoodsInfoMsg) {
// this.$message({type:'error',message:'商品信息未填写完整'});
// this.setFloorNavMountClick(0);
// return
// }
// if(!isGoodsDetailsImgMsg) {
// this.$message({type:'error',message:'商品详情未填写完整'});
// this.setFloorNavMountClick(3);
// return
// }
// if(!isGoodsAfterSaleMsg) {
// this.$message({type:'error',message:'售后及服务未填写完整'});
// this.setFloorNavMountClick(4);
// return
// }
// 所有校验通过，整理数据
this.specificationsdata = this.$refs.goodsspecifications.speData
console.log("商品规格数据：",this.specificationsdata);
},
/*-----------------------*/
......@@ -255,15 +297,13 @@
// 可以通过 floor-cont的父元素，高度减去上下两个div的高度，来准确计算出来了，需要wtach监听,暂时用初步高来计算，一般问题不大
let floor_cont = document.getElementsByClassName('floor-cont')[0];
let floor_item = document.getElementsByClassName('floor-item'),
// 电梯层数，即需要滚动的dom个数
fiLength = floor_item.length,
// 每次点击，对应dom需要滚动的高度
floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
window_scrollTop = _this.$refs.scrollview.scrollTop,
// 基本滚动动画配置
timer = { step: 45, times: 20, FLOOR_OFFSETTOP: 0 };
// floor_cont 可是窗口的 高
// floor_cont 可是窗口的 高
let hxz = 0;
let resList = [];
let list = [];
......@@ -280,7 +320,6 @@
if( hxz > floor_cont.offsetHeight) {
timer.FLOOR_OFFSETTOP = floor_offsetTop;
}else {
//let maxScrollTopDom = _this.comMaxScrollTop(0,floor_item,floor_cont.offsetHeight);
timer.FLOOR_OFFSETTOP = floor_cont.scrollHeight - floor_cont.offsetHeight
}
......@@ -323,36 +362,7 @@
}, timer.times)
},
/*-----------*/
//
comMaxScrollTop(jsq,listDom,floor_cont) {
let result = {
index: 0,
scrollTop: 0,
};
jsq++
let total = 0;
let orgIndex = 5 - jsq;
let List = [];
for(let i =0; i < listDom.length; i++) {
List.push( Number(listDom[i].offsetHeight) );
}
// 得到，所有dom的盒子高度
let resList = [];
resList = List.slice(orgIndex);
for(let j = 0; j < resList.length; j++) {
total += Number(resList[j])
}
if(total < floor_cont) {
return this.comMaxScrollTop(jsq,listDom,floor_cont);
}else if(total >= floor_cont) {
result.index = jsq;
result.scrollTop = total;
return result ;
}
},
} // methods end
}
......@@ -474,7 +484,6 @@
.floor-item {
padding: 0 20px 0 0;
margin: 15px auto;
min-height: 300px;
color: #333;
}
.submit-type-con {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论