peko-admin-web/src/views/room/RoomSerialView.vue

<template>
  <section class="content-header">
    <h1 id="itemTitle"></h1>
  </section>
  <!-- .content -->
  <section class="content">
    <div id="table"></div>
    <div id="toolbar">
      <div class="col-sm-12">
        <div class="big-tips">
          数据量过大，不再默认加载所有的数据，请先选择时间后，再点查询按钮
        </div>
        <form id="searchForm"
              action="/admin/roomSerial/export"
              method="POST">
          房主平台号(多个查询以英文逗号分隔):
          <input type="text"
                 name="erbanNos"
                 id="erbanNos"
                 class="input-sm"
                 style="margin-right: 40px;display: inline-block;" /> 选择时间:
          <input type="text"
                 name="startTime"
                 id="startTime"
                 class="input-sm" /> 至
          <input type="text"
                 id="endTime"
                 name="endTime"
                 class="input-sm" />
          <br />
          <div style="width: 60%">
            房间类型:
            <select name="isPermit"
                    id="isPermit"
                    class="input-sm"
                    style="width: 30%;display: inline-block;">
              <option value="0">全部</option>
              <option value="1">牌照房</option>
              <option value="3">新秀房</option>
              <!--<option value="4">个播房</option>-->
              <option value="4">个播房</option>
            </select>
          </div>
        </form>
      </div>
      <div class="col-sm-8">
        <button id="room-serial-refresh"
                class="btn btn-default">
          <i class="glyphicon glyphicon-wrench"></i>查询
        </button>
        <button id="room-serial-export"
                class="btn btn-default">
          <i class="glyphicon glyphicon-plus"></i>导出
        </button>
      </div>
    </div>
  </section>
  <!-- .content -->

  <div class="modal fade"
       id="tipModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">提示信息</h4>
        </div>
        <div class="modal-body"
             id="tipMsg"></div>
      </div>
    </div>
  </div>

  <div class="modal fade"
       id="roomGiftSerialDetailModal"
       tabindex="-1"
       role="dialog"
       aria-labelledby="modalLabel">
    <div class="modal-dialog"
         role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title"
              id="roomGiftSerialDetailModalTitle">房间明细</h4>
        </div>
        <div class="modal-body">
          <div class="summary col-sm-12">
            <div class="col-sm-6">
              <span>房间ID：</span>
              <span id="roomId"></span>
            </div>
            <div class="col-sm-6">
              <span>房间昵称：</span>
              <span id="roomTitle"></span>
            </div>
            <div class="col-sm-6">
              <span>收礼总金币：</span>
              <span id="totalDiamonds"></span>
            </div>
            <div class="col-sm-6">
              <span>房间抽成金币数：</span>
              <span id="cutDiamonds"></span>
            </div>
          </div>
          <div id="roomGiftSerialDetailTable"></div>
        </div>
        <div class="modal-footer">
          <h4 id="roundDetailModalFooter"></h4>
          <button type="button"
                  class="btn btn-default"
                  data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableHelper from "@/utils/bootstrap-table-helper";
import ComboboxHelper from "@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper";
import { serverError } from "@/utils/maintainer";

