qimall/addons/ElectronCoupon/backend/views/components/electron-coupon-select.php

<template id="electron-coupon-select">
    <div>
        <el-dialog title="选择电子券" :visible.sync="dialogVisible" width="1100px" @close="dialogClose">
            <div v-loading='loading'>
                <div class="check_box flex flex-y-center" style="margin-bottom: 20px;">
                    <el-form @submit.native.prevent>
                        <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'>
                        <template slot-scope="scope">
                            {{ scope.row.amount - scope.row.receive_amount }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="discount_method" label="金额" align='center'>
                        <template slot-scope="scope">
                            {{ scope.row.price }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="effective_time" label="领用时间" align='center'>
                        <template slot-scope="scope">
                            {{scope.row.receive_begin_time|dateTimeFormat('Y-m-d H:i:s')}}至{{scope.row.receive_end_time|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="effective_time" label="使用时间" align='center'>
                        <template slot-scope="scope">
                            {{scope.row.use_begin_time|dateTimeFormat('Y-m-d H:i:s')}}至{{scope.row.use_end_time|dateTimeFormat('Y-m-d H:i:s')}}
                        </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.amount - scope.row.receive_amount"></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('electron-coupon-select', {
        template: '#electron-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.coupon_arr.length == 0 && this.$refs.multipleTable) {
                        this.$refs.multipleTable.clearSelection();// 清空选择
                    }
                    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: 'electron-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.coupon_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.coupon_id) {
                                is_push = false;
                                self.$set(row, 'num', item.num);
                                return false;// 终止本次循环
                            }
                        }
                    }

                    if (is_push) {
                        new_arr.push({
                            coupon_id: item.id,
                            num: item.num,
                            name: item.name,
                            price: item.price,
                            amount: item.amount,
                            receive_amount: item.receive_amount,
                            status: item.status,
                        });
                    }
                });
                self.coupon_arr.push(...new_arr);
                this.$emit('submit',self.coupon_arr);
            },
            dialogClose() {
                this.$emit('close')
            },
        }
    })
</script>