qimall/addons/Mch/client/views/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 style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="handle('edit')">添加商品</el-button>
            </div>
        </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>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>
                    <template >
                        <el-button @click="upDown(1)" size="mini">批量上架</el-button>
                        <el-button @click="upDown(0)" size="mini">批量下架</el-button>
                    </template>
                    <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 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="check_status" align="center">
                            <template slot-scope="scope">
                                <div size="small" v-if="scope.row.check_status == 2">{{scope.row.check_remark}}</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="类型" prop="goods_type" align="center">
                            <template slot-scope="scope">
                                <div size="small" v-if="scope.row.goods_type == 1">实体商品</div>
                                <div size="small" v-if="scope.row.goods_type == 2">虚拟商品</div>
                                <div size="small" v-if="scope.row.goods_type == 3">预约商品</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="操作" 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]">
                                    <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>
                        </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: 'all'
                },
                    {
                        name: '审核中',
                        value: 'checking'
                    },
                    {
                        name: '销售中',
                        value: 'onsale'
                    },
                    {
                        name: '下架中',
                        value: 'offline'
                    },
                    {
                        name: '售罄',
                        value: 'sell-out'
                    },
                ],
                activeName: 'all',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                mch_id: 0, // 这个地方不知道要怎么获取
                searchCats: [],
                datetime: [],
                search_data: { // 筛选条件
                    type: null,
                    cats: [],
                    start: null,
                    end: null,
                    goods_id: null,
                    goods_name: null,
                },
                sort: 0,
                sort_id: 0,
                goods_name_id: 0,
                export_url: 'mall/goods/export-excel',
                export_list:{},
                group_buy_active_arr:{},
                chooseList:[],
                sign:''

            };
        },
        mounted: function() {
            this.getList();
        },
        created() {
            this.sign = getQuery('sign')
        },
        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);
            }
        },
        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.datetime = [];
                this.getList();
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':
                        let params = {
                            r: 'mch/client/goods/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id,
                            sign:this.sign
                        });
                        navigateTo(params);
                        break;
                    case 'model':// 模式跳转
                        param = {
                            r: 'mch/client/goods/goods-model'
                        };
                        if (id) param = Object.assign(param, {
                            id: id,
                            sign:this.sign
                        });
                        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;
                }
                this.cancelEdit(type);
            },
            send(params) {
                let self = this;
                request({
                    params: {
                        r: 'mch/client/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/client/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) {
                let self = this;
                self.chooseList = [];
                val.forEach(function (item) {
                    self.chooseList.push(item.id);
                })
            },
            checkChooseList() {
                if (this.isAllChecked) {
                    this.dialogTitle = '已选所有商品';
                    return true;
                }
                if (this.chooseList.length > 0) {
                    this.dialogTitle = '已选商品' + this.chooseList.length + '种';
                    return true;
                }
                this.$message.warning('请先勾选要设置的商品');
                return false;
            },
            upDown(command) {
                let self = this;
                if (!self.checkChooseList()) {
                    return false;
                }
                let text = this.isAllChecked ? '警告:批量' + (command === 1 ? '上架' : '下架') + '所有商品?' : '批量' + (command === 1 ? '上架' : '下架') + ',是否继续';
                this.$confirm(text, '警告', {type: 'warning'}).then(() => {
                    request({
                        params: {
                            r: 'mch/client/goods/batch-change-status',
                        },
                        method: 'post',
                        data: {
                            ids: this.chooseList,
                            status: command,
                        },
                    }).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);
                    });
                });
            },
        }
    });
</script>