peko-admin-web/src/views/gamemanage/GameBillRecordAdminView.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 id="form" action="" method="post" target="_blank">
                    <input type="hidden" id="exportplatformNo" name="platformNo">
                    <input type="hidden" id="exportBillType" name="billType">
                    <input type="hidden" id="exportStartTime" name="startDate">
                    <input type="hidden" id="exportEndTime" name="endDate">
                </form>
                <div id="toolbar">
                    平台号：<input type="text" name="platformNo" id="platformNo" class="input-sm" />
                    账单类型：<select name="billType" id="billType">
                    </select>
                    开始时间：<input type="text" name="startDate" id="startDate" class="input-sm">
                    结束时间：<input type="text" name="endDate" id="endDate" class="input-sm">
                    <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
                    <button id="btnExport" class="btn btn-sm btn-primary">导出</button>
                </div>
            </div>
        </div>
    </section>
</template>

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

export default {
    name: "GameBillRecordAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            // 所有账单类型
            getObjTypes();
            let tableLoaded = false;
            let currParams = {};
            $('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
                columns: [
                    { field: 'nick', title: '用户昵称', align: 'center', valign: 'middle', width: '10%' },
                    { field: 'platformNo', title: '平台号', align: 'center', valign: 'middle', width: '10%' },
                    { field: 'objTypeDesc', title: '账单类型', align: 'center', valign: 'middle', 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 '-';
                            }
                        }
                    },
                    { field: 'billTypeDesc', title: '收入支出', align: 'center', valign: 'middle', width: '10%' },
                    { field: 'currencyDesc', title: '币种', align: 'center', valign: 'middle', width: '10%' },
                    { field: 'amount', title: '充值币/奖励币', align: 'center', valign: 'middle', width: '5%' },
                    { field: 'actualAmount', title: '金额（元）', align: 'center', valign: 'middle', width: '5%' },
                ],
                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,
                        pageNumber: params.pageNumber,
                        platformNo: $('#platformNo').val(),
                        billType: $('#billType').val(),
                        startDate: $('#startDate').val(),
                        endDate: $('#endDate').val()
                    };
                    currParams = param;
                    return param;
                },
                uniqueId: 'code',
                toolbar: '#toolbar',
                url: '/admin/gameManage/billRecord/getList.action',
                onLoadSuccess: function () {  //加载成功时执行
                    console.log("load success");
                    tableLoaded = true;
                },
                onLoadError: function () {  //加载失败时执行
                    console.log("load fail");
                    tableLoaded = false;
                }
            })
            $('#btnSearch').on('click', function () {
                // if(!$('#platformNo').val() || !$('#startDate').val() || !$('#endDate').val()){
                //     $("#tipMsg").text("请输入必填的信息");
                //     $("#tipModal").modal('show');
                //     return;
                // }
                if ($('#startDate').val() && $('#endDate').val()) {
                    var dateStart = new Date($('#startDate').val().replace(/\-/g, "/"));
                    var dateEnd = new Date($('#endDate').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 = $("#startDate").datetimepicker({
                format: 'yyyy-mm-dd hh:ii:00',
                autoclose: true
            })
            var picker2 = $('#endDate').datetimepicker({
                format: 'yyyy-mm-dd hh:ii:00',
                autoclose: true
            })
            picker1.on('changeDate', function () {
                var date = $('#startDate').datetimepicker('getDate');
                picker2.datetimepicker('setStartDate', date);
            });
            picker2.on('changeDate', function () {
                var date = $('#endDate').datetimepicker('getDate');
                picker1.datetimepicker('setEndDate', date);
            });

            // 导出excel
            $('#btnExport').on('click', function () {
                if (!$('#platformNo').val() || !$('#startDate').val() || !$('#endDate').val()) {
                    $("#tipMsg").text("请输入必填的信息");
                    $("#tipModal").modal('show');
                    return;
                }
                var dateStart = new Date($('#startDate').val().replace(/\-/g, "/"));
                var dateEnd = new Date($('#endDate').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;
                }
                var form = $("#form");
                form.attr("action", "/admin/gameManage/billRecord/exportList.action");
                $('#exportplatformNo').val($('#platformNo').val());
                $('#exportBillType').val($('#billType').val());
                $('#exportStartTime').val($('#startDate').val());
                $('#exportEndTime').val($('#endDate').val());
                form.submit();
            })

            // 通过接口获取所有账单类型
            function getObjTypes() {
                $.ajax({
                    url: "/admin/gameManage/billRecord/objTypeList.action",
                    type: 'GET',
                    async: false,
                    datatype: 'json',
                    success: function (res) {
                        console.log(res);
                        if (res) {
                            var data = res.data;
                            var options = [];
                            options.push('<option value="">全部</option>')
                            for (var i = 0, len = data.length; i < len; i++) {
                                var item = data[i];
                                //拼接成多个<option><option/>
                                options.push('<option value="' + item.value + '">' + item.desc + '</option>')
                            }
                            $("#billType").html(options.join(' '));    //填充到select标签中
                        }
                    },
                    error: function () {
                        alert('查询类型出错');
                    }
                });
            }
        }
    },

};
</script>

<style scoped>
#erbanNo,
#billType,
#startDate,
#endDate {
    margin-right: 4px;
}</style>