From 8e0d8d36459492dec02eac540086521f3e95ecf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Wed, 20 Apr 2022 14:05:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sales/product/form/step2.vue | 29 +++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/views/sales/product/form/step2.vue b/src/views/sales/product/form/step2.vue
index 2cd400b..c445c3a 100644
--- a/src/views/sales/product/form/step2.vue
+++ b/src/views/sales/product/form/step2.vue
@@ -2,7 +2,25 @@
     <div v-loading="loading" class="step-container">
         <el-scrollbar class="step-content">
             <el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
-                <el-form-item label="商品属性" prop="category">设置商品属性</el-form-item>
+                <el-form-item label="商品属性" prop="category">
+                    <div class="flex">
+                        <span class="label">属性规格:</span>
+                        <el-input v-model="skuName">
+                            <template #append>
+                                <el-button @click="handleAddSku"><el-icon name="Check" /></el-button>
+                            </template>
+                        </el-input>
+                    </div>
+                    <div v-for="(sku, i) in form.skus" :key="i" class="flex">
+                        <span class="label">尺码:</span>
+                        <el-tag v-for="(item, j) in sku.values" :key="i + '' + j">{{ item }}</el-tag>
+                        <el-input v-model="skuValue[i]">
+                            <template #append>
+                                <el-button><el-icon name="Check" /></el-button>
+                            </template>
+                        </el-input>
+                    </div>
+                </el-form-item>
                 <el-form-item label="商品图片" prop="picture">
                     <el-upload-image v-model="form.picture" config-id="product" :limit="5" />
                 </el-form-item>
@@ -29,8 +47,11 @@
                 loading: false,
                 refsForm: null,
                 currentTab: 'APP',
+                skuName: null,
+                skuValue: [],
                 form: {
                     id: '123',
+                    skus: [],
                     picture: [],
                     desc: null,
                 },
@@ -48,6 +69,7 @@
                 }
             };
             onActivated(handleLoad);
+            const handleAddSku = () => {};
             const handleSave = async () => {
                 state.loading = true;
                 try {
@@ -69,6 +91,7 @@
                 ...toRefs(state),
                 opts,
                 handleSave,
+                handleAddSku,
             };
         },
     });
@@ -88,6 +111,10 @@
                     width: 50%;
                 }
             }
+            .label {
+                word-break: keep-all;
+                margin-right: @layout-space;
+            }
         }
         .step-footer {
             margin: 10px 0;