库存规格

src/views/platform/self-operated-mall/components/add_product.vue

@@ -55,17 +55,78 @@
                 <el-button type="primary" @click="save">保存</el-button>
                 <el-button @click="$emit('close')">关闭</el-button>
             </el-tab-pane>
-            <el-tab-pane label="库存规格" name="spec"></el-tab-pane>
+            <el-tab-pane label="库存规格" name="spec">
+                <el-row type="flex" justify="center">
+                    <el-col :span="2">
+                        <div class="left-title">库存/规格</div>
+                    </el-col>
+                    <el-col :span="16">
+                        <el-input placeholder="输入规格名称">
+                            <template slot="append">
+                                <el-button>添加规格</el-button>
+                            </template>
+                        </el-input>
+                        <div class="top">
+                            <tag-list label="尺寸" @change-tags="(tags) => { console.info(tags) }" />
+                            <tag-list label="颜色" @change-tags="(tags) => { console.info(tags) }" />
+                        </div>
+                        <el-table class="spec-table" :data="specList" :span-method="arraySpanMethod" border>
+                            <el-table-column label="尺寸" align="center">
+                                <template slot-scope="scope">
+                                    <span v-if="scope.row === undefined">批量设置</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="颜色" align="center">
+
+                            </el-table-column>
+                            <el-table-column label="价格" align="center">
+                                <template slot-scope="scope">
+                                    <el-input v-if="scope.row === undefined">
+                                        <template slot="append">
+                                            <el-button>设置</el-button>
+                                        </template>
+                                    </el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="吊牌 价格" align="center">
+                                <template slot-scope="scope">
+                                    <el-input v-if="scope.row === undefined">
+                                        <template slot="append">
+                                            <el-button>设置</el-button>
+                                        </template>
+                                    </el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="库存" align="center">
+                                <template slot-scope="scope">
+                                    <el-input v-if="scope.row === undefined">
+                                        <template slot="append">
+                                            <el-button>设置</el-button>
+                                        </template>
+                                    </el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="图片" align="center"></el-table-column>
+                        </el-table>
+                    </el-col>
+
+                </el-row>
+
+            </el-tab-pane>
         </el-tabs>
 
     </div>
 </template>
 <script>
 import { mapState } from 'vuex'
+import TagList from "./tag_list"
 export default {
     name: "AddProduct",
+    components: { TagList },
     data() {
         return {
+            //库存数据
+            specList: [undefined],
             // 最大上传文件数
             maxFileCount: 2,
             //最大上传文件体积 单位字节
@@ -84,6 +145,18 @@ export default {
         }
     },
     methods: {
+        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+            if (rowIndex === this.specList.length - 1) {
+                switch (columnIndex) {
+                    case 0: return [1, 2]
+                    case 1: return [0, 0]
+                    default: return [1, 1]
+                }
+            } else {
+                return [1, 1]
+            }
+        },
+        // 设置主图
         setPrimary(index) {
 
             let _index = this.form.fileList.findIndex(item => item.primary)
@@ -136,7 +209,23 @@ export default {
     },
 }
 </script>
-<style>
+<style  lang="scss">
+.spec-table {
+    margin-top: 10px;
+
+    thead th {
+        background-color: #fff !important;
+    }
+}
+
+.top {
+    margin-top: 5px;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+
+}
+
 .img {
     width: 145px;
     height: 145px;
@@ -149,6 +238,10 @@ export default {
     font-size: 50px;
 }
 
+.left-title {
+    font-size: 16px;
+}
+
 .title {
     color: rgba(16, 16, 16, 1);
     font-size: 16px;

src/views/platform/self-operated-mall/components/tag_list.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <div class="size">
+            <i class="el-icon-delete"></i>
+            <span>{{ this.label }}</span>
+            <i class="el-icon-delete" @click="tags = []"></i>
+        </div>
+
+        <el-row class="add" type="flex" justify="space-between">
+            <el-col :span="11">
+                <el-input v-model="value">
+                    <template slot="append">
+                        <el-button @click="addTag">添加</el-button>
+                    </template>
+                </el-input>
+            </el-col>
+            <el-col :span="11">
+                <el-tag v-for="(tag, index) in tags" :key="tag.name" closable :type="tag.type"
+                    @close="tags.splice(index, 1)">
+                    {{ tag.name }}
+                </el-tag>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+export default {
+    name: "TagList",
+    props: {
+        label: String
+    },
+    data() {
+        return {
+            //当前尺寸文本
+            value: '',
+            tags: [],
+        }
+    },
+    methods: {
+
+        addTag() {
+            let value = this.value
+            if (value) {
+                if (this.tags.find(item => item.name === value)) {
+                    this.$modal.msgWarning(`请问重复添加${value}`)
+                } else {
+                    this.tags.push({ name: value, type: '' })
+                    this.value = ''
+                }
+            }
+        }
+    },
+    watch: {
+        tags(value) {
+            this.$emit('change-tags', value)
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.add {
+    background-color: #ffffff;
+    padding: 5px;
+
+    &>div:last-child {
+        display: flex;
+        align-items: center;
+        overflow-x: auto;
+
+        &>span {
+            margin-left: 5px;
+        }
+    }
+}
+
+.size {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 10px;
+
+    &>span {
+        font-weight: bold;
+    }
+
+    &>i:first-child {
+        visibility: hidden;
+    }
+
+    &>i:last-child {
+        color: red;
+    }
+}
+</style>