erp/resources/frontend/src/views/plat/goodsList.vue

<template>
    <div class="conent">
        <el-card :body-style="{ padding: '20px 20px 0 20px' }">
            <el-form ref="form" :inline="true" :model="form">
                <el-form-item label="店铺:">
                    <el-select v-model="form.shop_id" placeholder="店铺">
                        <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品名称:">
                    <el-input v-model="form.goods_name" placeholder="商品名称">
                    </el-input>
                </el-form-item>

                <el-form-item label="商品编码:">
                    <el-input v-model="form.external_sku_id" placeholder="商品编码">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleChoose()">筛选</el-button>
                    <el-button plain @click="handleReChoose()">重置筛选</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px">
            <el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
                <el-table-column label="店铺名称">
                    <template slot-scope="scope">
                        {{ scope.row.shop.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="团购标题"></el-table-column>
                <el-table-column prop="category_name" label="分类名称"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称"></el-table-column>
                <el-table-column prop="external_sku_id" label="编码"></el-table-column>
                <el-table-column prop="created_at" label="下载时间"></el-table-column>
                <el-table-column label="同步">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_sync" active-color="#13ce66" inactive-color="#ff4949"
                            :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"
                            @change="syncChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.is_sync && scope.row.external_sku_id" @click="syncStock(scope.row)" type="primary">
                            同步库存</el-button>
                        <el-button @click="deleteGoods(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页功能 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                    layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { platGoodsList, updateSyncStatus, deletePlatGoods, syncStock } from "../../api/plat";
import { storeList } from "../../api/shop";
export default {
    data() {
        return {
            form: {
                external_sku_id: "",
                goods_name: "",
                shop_id: "",
            },
            loading: true,
            tableData: [],
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 15, //每页显示数量
            shops: [],
        };
    },
    mounted() {
        // 展示店铺列表
        this.getPlatGoodsList();
        this.getShopsList();
    },
    methods: {
        // 店铺列表
        getPlatGoodsList(params = {}) {
            params.page = this.current_page;
            params.per_page = this.per_page;

            platGoodsList(params).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
            });
        },
        getShopsList() {
            let page = {
                page: 0,
                per_page: 999,
            };
            storeList(page).then((res) => {
                this.shops = res.data.data;
            });
            this.loading = false;
        },
        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.current_page = 1;
            this.per_page = val;
            this.getPlatGoodsList();
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.getPlatGoodsList();
        },
        // 筛选
        handleChoose() {
            this.form = {
                ...this.form,
                page: 1,
                per_page: this.per_page,
            };

            // 对象值为空清除
            const newObj = filterParams(this.form);
            function filterParams(obj) {
                const _newPar = {};
                for (const key in obj) {
                    // 如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
                    if (
                        (obj[key] === 0 || obj[key]) &&
                        obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
                    ) {
                        // 记录属性
                        _newPar[key] = obj[key];
                    }
                }
                // 返回对象
                return _newPar;
            }
            this.getPlatGoodsList(newObj);
        },

        // 重置筛选
        handleReChoose() {
            this.form = {
                external_sku_id: "",
                goods_name: "",
                shop_id: "",
            };
            this.getPlatGoodsList();
        },

        // 同步状态更新
        syncChange(rowData) {
            updateSyncStatus(rowData.id, { is_sync: rowData.is_sync }).then((res) => {
                if (200 === res.status) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                } else {
                    this.$message.error(res.data.errorMessage);
                }
            });
        },

        // 删除平台商品
        deleteGoods(rowData) {
            this.$alert(rowData.shop.name + ' 店铺下载的 ' + rowData.goods_name, '确认从系统删除?', {
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                callback: action => {
                    if ('confirm' === action) {
                        deletePlatGoods(rowData.id).then((res) => {
                            if (200 === res.status) {
                                this.getPlatGoodsList();
                                this.$message({
                                    message: res.data.message,
                                    type: "success",
                                });
                            } else {
                                this.$message.error(res.data.errorMessage);
                            }
                        });
                    }
                }
            });
        },
        // 同步库存
        syncStock(rowData) {
            this.$alert(rowData.shop.name + ' 店铺下的 ' + rowData.goods_name, '确认同步库存?', {
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                callback: action => {
                    if ('confirm' === action) {
                        syncStock(rowData.id).then((res) => {
                            this.$message({
                                message: 200 === res.status ? res.data.message : res.data.errorMessage,
                            });
                        });
                    }
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.block {
    margin-top: 20px;
}
</style>