export default {
  name: "RoomSerialView",
  setup () {
    return {};
  },
  created () {
    this.$nextTick(function () {
      this.initData();
    });
  },
  methods: {
    initData () {
      // ComboboxHelper.build(null, '#isPermit');
      $(function () {
        $("#table").bootstrapTable("destroy");
        $("#table").bootstrapTable({
          columns: [
            { field: 'partitionDesc', title: '地区', align: 'center', valign: 'middle' },
            { field: "userNick", title: "用户名称", align: "center", width: "20%" },
            { field: "userErbanNo", title: "房主平台号", align: "center", width: "15%" },
            { field: "totalGold", title: "总流水", align: "center", width: "10%" },
            {
              field: "normalTotalGold",
              title: "普通礼物流水",
              align: "center",
              width: "10%",
            },
            {
              field: "backpackTotalGold",
              title: "背包礼物流水",
              align: "center",
              width: "10%",
            },
            // { field: "totalRadish", title: "萝卜流水", align: "center", width: "10%" },
            { field: "roomTitle", title: "房间标题", align: "center", width: "10%" },
            { field: "clanName", title: "公会名称", align: "center", width: "10%" },
            { field: "executionTime", title: "统计时间", align: "center", width: "15%" },
            {
              field: "id",
              title: "操作",
              align: "center",
              width: "10%",
              formatter: function (val, row, index) {
                const roomUid = row.roomUid;
                console.log("roomUid", roomUid);
                return (
                  '<button id="btnDetail" name="btnDetail" class="btn btn-sm btn-info opt-detail" roomUid=' +
                  roomUid +
                  ">" +
                  '<i class="glyphicon glyphicon-file"></i> 查看明细</button>' +
                  '<button id="btnExport" name="btnExport" class="btn btn-sm btn-success opt-export" roomUid=' +
                  roomUid +
                  '><i class="glyphicon glyphicon-export"></i>导出明细</button>'
                );
              },
            },
          ],
          undefinedText: 0,
          cache: false,
          striped: true,
          showRefresh: false,
          pagination: false,
          search: false,
          //设置为limit可以获取limit, offset, search, sort, order
          queryParamsType: "undefined",
          queryParams: function queryParams (params) {
            //设置查询参数
            var param = {
              pageNumber: params.pageNumber,
              pageSize: params.pageSize,
              searchText: params.searchText,
              erbanNos: $("#erbanNos").val(),
              startTime: $("#startTime").val(),
              endTime: $("#endTime").val(),
              isPermit: ComboboxHelper.getSelected("#isPermit"),
            };
            return param;
          },
          toolbar: "#toolbar",
          url: "",
          onLoadSuccess: function () {
            //加载成功时执行
            console.log("load success");
            enableRefreshBtn();
          },
          onLoadError: function () {
            //加载失败时执行
            console.log("load fail");
            enableRefreshBtn();
          },
        });

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

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

        $("#room-serial-refresh").click(function () {
          disableRefreshBtn();
          $("#table").bootstrapTable("refresh", { url: "/admin/roomSerial/list" });
        });

        $("#room-serial-export").click(function () {
          $("#searchForm").submit();
        });

        $("#erbanNos").change(function () {
          ComboboxHelper.setDef("#isPermit", "0");
          if ($(this).val() == "") {
            $("#isPermit").btComboBox("enable");
          } else {
            $("#isPermit").btComboBox("disable");
          }
        });

        function disableRefreshBtn () {
          $("#room-serial-refresh").attr("disabled", "true");
        }

        function enableRefreshBtn () {
          $("#room-serial-refresh").removeAttr("disabled");
        }

        // 导出房间流水明细
        $("#table").on("click", ".opt-export", function () {
          const roomUid = $(this).attr("roomUid");
          const start = $("#startTime").val();
          const end = $("#endTime").val();
          console.log("--------roomUid", roomUid, start, end);
          window.location.href = `/admin/roomSerial/exportRoomRevenueDetail?roomUid=${roomUid}&start=${start}&end=${end}`;
        });

        $("#table").on("click", ".opt-detail", function () {
          const roomUid = $(this).attr("roomUid");
          const start = $("#startTime").val();
          const end = $("#endTime").val();
          $("#roomGiftSerialDetailTable").bootstrapTable("destroy");
          $("#roomGiftSerialDetailTable").bootstrapTable({
            columns: [
              { field: "num", title: "序号", align: "center", width: "5%" },
              { field: "erbanNo", title: "平台号", align: "center", width: "5%" },
              { field: "nick", title: "昵称", align: "center", width: "5%" },
              { field: "amount", title: "收礼总金币", align: "center", width: "5%" },
              {
                field: "cutDiamonds",
                title: "房间抽成金币",
                align: "center",
                width: "5%",
              },
              { field: "bigAmount", title: "大光礼物价值", align: "center", width: "5%" },
              { field: "bigNum", title: "大光礼物数量", align: "center", width: "5%" },
            ],
            undefinedText: 0,
            cache: false,
            striped: true,
            showRefresh: false,
            pageSize: 20,
            pagination: true,
            pageList: [20, 50, 100, 200],
            search: false,
            sidePagination: "server", //表示服务端请求
            queryParamsType: "undefined",
            queryParams: function queryParams (params) {
              //设置查询参数
              var param = {
                page: params.pageNumber,
                pageSize: params.pageSize,
                start: start,
                end: end,
                roomUid: roomUid,
              };
              return param;
            },
            ajax: function (request) {
              //使用ajax请求
              $.ajax({
                type: "GET",
                url: "/admin/roomSerial/listRoomRevenueDetail",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: request.data,
                success: function (res) {
                  console.log("res-------", res);
                  apiResult(res);
                  request.success({
                    rows: res.data.rows,
                    total: res.data.total,
                  });
                  $("#roomId").html(res.data.roomId);
                  $("#roomTitle").html(res.data.roomTitle);
                  $("#totalDiamonds").html(res.data.totalDiamonds);
                  $("#cutDiamonds").html(res.data.cutDiamonds);
                  $("#roomGiftSerialDetailModal").modal("show");
                },
                error: function (req) {
                  serverError(req);
                },
              });
            },
            onLoadSuccess: function (res) {
              //加载成功时执行
              console.log("load success");
            },
            onLoadError: function () {
              //加载失败时执行
              console.log("load fail");
            },
          });
        });

        function apiResult (json) {
          if (json.code == 200 && json.message == "success") {
            return true;
          }
          $("#tipMsg").text("请求失败，错误信息：" + json.message);
          $("#tipModal").modal("show");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.big-tips {
  color: red;
  font-size: larger;
  font-weight: bold;
}
</style>