From bc9638e74c690748f09ca280f23c1e5bf85d6c15 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 18:51:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sales/product/form/step2.vue | 165 ++++++++++++++++++++++---
 1 file changed, 149 insertions(+), 16 deletions(-)

diff --git a/src/views/sales/product/form/step2.vue b/src/views/sales/product/form/step2.vue
index c445c3a..dee84b4 100644
--- a/src/views/sales/product/form/step2.vue
+++ b/src/views/sales/product/form/step2.vue
@@ -3,23 +3,81 @@
         <el-scrollbar class="step-content">
             <el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
                 <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>
+                    <ul class="flex">
+                        <li 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>
+                        </li>
+                        <li v-for="(sku, i) in form.skus" :key="i" class="flex">
+                            <div class="left">
+                                <span class="label">{{ sku.name }}:</span>
+                                <el-tag
+                                    v-for="(item, j) in sku.values"
+                                    :key="i + '' + j"
+                                    closable
+                                    @close="handleDelValue(sku, j)"
+                                >
+                                    {{ item }}
+                                </el-tag>
+                                <el-input v-model="skuValue[i]">
+                                    <template #append>
+                                        <el-button @click="handleAddValue(sku, i)"><el-icon name="Check" /></el-button>
+                                    </template>
+                                </el-input>
+                            </div>
+                            <div class="right">
+                                <el-button :disabled="i === 0" type="text" @click="handleMove(i, i - 1)">
+                                    上移
+                                </el-button>
+                                <el-button
+                                    :disabled="i === form.skus.length - 1"
+                                    type="text"
+                                    @click="handleMove(i, i + 1)"
+                                >
+                                    下移
+                                </el-button>
+                                <el-button type="text" @click="handleDelSku(i)">删除</el-button>
+                            </div>
+                        </li>
+                    </ul>
+                    <el-table border :data="form.skuInfos" style="width: 100%">
+                        <el-table-column
+                            v-for="(sku, index) in form.skus"
+                            :key="index"
+                            :label="sku.name"
+                            :prop="'attr' + index"
+                        />
+                        <el-table-column label="售价（元）" prop="sales">
+                            <template #default="{ row }">
+                                <el-input-number v-model="row.sales" />
                             </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>
+                        </el-table-column>
+                        <el-table-column label="商品库存" prop="inventory">
+                            <template #default="{ row }">
+                                <el-input-number v-model="row.inventory" />
                             </template>
-                        </el-input>
-                    </div>
+                        </el-table-column>
+                        <el-table-column label="成本价（元）" prop="price">
+                            <template #default="{ row }">
+                                <el-input-number v-model="row.price" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="库存预警值" prop="warn">
+                            <template #default="{ row }">
+                                <el-input-number v-model="row.warn" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="SKU编号" prop="no" />
+                        <el-table-column label="启用" prop="enabled">
+                            <template #default="{ row }">
+                                <el-switch v-model="row.enabled" />
+                            </template>
+                        </el-table-column>
+                    </el-table>
                 </el-form-item>
                 <el-form-item label="商品图片" prop="picture">
                     <el-upload-image v-model="form.picture" config-id="product" :limit="5" />
@@ -42,6 +100,7 @@
             const route = useRoute();
             const router = useRouter();
             const store = useStore();
+            const { proxy } = getCurrentInstance();
 
             const state = reactive({
                 loading: false,
@@ -52,6 +111,7 @@
                 form: {
                     id: '123',
                     skus: [],
+                    skuInfos: [],
                     picture: [],
                     desc: null,
                 },
@@ -69,7 +129,52 @@
                 }
             };
             onActivated(handleLoad);
-            const handleAddSku = () => {};
+            watch(
+                () => state.form.skus,
+                (skus) => {
+                    state.form.skuInfos = skus.reduce(
+                        (info, sku) => {
+                            let res = [];
+                            info.forEach((row) => {
+                                sku.values.forEach((value) => {
+                                    res.push({ ...row, ['attr' + state.form.skus.indexOf(sku)]: value });
+                                });
+                            });
+                            return res;
+                        },
+                        [{ sales: 0, inventory: 0, price: 0, warn: 100 }]
+                    );
+                },
+                { immediate: true, deep: true }
+            );
+            const handleAddSku = () => {
+                if (state.skuName) {
+                    state.form.skus.push({ name: state.skuName, values: [] });
+                    state.skuName = null;
+                } else {
+                    proxy.$message.error('请输入属性规格');
+                }
+            };
+            const handleDelSku = (index) => {
+                state.form.skus.splice(index, 1);
+            };
+            const handleMove = (oldIndex, newIndex) => {
+                let temp = state.form.skus[oldIndex];
+                state.form.skus[oldIndex] = state.form.skus[newIndex];
+                state.form.skus[newIndex] = temp;
+            };
+            const handleAddValue = (sku, index) => {
+                let value = state.skuValue[index];
+                if (value) {
+                    sku.values.push(value);
+                    state.skuValue[index] = null;
+                } else {
+                    proxy.$message.error('请输入属性值');
+                }
+            };
+            const handleDelValue = (sku, index) => {
+                sku.values.splice(index, 1);
+            };
             const handleSave = async () => {
                 state.loading = true;
                 try {
@@ -92,6 +197,10 @@
                 opts,
                 handleSave,
                 handleAddSku,
+                handleDelSku,
+                handleMove,
+                handleAddValue,
+                handleDelValue,
             };
         },
     });
@@ -111,6 +220,30 @@
                     width: 50%;
                 }
             }
+            ul.flex {
+                width: 100%;
+                flex-direction: column;
+                .el-input {
+                    width: 160px;
+                }
+                li {
+                    align-items: center;
+                    &:not(:first-child) {
+                        justify-content: space-between;
+                    }
+                    .el-tag {
+                        + .el-tag {
+                            margin-left: @layout-space;
+                        }
+                        + .el-input {
+                            margin-left: @layout-space;
+                        }
+                    }
+                    + li {
+                        margin-top: @layout-space;
+                    }
+                }
+            }
             .label {
                 word-break: keep-all;
                 margin-right: @layout-space;