peko-admin-web/src/views/prize/PrizeRecordAdminView.vue

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

      <section class="content">
        <div id="table"></div>
        <div id="toolbar">
          <div class="col-sm-12">
            <div class="pull-left">
              <form action="/admin/box/record/export"
                    id="searchForm"
                    method="POST">
                平台号：<input type="text"
                       id="msNo"
                       name="msNo"
                       class="input-sm"
                       placeholder="请输入平台号">

                奖品名称：<input type="text"
                       id="prizeName"
                       name="prizeName"
                       class="input-sm"
                       placeholder="请输入奖品名称">

                日期：<input type="text"
                       name="startDate"
                       id="timeBegin"
                       class="input-sm datetime"
                       placeholder="起始时间">
                - <input type="text"
                       name="endDate"
                       id="timeEnd"
                       class="input-sm datetime"
                       placeholder="结束时间">

              </form>
            </div>

            <div class="pull-right">
              &nbsp;&nbsp;&nbsp;&nbsp;<button id="searchBtn"
                      class="btn btn-primary">筛选</button>
              <button id="exportBtn"
                      class="btn btn-primary">导出</button>
            </div>
          </div>

        </div>
      </section>
    </div>
  </section>
</template>

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

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

        $('.datetime').datetimepicker({
          format: 'yyyy-mm-dd hh:ii:00',
          autoclose: true
        });

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

          eventRegister: function () {

          },

          getDataFromBack: function () {

          }
        };
        main.init();

        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
          columns: [
            { field: 'id', title: 'id', align: 'center', valign: 'middle', width: '10%' },
            { field: 'uid', title: 'uid', align: 'center', valign: 'middle', width: '10%' },
            { field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '10%' },
            { field: 'nick', title: '用户昵称', align: 'center', valign: 'middle', width: '10%' },
            { field: 'partition', title: '分区', align: 'center', valign: 'middle', width: '10%' },
            { field: 'prizeName', title: '奖品名称', align: 'center', valign: 'middle', width: '10%' },
            {
              field: 'createTime', title: '抽奖时间', align: 'center', valign: 'middle', width: '20%', formatter: function (val, row, index) {
                if (val) {
                  var date = new Date(val);
                  return date.format('yyyy-MM-dd hh:mm:ss');
                } else {
                  return '-';
                }
              }
            },
            { field: 'platformValue', title: '平台价值', align: 'center', valign: 'middle', width: '10%' },
            { field: 'actualValue', title: '实际价值', align: 'center', valign: 'middle', width: '10%' },
            {
              field: 'prizePoolType', title: '转盘类型', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
                switch (row.prizePoolType) {
                  case 1:
                    return '幸运新人奖池';

                  case 2:
                    return '幸运普通奖池';

                  case 3:
                    return '幸运白名单奖池';

                  case 4:
                    return '幸运偏差奖池';

                  case 12:
                    return '幸运次数奖池';

                  case 7:
                    return '梦幻普通奖池';

                  case 9:
                    return '梦幻偏差奖池';

                  case 10:
                    return '梦幻新人奖池';

                  case 11:
                    return '梦幻白名单奖池';

                  case 13:
                    return '普通管理奖池';

                  case 14:
                    return '梦幻管理奖池';

                }
              }
            }
          ],
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 10,
          pagination: true,
          pageList: [10, 20, 30, 50],
          sidePagination: 'server',
          queryParamsType: 'undefined',
          queryParams: function queryParams (params) {
            var param = {
              pageSize: params.pageSize,
              pageNumber: params.pageNumber,
              startDate: $('#timeBegin').val(),
              endDate: $('#timeEnd').val(),
              msNo: $('#msNo').val(),
              prizeName: $("#prizeName").val()
            };
            return param;
          },
          uniqueId: 'id',
          toolbar: '#toolbar',
          url: '/admin/box/record/list',
          onLOadSuccess: function () {
            console.log('load success');
          },
          onLoadError: function () {
            console.log('load fail');
          }
        });
        // 筛选按钮点击事件
        $('#searchBtn').on('click', function () {
          TableHelper.doRefresh('#table');
        });

        $("#exportBtn").on('click', function () {
          $("#searchForm").submit();
        })
      })
    }
  },

};
</script>

<style scoped></style>