qimall/addons/CloudStock/backend/views/price-difference-gift-package/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-list-page');
ComponentHelper::loadComponentView('com-list-table');
ComponentHelper::loadComponentView('com-user-info');
$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('price-difference-gift-package-edit', $diyPath);

?>

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
            ref="table"
            :api="'cloud-stock/price-difference-gift-package/index'"
            @selection-change="handleSelectionChange"
            :search-list="searchList"
            @search="handleSearch"
    >
        <el-table-column align="center" prop="name" label="礼包名称"></el-table-column>
        <el-table-column align="center" prop="pic" label="礼包主图">
            <template slot-scope="scope">
                <com-image mode="aspectFill" :src="scope.row.pic"></com-image>
            </template>

        </el-table-column>
        <el-table-column align="center" min-width="400" label="价差礼包">
            <template slot-scope="scope">
                <el-table :data="scope.row.goods_list" border style="width: 100%">
                    <el-table-column prop="id" label="商品id" align="center"></el-table-column>
                    <el-table-column prop="name,cover_pic" label="商品信息">
                        <template slot-scope="scope">
                            <div flex="box:first">
                                <div style="padding-right: 10px;">
                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                </div>
                                <div flex="cross:top cross:center">
                                    {{scope.row.goods_name}}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

            </template>
        </el-table-column>
        <el-table-column align="center" prop="level_name" label="升级等级"></el-table-column>
        <el-table-column align="center" prop="price" label="礼包金额"></el-table-column>
        <el-table-column
                label="状态"
                width="120"
                align="center">
            <template slot-scope="scope">
                <el-switch :active-value="1" :inactive-value="0" @change="handle('status', scope.row)"
                           v-model="scope.row.status">
                </el-switch>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
                <el-button circle size="mini" type="text" @click="editClick(scope.row.id)">
                    编辑
                </el-button>
                <el-button circle size="mini" type="text" @click="del(scope.row, scope.$index)">
                    删除
                </el-button>
            </template>
        </el-table-column>

        <template slot="header-left">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="editClick(0)">添加
            </el-button>
        </template>
    </com-list-table>
    <price-difference-gift-package-edit v-model="edit.show" :edit_row="edit"
                                        @refresdatafun="getList"></price-difference-gift-package-edit>
</com-list-page>


<script>
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '赠送方案',
                    router: '',
                }
            ],
            searchList: [

                {
                    key: 'name',
                    title: '请输入礼包名称',
                    type: 'text',
                },
            ],
            btnLoad: false,
            apply_edit: false,
            id: 0,
            remark: '',
            check_remark: '',
            check_status: '1',

            edit: {
                show: false,
                id: 0,
                title: "添加赠送方案"
            },
        },
        mounted() {
            this.getLevelList();
        },
        methods: {
            getLevelList() {
                request({
                    params: {
                        r: 'cloud-stock/price-difference-gift-package/get-level-list',
                    },
                    method: 'get',

                }).then(e => {
                    if (e.data.code == 0) {
                        console.log(e.data.data);
                        this.searchList.push({
                            key: 'level',
                            title: '请选择升级等级',
                            type: 'select',
                            options: e.data.data,
                            valueKey: {
                                label: 'label',
                                value: 'value',
                            },
                        });
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },

            editClick(id) {
                if (id) {
                    this.edit.id = id;
                    this.edit.show = true;
                    this.edit.title = "编辑"
                } else {
                    this.edit.id = 0;
                    this.edit.show = true;
                    this.edit.title = "添加"
                }

            },

            handleSelectionChange(val) {
                console.log(val);
                this.multipleSelection = val;
            },
            handleSearch(keyword) {

            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                let status = data ? parseInt(data.status) : '';
                switch (type) {
                    case 'status':
                        let self = this;
                        self.listLoading = true;
                        request({
                            params: {
                                r: 'cloud-stock/price-difference-gift-package/switch-status',
                            },
                            method: 'post',
                            data: {
                                id: id,
                                status: status,
                            }
                        }).then(e => {
                            self.listLoading = 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);
                        });
                        break;

                    default:
                        break;
                }
            },
            del(row, index) {
                let self = this;
                self.$confirm('是否确认删除该礼包信息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'cloud-stock/price-difference-gift-package/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            this.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            getList() {
                this.$refs.table.handleSearch();
            },
            batchActivation(status) {
                if (!this.multipleSelection || this.multipleSelection.length == 0) {
                    this.$message.error('请选择要操作的数据');
                    return;
                }
                var ids = [];
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    ids.push(this.multipleSelection[i].id);
                }
                let self = this;
                self.$confirm('选中的数据，是否批量启用?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'cloud-stock/price-difference-gift-package/switch-status',
                        },
                        method: 'post',
                        data: {
                            id: ids,
                            status: status,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            this.getList();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },


        }
    })
</script>