qimall/addons/Coupon/backend/views/components/coupon-select.php

<template id="coupon-select">
    <div>
        <el-dialog title="选择优惠券" :visible.sync="dialogVisible" width="1100px" @close="dialogClose" append-to-body>
            <div v-loading='loading'>
                <div class="check_box flex flex-y-center" style="margin-bottom: 20px;">
                    <el-form>
                        <el-form-item label="优惠券名称" prop="title">
                            <el-input v-model="keyword" placeholder='请输入优惠券名称' size="small" style="width: 50%;"></el-input>
                            <el-button type="primary" size="small" @click="query">查询</el-button>
                            <el-button type="danger" @click="resetQuery" size="small" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" ref="multipleTable" key='coupon' :row-key="getRowKeys" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :reserve-selection="true" width="60" align='center'></el-table-column>
                    <el-table-column prop="id" label="序号" width="80" align='center'></el-table-column>
                    <el-table-column prop="name" label="优惠券名称" width="180" align='center'></el-table-column>
                    <el-table-column prop="total_count" label="数量" width="80" align='center'></el-table-column>
                    <el-table-column prop="min_price" label="最低消费金额" width="120" align='center'></el-table-column>
                    <el-table-column prop="type_text" label="类型" width="120" align='center'>平台优惠券</el-table-column>
                    <el-table-column prop="discount_method" label="优惠方式" align='center'>
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 1">{{ scope.row.discount }}折</div>
                            <div v-else>优惠{{ scope.row.sub_price }}元</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="effective_time" label="有效时间" align='center'>
                        <template slot-scope="scope">
                            <span v-if="scope.row.expire_type == 1">
                                领取{{scope.row.expire_day}}天后过期
                            </span>
                            <span v-else-if="scope.row.expire_type == 2">
                                {{scope.row.begin_at|dateTimeFormat('Y-m-d H:i:s')}}至{{scope.row.end_at|dateTimeFormat('Y-m-d H:i:s')}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="是否过期" width="100" align='center'>
                        <template slot-scope="scope">
                            <div v-if="scope.row.is_failure != 0">已过期</div>
                            <div v-else>未过期</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="发放数量" align='center'>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.num" size="small" :min="1" :max="scope.row.total_count == -1?99999999999:Number(scope.row.total_count)"></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="check_pagination flex">
                    <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="chooseSure" size="small">确 定</el-button>
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    Vue.component('coupon-select', {
        template: '#coupon-select',
        props: {
            coupon_arr: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            couponLoading: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                loading: false,
                dialogVisible: false,
                form: {},
                staging_arr: [],
                tableData: [],
                keyword: null,
                page: 1,
                pageCount: 0,
            }
        },
        watch: {
            couponLoading: function(newVal) {
                if (newVal) {
                    this.dialogVisible = true;
                    if (this.$refs.multipleTable) {
                        this.$refs.multipleTable.clearSelection(); // 清空选择
                    }
                    this.getCoupon();
                }
            },
            // index: function(newVal) {
            //     if (newVal != -1) {
            //         this.dialogVisible = true;
            //         this.getCoupon();
            //     }
            // },
        },
        computed: {
            show_clear_search_btn: function() {
                return this.keyword != null;
            },
        },
        methods: {
            query() {
                this.page = 1;
                this.getCoupon();
            },
            resetQuery() { // 清空查询条件
                this.keyword = null;
                this.page = 1;
                this.getCoupon();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getCoupon();
            },
            getCoupon() {
                this.loading2 = true;
                request({
                    params: {
                        r: 'coupon/default/select-coupon',
                    },
                    data: {
                        page: this.page,
                        limit: 10,
                        keyword: this.keyword,
                    },
                    method: 'post',
                }).then(e => {
                    this.loading2 = false;
                    if (e.data.code == 0) {
                        this.tableData = e.data.data.list;
                        let coupon_arr_length = this.coupon_arr.length;
                        this.tableData.forEach(item => {
                            this.$set(item, 'num', 1);
                            if (coupon_arr_length > 0) {
                                this.coupon_arr.forEach(row => {
                                    if (item.id == row.relevant_id) {
                                        // 已选的优惠券被勾选
                                        this.$refs.multipleTable.toggleRowSelection(item);
                                        this.$set(item, 'num', row.num);
                                    }
                                });
                            }
                        })
                        this.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                })
            },
            getRowKeys(rows) {
                return rows.id
            },
            handleSelectionChange(val) { //优惠券选择事件
                this.staging_arr = val;
            },
            chooseSure() { //确定选择券
                this.dialogVisible = false;
                let self = this;
                let new_arr = [];
                this.staging_arr.forEach(function(item) {
                    let is_push = true;
                    if (self.coupon_arr) {
                        for (let index in self.coupon_arr) {
                            let row = self.coupon_arr[index];
                            if (item.id == row.relevant_id) {
                                is_push = false;
                                self.$set(row, 'num', item.num);
                                return false; // 终止本次循环
                            }
                        }
                    }

                    if (is_push) {
                        new_arr.push({
                            relevant_id: item.id,
                            num: item.num,
                            name: item.name,
                            total_count: item.total_count,
                            from_type: item.from_type,
                            discount_method: item.type == 1 ? item.discount + '折' : '优惠' + item.sub_price + '元',
                            status: item.status,
                        });
                    }
                });
                self.coupon_arr.push(...new_arr);
                this.$emit('submit', self.coupon_arr);
            },
            dialogClose() {
                this.$emit('close')
            },
        }
    })
</script>