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

<template>
    <div>
        <el-card style="margin-top: 10px" class="box-card">
            <el-form ref="group" :rules="rules" :model="group" label-width="80px">
                <el-form-item label="店铺" prop="shop_id">
                    <el-select v-model="group.shop_id" :disabled="shopDisable">
                        <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="活动标题" prop="title">
                    <el-input type="textarea" v-model="group.title" style="width: 500px;"></el-input>
                </el-form-item>
                <el-form-item label="团购商品">
                    <el-button @click="centerDialog()">从商品列表导入</el-button>
                    <el-input placeholder="搜索商品名称、编码" v-model="groupGoodsSearch.external_sku_id"
                        style="margin-left: 20px; width: 400px;">
                        <template slot="append" @click="groupGoodsList();">查询</template>
                    </el-input>
                    <div>
                        <el-button type="text" @click="groupGoodsSearch.status=2;groupGoodsList();">
                            全部({{groupGoods.meta.num}})
                        </el-button>
                        <el-button type="text" @click="groupGoodsSearch.status=1;groupGoodsList();">
                            在售中({{groupGoods.meta.on_num}})
                        </el-button>
                        <el-button type="text" @click="groupGoodsSearch.status=0;groupGoodsList();">
                            已售罄({{groupGoods.meta.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="groupGoodsList"
                            :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="团购时间" prop="datetimerange">
                    <el-date-picker v-model="group.datetimerange" type="datetimerange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
                        @change="setTime">
                    </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 v-show="shopDisable" type="success" @click="onEdit();">修改团购</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" width="80%" :close-on-click-modal="false">
            <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="goods_keyword">
                    <el-input placeholder="搜索商品名称、编码" v-model="goodsList.goods_keyword" style="width: 400px;">
                    </el-input>
                    <el-radio-group v-model="goodsList.has_stock" style="margin: 0 30px">
                        <el-radio label="1">有库存</el-radio>
                        <el-radio label="0">全部</el-radio>
                    </el-radio-group>
                    <el-button type="primary" size="small" @click="goodsSearch();">查询</el-button>
                    <el-button size="small" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="multipleTable" @select="handleSelect" v-loading="goodsLoading" :data="goods.data" border
                style="width: 100%" height="520" :row-key="getRowKeys">
                <el-table-column type="selection" :reserve-selection="true" 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 ? 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="goodsSearch"
                    :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="addGoods();">确 定</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, addGroupGoods } from "../../api/group";
import { goods_types, Brand_goods_types } from "../../api/rankingData";
import { addGoods, getGoodsList } from "../../api/goods";
export default {
    data() {
        return {
            group: {
                shop_id: '',
                status: "",
                title: "",
                start_time: "",
                end_time: "",
                is_save_preview: 1,
                datetimerange: []
            },
            rules: {
                shop_id: [
                    { required: true, message: '请选择店铺' },
                ],
                title: [
                    { required: true, message: '请输入活动标题', trigger: 'blur' },
                ],
                datetimerange: [
                    { required: true, message: '请选择团购时间', trigger: 'blur' },
                ],
            },
            groupGoods: {
                data: [],
                meta: {
                    total: 0,
                    current_page: 1,
                    per_page: 20,
                    num: 0,
                    on_num: 0,
                    off_num: 0,
                },
            },
            groupGoodsSearch: {
                external_sku_id: "",
                status: 0,
                page: 1,
                per_page: 20,
                ids: [],
                group_id: 0
            },
            groupLoading: false,
            goodsLoading: true,
            goods: {
                data: [],
                meta: {
                    total: 0,
                    current_page: 1,
                    per_page: 20,
                }
            },
            centerDialogVisible: false,
            stores: [],
            types: [],
            brands: [],
            goodsList: {
                goods_keyword: "",
                has_stock: "1",
                type_id: 0,
                brand_id: 0,
            },
            goodsListPage: {
                page: 1,
                per_page: 20,
            },
            shopDisable: false,
            dialogTitle: "您的商品库中已有 0 件商品",
            selectNum: 0,
            selectGoods: [],
            allGoods: [],
        }
    },
    mounted() {
        this.getStoreList();
        let groupId = parseInt(this.$route.query.id);
        if (groupId) {
            this.groupGoodsSearch.group_id = groupId;
            this.shopDisable = true;
            this.getGoupInfo(this.$route.query.id);
            this.groupGoodsList();
            this.dialogTitle = "您的商品库中已有 " + this.groupGoods.meta.total + " 件商品";
        }
        this.getbrandType();
        this.getgoodsType();
        this.goodsSearch();
    },
    methods: {
        getStoreList() {
            let params = {
                page: 0,
                per_page: 999,
                plat_id: 1
            };
            storeList(params).then((res) => {
                this.stores = res.data.data;
            });
        },
        onAdd(is_save_preview) {
            this.group.is_save_preview = is_save_preview;
            this.$refs.group.validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    return false;
                }
            });
        },
        onEdit() {
            this.$refs.group.validate((valid) => {
                if (valid) {
                    alert('edit!');
                } else {
                    return false;
                }
            });
        },
        setTop() {

        },
        handleSizeChangeGroup(val) {
            this.groupGoodsSearch.per_page = val;
            this.groupGoodsList();
        },
        groupGoodsList(page = 1) {
            this.groupGoodsSearch.page = page;
            getGroupGoods(params).then((res) => {
                this.groupGoods = res.data;
            })
        },
        getGoupInfo(id) {
            // showGroup(id).then((res) => {
            // })
        },
        getgoodsType() {
            let params = {
                per_page: 9999,
            };
            goods_types(params).then((res) => {
                this.types = res.data.data;
            });
        },
        getbrandType() {
            let params = {
                per_page: 9999,
            };
            Brand_goods_types(params).then((res) => {
                this.brands = res.data.data;
            });
        },
        handleSelectionChangeGroup() {

        },
        setTime(val) {
            this.group.start_time = val[0];
            this.group.end_time = val[1];
        },
        // 从商品列表导入
        centerDialog() {
            if (this.group.shop_id) {
                this.centerDialogVisible = true;
            } else {
                this.$message.error('请先选择店铺');
            }
        },
        goodsSearch(page = 1) {
            this.goodsList.page = page;
            this.goodsList.per_page = this.goodsListPage.per_page;
            this.goodsLoading = true;
            getGoodsList(this.goodsList).then((res) => {
                this.goods = res.data;
                this.goods.meta.per_page = parseInt(this.goods.meta.per_page);
                this.goods.data.forEach((row, i) => {
                    if (undefined !== this.selectGoods[row.id]) {
                        this.$refs.multipleTable.toggleRowSelection(row, true);
                    }
                })
                this.goodsLoading = false;
            })
            if (1 === page) {
                this.getAllGoods(this.goodsList);
            }
        },
        getAllGoods(params) {
            params.page = 1;
            params.per_page = 9999;
            getGoodsList(params).then((res) => {
                this.allGoods = res.data.data;
            })
        },
        handleSizeChange(val) {
            this.goodsListPage.per_page = val;
            this.goodsSearch();
        },
        getRowKeys(row) {
            return row.id;
        },
        toggleSelection(isAll) {
            if (isAll) {
                this.allGoods.forEach((sku, i) => {
                    if (undefined === this.selectGoods[sku.id]) {
                        this.selectNum++;
                    }
                    this.selectGoods[sku.id] = 1;
                })
                this.goods.data.forEach((row, i) => {
                    this.$refs.multipleTable.toggleRowSelection(row, true);
                })
            } else {
                this.allGoods.forEach((sku, i) => {
                    if (undefined !== this.selectGoods[sku.id]) {
                        delete this.selectGoods[sku.id];
                        this.selectNum--;
                    }
                })
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelect(selection, row) {
            if (undefined === this.selectGoods[row.id]) {
                this.selectGoods[row.id] = 1;
                this.selectNum++;
            } else {
                delete this.selectGoods[row.id];
                this.selectNum--;
            }
        },
        resetForm() {
            this.$refs.goodsList.resetFields();
            this.goodsSearch();
        },
        addGoods() {
            let ids = [];
            this.selectGoods.forEach((v, k) => {
                if (k !== undefined) {
                    ids.push(k)
                }
            })
            let params = {
                group_id: this.groupGoodsSearch.group_id,
                shop_id: this.group.shop_id,
                ids: ids
            }
            addGroupGoods(params).then((res) => {

            })
        }
    }
}
</script>