peko-admin-web/src/views/users/GiftSendRecordView.vue

<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <div id="table"></div>
                <form>

                </form>

                <form id="searchForm" method="get" target="_blank">
                    <div id="toolbar">
                        送礼用户id：<input type="text" name="senderErbanNo" id="senderErbanNo" class="input-sm" />
                        收礼用户id：<input type="text" name="receiverErbanNo" id="receiverErbanNo" class="input-sm" />
                        礼物类型：
                        <select name="giftType" id="giftType">
                            <option value="">全部</option>
                            <option value="0">背包礼物</option>
                            <option value="2">普通礼物</option>
                            <option value="5">福袋奖池礼物</option>
                            <option value="7">贵族礼物</option>
                            <option value="8">周星榜礼物</option>
                        </select>
                        礼物名称：<input type="text" name="giftName" id="giftName" class="input-sm" />
                        送礼时间：<input type="text" name="startTime" id="startTime" class="input-sm">
                        - <input type="text" name="endTime" id="endTime" class="input-sm">
                        <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
                        <button id="btnExport" class="btn btn-sm btn-primary">导出</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
    name: "GiftSendRecordView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            let tableLoaded = false;
            let currParams = {};

            $('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
                columns: [
                    { field: 'senderErbanNo', title: '送礼用户id', align: 'center', width: '8%' },
                    { field: 'senderNick', title: '送礼用户昵称', align: 'center', width: '16%' },
                    { field: 'receiverErbanNo', title: '收礼用户id', align: 'center', width: '8%' },
                    { field: 'receiverNick', title: '收礼用户昵称', align: 'center', width: '16%' },
                    { field: 'giftType', title: '礼物类型', align: 'center', width: '16%' },
                    { field: 'giftName', title: '礼物名称', align: 'center', width: '10%' },
                    { field: 'giftNum', title: '礼物数量', align: 'center', width: '6%' },
                    { field: 'totalGoldNum', title: '礼物总价值(钻)', align: 'center', width: '10%' },
                    {
                        field: 'createTime',
                        title: '送礼时间',
                        align: 'center',
                        valign: 'middle',
                        width: '10%',
                        formatter: function (val, row, index) {
                            if (val) {
                                var date = new Date(val);
                                return date.format("yyyy-MM-dd hh:mm:ss");
                            } else {
                                return '-';
                            }
                        }
                    }
                ],
                cache: false,
                striped: true,
                showRefresh: false,
                pageSize: 10,
                pagination: true,
                pageList: [10, 20, 30, 50],
                sidePagination: "server", //表示服务端请求
                //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                //设置为limit可以获取limit, offset, search, sort, order
                queryParamsType: "undefined",
                queryParams: function queryParams(params) {   //设置查询参数
                    var param = {
                        pageSize: params.pageSize,
                        page: params.pageNumber,
                        senderErbanNo: $("#senderErbanNo").val(),
                        receiverErbanNo: $("#receiverErbanNo").val(),
                        giftType: $("#giftType").val(),
                        giftName: $("#giftName").val(),
                        startTime: $("#startTime").val(),
                        endTime: $("#endTime").val(),
                    };
                    currParams = param;
                    console.log(currParams);
                    return param;
                },
                uniqueId: 'code',
                toolbar: '#toolbar',
                url: '/admin/giftSendRecord/list',
                onLoadSuccess: function () {  //加载成功时执行
                    console.log("load success");
                    tableLoaded = true;
                },
                onLoadError: function () {  //加载失败时执行
                    console.log("load fail");
                    tableLoaded = false;
                }
            })
            $('#btnSearch').on('click', function () {
                // if(!$('#senderErbanNo').val() || !$('#startTime').val() || !$('#endTime').val()){
                //     $("#tipMsg").text("请输入必填的信息");
                //     $("#tipModal").modal('show');
                //     return;
                // }
                console.debug('ASDFASDF')
                // if ($('#startTime').val() && $('#endTime').val()) {
                //     var dateStart = new Date($('#startTime').val().replace(/\-/g, "/"));
                //     var dateEnd = new Date($('#endTime').val().replace(/\-/g, "/"));
                //     var diffDays = parseInt((dateEnd.getTime() - dateStart.getTime()) / parseInt(1000 * 3600 * 24));
                //     console.log(diffDays);
                //     if (diffDays > 120) {
                //         $("#tipMsg").text("开始时间与结束时间跨度不能超过3个月！");
                //         $("#tipModal").modal('show');
                //         return;
                //     }
                // }
                if (tableLoaded || currParams.pageNumber > 1) {
                    TableHelper.doRefreshAndToPage1('#table');
                } else {
                    TableHelper.doRefresh('#table');
                }
            })
            var picker1 = $("#startTime").datetimepicker({
                format: 'yyyy-mm-dd hh:ii:00',
                autoclose: true
            })
            var picker2 = $('#endTime').datetimepicker({
                format: 'yyyy-mm-dd hh:ii:00',
                autoclose: true
            })
            picker1.on('changeDate', function () {
                var date = $('#startTime').datetimepicker('getDate');
                picker2.datetimepicker('setStartTime', date);
            });
            picker2.on('changeDate', function () {
                var date = $('#endTime').datetimepicker('getDate');
                picker1.datetimepicker('setEndTime', date);
            });

            // 导出excel
            $('#btnExport').on('click', function () {
                var startDate = $('#startTime').val();
                var endDate = $('#endTime').val();
                if (null == startDate || startDate.trim() == '') {
                    $("#tipMsg").text("开始日期不能为空");
                    $("#tipModal").modal('show');
                    return;
                }
                if (null == endDate || endDate.trim() == '') {
                    $("#tipMsg").text("结束日期不能为空");
                    $("#tipModal").modal('show');
                    return;
                }
                if (startDate > endDate) {
                    $("#tipMsg").text("开始日期不能大于结束日期");
                    $("#tipModal").modal('show');
                    return;
                }

                const senderErbanNo = $("#senderErbanNo").val();
                const receiverErbanNo = $("#receiverErbanNo").val();
                const giftType = $("#giftType").val();
                const giftName = $("#giftName").val();
                const startTime = $("#startTime").val();
                const endTime = $("#endTime").val();

                console.log("--------", senderErbanNo, receiverErbanNo, giftType, giftName, startTime, endTime);
                window.location.href = `/admin/giftSendRecord/export?senderErbanNo=${senderErbanNo}&receiverErbanNo=${receiverErbanNo}&giftType=${giftType}&giftName=${giftName}&startTime=${startTime}&endTime=${endTime}`
            })

        }
    },
    unmounted() {
        $('#table').bootstrapTable('destroy');
    }
};
</script>

<style scoped>
#senderErbanNo,
#giftType,
#startTime,
#endTime {
    margin-right: 4px;
}
</style>