添加细粒度价格操作功能

platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfstationitem.html

@@ -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,7 +813,8 @@
                         <div class="attribute-img-wrapper">
                             <h2 class="text-center">批量操作</h2>
                             <i class="attribute-img-wrapper-close" @click.stop="showBatch=false">x</i>
-
+                            <Tabs active-key="key1">
+                                <Tab-pane label="图片操作" key="key1">
                                     <div>
                                         <i-button
                                                 shape="circle"
@@ -860,9 +873,40 @@
                                         <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

@@ -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) {