erp/resources/frontend/src/views/group/addGroup.vue

<template>
    <div>
        <el-card style="margin-top: 10px" class="box-card">
            <el-form ref="formInline" :model="formInline" label-width="80px">
                <el-form-item label="店铺">
                    <el-select v-model="formInline.region" placeholder="店铺">
                        <el-option label="花里有品" value="1"></el-option>
                        <el-option label="花富贵儿" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动标题">
                    <el-input type="textarea" v-model="formInline.title"></el-input>
                </el-form-item>
                <el-form-item label="团购商品">
                    <el-button @click="centerDialogVisible = true">从商品列表导入</el-button>
                    <el-input placeholder="搜索商品名称、编码" v-model="input2" style="margin-left: 20px; width: 400px;">
                        <template slot="append">查询</template>
                    </el-input>
                    <div>
                        <span style="margin-right: 20px;">商品状态</span>
                        <el-button type="text">全部(100)</el-button>
                        <el-button type="text">在售中(80)</el-button>
                        <el-button type="text">已售罄(20)</el-button>
                    </div>
                    <el-table v-loading="loading" :data="tableData" border style="width: 100%" height="800">
                        <el-table-column prop="sort" label="序号">
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称">
                        </el-table-column>
                        <el-table-column prop="sku_name" label="规格">
                        </el-table-column>
                        <el-table-column prop="category" label="分类">
                        </el-table-column>
                        <el-table-column prop="stock" label="库存">
                        </el-table-column>
                        <el-table-column prop="limit_buy" label="限购数量">
                        </el-table-column>
                        <el-table-column prop="market_price" label="划线价">
                        </el-table-column>
                        <el-table-column prop="编码" label="编码">
                        </el-table-column>
                        <el-table-column prop="价格" label="价格">
                        </el-table-column>
                        <el-table-column prop="库存类型" label="库存类型">
                        </el-table-column>
                        <el-table-column prop="options" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small">编辑</el-button>
                                <el-button @click="handleClick(scope.row)" type="text" size="small">置顶</el-button>
                                <el-button type="text" size="small">设置限购</el-button>
                                <el-button type="text" size="small">设置秒杀</el-button>
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="float: right;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="currentPage2" :page-sizes="[20, 30, 50, 100]" :page-size="20"
                            layout="sizes, prev, pager, next" :total="1000">
                        </el-pagination>
                    </div>
                </el-form-item>
                <el-form-item label="团购时间">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button>保存预览</el-button>
                    <el-button type="primary" @click="onSubmit">发布</el-button>
                    <el-button type="primary" @click="onSubmit">修改团购</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-dialog title="您的商品库中已有16件商品" :visible.sync="centerDialogVisible">
            <el-form ref="formInline" :model="formInline" label-width="80px">
                <el-form-item label="商品分类">
                    <el-button type="text">全部(100)</el-button>
                    <el-button type="text">在售中(80)</el-button>
                    <el-button type="text">已售罄(20)</el-button>
                </el-form-item>
                <el-form-item label="商品品牌">
                    <el-button type="text">全部(100)</el-button>
                    <el-button type="text">在售中(80)</el-button>
                    <el-button type="text">已售罄(20)</el-button>
                </el-form-item>
                <el-form-item label="搜索">
                    <el-input placeholder="搜索商品名称、编码" v-model="input2" style="width: 400px;">
                    </el-input>
                    <el-button type="text">查询</el-button>
                    <el-button type="text">重置</el-button>
                </el-form-item>
                <el-table v-loading="loading" :data="tableData" border style="width: 100%" height="800">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="商品信息">
                    </el-table-column>
                    <el-table-column prop="desc" label="描述">
                    </el-table-column>
                    <el-table-column prop="code" label="编码">
                    </el-table-column>
                    <el-table-column prop="brand" label="品牌">
                    </el-table-column>
                    <el-table-column prop="category" label="分类">
                    </el-table-column>
                    <el-table-column prop="market_price" label="划线价">
                    </el-table-column>
                    <el-table-column prop="价格" label="价格">
                    </el-table-column>
                    <el-table-column prop="库存" label="库存">
                    </el-table-column>
                </el-table>
                <div style="float: right;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage2" :page-sizes="[20, 30, 50, 100]" :page-size="20"
                        layout="sizes, prev, pager, next" :total="1000">
                    </el-pagination>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div style="float: left;">
                    <el-button @click="centerDialogVisible = false">全选</el-button>
                    <el-button @click="centerDialogVisible = false">取消全选</el-button>
                </div>
                <span>已选0件</span>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                <el-button @click="centerDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
export default {
    data() {
        return {
            formInline: {
                region: '',
                status: '',
                title: '',
                resource: ''
            },
            loading: false,
            input2: '',
            activeName: '',
            tableData: [],
            value1: '',
            centerDialogVisible: false
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleClick() {

        },
        handleSizeChange() {

        },
        handleCurrentChange() {

        }
    }
}
</script>