Skip to content

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

4-10

上级 54027a52
显示空白字符变更
内嵌 并排
正在显示 包含 225 行增加 和 22 行删除
platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfstationitem.html
浏览文件 @ 35847f22
......@@ -155,7 +155,9 @@
text-align: center;
margin: 10px;
}
.text-center{
text-align: center;
}
.pp-flex-sb {
display: flex;
justify-content: space-between;
......@@ -304,6 +306,7 @@
height:700px;
background: white;
border-radius: 4px;
padding:20px;
}
.attribute-img-wrapper-close{
position: absolute;
......@@ -358,6 +361,31 @@
background-size: 100% 100%;
cursor: pointer;
}
.attribute-sku-tag{
padding:4px 8px;
border-radius: 4px;
border:1px solid #eee;
display: inline-block;
margin:5px;
cursor: pointer;
box-shadow: 2px 2px 2px #eee;
}
.attribute-sku-tag-active{
box-shadow: 2px 2px 2px rgba(255,0,0,0.3);
border-color: rgba(255,0,0,0.5);
}
.attr-img{
width:58px;
height:58px;
margin-right:10px;
object-fit: cover;
}
.confirm-btn{
position: absolute;
bottom:20px;
left:50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
......@@ -606,7 +634,7 @@
<!-- 选项 -->
<section class="form-wrapper">
<h4>选项</h4>
<section class="default-price">
<section class="default-price" v-show="!disabledChangeAttribute">
<h4>设置默认价格与库存
<i-switch v-model="setDefaultValue" :disabled="disabled">
<Icon type="md-checkmark"></Icon>
......@@ -634,6 +662,7 @@
style="width:100px;margin:0 25px;"
allow-create
@on-create="handleCreateSelect"
:disabled='disabledChangeAttribute'
>
<i-Option v-for="(option,index) in el.option" :value="option" :key="index">{{option}}
</i-Option>
......@@ -641,15 +670,19 @@
<!-- <select class="f-select" v-model="el.selected">
<option v-for="(option,index) in el.option">{{option}}</option>
</select>-->
<textarea @input="handleChangeContent" v-model="el.categoryDesc" cols="48" rows="2"
placeholder="请用逗号隔开各个选项"></textarea>
<textarea
:disabled='disabledChangeAttribute'
@input="handleChangeContent" v-model="el.categoryDesc" cols="48" rows="2"
placeholder="请用逗号隔开各个选项"
></textarea>
<!-- <i-button type="error" @click="delAttr(i)">删除</i-button> -->
<i-button :disabled="isDisabled" type="error" @click="confirmDel(i)">删除</i-button>
<i-button :disabled="disabledChangeAttribute" type="error" @click="confirmDel(i)">删除</i-button>
</li>
</transition-group>
<i-button
:disabled="isDisabled"
v-show="!disabledChangeAttribute"
:disabled="disabledChangeAttribute"
style="margin-left:10px;margin-bottom:10px;margin-top:10px;"
type="success"
@click="addAttr"
......@@ -657,10 +690,19 @@
</i-button>
<i-button
v-show="disabledChangeAttribute"
style="margin-left:10px;margin-bottom:10px;margin-top:10px;"
@click.stop="isShowAttributeContainer(true)"
>属性图片
</i-button>
<i-button
type="primary"
v-show="disabledChangeAttribute"
style="margin-left:10px;margin-bottom:10px;margin-top:10px;"
@click.stop="showBatchModel"
>批量操作
</i-button>
<!-- 上传图片-->
<div class="attribute-img-container" v-show="showAttributeImg">
<div class="attribute-img-mask"></div>
<div class="attribute-img-wrapper">
......@@ -669,9 +711,9 @@
<div class="attribute-img" v-for="(element,index) in AttributeImgArr">
<div class="attribute-img-remove-icon">
<Icon size="20" type="ios-eye-outline" ></Icon>
<Icon size="20" type="ios-trash-outline" @click="removeAttributeImg(element,index)"></Icon>
<Icon size="20" type="ios-trash-outline" @click="removeAttributeImg(element.img_path,index)"></Icon>
</div>
<img :src="element" @click="selectImg(element)">
<img :src="element.img_path" @click="selectImg(element.img_path)">
</div>
</div>
<div class="attribute-img-upload">
......@@ -692,11 +734,83 @@
</div>
</div>
<!-- 批量操作-->
<div class="attribute-img-container" v-show="showBatch">
<div class="attribute-img-mask"></div>
<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>
</div>
</Upload>
</div>
</div>
<div>
<h3 style="margin:20px 0;">属性价格</h3>
<i-input type="number" @on-change="changeBatch($event,'amount')" placeholder="属性价格"/>
</div>
<div>
<h3 style="margin:20px 0;">属性库存</h3>
<i-input type="number" @on-change="changeBatch($event,'count')" placeholder="属性库存"/>
</div>
<div class="confirm-btn">
<i-button type="primary" @click="saveBatchData()">保存</i-button>
</div>
</div>
</div>
<br/>
<i-button style="margin-left:10px;margin-bottom:10px;margin-top:10px;" @click="disabledChangeAttribute=true" v-show="!disabledChangeAttribute">
确定商品规格
</i-button>
<!-- 预览 -->
<section class="form-prev">
<h4>预览</h4>
<transition-group tag="ul" name="slide">
<li class="prev-li" v-for="(el,i) in prevItem" :key="i">
<li class="prev-li" v-for="(el,i) in prevItem" :key="i" >
<div class="prev-attr">
<img @click="HandleSelectAttributeImg(el,i)" width="42" height="42" :src="el.skuImg" v-if="el.skuImg" />
<div @click="HandleSelectAttributeImg(el,i)" class="default-img" v-else ></div>
......@@ -707,21 +821,21 @@
</div>
<div class="prev-price">
<span>价格</span>
<i-input v-model='el.skuPrice' size="small" placeholder="USD"/>
<i-input :disabled="!disabledChangeAttribute" v-model='el.skuPrice' size="small" placeholder="USD"/>
</div>
<div class="prev-count">
<span>数量</span>
<i-input v-model='el.skuCount' size="small" type="number" placeholder="0"/>
<i-input :disabled="!disabledChangeAttribute" v-model='el.skuCount' size="small" type="number" placeholder="0"/>
</div>
<div class="prev-code">
<span>商品编码</span>
<i-input v-model='el.skuCode' size="small" placeholder="0"/>
<i-input :disabled="!disabledChangeAttribute" v-model='el.skuCode' size="small" placeholder="0"/>
</div>
<i-button class="prev-del" type="warning" @click="del(i)">删除</i-button>
<i-button :disabled="!disabledChangeAttribute" class="prev-del" type="warning" @click="del(i)">删除</i-button>
</li>
</transition-group>
</section>
<!-- <i-button style="margin-left:10px;" type="primary" @click='save'>保存</i-button>-->
<i-button style="margin-left:10px;" type="primary" @click='save'>保存</i-button>
</section>
</Card>
......
platform-admin/src/main/webapp/js/sys/tbcfstationitem.js
浏览文件 @ 35847f22
......@@ -81,9 +81,90 @@ let vm = new Vue({
showAttributeImg:false, //显示属性图片模态框
AttributeImgArr:[],
skuListsIndex:null,//sku选中索引
disabledChangeAttribute:false,//禁止改变商品属性
showBatch:false,//显示批量操作模态框
selectBtnArr:[
{isSelected:false,title:'全选'},
{isSelected:false,title:'反选'},
{isSelected:false,title:'取消选择'}
],
allAttributes:[],//所有具体属性
batchAmount:0,
batchCount:0
},
methods: {
changeBatch(e,flag){
if(flag==='amount'){
this.batchAmount=e.target.value;
}else{
this.batchCount=e.target.value;
}
},
saveBatchData(){
let activeImgPath = '';
this.AttributeImgArr.map( item => {
item.isSelected?activeImgPath=item.img_path:null;
});
this.allAttributes.forEach( item => {
if(item.isSelected){
item.amount = this.batchAmount;
item.count = this.batchCount;
item.skuImg = activeImgPath;
return false;
}
})
// console.log(this.allAttributes);
let prevItemIndex = null;
this.prevItem.map( item => {
this.allAttributes.map( _item => {
if(item.skuDesc.includes(_item.text)){
item.skuImg = _item.skuImg;
item.skuPrice = _item.amount;
item.skuCount = _item.count;
return false;
}
})
})
console.log(this.prevItem);
this.showBatch = false;
},
//批处理图片选择
BatchSelectImg(item,index){
this.AttributeImgArr.map( (_item,_index) => _item.isSelected = false);
this.AttributeImgArr[index].isSelected = !this.AttributeImgArr[index].isSelected;
},
//批量处理单选属性
selectAttr(e,index){
this.allAttributes[index].isSelected = !this.allAttributes[index].isSelected;
},
//显示批量处理模态框
showBatchModel(){
this.showBatch = true;
//获取所有具体属性
this.allAttributes = [];
this.attrItem.map( item => item.categoryDesc.split(',').map( _item => this.allAttributes.push({
text:_item,
isSelected:false,
amount:null,
count:null,
skuImg:null
})) );
},
//切换批量选择按钮
changeSelectBtnArr(item,index){
this.selectBtnArr.map( (_item,_index) => _index!==index?_item.isSelected = false:null);
this.selectBtnArr[index].isSelected = !this.selectBtnArr[index].isSelected;
if(index===0){
this.allAttributes.map( item => item.isSelected = true);
}else if(index===1){
this.allAttributes.map( item => item.isSelected = !item.isSelected);
}else{
this.allAttributes.map( item => item.isSelected = false);
}
},
selectImg(url){
// console.log(this.prevItem[this.skuListsIndex]);
this.prevItem[this.skuListsIndex].skuImg = url;
......@@ -92,8 +173,12 @@ let vm = new Vue({
},
//单条sku选择图片
HandleSelectAttributeImg(e,i){
if(!this.disabledChangeAttribute){
window.alert('请先确认商品规格后再操作。(确认商品规格后将不可再次编辑规格数据)');
}else{
this.showAttributeImg = true;
this.skuListsIndex = i;
}
},
//删除属性图片
removeAttributeImg(e,i){
......@@ -115,7 +200,10 @@ let vm = new Vue({
},
//处理属性图片上传成功回调
handleAttributeImgSuccess(e){
this.AttributeImgArr.push(e);
this.AttributeImgArr.push({
img_path:e,
isSelected:false
});
console.log(e);
// this.delAttributeImg(e);
},
......@@ -331,7 +419,8 @@ let vm = new Vue({
reload: function (event) {
this.prevItem = []
this.attrItem = []
this.isDisabled = false
// this.isDisabled = false
this.disabledChangeAttribute = false
vm.showList = true;
let page = $("#jqGrid").jqGrid('getGridParam', 'page');
$("#jqGrid").jqGrid('setGridParam', {
......@@ -531,7 +620,7 @@ let vm = new Vue({
return result.map(arr => arr.join('/'))
}
// this.prevItem = [];
this.prevItem = [];
let contentArr = [] // 属性通过','分割后的数组
this.attrItem.map(item => {
let formatter = []
......@@ -544,8 +633,8 @@ let vm = new Vue({
let skuName = '' //sku组合名
let skuArr = []
contentArr.forEach((item_a, index_a) => {
skuName += item_a.name + '/'
skuArr.push(item_a.size)
skuName += item_a.name + '/';
skuArr.push(item_a.size);
})
skuName = skuName.slice(0, skuName.length - 1);
......@@ -600,8 +689,8 @@ let vm = new Vue({
},
/* 保存 */
save() {
console.log(this.attrItem);
console.log(this.prevItem) //sku组合数组
console.log(this.putaway) //是否立即上架
},
/* 获取标签数据*/
getTagsData() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论