feat: 商品属性

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;