qimall/addons/Mch/backend/views/compoents/com-goods-list.php

<?php
$mchId = Yii::$app->admin->identity->mch_id;
Yii::$app->loadComponentView('goods/com-search','@app/plugins/o2o_store/views/components/mall');
?>

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .com-goods-list .table-body .edit-sort-img {
        width: 14px;
        height: 14px;
        margin-left: 5px;
        cursor: pointer;
    }

    .com-goods-list .goods-cat .el-tag--mini {
        max-width: 60px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .com-goods-list .export-dialog .el-dialog {
        min-width: 350px;
    }

    .com-goods-list .export-dialog .el-dialog__body {
        padding: 20px 20px;
    }

    .com-goods-list .export-dialog .el-button--submit {
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
    }

</style>
<template id="com-goods-list">
    <div class="com-goods-list">
        <el-card v-loading="listLoading" class="box-card" shadow="never" style="border:0"
                 body-style="background-color: #f3f3f3;padding: 10px 0 0;">
            <div slot="header">
                <span>商品列表</span>
                <div style="float: right; margin: -5px 0">
                    <el-button v-if="isShowExportGoods" type="primary" size="small" @click="exportGoods">商品导出
                    </el-button>
                    <el-dialog
                            flex="cross:center"
                            class="export-dialog"
                            :title="exportParams.is_show_download ? '下载' : '提示'"
                            :visible.sync="exportDialogVisible"
                            width="20%">
                        <template v-if="!exportParams.is_show_download">
                            <div flex="cross:center">
                                <i style="color: #E6A23C;font-size: 20px;margin-right: 5px" class="el-icon-warning"></i>
                                <span>选中{{choose_list.length == 0 ? '全部,共计'+ exportParams.goods_count +'件' : choose_list.length + '个'}}商品，是否确认导出</span>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                    <el-button @click="exportDialogVisible = false" size="small">取 消</el-button>
                                    <el-button @click="exportGoodsData" size="small" type="primary">确定</el-button>
                                </span>
                        </template>
                        <template v-else>
                            <el-progress :text-inside="true" :stroke-width="18"
                                         :percentage="exportParams.percentage"></el-progress>
                            <span slot="footer" class="dialog-footer">
<!--                                <el-button @click="download" v-if="exportParams.percentage == 100" size="small"-->
                                <!--                                           type="primary">-->
                                <!--                                    点击下载-->
                                <!--                                </el-button>-->
                                <form target="_blank" :action="exportParams.action_url" method="post">
                                    <div class="modal-body">
                                        <input name="_csrf" type="hidden" id="_csrf"
                                               value="<?= Yii::$app->request->csrfToken ?>">
                                        <input name="flag" value="EXPORT" type="hidden">
                                        <input name="is_download" :value="exportParams.is_download" type="hidden">
                                    </div>
                                    <div flex="dir:right" style="margin-top: 20px;">
                                        <button v-if="exportParams.percentage == 100" type="submit"
                                                class="el-button el-button--primary el-button--small">点击下载</button>
                                    </div>
                                </form>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </div>
            <div class="table-body">
                <com-search :tabs="tabs" :new-search="search" @to-search="toSearch"
                            :new-active-name="newActiveName"></com-search>
                <el-table
                        ref="multipleTable"
                        :data="list"
                        border
                        style="width: 100%;margin-bottom: 15px"
                        @selection-change="handleSelectionChange"
                        @sort-change="sortChange">
                    <el-table-column type="selection" align="center" width="60"></el-table-column>
                    <el-table-column prop="id" label="ID" sortable="false"></el-table-column>
                    <el-table-column prop="sort" label="所属门店">
                        <template slot-scope="scope">
                            <div flex="dir:left cross:center">
                                <span>{{scope.row.store.name}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <slot name="column-col-first"></slot>
                    <el-table-column label="分类">
                        <template slot-scope="scope">
                            <div class="goods-cat" v-if="!is_mch">
                                <el-tag v-if="scope.row.cats && scope.row.cats.length > 0"
                                        size="mini">
                                    {{scope.row.cats[0].name}}
                                </el-tag>
                                <el-tooltip v-if="scope.row.cats && scope.row.cats.length > 1" placement="top">
                                    <div slot="content">
                                        <span v-for="item in scope.row.cats" :key="item.id">{{item.name}}&nbsp;</span>
                                    </div>
                                    <span>...</span>
                                </el-tooltip>
                            </div>
                            <div class="goods-cat" v-if="is_mch">
                                <el-tag v-if="scope.row.mchCats.length > 0" size="mini">
                                    {{scope.row.mchCats[0].name}}
                                </el-tag>
                                <el-tooltip v-if="scope.row.mchCats.length > 1" placement="top" effect="light">
                                    <div slot="content">
                                        <el-tag style="margin-right: 5px" size="mini"
                                                v-for="item in scope.row.mchCats" :key="item.id">
                                            {{item.name}}
                                        </el-tag>
                                    </div>
                                    <span>...</span>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="320">
                        <template slot-scope="scope">
                            <div flex="box:first">
                                <div style="padding-right: 10px;">
                                    <com-image mode="aspectFill" :src="scope.row.goodsWarehouse.cover_pic"></com-image>
                                </div>
                                <div flex="cross:top cross:center">
                                    <div flex="dir:left">
                                        <el-tooltip class="item"
                                                    effect="dark"
                                                    placement="top">
                                            <template slot="content">
                                                <div style="width: 320px;">{{scope.row.goodsWarehouse.name}}</div>
                                            </template>
                                            <com-ellipsis :line="2">{{scope.row.goodsWarehouse.name}}</com-ellipsis>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="售价" sortable="false"></el-table-column>
                    <el-table-column prop="goods_stock" label="库存" sortable="false">
                        <template slot-scope="scope">
                            <div v-if="scope.row.goods_stock > 0">{{scope.row.goods_stock}}</div>
                            <div v-else style="color: red;">售罄</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="virtual_sales" width="110" label="虚拟销量" sortable="false"></el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag size="small" type="success" v-if="scope.row.status == 1">销售中</el-tag>
                            <el-tag size="small" type="info" v-if="scope.row.status == -1">待审核</el-tag>
                            <el-tag size="small" type="warning" v-if="scope.row.status == 0">下架中</el-tag>
                            <el-tag size="small" type="danger" v-if="scope.row.status == -2">被驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scope" width="180" label="添加时间">
                        <template slot-scope="scope">
                            {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="300px" align="center">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="text" circle size="mini">
                                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                                    <img src="statics/img/mall/order/add_remark.png" alt="">
                                </el-tooltip>
                            </el-button>

                            <el-button v-if="scope.row.status == -1" circle size="mini" type="text" @click="storePass(scope.row, scope.$index)">
                                <el-tooltip class="item" effect="dark" content="通过" placement="top">
                                    <img src="/plugins/o2o_store/assets/images/pass.png" alt="">
                                </el-tooltip>
                            </el-button>

                            <el-button v-if="scope.row.status == -1" type="text" size="mini" circle style="margin-left: 10px;margin-top: 10px"
                                       @click.native="reject(scope.row, scope.$index)">
                                <el-tooltip class="item" effect="dark" content="驳回" placement="top">
                                    <img src="/plugins/o2o_store/assets/images/reject.png" alt="">
                                </el-tooltip>
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 这里就是el-table的分页数 -->
                <div flex="main:right cross:center" style="margin-top: 20px;">
                    <div v-if="pageCount > 0">
                        <el-pagination
                                @current-change="pagination"
                                background
                                :current-page="current_page"
                                layout="prev, pager, next"
                                :page-count="pageCount">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-goods-list', {
        template: '#com-goods-list',
        props: {
            goods_url: {
                type: String,
                default: 'plugin/o2o_store/mall/goods/index'
            },
            edit_goods_url: {
                type: String,
                default: 'plugin/o2o_store/mall/goods/edit'
            },
            destroy_goods_url: {
                type: String,
                default: 'mall/goods/delete'
            },
            edit_goods_sort_url: {
                type: String,
                default: 'mall/goods/edit-sort'
            },
            edit_goods_status_url: {
                type: String,
                default: 'mall/goods/switch-status'
            },
            batch_update_status_url: {
                type: String,
                default: 'mall/goods/batch-update-status'
            },
            is_edit_goods_name: {
                type: Boolean,
                default: false
            },
            is_action: {
                type: Boolean,
                default: true
            },
            actionWitch: {
                type: Number,
                default: 180
            },
            is_add_goods: {
                type: Boolean,
                default: true
            },
            status_change_text: {
                type: String,
                default: '',
            },
            tabs: {
                type: Array,
                default: function () {
                    return [
                        {
                            name: '全部',
                            value: '-1'
                        },
                        {
                            name: '销售中',
                            value: '1'
                        },
                        {
                            name: '下架中',
                            value: '0'
                        },
                        {
                            name: '售罄',
                            value: '2'
                        },
                    ];
                }
            },
            /**
             * 批量设置参数
             * 具体参数看 com-batch 组件
             */
            batchList: Array,
            isShowSvip: true,// 批量设置超级会员卡是否显示
            isShowExpress: true, // 批量设置运费是否显示
            isShowIntegral: true,// 批量设置积分是否显示
            isShowBatchButton: true,//批量设置按钮是否显示
            isShowExportGoods: false,//商品导出按钮
        },
        data() {
            return {
                search: {
                    keyword: '',
                    store_name: '',
                    status: '-1',
                    sort_prop: '',
                    sort_type: '',
                    cats: [],
                    date_start: null,
                    date_end: null,
                },
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                current_page: 1,
                is_mch: <?= $mchId > 0 ? 1 : 0 ?>,
                mchMallSetting: {},
                choose_list: [],
                btnLoading: false,
                sort: 0,
                id: 0,// 应该无用了
                sort_goods_id: 0,
                goodsId: 0,
                goodsName: '',
                // 分类筛选
                dialogVisible: false,
                dialogLoading: false,
                options: [],
                cats: [],
                children: [],
                third: [],
                mch_id: '<?= $mchId ?>',
                newActiveName: '-1',
                exportDialogVisible: false,
                // 商品导出参数
                exportParams: {
                    page: 1,
                    is_show_download: false,
                    is_download: 0,
                    percentage: 0,
                    action_url: '<?= Yii::$app->urlManager->createUrl('plugin/o2o_store/mall/goods/export-goods-list') ?>',
                    goods_count: 0,//商品总数
                }
            };
        },
        created() {
            let self = this;
            if (this.is_mch) {
                this.getMchMallSetting();
            }
            if (getQuery('page') > 1) {
                this.page = getQuery('page');
            }

            // 搜索条件从缓存中获取
            let search = this.getCookie('search');
            if (search) {
                let newSearch = JSON.parse(search);
                this.search.keyword = newSearch.keyword;
                this.search.store_name = newSearch.store_name;
                this.search.cats = newSearch.cats;
                this.search.date_start = newSearch.date_start;
                this.search.date_end = newSearch.date_end;
                self.tabs.forEach(function (item) {
                    if (item.value == newSearch.status) {
                        self.search.status = newSearch.status;
                        self.newActiveName = newSearch.status;
                    }
                })
            }
            this.getList();
        },
        methods: {
            reject(row, index) {
                let self = this;
                self.$confirm('驳回商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'plugin/o2o_store/mall/goods/reject',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            storePass(row, index) {
                let self = this;
                self.$confirm('通过商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'plugin/o2o_store/mall/goods/pass',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            editGoodsName(row) {
                this.goodsId = row.id;
                this.goodsName = row.goodsWarehouse.name;
            },
            changeGoodsName(row) {
                let self = this;
                request({
                    params: {
                        r: 'mall/goods/update-goods-name'
                    },
                    data: {
                        goods_id: self.goodsId,
                        goods_name: self.goodsName
                    },
                    method: 'post'
                }).then((e) => {
                    if (e.data.code == 0) {
                        self.goodsId = null;
                        self.$message.success(e.data.msg);
                        self.getList();
                    }
                    else {
                        self.$message.error(e.data.msg);
                    }
                }).catch((e) => {
                    self.$message.error(e.data.msg);
                })
                ;
            },
            // 全选单前页
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function (item) {
                    self.choose_list.push(item.id);
                })
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList() {
                let self = this;
                self.listLoading = true;
                self.saveSearch();
                request({
                    params: {
                        r: self.goods_url,
                        page: self.page,
                        search: self.search,
                    },
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    self.list = e.data.data.list;
                    self.pageCount = e.data.data.pagination.page_count;
                    self.current_page = e.data.data.pagination.current_page;
                    self.exportParams.goods_count = e.data.data.goods_count;

                }).catch((e) => {
                    console.log(e);
                })
                ;
            },


            edit(row) {
                if (row.id) {
                    navigateTo({
                        r: this.edit_goods_url,
                        id: row.id,
                        mch_id: row.mch_id,
                        page: this.page,
                    });
                    this.saveSearch();
                } else {
                    navigateTo({
                        r: this.edit_goods_url,
                        page: this.page
                    });
                }
            },
            getCookie(cname) {
                let name = cname + "=";
                let decodedCookie = decodeURIComponent(document.cookie);
                let ca = decodedCookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            },
            saveSearch() {
                document.cookie = "search=" + JSON.stringify(this.search);
            },
            destroy(row, index) {
                let self = this;
                self.$confirm('删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: this.destroy_goods_url,
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.list.splice(index, 1);
                            self.$message.success(e.data.msg);
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).
                    catch(e => {
                        console.log(e);
                    })
                    ;
                }).catch(() => {
                    self.$message.info('已取消删除')
                })
                ;
            },
            applyStatus(id) {
                let self = this;
                self.$confirm('申请上架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'mall/goods/apply-status',
                        },
                        method: 'post',
                        data: {
                            id: id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.getList();
                            self.$message.success(e.data.msg);
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).
                    catch(e => {
                        console.log(e);
                    })
                    ;
                }).
                catch(() => {
                    self.$message.info('已取消申请')
                })
                ;
            },
            // 商品上下架
            switchStatus(row) {
                let self = this;
                self.btnLoading = true;
                request({
                    params: {
                        r: this.edit_goods_status_url,
                    },
                    method: 'post',
                    data: {
                        status: row.status,
                        id: row.id,
                        mch_id: row.mch_id
                    }
                }).then(e => {
                    self.btnLoading = false;
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    self.getList();
                }).
                catch(e => {
                    console.log(e);
                })
                ;
            },
            getMchMallSetting() {
                let self = this;
                request({
                    params: {
                        r: 'mall/merchant/mch-setting',
                    },
                    method: 'get',
                }).then(e => {
                    self.mchMallSetting = e.data.data.setting;
                }).
                catch(e => {
                    console.log(e);
                })
                ;
            },
            toSearch(searchData) {
                this.page = 1;
                this.search = searchData;
                this.getList();
            },
            // 排序排列
            sortChange(row) {
                if (row.prop) {
                    this.search.sort_prop = row.prop;
                    this.search.sort_type = row.order == "descending" ? 0 : 1;
                } else {
                    this.search.sort_prop = '';
                    this.search.sort_type = '';
                }
                this.getList();
            },
            quit() {
                this.sort_goods_id = null;
                this.goodsId = null;
            },
            editSort(row) {
                this.sort_goods_id = row.id;
                this.sort = row.sort;
                if (this.is_mch) {
                    this.sort = row.mchGoods.sort;
                }
            },
            changeSortSubmit(row) {
                let self = this;
                row.sort = self.sort;
                let route = self.edit_goods_sort_url;
                if (!row.sort || row.sort < 0) {
                    self.$message.warning('排序值不能小于0')
                    return;
                }
                if (this.is_mch) {
                    route = 'plugin/merchant/mall/goods/edit-sort';
                    row.mchGoods.sort = self.sort;
                }
                request({
                    params: {
                        r: route
                    },
                    method: 'post',
                    data: {
                        id: row.id,
                        sort: row.sort,
                    }
                }).then(e => {
                    self.btnLoading = false;
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                        this.sort_goods_id = null;
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).
                catch(e => {
                    self.$message.error(e.data.msg);
                    self.btnLoading = false;
                })
                ;
            },
            getAllChecked(e) {
                this.$emit('get-all-checked', e)
            },
            // 商品导出
            exportGoods() {
                this.exportDialogVisible = true;
                this.exportParams = {
                    page: 1,
                    is_show_download: false,
                    is_download: 0,
                    percentage: 0,
                    action_url: '<?= Yii::$app->urlManager->createUrl('plugin/o2o_store/mall/goods/export-goods-list') ?>',
                    goods_count: 0,//商品总数
                }
            },
            exportGoodsData() {
                let self = this;
                self.exportParams.is_show_download = true;
                request({
                    params: {
                        r: 'plugin/o2o_store/mall/goods/export-goods-list',
                    },
                    data: {
                        page: self.exportParams.page,
                        search: JSON.stringify(self.search),
                        flag: 'EXPORT',
                        choose_list: self.choose_list,
                        _csrf: '<?= Yii::$app->request->csrfToken ?>',
                        is_download: self.exportParams.is_download,
                    },
                    method: 'post',
                }).then(e => {
                    let data = e.data.data;
                    if (e.data.code === 0) {
                        self.exportParams.increase = 100 / data.pagination.page_count;
                        self.exportParams.percentage += self.exportParams.increase;
                        self.exportParams.percentage = parseFloat(self.exportParams.percentage.toFixed(2));
                        if (data.pagination.current_page == data.pagination.page_count) {
                            self.exportParams.percentage = 100;
                            self.exportParams.is_download += data.export_goods.is_download;
                        }
                        if (data.pagination.current_page < data.pagination.page_count) {
                            self.exportParams.page += 1;
                            self.exportGoodsData();
                        }
                    }
                }).
                catch(e => {
                    console.log(e);
                })
                ;
            },
        },
    });
</script>