hx-mini-web/src/views/manage/goods/components/form.vue

<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{ titleMap[mode] }}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <fieldset>
                        <legend><el-tag>基础信息</el-tag></legend>
                        <el-row :gutter="15">
                            <el-col :span="24">
                                <el-form-item label="所属店铺" prop="store_id">
                                    <el-input v-model="formData.store_id" placeholder="所属店铺" clearable readonly :style="{ width: '100%' }" @click="selectUser">
                                        <template #append>
                                            <el-tooltip
                                                effect="dark"
                                                content="点这里，清除选择"
                                                placement="top-start"
                                            >
                                            <div class="remove-a" @click="clearUser">清除</div>
                                            </el-tooltip>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商品标题" prop="product_name">
                                    <el-input v-model="formData.product_name" clearable placeholder="请输入"></el-input>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="快递面单名称" prop="express_name">
                                    <el-input v-model="formData.express_name" clearable placeholder="请输入"></el-input>
                                    <div class="el-form-item-msg">不填写默认使用商品标题名称</div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="来客团单ID" prop="out_id">
                                    <el-input v-model="formData.out_id" clearable placeholder="请输入"></el-input>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品价格" prop="product_price">
                                    <el-input v-model="formData.product_price" clearable placeholder="请输入">
                                        <template #append>元</template>
                                    </el-input>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品划线价格" prop="product_origin">
                                    <el-input v-model="formData.product_origin" clearable placeholder="请输入">
                                        <template #append>元</template>
                                    </el-input>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="商品图片" prop="product_img">
                                    <sc-upload v-model="formData.product_img" tip="最多上传100个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload>
                                    <div class="el-form-item-msg">选填</div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </fieldset>
                    <fieldset>
                        <legend><el-tag>商品附加规格</el-tag></legend>
                        <el-button type="primary" size="small" @click="addSpecs" v-if="specs.length<5">添加规格分组</el-button>
                        <div class="specs" v-for="(item,indx) in specs" :key="indx">
                            <div class="specs-header">
                                <div class="specs-left">
                                    <el-input v-model="item.name" placeholder="组名称" clearable>
                                        <template #prepend>组名称</template>
                                    </el-input>
                                    <el-select v-model="item.num" clearable placeholder="请选择数量" v-if="item.list.length > 1">
                                        <el-option :value="len" :label="item.list.length+'选'+len" v-for="len in item.list.length"></el-option>
                                    </el-select>
                                </div>
                                <div class="specs-right">
                                    <el-button type="primary" @click="addItem(indx)">增加</el-button>
                                    <el-button type="danger" @click="removeSpec(indx)">删除</el-button>
                                </div>
                            </div>
                            <div class="specs-body">
                                <div class="body-item" v-for="(its,ind) in item.list" :key="ind">
                                    <div class="item-img"><sc-upload v-model="its.img"></sc-upload></div>
                                    <el-input placeholder="输入规格属性名" v-model="its.name" clearable>
                                        <template #append>
                                            <el-button type="danger" @click="removeItem(indx,ind)" icon="el-icon-delete" size="small"></el-button>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </el-form>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" >取 消</el-button>
                <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
    <storeData ref="storeData" :multiple="false" @success="handleSuccess"></storeData>
</template>

<script>
import storeData from "@/views/manage/components/store";
export default {
    components: {
        storeData
    },
    data(){
        return {
            loading: false,
            mode:"add",
            titleMap:{
                add:"新增商品",
                edit:"编辑商品"
            },
            visible: false,
            isSaveing: false,
            specs:[],
            formData:{},
            rules:{
                store_id: [
                    {required: true, message: '请选择'}
                ],
                out_id: [
                    {required: true, message: '请输入'}
                ],
                product_name: [
                    {required: true, message: '请输入'}
                ],
                product_price: [
                    {required: true, message: '请输入'}
                ],
                product_origin: [
                    {required: true, message: '请输入'}
                ],
            }
        }
    },
    methods:{
        addSpecs(){
            if (this.specs.length >= 5) {
                return this.$message.error("最多只能添加三组规格")
            }
            this.specs.push({"name":"","num":1,"list":[ {"name":"","img":"","check":true} ]});
        },
        addItem(index){
            if (this.specs[index].list.length >= 20) {
                return this.$message.error("最多只能添加20个")
            }
            this.specs[index].list.push({"name":"","img":"","check":true})
        },
        removeSpec(index){
            this.specs.splice(index,1)
        },
        removeItem(index,sub){
            this.specs[index].list.splice(sub,1)
        },
        handleSuccess(data){
            this.formData.store_id = data.store_id;
        },
        clearUser(){
            this.formData.store_id = "";
        },
        selectUser(){
            this.$nextTick(() => {
                this.$refs.storeData.open()
            })
        },
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            if (this.mode == 'edit') {
                this.specs = data.data_specs?data.data_specs:[];
            }
        },
        async submit(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            let submitData = JSON.parse(JSON.stringify(this.formData));
            if (this.specs.length > 0) {
                submitData.data_specs = JSON.stringify(this.specs);
            }
            var resp = await this.$API.goods.save.post(submitData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            this.visible = false;
            this.formData = {};
            this.specs = [];
            this.submitState = false;
            this.$emit("success");
        }
    }
}
</script>

<style>
.specs{margin-top: 15px;background-color: #f8f8f8;}
.specs-header{
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #f8f8f8;
    background-color: #ddd;
    padding: 10px;
}
.specs-header .specs-left{
    display: flex;
    align-items: center;
    gap: 10px;
}
.specs-header .specs-right{
    display: flex;
    margin-left: auto;
    margin-right: 0;
}
.specs-body{display: flex;align-items: center;gap: 10px;padding: 10px;flex-direction: row;flex-wrap: wrap;}
.specs-body .body-item{width: calc(25% - 10px);border: 1px solid #ddd;padding: 5px;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.item-img{margin-bottom: 5px;}
</style>