peko-admin-web/src/views/treasure/SeizeTreasureRecordAdminView.vue

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

            <section class="content">
                <div id="toolbar">
                    <div class="form-group col-sm-3">
                            <label for="queryStartDate" class="control-label">开始时间：</label>
                            <input type="text" class="input-sm datetime" name="startTime" id="queryStartDate" placeholder="开始时间">
                        </div>
                        <div class="form-group col-sm-3">
                            <label for="queryEndDate" class="control-label">结束时间：</label>
                            <input type="text" class="input-sm datetime" name="endTime" id="queryEndDate" placeholder="结束时间">
                        </div>
                        <div class="form-group col-sm-3">
                            <label for="erbanNo" class="control-label">用户ID：</label>
                            <input type="text" class="input-sm" name="erbanNo" id="erbanNo" placeholder="">
                        </div>
                    <div class="row"></div>
                    <div>
                        <button id="searchBtn" class="btn btn-sm btn-primary">查询</button>
                        <button id="btnExport" class="btn btn-sm btn-primary">导出</button>
                    </div>
                </div>
                <div id="table"></div>
            </section>
        </div>
    </section>
</template>

<script>
import { cleanArray } from '@/utils/maintainer';

export default {
    name: "SeizeTreasureRecordAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                let listQueryParams = {};

                $(".selectpicker").selectpicker({
                    noneSelectedText: '全部'//默认显示内容
                });

                $("#queryStartDate").datetimepicker({
                    todayBtn: true,
                    format: 'yyyy-mm-dd hh:ii:00',
                    language: 'zh-CN',
                    autoclose: true
                })

                $("#queryEndDate").datetimepicker({
                    todayBtn: true,
                    useCurrent: true,
                    format: 'yyyy-mm-dd hh:ii:00',
                    language: 'zh-CN',
                    autoclose: true
                })

                var main = {
                    init: function () {
                        this.eventRegister();
                    },

                    eventRegister: function () {

                        $('#searchBtn').on('click', function () {
                            tableRefresh();
                        });

                        $('#table').on('click', '#details', function () {
                            console.log($(this).data('id'));
                        });

                    },

                };
                main.init();

                // 导出
                $('#btnExport').on('click', function () {
                    var poolTypeList;
                    if ($("#poolTypeList").val() && $("#poolTypeList").val().length) {
                        poolTypeList = $("#poolTypeList").val().join();
                    }
                    var poolGroupList;
                    if ($("#poolGroupList").val() && $("#poolGroupList").val().length) {
                        poolGroupList = $("#poolGroupList").val().join();
                    }
                    var poolLevelList;
                    if ($("#poolLevelList").val() && $("#poolLevelList").val().length) {
                        poolLevelList = $("#poolLevelList").val().join();
                    }
                    var obj = {
                        startTime: $('#queryStartDate').val(),
                        endTime: $('#queryEndDate').val(),
                        erbanNo: $('#erbanNo').val(),
                        poolTypeList: poolTypeList,
                        poolGroupList: poolGroupList,
                        poolLevelList: poolLevelList,
                    };
                    function param(json) {
                        if (!json) return ''
                        return cleanArray(Object.keys(json).map(key => {
                            if (json[key] === undefined) return ''
                            return encodeURIComponent(key) + '=' +
                                encodeURIComponent(json[key])
                        })).join('&')
                    }
                    window.location.href = `/admin/seize-treasure/treasure/record/export?${param(obj)}`;
                });

                function tableRefresh() {
                    $('#table').bootstrapTable('destroy');
                    $('#table').bootstrapTable({
                        columns: [
                            { field: 'id', title: 'id', align: 'center', valign: 'middle', width: '5%' },
                            { field: 'erbanNo', title: 'erbanNo', align: 'center', valign: 'middle', width: '10%' },
                            { field: 'userNick', title: '昵称', align: 'center', valign: 'middle', width: '10%' },
                            { field: 'rewardId', title: '奖励id', align: 'center', valign: 'middle', width: '5%' },
                            { field: 'rewardRefId', title: '奖励关联id', align: 'center', valign: 'middle', width: '8%' },
                            { field: 'rewardType', title: '奖励类型', align: 'center', valign: 'middle', width: '8%' },
                            { field: 'rewardName', title: '奖励名称', align: 'center', valign: 'middle', width: '8%' },
                            { field: 'rewardNum', title: '奖励数量', align: 'center', valign: 'middle', width: '5%' },
                            { field: 'rewardLevel', title: '奖励等级', align: 'center', valign: 'middle', width: '5%' },
                            { field: 'rewardShowValue', title: '奖励价值', align: 'center', valign: 'middle', width: '5%' },
                            {
                                field: 'createTime',
                                title: '抽奖时间',
                                align: 'center',
                                valign: 'middle',
                                width: '20%',
                                formatter: function (val, row, index) {
                                    var date = new Date(val);
                                    return date.format("yyyy-MM-dd hh:mm:ss");
                                }
                            }
                        ],
                        cache: false,
                        striped: true,
                        showRefresh: false,
                        pageSize: 10,
                        pagination: true,
                        pageList: [10, 20, 30, 50],
                        sidePagination: 'server',
                        queryParamsType: 'undefined',
                        queryParams: function queryParams(params) {
                            var poolTypeList;
                            if ($("#poolTypeList").val() && $("#poolTypeList").val().length) {
                                poolTypeList = $("#poolTypeList").val().join();
                            }
                            var poolGroupList;
                            if ($("#poolGroupList").val() && $("#poolGroupList").val().length) {
                                poolGroupList = $("#poolGroupList").val().join();
                            }
                            var poolLevelList;
                            if ($("#poolLevelList").val() && $("#poolLevelList").val().length) {
                                poolLevelList = $("#poolLevelList").val().join();
                            }

                            var param = {
                                page: params.pageNumber,
                                pageSize: params.pageSize,
                                startTime: $('#queryStartDate').val(),
                                endTime: $('#queryEndDate').val(),
                                erbanNo: $('#erbanNo').val(),
                                poolTypeList: poolTypeList,
                                poolGroupList: poolGroupList,
                                poolLevelList: poolLevelList,
                            };
                            return param;
                        },
                        uniqueId: 'id',
                        toolbar: '#toolbar',
                        url: '/admin/seize-treasure/treasure/record',
                        onLoadSuccess: function () {
                            console.log('load success');
                        },
                        onLoadError: function () {
                            console.log('load fail');
                        }
                    });
                }


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

<style scoped>
.dataCount {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

.dataCount>p {
    padding: 5px;
    border-radius: 5px;
    background: #ccc;
    margin-right: 10px;
}
</style>