qimall/addons/CloudStock/backend/views/gift-plan/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('gift-plan-edit', $diyPath);

?>

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table
            ref="table"
            :api="'cloud-stock/gift-plan/index'"
            @selection-change="handleSelectionChange"
            :search-list="searchList"
            @search="handleSearch"
    >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column align="center" prop="id" label="id" min-width="70"></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"
                min-width="400"
                label="赠送云库存商品">
            <template slot-scope="scope">
                <el-table :data="scope.row.give_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-column prop="num" label="数量" align="center"></el-table-column>
                </el-table>

            </template>
        </el-table-column>
        <el-table-column align="center" prop="gift_condition_text" label="赠送条件" min-width="70"></el-table-column>
        <el-table-column align="center" prop="gift_recipient" label="赠送对象" min-width="70"></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>
        <template slot="header-left">
            <el-button type="primary" size="mini"  @click="batchActivation(1)">批量启用</el-button>
        </template>
        <template slot="header-left">
            <el-button type="primary" size="mini"  @click="batchActivation(0)">批量禁用</el-button>
        </template>
    </com-list-table>
    <gift-plan-edit v-model="edit.show" :edit_row="edit" @refresdatafun="getList"></gift-plan-edit>
</com-list-page>


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

                {
                    key: 'goods_id',
                    title: '请输入主商城商品id',
                    type: 'text',
                },
            ],
            btnLoad: false,
            apply_edit: false,
            id:0,
            remark:'',
            check_remark:'',
            check_status:'1',

            edit: {
                show: false,
                id: 0,
                title:"添加赠送方案"
            },
        },
        methods: {
            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/gift-plan/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/gift-plan/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.list.splice(index, 1);
                        } 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/gift-plan/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>