cashier-admin/src/views/product/components/addGroup.vue

<template>
    <div>
        <el-dialog title="添加分组" :visible.sync="dialogVisible" @close="reset">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
                <el-form-item label="分组名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入分组名称"></el-input>
                </el-form-item>
                <el-form-item label="选择商品">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show()">
                            添加商品
                        </el-button>
                    </div>
                    <div class="shop_list">
                        <div class="item" v-for="(item, index) in productIds" :key="item.id" :data-index="index + 1"
                            @click="productIds.splice(index, 1)">
                            <el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="分组状态">
                    <el-radio-group v-model="form.isShow">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分组排序">
                    <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
            </span>
        </el-dialog>
        <shopList ref="shopListRef" @success="res => productIds = res" />
    </div>
</template>

<script>
import { tbProductGroupPost, tbProductGroupPut, productListGet } from '@/api/shop'
import shopList from './shopList'
export default {
    components: {
        shopList
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            form: {
                id: '',
                name: '',
                isShow: 1,
                sort: 0,
                productIds: [],
                shopId: localStorage.getItem('shopId')
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            },
            productIds: []
        }
    },
    methods: {
        onSubmitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.loading = true
                    try {
                        this.form.productIds = this.productIds.map(item => item.id);
                        let res = null
                        if (!this.form.id) {
                            await tbProductGroupPost(this.form)
                        } else {
                            await tbProductGroupPut(this.form)
                        }
                        this.loading = false
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        },
        async getProduts() {
            try {
                const res = await productListGet({
                    productList: this.form.productIds
                })
            } catch (error) {
                console.log(error)
            }
        },
        show(obj) {
            if (obj && obj.id) {
                this.form.id = obj.id
                this.form.isShow = obj.isShow
                this.form.name = obj.name
                this.form.sort = obj.sort
                this.form.productIds = obj.productIds
                this.getProduts()
            }
            this.dialogVisible = true
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form.isShow = 1
            this.form.name = ''
            this.form.sort = 0
            this.form.productIds = []
            this.productIds = []
        }
    }
}
</script>

<style scoped lang="scss">
.shop_list {
    display: flex;
    flex-wrap: wrap;

    .item {
        $size: 80px;
        $radius: 4px;
        width: $size;
        height: $size;
        border-radius: $radius;
        overflow: hidden;
        position: relative;
        margin-right: 10px;
        margin-top: 10px;

        &:hover {
            cursor: pointer;

            &::before {
                transform: translateY(0);
            }
        }

        &::after {
            content: attr(data-index);
            font-size: 12px;
            height: 20px;
            display: flex;
            padding: 0 10px;
            border-radius: 0 0 $radius 0;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }

        &::before {
            content: '删除';
            font-size: 12px;
            width: 100%;
            height: 20px;
            display: flex;
            padding: 0 10px;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 10;
            transform: translateY(100%);
            transition: all .1s ease-in-out;
        }
    }
}
</style>