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

<?php

use common\helpers\AddonHelper;
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('add')">添加商品</el-button>
                <com-export-dialog
                        style="float: right;margin-left: 10px;"
                        :field_list='export_list'
                        :action_url="export_url"
                        :params="search_data">
                </com-export-dialog>
            </div>
        </div>
        <div class="table-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="item.id">
                    <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-select size="small" v-model="search_data.goods_type" placeholder="请选择商品类型" style="width: 100%;" clearable>
                                <el-option label="实体商品" :value="1"></el-option>
                                <el-option label="虚拟商品" :value="2"></el-option>
                                <el-option label="预约商品" :value="3"></el-option>
                            </el-select>
                        </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-button v-if="item.value=='all'" type="primary" @click="multipleOn">批量上架</el-button>
                            <el-button v-if="item.value=='all'" type="primary" @click="multipleOff">批量下架</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 v-if="item.value=='all'" type="selection" align="center" :selectable="checkSelectable" > </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="商品名称" 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="分类" 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="售价" 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="label_name" align="center">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.label_name}}</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="小店收益" prop="store_scale" align="center" min-width="100">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.store_scale}}%</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="最低提货数量" prop="min_num" align="center"
                                         min-width="120">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.min_num}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="临期提醒" prop="warn_day" align="center" min-width="100">
                            <template slot-scope="scope">
                                <div size="small">{{scope.row.warn_day}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="is_on_sale" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.is_on_sale"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="handle('is_on_sale', scope.row)"
                                >
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="来源" prop="goods_source" align="center">
                            <template slot-scope="scope">
                                <el-tag size="mini" :type="scope.row.goods_source == '' ? 'success' : 'danger'">
                                    {{scope.row.goods_source == '' ? '自营' : '供应链'}}
                                </el-tag>
                            </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>
                                    <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
                                    <el-button type="text" @click="handle('delete',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-dialog title="编辑商品" width="300px" :visible.sync="goodsEditVisible" append-to-body >
            <el-form :inline="true" size="small" label-width="200px">
                <el-form-item label="小店收益">
                    <el-input v-model="goodsEdit.store_scale" placeholder="小店收益"></el-input>
                </el-form-item>
                <el-form-item label="配送方式">
                    <el-checkbox-group v-model="goodsEdit.freight_type">
                        <el-checkbox key="1" :label="1">快递物流</el-checkbox>
                        <el-checkbox key="3" :label="3">同城配送</el-checkbox>
                        <el-checkbox key="2" :label="2">上门自提</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="最低提货数量">
                    <el-input v-model="goodsEdit.min_num" placeholder="最低提货数量"></el-input>
                </el-form-item>
                <el-form-item label="临期提醒">
                    <el-input v-model="goodsEdit.warn_day" placeholder="临期提醒"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="goodsEditVisible = false" type="default" size="small">取消</el-button>
                <el-button type="primary" :loading="btnLoading" style="margin-bottom: 10px;" size="small"
                           @click="handle('save',goodsEdit)">保存</el-button>
                </span>

        </el-dialog>
    </el-card>


    <!-- 分类筛选 -->
    <com-add-cat ref="cats" :new-cats="search_data.cats" @select="selectCat" :mch_id="mch_id"></com-add-cat>

    <!-- 绑定跳转链接 -->
<!--    <pay-success-select-jump-url addons="Happiness" :goods="currentItem" :show="paySuccessSelectJumpUrlDialogVisible"-->
<!--                                 @hide="hidePaySuccessSelectJumpUrlDialogVisible"></pay-success-select-jump-url>-->
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                goods_name: '',
                goods_id: '',
                tabs: [
                    {
                        name: '全部商品',
                        id: '0',
                    },
                ],
                activeName: '0',
                list: [],
                listLoading: false,
                page: 1,
                pageCount: 0,
                mch_id: 0, // 这个地方不知道要怎么获取
                searchCats: [],
                datetime: [],
                search_data: { // 筛选条件
                    type: '',
                    cats: [],
                    start: null,
                    end: null,
                    goods_id: null,
                    goods_name: null,
                    goods_type: null,
                },
                sort: 0,
                sort_id: 0,
                goods_name_id: 0,
                export_url: 'mall/goods/export-excel',
                export_list: {},
                group_buy_active_arr: {},
                selectedGoodIds: [],
                pay_success_jump: 0,
                paySuccessSelectJumpUrlDialogVisible: false,
                currentItem: {},
                goodsLabel:[],
                btnLoading:false,
                goodsEditVisible:false,
                goodsEdit: {},
                freight_type: [1,2,3],
            };
        },
        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);
            }
        },
        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) : '';
                let params = {
                    r: 'happiness/store-goods/edit'
                };
                switch (type) {
                    case 'edit':
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        this.goodsEdit={
                            id: id,
                            store_scale: data.store_scale,
                            min_num: data.min_num,
                            warn_day:data.warn_day,
                            freight_type:data.freight_type,
                        }
                        this.goodsEditVisible=true
                        break;
                    case 'save':
                        params=this.goodsEdit
                        params.r='happiness/store-goods/edit'
                        this.btnLoading=true
                        this.send(params)
                        break;
                    case 'add':
                        params.r='happiness/store-goods/add'
                        navigateTo(params);
                        break;
                    case 'delete':
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        params.r= 'happiness/store-goods/del-goods'
                        this.delete( params)
                        break;
                    case 'is_on_sale':
                        let param = {
                            id: id,
                            is_on_sale: data.is_on_sale,
                            type,
                            r: 'happiness/store-goods/index'
                        };
                        const operate_type = data.is_on_sale == 0 ? '下架' : '上架';
                        this.$confirm('是否' + operate_type + '该商品?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        }).catch(() => {
                            this.getList();  
                        });
                        break;
                }
                this.cancelEdit(type);
            },
            deepClone(obj) {
                var o, i, j, k;
                if (typeof(obj) != "object" || obj === null) return obj;
                if (obj instanceof(Array)) {
                    o = [];
                    i = 0;
                    j = obj.length;
                    for (; i < j; i++) {
                        if (typeof(obj[i]) == "object" && obj[i] != null) {
                            o[i] = arguments.callee(obj[i]);
                        } else {
                            o[i] = obj[i];
                        }
                    }
                } else {
                    o = {};
                    for (i in obj) {
                        if (typeof(obj[i]) == "object" && obj[i] != null) {
                            o[i] = arguments.callee(obj[i]);
                        } else {
                            o[i] = obj[i];
                        }
                    }
                }
                return o;
            },
            delete(param) {
                this.$confirm('确定删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.send(param)
                }).catch(() => {
                    this.getList();
                });
            },
            send(params) {
                let self = this;
                request({
                    params: {
                        r: params.r
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                        self.goodsEditVisible=false
                        self.btnLoading=false
                    } 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: 'happiness/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.goodsLabel= e.data.data.goods_label;
                            if(e.data.data.goods_label)
                            {
                                console.log(e.data.data.goods_label);
                                if(self.tabs.length==1)
                                {
                                    self.tabs=self.tabs.concat(self.goodsLabel)
                                }
                            }
                            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;
                            this.pay_success_jump = e.data.data.pay_success_jump
                        } 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) => {
                        if (e.can_change_status == true) {
                            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: 'happiness/store-goods/mutiple-off',
                        },
                        method: 'post',
                        data: {
                            type: 1,
                            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;
                });

            },
            // 批量上架商品
            multipleOn() {
                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: 'happiness/store-goods/mutiple-off',
                        },
                        method: 'post',
                        data: {
                            type: 2,
                            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;
                });

            },
            hidePaySuccessSelectJumpUrlDialogVisible() {
                this.paySuccessSelectJumpUrlDialogVisible = false
            },
            onChangeJumpUrl(goods) {
                this.currentItem = goods
                this.paySuccessSelectJumpUrlDialogVisible = true
            },
            checkSelectable(row) {
                if (row.can_change_status == true) {
                    return true;
                } else {
                    return false;
                }
            },
        }
    });
</script>