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

<template>
    <div>
        <el-card style="margin-top: 10px" class="box-card">
            <el-form :model="group" label-width="80px">
                <el-form-item label="店铺">
                    <el-select v-model="group.store_id" :disabled="disabled">
                        <el-option v-for="store in stores" :key="store.id" :label="store.name" :value="store.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动标题">
                    <el-input type="textarea" v-model="group.title" style="width: 500px;"></el-input>
                </el-form-item>
                <el-form-item label="团购商品">
                    <el-button @click="centerDialogVisible = true">从商品列表导入</el-button>
                    <el-input placeholder="搜索商品名称、编码" v-model="group.searchInput"
                        style="margin-left: 20px; width: 400px;">
                        <template slot="append" @click="groupGoodsSearch();">查询</template>
                    </el-input>
                    <div>
                        <el-button type="text" @click="groupGoodsSearch({statue: 2});">全部({{group.num}})</el-button>
                        <el-button type="text" @click="groupGoodsSearch({statue: 1});">在售中({{group.on_num}})</el-button>
                        <el-button type="text" @click="groupGoodsSearch({statue: 0});">已售罄({{group.off_num}})
                        </el-button>
                    </div>
                    <el-table ref="multipleTableGroup" @selection-change="handleSelectionChangeGroup"
                        v-loading="groupLoading" :data="groupGoods.data" border style="width: 100%" height="800">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="sort" label="序号">
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称">
                        </el-table-column>
                        <el-table-column prop="code" label="编码">
                        </el-table-column>
                        <el-table-column prop="category" label="分类">
                        </el-table-column>
                        <el-table-column prop="num" label="库存">
                        </el-table-column>
                        <el-table-column prop="limit_buy" label="限购数量">
                        </el-table-column>
                        <el-table-column prop="price" 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="setTop(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="display: flex; justify-content: space-between; align-items: center; line-height: 32px; margin-top: 20px;">
                        <el-button type="danger" size="small" @click="batchRemove();">批量删除</el-button>
                        <el-pagination @size-change="handleSizeChangeGroup" @current-change="handleCurrentChangeGroup"
                            :current-page.sync="groupGoods.meta.per_page" :page-sizes="[20, 30, 50, 100]"
                            :page-size="groupGoods.meta.size" layout="sizes, prev, pager, next"
                            :total="groupGoods.meta.total">
                        </el-pagination>
                    </div>
                </el-form-item>
                <el-form-item label="团购时间">
                    <el-date-picker v-model="group.datetimerange" type="datetimerange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="display: flex; justify-content: flex-end;">
                    <el-button @click="onAdd(1);">保存预览</el-button>
                    <el-button type="primary" @click="onAdd(0);">发布</el-button>
                    <el-button type="success" @click="onEdit();">修改团购</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" width="80%">
            <el-form ref="goodsList" :model="goodsList" label-width="80px">
                <el-form-item label="商品分类" prop="type_id">
                    <el-radio-group v-model="goodsList.type_id" size="small" @change="goodsSearch()">
                        <el-radio-button label="0">全部</el-radio-button>
                        <el-radio-button v-for="goodsType in types" :key="goodsType.id" :label="goodsType.id">
                            {{goodsType.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品品牌" prop="brand_id">
                    <el-radio-group v-model="goodsList.brand_id" size="small" @change="goodsSearch()">
                        <el-radio-button label="0">全部</el-radio-button>
                        <el-radio-button v-for="goodsBrand in brands" :key="goodsBrand.id" :label="goodsBrand.id">
                            {{goodsBrand.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="搜索" prop="goodsKeyword">
                    <el-input placeholder="搜索商品名称、编码" v-model="goodsList.goodsKeyword" style="width: 400px;">
                    </el-input>
                    <el-radio-group v-model="goodsList.status" style="margin: 0 30px">
                        <el-radio label="1">有库存</el-radio>
                        <el-radio label="2">全部</el-radio>
                    </el-radio-group>
                    <el-button type="primary" size="small" @click="goodsSearch();">查询</el-button>
                    <el-button size="small" @click="resetForm('goodsList')">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="multipleTable" @selection-change="handleSelectionChange" v-loading="goodsLoading"
                :data="goods.data" border style="width: 100%" height="520">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="商品信息">
                    <template slot-scope="scope">
                        {{scope.row.goods.title + ' ' + scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column label="编码">
                    <template slot-scope="scope">
                        {{scope.row.goods.goods_code + '_' + scope.row.sku_code}}
                    </template>
                </el-table-column>
                <el-table-column label="品牌">
                    <template slot-scope="scope">
                        {{scope.row.goods.brand.name}}
                    </template>
                </el-table-column>
                <el-table-column label="分类">
                    <template slot-scope="scope">
                        {{scope.row.goods.type.name}}
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="库存">
                </el-table-column>
            </el-table>
            <div style="display: flex; flex-direction: row-reverse; align-items: center; margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="goods.meta.current_page" :page-sizes="[20, 30, 50, 100]"
                    :page-size="goods.meta.per_page" layout="sizes, prev, pager, next" :total="goods.meta.total">
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <el-button @click="toggleSelection(1)">全选</el-button>
                        <el-button @click="toggleSelection(0)">取消全选</el-button>
                    </div>
                    <div>已选 {{selectNum}} 件</div>
                    <div>
                        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                    </div>
                </div>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import { storeList } from "../../api/shop";
import { addGroup, showGroup, editGroup, getGroupGoods } from "../../api/group";
import { goods_types, Brand_goods_types } from "../../api/rankingData";
import { goods } from "../../api/goods";
export default {
    data() {
        return {
            group: {
                store_id: "",
                status: "",
                title: "",
                resource: "",
                num: 0,
                on_num: 0,
                off_num: 0,
                datetimerange: "",
                searchInput: "",
            },
            groupGoods: {
                data: [],
                meta: {
                    total: 0,
                    current_page: 1,
                    per_page: 20,
                }
            },
            groupLoading: false,
            goodsLoading: false,
            goods: {
                data: [],
                meta: {
                    total: 0,
                    current_page: 1,
                    per_page: 20,
                }
            },
            centerDialogVisible: false,
            stores: [],
            types: [],
            brands: [],
            goodsList: {
                goodsKeyword: "",
                status: "1",
                type_id: 0,
                brand_id: 0,
                excludeIds: [],
                page: 1,
                per_page: 1,
            },
            disabled: false,
            dialogTitle: "您的商品库中已有 0 件商品",
            selectNum: 0,
            selectGoods: []
        }
    },
    mounted() {
        this.getStoreList();
        let id = parseInt(this.$route.query.id);
        if (id) {
            this.disabled = true;
            this.getGoupInfo(this.$route.query.id);
            this.dialogTitle = "您的商品库中已有 " + this.group.num + " 件商品";
        }
        this.getbrandType();
        this.getgoodsType();
        this.goodsSearch();
    },
    methods: {
        getStoreList() {
            let page = {
                page: 0,
                per_page: 999,
            };
            storeList(page).then((res) => {
                this.stores = res.data.data;
            });
        },
        onAdd(is_save_preview) {
            console.log(is_save_preview)
            console.log(group)
            this.$message('add');
        },
        onEdit() {
            console.log(group)
            this.$message('edit');
        },
        setTop() {

        },
        handleSizeChange(val) {
            this.$message({
                message: val,
                type: "success"
            });
        },
        handleCurrentChange(val) {
            this.$message({
                message: val,
                type: "success"
            });
        },
        handleSizeChangeGroup(val) {
            this.$message({
                message: val,
                type: "success"
            });
        },
        handleCurrentChangeGroup(val) {
            this.$message({
                message: val,
                type: "success"
            });
        },
        groupGoodsSearch(params = {}) {
            // getGroupGoods(params).then((res) => { })
        },
        getGoupInfo(id) {
            // showGroup(id).then((res) => {
            // })
        },
        getgoodsType() {
            let params = {
                per_page: 99999,
            };
            goods_types(params).then((res) => {
                this.types = res.data.data;
            });
        },
        getbrandType() {
            let params = {
                per_page: 99999,
            };
            Brand_goods_types(params).then((res) => {
                this.brands = res.data.data;
            });
        },
        goodsSearch() {
            goods(this.goodsList).then((res) => {
                this.goods = res.data;
            })
        },
        toggleSelection(isAll) {
            if (isAll) {

            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.selectGoods = val;
            console.log(this.selectGoods)
        },
        handleSelectionChangeGroup() {

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>