Skip to content

C
chinafrica
提交 120d40a3 authored 作者: 潘鹏's avatar 潘鹏
浏览文件
操作

添加细粒度价格操作功能

上级 81f0dfe3
隐藏空白字符变更
内嵌 并排
正在显示 包含 170 行增加 和 68 行删除
platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfstationitem.html
浏览文件 @ 120d40a3
......@@ -175,6 +175,11 @@
justify-content: space-between;
align-items: center;
}
.pp-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.pp-flex-start {
display: flex;
......@@ -322,6 +327,7 @@
background: white;
border-radius: 4px;
padding: 20px;
overflow: auto;
}
.attribute-img-wrapper-close {
......@@ -414,6 +420,12 @@
left: 50%;
transform: translateX(-50%);
}
.confirm-btn-price{
padding:20px;
}
.confirm-btn-price>:first-child{
margin-right: 10px;
}
.flot-button {
top: 30px;
......@@ -801,68 +813,100 @@
<div class="attribute-img-wrapper">
<h2 class="text-center">批量操作</h2>
<i class="attribute-img-wrapper-close" @click.stop="showBatch=false">x</i>
<div>
<i-button
shape="circle"
v-for="(item,index) in selectBtnArr"
:type="item.isSelected?'primary':null"
@click="changeSelectBtnArr(item,index)"
style="margin-right:10px;"
>{{item.title}}
</i-button>
</div>
<div>
<h3 style="margin:20px 0;">属性规格</h3>
<div
class="attribute-sku-tag"
v-for="(item,index) in allAttributes"
@click="selectAttr(item,index)"
:class="item.isSelected?'attribute-sku-tag-active':null"
>{{item.text}}
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性图片</h3>
<div class="pp-flex-start">
<img
class="attr-img"
v-for="(item,index) in AttributeImgArr"
:src="item.img_path"
:style="item.isSelected?'border:2px solid #1ab394;border-radius:4px;':null"
@click="BatchSelectImg(item,index)"
/>
<Upload
multiple
type="drag"
:before-upload="handleBeforeUpload"
accept="image/jpeg, image/png"
action="../api/osstest/uploadtest"
:on-success="handleAttributeImgSuccess"
:show-upload-list="false"
:format="['jpg','jpeg','png']"
:max-size="2048"
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="camera" size="20"></Icon>
<Tabs active-key="key1">
<Tab-pane label="图片操作" key="key1">
<div>
<i-button
shape="circle"
v-for="(item,index) in selectBtnArr"
:type="item.isSelected?'primary':null"
@click="changeSelectBtnArr(item,index)"
style="margin-right:10px;"
>{{item.title}}
</i-button>
</div>
<div>
<h3 style="margin:20px 0;">属性规格</h3>
<div
class="attribute-sku-tag"
v-for="(item,index) in allAttributes"
@click="selectAttr(item,index)"
:class="item.isSelected?'attribute-sku-tag-active':null"
>{{item.text}}
</div>
</Upload>
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性价格</h3>
<i-input type="number" ref="amount" @on-change="changeBatch($event,'amount')"
placeholder="属性价格"/>
</div>
<div>
<h3 style="margin:20px 0;">属性库存</h3>
<i-input type="number" ref="count" @on-change="changeBatch($event,'count')"
placeholder="属性库存"/>
</div>
<div class="confirm-btn">
<i-button type="primary" @click="saveBatchData()">保存</i-button>
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性图片</h3>
<div class="pp-flex-start">
<img
class="attr-img"
v-for="(item,index) in AttributeImgArr"
:src="item.img_path"
:style="item.isSelected?'border:2px solid #1ab394;border-radius:4px;':null"
@click="BatchSelectImg(item,index)"
/>
<Upload
multiple
type="drag"
:before-upload="handleBeforeUpload"
accept="image/jpeg, image/png"
action="../api/osstest/uploadtest"
:on-success="handleAttributeImgSuccess"
:show-upload-list="false"
:format="['jpg','jpeg','png']"
:max-size="2048"
style="display: inline-block;width:58px;">
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="camera" size="20"></Icon>
</div>
</Upload>
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性价格</h3>
<i-input type="number" ref="amount" @on-change="changeBatch($event,'amount')"
placeholder="属性价格"/>
</div>
<div>
<h3 style="margin:20px 0;">属性库存</h3>
<i-input type="number" ref="count" @on-change="changeBatch($event,'count')"
placeholder="属性库存"/>
</div>
<div style="height: 140px"></div>
<div class="confirm-btn">
<i-button type="primary" @click="saveBatchData()">保存</i-button>
</div>
</Tab-pane>
<Tab-pane label="价格操作" key="key2">
<div>
<div v-for="(el,i) in handleProductAttr_Batch" :key="i">
<h3 style="margin:20px 0;">{{el.categoryName}}</h3>
<div
class="attribute-sku-tag"
v-for="(option,index) in el.categoryDescArr" :key="index"
@click="handleClickProductAttr_Batch(option,index,i)"
:class="option.isSelected?'attribute-sku-tag-active':null"
>{{option.name}}
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性价格</h3>
<i-input ref="amount" type="number" @on-change="changeBatch($event,'amount')"
placeholder="属性价格"/>
</div>
<div>
<h3 style="margin:20px 0;">属性库存</h3>
<i-input ref="count" type="number" @on-change="changeBatch($event,'count')"
placeholder="属性库存"/>
</div>
<div class="pp-flex-center confirm-btn-price">
<i-button type="primary" @click="saveBatchDataPrice('use')">应用</i-button>
<i-button type="primary" @click="saveBatchDataPrice('save')">保存</i-button>
</div>
</div>
</Tab-pane>
</Tabs>
</div>
</div>
<br/>
......
platform-admin/src/main/webapp/js/sys/tbcfstationitem.js
浏览文件 @ 120d40a3
......@@ -98,8 +98,56 @@ let vm = new Vue({
show_paste_btn:false,// 粘贴按钮
paste_modal:false,
showQuitHint:false,
// 细粒度价格控制,
handleProductAttr_Batch:[],
},
methods: {
//保存批量操作价格的数据
saveBatchDataPrice(e) {
if(this.batchAmount&&this.batchCount){
if(e === 'use'){
let arr = [];
this.handleProductAttr_Batch.map( item => {
item.categoryDescArr.map( _item => {
_item.isSelected?arr.push(_item.name):void(0);
})
})
let str = arr.join('/');
this.prevItem.map( item => {
if(item.skuDesc === str){
item.skuCount = this.batchCount;
item.skuPrice = this.batchAmount;
this.$forceUpdate();
this.$Message.info('应用成功');
}
})
}else{
let arr = [];
this.handleProductAttr_Batch.map( item => {
item.categoryDescArr.map( _item => {
_item.isSelected?arr.push(_item.name):void(0);
})
})
let str = arr.join('/');
this.prevItem.map( item => {
if(item.skuDesc === str){
item.skuCount = this.batchCount;
item.skuPrice = this.batchAmount;
this.$forceUpdate();
}
})
this.showBatch = false;
}
}else{
alert('请先设置价格和库存');
}
},
handleClickProductAttr_Batch(e,index,parent_index){
this.handleProductAttr_Batch[parent_index].categoryDescArr.map( item => item.isSelected = false)
this.handleProductAttr_Batch[parent_index].categoryDescArr[index].isSelected = true;
this.$forceUpdate();
},
//预览
preview(e,to) {
if(to === 'pc'){
......@@ -174,13 +222,23 @@ let vm = new Vue({
count: null,
skuImg: null
}));
// this.attrItem.map( item => item.categoryDesc.split(',').map( _item => this.allAttributes.push({
// text:_item,
// isSelected:false,
// amount:null,
// count:null,
// skuImg:null
// })) );
this.handleProductAttr_Batch = [];
this.attrItem.forEach( item => {
this.handleProductAttr_Batch.push({
categoryDesc : item.categoryDesc,
categoryName : item.categoryName
});
})
this.handleProductAttr_Batch.forEach( item => {
item.categoryDesc = item.categoryDesc.split(',');
item.categoryDescArr = [];
item.categoryDesc.forEach( _item => {
item.categoryDescArr.push({
name:_item,
isSelected: false
})
})
})
},
//切换批量选择按钮
changeSelectBtnArr(item, index) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论