SKU 產品組合

背景介紹：在重構專案做到產品新增（專案有關的產品分為線上課程，線下課程，音訊課程，視訊課程等）的時候，把產品的屬性分為SKU屬性（類似電商），動態屬性。其中動態屬性包括普通場景，表單場景和複訓場景等。在新增SKU屬性的時候，由於專案比較緊急，而且手上還有別的專案需要維護，暫時只做了個二維的SKU組合，但後來需要三維甚至更多的SKU組合，又特地優化一下，故此記錄一下。

環境介紹

vue + element

前端程式碼（精簡版）

<template>
    <div>
        <div>SKU組合demo</div>
        <div v-for="(v, i) in list" :key="i" class="mt-20">
            <!--<b>{{ v.name }}：</b>-->
            <el-checkbox-group v-model="checkList[i].list">
                <el-checkbox v-for="(k, j) in v.list" :key="j" :label="k" />
            </el-checkbox-group>
        </div>

         <div class="mt-20">
           <el-button type="primary" @click="handleClick">確定</el-button>
         </div>

         <div class="mt-20">
           <el-tag v-for="(item, index) in skuList" :key="index" style="margin:10px 10px;">{{ item }}</el-tag>
         </div>
    </div>
</template>

<script>
    export default {
        name: "Sku",
        data(){
            return {
                list: [
                     { name: '尺碼', list: ['S', 'M', 'L', 'XL', 'XXL'] },
                     { name: '顏色', list: ['紅色', '黃色', '藍色', '粉色', '紫色'] },
                     { name: '圖案', list: ['貓咪', '人物', '飛機', '閃電', '字母'] }
                ],
                checkList: [
                    { name: '尺碼', list: [] },
                    { name: '顏色', list: [] },
                    { name: '圖案', list: [] }
                ],
                skuArray: [],
                skuList: [],
            }
        },
        methods: {
            handleClick() {
                // 先清空資料，保證連續點選按鈕，資料不會重複
                this.skuArray = []
                this.skuList = []
                // 將選中的規格組合成一個大陣列 [[1, 2], [a, b]...]
                this.checkList.forEach(element => {
                    element.list.length > 0 ? this.skuArray.push(element.list) : ''
                })
                // 勾選了規格，才呼叫方法
                if (this.skuArray.length > 0) {
                    this.getSkuData([], 0, this.skuArray)
                } else {
                    this.$message.error('請先勾選規格')
                }
            },
            // 遞迴獲取每條SKU資料
            getSkuData(skuArr = [], i, list) {
                for (let j = 0; j < list[i].length; j++) {
                    if (i < list.length - 1) {
                        skuArr[i] = list[i][j]
                        this.getSkuData(skuArr, i + 1, list) // 遞迴迴圈
                    } else {
                        this.skuList.push([...skuArr, list[i][j]]) // 擴充套件運算子，連線兩個陣列
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .mt-20 {
        margin-top: 20px;
    }
</style>

效果

優化

由於是公司專案，在此就不貼出具體程式碼，大致講一下優化思路好了。

1、產品SKU屬性下面增加表格
2、各個產品SKU的組合名，價格，描述，庫存，圖片等支援編輯和刪除
3、SKU圖片支援預覽
4、新增SKU組合時，監控組合，避免重複編輯
5、取消所有SKU組合時，表格隱藏等
6、抽取共同部分做成元件更好

希望對各位朋友有所幫助，如果覺得不錯，點個贊吧

本作品採用《CC 協議》，轉載必須註明作者和本文連結