SKU_庫存

先上一個示意圖

1.先說一下思路：

每次選擇條件時，撈出庫存不為0的值，將其屬性組成一個集合，非選擇項的每一個屬性值看是否存在於這個集合，是就可選，不是則不可選。 就是這麼簡單。

        直接擼程式碼吧。
複製程式碼

<template>
    <div class="sku">
        <div v-for="(key,index) in keys">
            <div class="tabContent">
                {{key.name}}:
                <input type="button"   @click="itemSelect(index,i,item)" v-for="(item, i) in key.items" :class="{block: !item.block, active: item.active, 'sku':true}" v-model="item.value" />
            </div>
        </div>
    </div>
</template>
複製程式碼

data 裡面的資料

data() {
    return{
         //有庫存資料
        sku_list:  [
            {'attrs':'10,20,30,40','num':120},
            {'attrs':'10,21,30,40','num':10},
            {'attrs':'10,22,30,40','num':28},
            {'attrs':'10,22,31,41','num':220},
            {'attrs':'10,22,32,40','num':130},
            {'attrs':'11,23,32,41','num':120},
        ],
         keys: [
                {
                    name: '顏色',
                    items: [{
                        value: '9', active: false ,block:false           
                    },{
                        value: '10',active: false ,block:false    
                    },{
                        value: '11',active: false   ,block:false  
                    }]
                },
                {
                    name: '大小',
                    items: [{
                        value: '20',active: false  ,block:false   
                    },{
                        value: '21',active: false   ,block:false  
                    },{
                        value: '22',active: false  ,block:false   
                    },{
                        value: '23',active: false   ,block:false  
                    }]
                },{
                    name: '尺寸',
                     items: [{
                        value: '30',active: false  ,block:false   
                    },{
                        value: '31',active: false   ,block:false  
                    },{
                        value: '32',active: false   ,block:false  
                    }]
                },
                {
                    name: '年齡',
                    items: [{
                        value: '40',active: false   ,block:false  
                    },{
                        value: '41',active: false   ,block:false  
                    }]
                }
            ],
             select: [], 
    }
}

複製程式碼

方法：

//組建 存在庫存 的集合
pros_in_skulist(arr = this.sku_list) {
    let pro_all_in = [];
    arr.forEach(item =>{              
        pro_all_in = pro_all_in.concat(item['attrs'].split(','))
    });
    return pro_all_in
}
複製程式碼

主體部分

created() {
    //初始化資料 庫存為0的選項不可選
    this.keys.forEach(item => {
        for(let key in item ) {
            item.items.forEach(i => {
                if(this.pros_in_skulist().includes(i['value'])) {
                    i.block = true;
                }else{
                    i.block = false;
                };
            })
        }
    });
},
複製程式碼

//點選篩選條件
itemSelect(index, count, scope) {  
    //新增條件屬性
    this.select[index] = (this.select[index] && scope.value === this.select[index]) ? '': scope.value;
    // 點選背景高亮
    this.keys[index]['items'][count]['active'] = this.select[index] == this.keys[index]['items'][count]['value']? true: false;
    this.keys[index]['items'].forEach((v, i) => {
        if(i != count) {
            v.active = false;
        }
    })   
    //選擇條件之後篩選出 庫存不為0的庫存
    let pros_in = []
    this.sku_list.forEach( v => {
        if(
            this.select.every(function(vm) {
            <!--此處考慮到取消選擇 值為空的情況-->
                if(vm) {
                    return v['attrs'].split(',').includes(vm)
                }else{
                    return true
                }
            })
        ) {
            pros_in.push(v)
        }
    })
    //記錄選擇的條件位置
    let ARRINDEX = [];
    this.select.forEach((VAL, INDEX) => {
        if(VAL) {
            ARRINDEX.push(INDEX)
        }
    });
    //拿未選擇條件項的屬性 去存在庫存集合去對比，
    let pros_has_in = this.pros_in_skulist(pros_in);
    for(let I = 0; I < this.keys.length; I++) {
        if(!ARRINDEX.includes(I)) {                       
            this.keys[I]['items'].forEach( i => {                                     
                if(pros_has_in.includes(i['value'])) {
                    i.block = true;
                }else{
                    i.block = false;
                };
            })
        }             
    }
},
複製程式碼