qimall/addons/Mch/backend/views/store-goods/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/com-add-cat', __DIR__);
ComponentHelper::loadComponentView('com-export-dialog');
?>
<style>

</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>商品列表</span>
        </div>
        <div class="table-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in tabs" :key="item.value" :label="item.name" :name="item.value">
                    <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                        <el-form-item>
                            <el-button size="small" @click="$refs.cats.openDialog()">分类筛选</el-button>
                            <el-button size="small" v-if="search_data.cats && search_data.cats.length > 0" type="danger" @click="clearCat">清除分类</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker style="margin-top: 1px;" size="small" @change="changeTime" v-model="datetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input size="small" placeholder="请输入商品名称" v-model="search_data.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input size="small" placeholder="请输入商品ID精准搜索" v-model="search_data.goods_id"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input placeholder="请输入商户名称/手机号" v-model="search_data.keyword"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="primary" @click="multipleOff">批量下架</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table v-loading="listLoading" :data="list" stripe style="width: 100%" @sort-change="sortChange" @selection-change="handleSelectionChange">
                        <!-- <el-table-column type="selection" align="center" width="60"></el-table-column> -->
                        <el-table-column type="selection" align="center"> </el-table-column>
                        <el-table-column label="ID" prop="id" align="center"></el-table-column>
                        <!-- <el-table-column prop="sort" label="排序" width="150">
                            <template slot-scope="scope">
                                <div v-if="sort_id != scope.row.id">
                                    <el-tooltip class="item" effect="dark" content="排序" placement="top">
                                        <span>{{scope.row.sort}}</span>
                                    </el-tooltip>
                                    <el-button class="edit-sort" type="text" @click="edit(scope.row,'sort')">
                                        <img src="resources/img/mall/order/edit.png" alt="">
                                    </el-button>
                                </div>
                                <div style="display: flex;align-items: center" v-else>
                                    <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="sort" autocomplete="off"></el-input>
                                    <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('sort')"></el-button>
                                    <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('sort',scope.row)">
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="分类" align="center">
                            <template slot-scope="scope">
                                <div class="goods-cat">
                                    <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>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" min-width="200" prop="goods_name" align="center">
                            <template slot-scope="scope">
                                <div flex="cross:center">
                                    <div style="margin-right: 10px;">
                                        <el-image style="width: 50px; height: 50px;border-radius: 5px;" :src="scope.row.cover_pic"></el-image>
                                    </div>
                                    <div v-if="goods_name_id != scope.row.id">
                                        <el-tooltip class="item" effect="dark" content="商品名称" placement="top">
                                            <span>{{scope.row.goods_name}}</span>
                                        </el-tooltip>
                                        <el-button class="edit-sort" type="text" @click="edit(scope.row,'goods_name')">
                                            <img src="resources/img/mall/order/edit.png" alt="">
                                        </el-button>
                                    </div>
                                    <div style="display: flex;align-items: center" v-else>
                                        <el-input style="min-width: 70px" size="mini" class="change" v-model="goods_name" autocomplete="off"></el-input>
                                        <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('goods_name')"></el-button>
                                        <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('goods_name',scope.row)">
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="售价" prop="price" align="center" sortable="false">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.price}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="库存" prop="stock" align="center" sortable="false">
                            <template slot-scope="scope">
                                <div size="small" style="color: red;" v-if="scope.row.stock<=scope.row.stock_warning">{{scope.row.stock}}</div>
                                <div size="small" v-else>{{scope.row.stock}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="审核状态" prop="check_status" align="center">
                            <template slot-scope="scope">
                                <div size="small" v-if="scope.row.check_status == 1">已通过</div>
                                <div size="small" v-if="scope.row.check_status == 2">不通过</div>
                                <div size="small" v-if="scope.row.check_status == 0">审核中</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品状态" prop="is_on_sale" align="center">
                            <template slot-scope="scope">
                                <div size="small" v-if="scope.row.is_on_sale == 1">上架</div>
                                <div size="small" v-if="scope.row.is_on_sale == 0">下架</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" width="160" prop="created_at" align="center">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="商户信息" width="180" prop="created_at" align="center">
                            <template slot-scope="scope">
                                <com-image style="float: left;margin-right: 10px;" mode="aspectFill" :src="scope.row.mch.logo_img"></com-image>
                                <div>{{scope.row.mch.store_name}}</div>
                                <div>{{scope.row.mch.shop_mobile}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="300" align="center">
                            <template slot-scope="scope">
                                <template v-if="scope.row.addons_name">
                                    <el-tooltip class="item" effect="dark" content="该商品正在参与营销活动,暂不可操作" placement="left-start">
                                        <el-tag size="small" type="warning">{{scope.row.addons_name}}</el-tag>
                                    </el-tooltip>
                                </template>
                                <!-- <template v-else="group_buy_active_arr[scope.row.id]"> -->
                                <!-- <template v-else>
                                    <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
                                    <el-button type="text" @click="handle('destroy',scope.row)">删除</el-button>
                                    <el-button type="text" @click="handle('is_on_sale',scope.row)">
                                        <span size="small" v-if="scope.row.is_on_sale == 0">上架</span>
                                        <span size="small" v-if="scope.row.is_on_sale == 1">下架</span>
                                    </el-button>
                                    <el-button type="text" @click="handle('model',scope.row)">模式</el-button>
                                </template> -->
                                <template v-else>
                                    <el-button v-if="scope.row.check_status == 1" type="text" @click="handle('edit',scope.row)">编辑</el-button>
                                    <el-button v-if="scope.row.check_status == 1" type="text" @click="handle('destroy',scope.row)">删除</el-button>
                                    <el-button v-if="scope.row.check_status == 1" type="text" @click="handle('model',scope.row)">模式</el-button>
                                    <el-button v-if="scope.row.check_status == 0" type="text" @click="handle('audit',scope.row)">审核</el-button>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-card>

    <!-- 分类筛选 -->
    <com-add-cat ref="cats" :new-cats="search_data.cats" @select="selectCat" :mch_id="mch_id"></com-add-cat>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                goods_name: '',
                goods_id: '',
                tabs: [{
                        name: '已通过',
                        value: 'check_adopt'
                    },
                    {
                        name: '待审核',
                        value: 'check_waiting'
                    },
                    {
                        name: '未通过',
                        value: 'check_failed'
                    },
                ],
                activeName: 'check_adopt',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                mch_id: 0, // 这个地方不知道要怎么获取
                searchCats: [],
                datetime: [],
                search_data: { // 筛选条件
                    type: 'check_adopt',
                    cats: [],
                    start: null,
                    end: null,
                    goods_id: null,
                    goods_name: null,
                    keyword: '',
                },
                sort: 0,
                sort_id: 0,
                goods_name_id: 0,
                export_url: 'mall/goods/export-excel',
                export_list: {},
                group_buy_active_arr: {},
                selectedGoodIds: [],
            };
        },
        mounted: function() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.search_data.cats) || !isEmpty(this.search_data.start) ||
                    !isEmpty(this.search_data.end) || !isEmpty(this.search_data.goods_id) ||
                    !isEmpty(this.search_data.goods_name) || !isEmpty(this.search_data.keyword);
            }
        },
        methods: {
            selectCat(arr) {
                this.search_data.cats = [];
                arr.forEach(it => this.search_data.cats.push(it.id))
                this.getList()
            },
            clearCat() { // 清除分类
                this.search_data.cats = []
                this.getList()
            },
            changeTime(e) {
                // console.log(e)
                this.search_data.start = e[0]
                this.search_data.end = e[1]
            },
            handleClick(res) { //标签页切换
                if (this.search_data.status == this.activeName) return;
                this.search_data.type = this.activeName;
                this.getList();
            },
            sortChange(row) {
                if (row.prop) {
                    this.search_data.sort_field = row.prop;
                    this.search_data.sort_type = row.order == "descending" ? 'desc' : 'asc';
                } else {
                    this.search_data.sort_prop = null;
                    this.search_data.sort_type = null;
                }
                this.getList();
            },
            search() {
                this.page = 1;
                this.getList();
            },
            clearSearch() {
                this.search_data.cats = [];
                this.search_data.start = null;
                this.search_data.end = null;
                this.search_data.goods_id = null;
                this.search_data.goods_name = null;
                this.search_data.keyword = '';
                this.datetime = [];
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':
                        let params = {
                            r: 'mch/store-goods/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'model': // 模式跳转
                        param = {
                            r: 'mch/store-goods/goods-model',
                            is_mode: true,
                        };
                        if (id) param = Object.assign(param, {
                            id: id
                        });
                        navigateTo(param);
                        break;
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        })
                        break;
                    case 'sort':
                        param = {
                            id: id,
                            sort: this.sort,
                            type
                        };
                        this.send(param);
                        break;
                    case 'goods_name':
                        param = {
                            id: id,
                            goods_name: this.goods_name,
                            type
                        };
                        this.send(param);
                        break;
                    case 'is_on_sale':
                        param = {
                            id: id,
                            is_on_sale: data.is_on_sale == 0 ? 1 : 0,
                            type
                        };
                        operate_type = data.is_on_sale == 0 ? '上架' : '下架';
                        this.$confirm('是否' + operate_type + '该商品?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        })
                        break;
                    case 'audit':
                        param = {
                            r: 'mch/store-goods/edit',
                            is_audit: true,
                        };
                        if (id) param = Object.assign(param, {
                            id: id
                        });
                        navigateTo(param);
                        break;
                }
                this.cancelEdit(type);
            },
            send(params) {
                let self = this;
                request({
                    params: {
                        r: 'mch/store-goods/index',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    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);
                });
            },
            edit(row, type) {
                switch (type) {
                    case 'sort':
                        this.sort = row.sort;
                        this.sort_id = row.id;
                        break;
                    case 'goods_name':
                        this.goods_name_id = row.id;
                        this.goods_name = row.goods_name;
                        break;
                }
            },
            cancelEdit(type) {
                switch (type) {
                    case 'sort':
                        this.sort = 0;
                        this.sort_id = 0;
                        break;
                    case 'goods_name':
                        this.goods_name = '';
                        this.goods_name_id = 0;
                        break;
                }
            },
            searchClick() {
                this.page = 1;
                this.getList();
            },

            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            // 获取商品列表
            getList() {
                let self = this;
                let basic_params = {
                    r: 'mch/store-goods/index',
                    page: self.page,
                };
                params = Object.assign(basic_params, this.search_data);
                if (self.listLoading == false) {
                    self.listLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code == 0) {
                            self.list = e.data.data.list;
                            self.group_buy_active_arr = e.data.data.group_buy_active_arr;
                            self.pageCount = e.data.data.page_count;
                            this.export_list = e.data.data.export_list;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.$message.error(e.data.msg);
                        self.listLoading = false;
                    });
                }
            },
            // 批量下架选中
            handleSelectionChange(val) {
                // console.log(val, 'handleSelectionChange ============= ');
                if (val.length) {
                    this.selectedGoodIds = val.map((e) => {
                        return e.id;
                    });
                    // console.log(this.selectedGoodIds, 'this.selectedGoodIds =============== ');
                } else {
                    this.selectedGoodIds = [];
                }
            },
            // 批量下架商品
            multipleOff() {
                let self = this;
                if (!self.selectedGoodIds.length) {
                    self.$message.error('请先选择要下架的商品');
                    return false;
                }
                self.listLoading = true;
                self.$confirm('是否确认下架所选中商品', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'mch/store-goods/mutiple-off',
                        },
                        method: 'post',
                        data: {
                            good_ids: self.selectedGoodIds,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code == 0) {
                            self.$message.success('操作成');
                            self.getList();
                        } else {
                            self.$message.error(e.data.msg);
                            return false;
                        }
                    }).catch(e => {
                        self.listLoading = false;
                        console.log(e);
                        self.$message.error('网络错误');
                        return false;
                    });
                }).catch(() => {
                    self.listLoading = false;
                    console.log('已取消操作');
                    return false;
                });

            },
        }
    });
</script>