优化添加商品问题新增添加设备

2024-03-13 09:05:08 +08:00
parent d0f69f9eb9
commit 87d084dfed
24 changed files with 1251 additions and 281 deletions
--- a/src/components/classify/index.vue
+++ b/src/components/classify/index.vue
@@ -0,0 +1,119 @@
+<template>
+    <el-dialog title="选择分类" :visible.sync="dialogVisible">
+        <div class="list" v-loading="loading">
+            <div class="row" v-for="(item, index) in categorys" :key="item.id">
+                <div class="list_title">{{ item.name }}</div>
+                <div class="item_wrap">
+                    <el-button :type="item.active ? 'primary' : ''" @click="selectHandle(item)">全部</el-button>
+                    <el-button :type="item.active ? 'primary' : ''" v-for="val in item.childrenList" :key="val.id"
+                        @click="selectHandle(val, index)">{{
+        val.name }}</el-button>
+                </div>
+            </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { tbShopCategoryGet } from '@/api/shop'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            loading: false,
+            categorys: []
+        }
+    },
+    mounted() {
+        this.tbShopCategoryGet()
+    },
+    methods: {
+        // 确认选择分类
+        onSubmitHandle() {
+            let categorys = []
+            for (let item of this.categorys) {
+                if (item.active) {
+                    categorys.push({
+                        name: `${item.name}`,
+                        id: item.id
+                    })
+                }
+                if (item.childrenList.length) {
+                    for (let val of item.childrenList) {
+                        if (val.active) {
+                            categorys.push({
+                                name: `${val.name}`,
+                                id: val.id
+                            })
+                        }
+                    }
+                }
+            }
+            this.$emit('success', categorys)
+            this.dialogVisible = false
+        },
+        // 选择分类
+        selectHandle(item, index = -1) {
+            if (index != -1) {
+                this.categorys[index].childrenList.map(val => {
+                    val.active = false
+                })
+            }
+            item.active = !item.active
+        },
+        // 获取分类
+        async tbShopCategoryGet() {
+            try {
+                this.loading = true
+                const res = await tbShopCategoryGet({
+                    shopId: localStorage.getItem('shopId'),
+                    sort: 'sort,desc',
+                    page: 0,
+                    size: 500
+                })
+                res.content.map(item => {
+                    item.active = false
+                    item.childrenList.map(item => {
+                        item.active = false
+                    })
+                })
+                this.categorys = res.content
+
+                setTimeout(() => {
+                    this.loading = false
+                }, 300);
+            } catch (error) {
+                console.log(error)
+                this.loading = false
+            }
+        },
+        show() {
+            this.dialogVisible = true
+            this.tbShopCategoryGet()
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.list {
+    min-height: 200px;
+
+    .row {
+        padding-bottom: 20px;
+
+        .list_title {
+            color: #999;
+            padding-bottom: 10px;
+        }
+
+        .item_wrap {
+            display: flex;
+        }
+    }
+}
+</style>