1. 新增对账单

src/App.vue

@@ -27,7 +27,7 @@ export default {
 }
 // 滚动条样式
 ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  width: 15x !important;
+  width: 15px !important;
   height: 15px !important;
 }
 // ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
@@ -42,4 +42,57 @@ export default {
   border-radius: 15px;
   //background-color: #0257aa;
 }
+// 表格高度不一致，将高度撑开
+// ::v-deep .el-table__fixed,.el-table__fixed-left, .el-table__fixed-right {
+//         pointer-events: none;
+//         td {
+//             pointer-events: auto;
+//         }
+// }
 </style>
+<style lang="scss">
+  .app-container {
+    padding: 20px 20px 10px !important;
+    .app-container_flex_auto {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: calc( 100vh - 150px );
+      // 查询条件
+      .app-container_form {
+        flex-shrink: 0;
+      }
+      .app-container_table {
+        flex: auto;
+        .app-container_table_main {
+          height: calc( 100% - 40px );
+        }
+      }
+      .app-container_table_page {
+        width: 100%;
+        flex-shrink: 0;
+        padding: 10px 20px 0 0;
+        text-align: end;
+        ::v-deep .pagination-container {
+          padding: 10px 16px !important;
+          margin-bottom: 0px !important; 
+          margin-top: 0px !important;
+        }
+      }
+      // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式
+      // 15px 为滚动条的高度
+      .el-table__fixed{
+        height: calc(100% - 15px) !important; 
+      }
+      //fixed-right 的话，需要设置
+      .el-table__fixed-right{
+        height: calc(100% - 15px) !important; 
+      }
+      .el-table__fixed-body-wrapper .el-table__body {
+        padding-bottom: 15px !important; // 滚动条高度
+      }
+    }
+  }
+
+  
+</style>

src/api/financeMr/guizhuoPOS.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request';
+
+/**
+ * 查询对账单记录列表
+ * @query [ pageNum: 分页对象的起始页码; pageSize: 分页对象的每页显示条目个数; beginTime: 开始时间; endTime: 结束时间; sortField: 排序字段; sortOrder: 排序方式; ]
+ */
+export function listStatements(query) {
+  return request({
+    url: '/order/gzbankPosBill/posBill',
+    method: 'get',
+    params: query
+  });
+}
+
+/**
+ * 导出对账单记录
+ * @query [ beginTime: 开始时间; endTime: 结束时间; sortField: 排序字段; sortOrder: 排序方式; ]
+ */
+export function exportStatements(query) {
+  return request({
+    url: '/order/gzbankPosBill/exportPosBill',
+    method: 'get',
+    responseType: 'blob',
+    params: query
+  });
+}

src/components/Pagination/indexNew.vue

@@ -0,0 +1,113 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container-new">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container-new {
+  background: #fff;
+}
+.pagination-container-new.hidden {
+  display: none;
+}
+</style>

src/main.js

@@ -23,6 +23,8 @@ import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
+// 分页组件
+import PaginationNew from "@/components/Pagination/indexNew";
 // 自定义表格工具组件
 import RightToolbar from "@/components/RightToolbar"
 // 富文本组件
@@ -60,6 +62,7 @@ Vue.prototype.$axios = axios
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)
+Vue.component('PaginationNew', PaginationNew)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)

src/views/finance/Statements/StatementsIndexNew.vue

@@ -10,241 +10,159 @@
 
 <template>
   <div class="app-container app-container-scheduling">
-    <div class="app-container-queryform" v-show="showSearch">
-      <!-- 页面查询表单 Start -->
-      <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
-        <el-form-item label="业务订单号" prop="orderNo" v-if="queryShow.orderNo">
-          <el-input
-            v-model="queryParams.orderNo"
-            placeholder="请输入业务单号"
-            clearable
-            size="small"
-            @keyup.enter.native="handleQuery"
-          />
-          <span @click="clearQuery('orderNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item label="支付单号" prop="trackId" v-if="queryShow.trackId">
-          <el-input
-            v-model="queryParams.trackId"
-            placeholder="请输入支付单号"
-            clearable
-            size="small"
-            @keyup.enter.native="handleQuery"
-          />
-          <span @click="clearQuery('trackId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item label="购票渠道" prop="source" v-if="queryShow.source">
-          <el-select v-model="queryParams.source" placeholder="请选择购票渠道" clearable>
-            <el-option
-              v-for="dict in dict.type.order_form_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-          <span @click="clearQuery('source')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item label="支付方式" prop="payWay" v-if="queryShow.payWay">
-          <el-select v-model="queryParams.payWay" placeholder="请选择支付方式" clearable>
-            <el-option
-              v-for="dict in dict.type.pay_way_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-          <span @click="clearQuery('payWay')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item label="交易类型" prop="payType" v-if="queryShow.payType">
-          <el-select v-model="queryParams.payType" placeholder="请选择交易类型" clearable>
-            <el-option
-              v-for="dict in dict.type.transaction_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-          <span @click="clearQuery('payType')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item label="支付时间" v-if="queryShow.dateRange">
-          <el-date-picker
-            v-model="queryParams.dateRange"
-            size="small"
-            style="width: 240px"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            type="datetimerange"
-            range-separator="-"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-          ></el-date-picker>
-          <span @click="clearQuery('dateRange')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="80px">
-          <el-date-picker
-            style="width: 250px;"
-            v-model="queryParams.performDate"
-            @change="pagePerformTimeListFun"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期">
-          </el-date-picker>
-          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item label="场次" label-width="60px" v-if="!multiPerformDate && queryShow.performDate">
-          <el-select
-            v-model="queryParams.performTimeId"
-            placeholder="场次"
-            clearable
-            style="width: 100%"
-          >
-            <el-option
-              v-for="dict in pagePerformTimeList"
-              :key="dict.id"
-              :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
-              :value="dict.id"
-            />
-          </el-select>
-          <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
-        </el-form-item>
-        <el-form-item>
-          <el-dropdown @command="openQuery">
-            <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="orderNo">业务订单号</el-dropdown-item>
-              <el-dropdown-item command="trackId">支付单号</el-dropdown-item>
-              <el-dropdown-item command="source">购票渠道</el-dropdown-item>
-              <el-dropdown-item command="payWay">支付方式</el-dropdown-item>
-              <el-dropdown-item command="payType">交易类型</el-dropdown-item>
-              <el-dropdown-item command="dateRange">支付时间</el-dropdown-item>
-              <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <el-button
-            style="margin-left: 10px;"
-            type="primary"
-            icon="el-icon-search"
-            size="mini"
-            @click="handleQuery"
-            >搜索</el-button
-          >
-          <el-button
-            icon="el-icon-refresh"
-            size="mini"
-            @click="resetQuery"
-            >重置</el-button
-          >
-        </el-form-item>
-      </el-form>
-      <!-- 页面查询表单 End -->
-    </div>
-
-    <div class="app-container-main" :class="showSearch ? 'mt15' : ''">
-      <!-- 页面批量操作按钮 -->
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            v-hasPermi="['financeMr:statements:StatementsIndexNew:download']"
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            :disabled="tableDataList.length < 1"
-            @click="handleExport"
-            v-loading.fullscreen.lock="handleExportLoading"
-            element-loading-text="正在拼命生成数据中..."
-            element-loading-spinner="el-icon-loading"
-            element-loading-background="rgba(0, 0, 0, 0.5)"
-            >导出</el-button>
-        </el-col>
-
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
-      </el-row>
+    <div class="app-container_flex_auto">
+      <div class="app-container_form app-container-queryform" v-show="showSearch">
+        <!-- 页面查询表单 Start -->
+        <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
+          <el-form-item label="业务订单号" prop="orderNo" label-width="85px" v-if="queryShow.orderNo">
+            <el-input v-model="queryParams.orderNo" placeholder="请输入业务单号" clearable size="small"
+              @keyup.enter.native="handleQuery" />
+            <span @click="clearQuery('orderNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item label="支付单号" prop="trackId" v-if="queryShow.trackId">
+            <el-input v-model="queryParams.trackId" placeholder="请输入支付单号" clearable size="small"
+              @keyup.enter.native="handleQuery" />
+            <span @click="clearQuery('trackId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item label="购票渠道" prop="source" v-if="queryShow.source">
+            <el-select v-model="queryParams.source" placeholder="请选择购票渠道" clearable>
+              <el-option v-for="dict in dict.type.order_form_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+            <span @click="clearQuery('source')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item label="支付时间" v-if="queryShow.dateRange">
+            <el-date-picker v-model="queryParams.dateRange" size="small" style="width: 350px"
+              value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始时间"
+              end-placeholder="结束时间"></el-date-picker>
+            <span @click="clearQuery('dateRange')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item label="支付方式" prop="payWay" v-if="queryShow.payWay">
+            <el-select v-model="queryParams.payWay" placeholder="请选择支付方式" clearable>
+              <el-option v-for="dict in dict.type.pay_way_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+            <span @click="clearQuery('payWay')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="80px">
+            <el-date-picker style="width: 250px;" v-model="queryParams.performDate" @change="pagePerformTimeListFun"
+              type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+            <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item label="场次" label-width="60px" v-if="!multiPerformDate && queryShow.performDate">
+            <el-select v-model="queryParams.performTimeId" placeholder="场次" clearable style="width: 100%">
+              <el-option v-for="dict in pagePerformTimeList" :key="dict.id"
+                :label="dict.timeSnapshot + '(' + dict.performTimeStart + '-' + dict.performTimeEnd + ')'"
+                :value="dict.id" />
+            </el-select>
+            <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
+          </el-form-item>
+          <el-form-item>
+            <el-dropdown @command="openQuery">
+              <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="orderNo">业务订单号</el-dropdown-item>
+                <el-dropdown-item command="trackId">支付单号</el-dropdown-item>
+                <el-dropdown-item command="source">购票渠道</el-dropdown-item>
+                <el-dropdown-item command="payWay">支付方式</el-dropdown-item>
+                <!-- <el-dropdown-item command="payType">交易类型</el-dropdown-item> -->
+                <el-dropdown-item command="dateRange">支付时间</el-dropdown-item>
+                <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini"
+              @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- 页面查询表单 End -->
+      </div>
+      <div class="app-container_table app-container-main" :class="showSearch ? 'mt15' : ''">
+        <!-- 页面批量操作按钮 -->
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['financeMr:statements:StatementsIndexNew:download']" type="warning" plain
+              icon="el-icon-download" size="mini" :disabled="tableDataList.length < 1" @click="handleExport"
+              v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
+              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
+        </el-row>
 
-      <el-row :gutter="10">
-        <el-col :span="24">
+        <div class="app-container_table_main">
           <!-- 页面表格数据区域 Start -->
-          <el-table
-            v-loading="loading"
-            ref="statementsTableRef"
-            :data="tableDataList"
-            border
-            row-key="orderNo"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          <el-table 
+            v-loading="loading" 
+            ref="statementsTableRef" 
+            :data="tableDataList" 
+            border 
+            row-key="orderNo" 
             class="cust-table"
-          >
-            <el-table-column label="业务订单号" align="center" width="200">
-              <template slot-scope="scope">
-                <div style="display: inline-block">{{ scope.row.id }}</div>
-              </template>
-            </el-table-column>
-            <el-table-column label="支付单号" align="center" width="200" prop="paymentId" />
-            <el-table-column label="银联单号" align="center" width="200" prop="trackId" />
-            <el-table-column label="演出日期" align="center" width="200" prop="performDate" />
-            <el-table-column label="演出时段" align="center" width="200" prop="performTime" />
-            <el-table-column label="交易总额(元)" align="center" width="200" prop="orderPrice" />
-            <el-table-column label="核销金额(元)" align="center" width="200" prop="usePriceTotal" />
-            <el-table-column label="应到账金额(元)" align="center" width="200" prop="realPrice" />
-            <el-table-column label="分销金额(元)" align="center" width="200" prop="retailPriceTotal" />
-            <el-table-column label="费率(%)" align="center" width="200" prop="withdrawRate" />
-            <el-table-column label="手续费(元)" align="center" width="200" prop="proceMoney" />
-            <el-table-column label="退款金额(元)" align="center" width="200" prop="refundPriceTotal" />
-            <el-table-column label="下单时间" align="center" width="200" prop="createTime" />
-            <el-table-column label="支付时间" align="center" width="200" prop="payTime" />
-            <el-table-column label="支付渠道" align="center" width="200" prop="payWay">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="提现状态" align="center" width="200" prop="orderWithdrawStatus">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.order_withdraw_status" :value="scope.row.orderWithdrawStatus"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="提现金额(元)" align="center" width="200" prop="orderWithdrawRealPrice" />
-            <el-table-column label="提现账户" align="center" width="200" prop="orderWithdrawAccount" />
-            <el-table-column label="分销状态" align="center" width="200" prop="personWithdrawStatus">
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.person_withdraw_status" :value="scope.row.personWithdrawStatus"/>
-              </template>
-            </el-table-column>
-            <el-table-column label="分销税率(%)" align="center" width="200" prop="personWithdrawRealPrice" />
-            <el-table-column label="分销金额(%)" align="center" width="200" prop="personRetailRate" />
-            <el-table-column label="分销账户(%)" align="center" width="200" prop="personUnionMid" />
-          </el-table>
-          <!-- 页面表格数据区域 End -->
-        </el-col>
-        <el-col v-show="total > 0" :span="24" class="mb20">
-          <!-- 页面分页控件 -->
-          <pagination
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="initData"
-          />
-        </el-col>
-      </el-row>
+            height="100%"
+            >
+              <el-table-column label="业务订单号" align="center" width="200" fixed="left">
+                <template slot-scope="scope">
+                  <div style="display: inline-block">{{ scope.row.id }}</div>
+                </template>
+              </el-table-column>
+              <el-table-column label="支付单号" align="center" width="200" prop="paymentId" fixed="left" />
+              <el-table-column label="银联单号" align="center" width="200" prop="trackId" fixed="left" />
+              <el-table-column label="演出日期" align="center" width="200" prop="performDate" />
+              <el-table-column label="演出时段" align="center" width="200" prop="performTime" />
+              <el-table-column label="交易总额(元)" align="center" width="200" prop="orderPrice" />
+              <el-table-column label="核销金额(元)" align="center" width="200" prop="usePriceTotal" />
+              <el-table-column label="应到账金额(元)" align="center" width="200" prop="realPrice" />
+              <el-table-column label="分销金额(元)" align="center" width="200" prop="retailPriceTotal" />
+              <el-table-column label="费率(%)" align="center" width="200" prop="withdrawRate" />
+              <el-table-column label="手续费(元)" align="center" width="200" prop="proceMoney" />
+              <el-table-column label="退款金额(元)" align="center" width="200" prop="refundPriceTotal" />
+              <el-table-column label="下单时间" align="center" width="200" prop="createTime" />
+              <el-table-column label="支付时间" align="center" width="200" prop="payTime" />
+              <el-table-column label="支付渠道" align="center" width="200" prop="payWay">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay" />
+                </template>
+              </el-table-column>
+              <el-table-column label="提现状态" align="center" width="200" prop="orderWithdrawStatus">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.order_withdraw_status" :value="scope.row.orderWithdrawStatus" />
+                </template>
+              </el-table-column>
+              <el-table-column label="提现金额(元)" align="center" width="200" prop="orderWithdrawRealPrice" />
+              <el-table-column label="提现账户" align="center" width="200" prop="orderWithdrawAccount" />
+              <el-table-column label="分销状态" align="center" width="200" prop="personWithdrawStatus">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.person_withdraw_status" :value="scope.row.personWithdrawStatus" />
+                </template>
+              </el-table-column>
+              <el-table-column label="分销税率(%)" align="center" width="200" prop="personRetailRate" />
+              <el-table-column label="分销提现金额(元)" align="center" width="200" prop="personWithdrawRealPrice" />
+              <el-table-column label="分销账户" align="center" width="200" prop="personUnionMid" />
+            </el-table>
+            <!-- 页面表格数据区域 End -->
+        </div>
+      </div>
+      <div class="app-container_table_page">
+        <PaginationNew 
+          :total="total" 
+          :page.sync="queryParams.pageNum" 
+          :limit.sync="queryParams.pageSize"
+          @pagination="initData" />
+      </div>
     </div>
-      <!-- 详情 -->
-      <details-dia ref="detailsDia" @getList="getList"></details-dia>
   </div>
 </template>
 
 <script>
-import { listStatements, exportStatements, queryStatementsBillTotal } from '@/api/financeMr/StatementsNew';
-// import { indoorParkList } from '@/api/ParkingPointMgr/IndoorMgr';
+import { listStatements, exportStatements } from '@/api/financeMr/StatementsNew';
 import { exportExcel } from '@/utils/exportexcel';
-import detailsDia from "../../order/orderMr/dialog/details";
 import { pagePerformTimeList } from "@/api/schedulingMr/schedulingMr"
 import moment from "moment"
 export default {
   name: 'Statements',
-  components: {
-    detailsDia,
-    'parkingrecord-pagination-select': () => import('@/components/CustPaginationSelect') // 支持分页搜索功能的[el-select]下拉框
-  },
-  dicts: ['order_form_type', 'pay_way_type','transaction_type','order_withdraw_status','person_withdraw_status'],
+  dicts: ['order_form_type', 'pay_way_type', 'transaction_type', 'order_withdraw_status', 'person_withdraw_status'],
   data() {
     return {
       // 遮罩层
@@ -283,15 +201,15 @@ export default {
         trackId: true,
         source: true,
         payWay: true,
-        payType: false,
-        dateRange: false,
-        performDate: false,
+        payType: true,
+        dateRange: true,
+        performDate: true,
       },
       oweTotalObj: {},
       // 导出数据状态
       handleExportLoading: false,
-      summary:'',
-      otherSummary:[],
+      summary: '',
+      otherSummary: [],
       pagePerformTimeList: [],
       multiPerformDate: false,
     };
@@ -299,13 +217,18 @@ export default {
   async created() {
     let params = this.$route.query
     console.log(this.$route)
-    if(params && JSON.stringify(params) != '{}') {
-      this.$set(this.queryParams,'performDate',params.performDate?[params.performDate,params.performDate]:[])
-      if(params.performDate) {
-        await this.pagePerformTimeListFun([params.performDate,params.performDate])
+    if (params && JSON.stringify(params) != '{}') {
+      this.$set(this.queryParams, 'performDate', params.performDate ? [params.performDate, params.performDate] : [])
+      if (params.performDate) {
+        await this.pagePerformTimeListFun([params.performDate, params.performDate])
+      }
+      this.$set(this.queryParams, 'performTimeId', params.performTimeId ? params.performTimeId : '')
+      this.$set(this.queryShow, 'performDate', true)
+    } else {
+      this.$set(this.queryParams, 'performDate', [moment().subtract(1, 'days').format("yyyy-MM-DD"), moment().subtract(1, 'days').format("yyyy-MM-DD")])
+      if (this.queryParams.performDate) {
+        await this.pagePerformTimeListFun(this.queryParams.performDate)
       }
-      this.$set(this.queryParams,'performTimeId',params.performTimeId)
-      this.$set(this.queryShow,'performDate',true)
     }
     this.initData();
   },
@@ -321,7 +244,7 @@ export default {
       this.loading = true;
       listStatements(this.formatDateRange(this.queryParams, this.dateRange))
         .then((response) => {
-          this.tableDataList = response?.data?.rows|| [];
+          this.tableDataList = response?.data?.rows || [];
           this.total = response?.data?.total ?? 0;
           this.loading = false;
         })
@@ -381,7 +304,7 @@ export default {
           // 发送导出请求
           exportStatements(handleExportReq)
             .then((response) => {
-              exportExcel(response, '对账明细_'+moment().format('yyyy_MM_DD'), '.xlsx');
+              exportExcel(response, '对账明细_' + moment().format('yyyy_MM_DD'), '.xlsx');
 
               // 关闭导出遮护罩
               this.handleExportLoading = false;
@@ -403,14 +326,14 @@ export default {
      */
     formatDateRange(params) {
       var search = JSON.parse(JSON.stringify(params));
-      if (search.dateRange && search.dateRange.length>0) {
+      if (search.dateRange && search.dateRange.length > 0) {
         search['payBeginTime'] = search.dateRange[0];
         search['payEndTime'] = search.dateRange[1];
       } else {
         search['payBeginTime'] = undefined;
         search['payEndTime'] = undefined;
       }
-      if (search.performDate && search.performDate.length>0 && !search.performTimeId) {
+      if (search.performDate && search.performDate.length > 0 && !search.performTimeId) {
         search['performStartDate'] = search.performDate[0];
         search['performEndDate'] = search.performDate[1];
       } else {
@@ -435,37 +358,37 @@ export default {
       this.initData();
     },
     clearQuery(key) {
-      this.$set(this.queryShow,key,false)
-      this.$set(this.queryParams,key,'')
-      if(key == 'performDate') {
-        this.$set(this.queryParams,'performTimeId','')
+      this.$set(this.queryShow, key, false)
+      this.$set(this.queryParams, key, '')
+      if (key == 'performDate') {
+        this.$set(this.queryParams, 'performTimeId', '')
       }
     },
     openQuery(key) {
-      this.$set(this.queryShow,key,true)
+      this.$set(this.queryShow, key, true)
     },
     async pagePerformTimeListFun(value) {
       // console.log('value',value);
       try {
         this.pagePerformTimeList = []
-        this.$set(this.queryParams,'performTimeId',null)
-        if(!value){
+        this.$set(this.queryParams, 'performTimeId', null)
+        if (!value) {
           return
         }
-        if(value.length==2&&value[0]==value[1]){
+        if (value.length == 2 && value[0] == value[1]) {
           this.multiPerformDate = false
-        }else{
+        } else {
           this.multiPerformDate = true
           return
         }
-        let { data,code } = await pagePerformTimeList({
+        let { data, code } = await pagePerformTimeList({
           performDate: value[0],
           pageNum: 1,
           pageSize: 999
         })
         this.pagePerformTimeList = [].concat(data.rows)
       } catch (error) {
-        
+
       }
     },
   }
@@ -495,32 +418,37 @@ export default {
     }
   }
 }
-.statements-total{
-  .til{
+
+.statements-total {
+  .til {
     font-weight: bold;
     margin-bottom: 2px;
     margin-top: 10px;
   }
-  .summary{
-    ::v-deep span{
+
+  .summary {
+    ::v-deep span {
       color: blue;
     }
   }
-  .other-summary{
-    ::v-deep span{
+
+  .other-summary {
+    ::v-deep span {
       color: #f5bb00;
     }
   }
 }
 
 .app-container-scheduling ::v-deep .el-select__tags {
-    flex-wrap: inherit !important;
-    overflow-x: auto !important;
+  flex-wrap: inherit !important;
+  overflow-x: auto !important;
 }
+
 .app-container-scheduling ::v-deep .el-form-item__content {
   position: relative;
 }
-.app-container-scheduling ::v-deep .el-form-item__content .query_clear{
+
+.app-container-scheduling ::v-deep .el-form-item__content .query_clear {
   position: absolute;
   top: -15px;
   right: -10px;
@@ -528,6 +456,7 @@ export default {
   cursor: pointer;
   z-index: 99;
 }
+
 .app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
   display: block;
 }

src/views/finance/Statements/guizhuoPOS.vue

@@ -0,0 +1,388 @@
+<!--
+ * @Description: 财务管理 => 对账单
+ * @Author: Rockery
+ * @Date: 2021-07-28 15:14:06
+ * @LastEditors: gcz
+ * @LastEditTime: 2024-08-01 16:53:36
+ * @FilePath: \great_webui\src\views\finance\Statements\StatementsIndex.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+    <div class="app-container app-container-scheduling">
+      <div class="app-container_flex_auto">
+        <div class="app-container_form app-container-queryform" v-show="showSearch">
+          <!-- 页面查询表单 Start -->
+          <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
+            <el-form-item label="交易日期" prop="dateRange">
+              <el-date-picker
+                v-model="queryParams.dateRange"
+                size="small"
+                style="width: 240px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              ></el-date-picker>
+            </el-form-item>  
+            <el-form-item label="交易流水号" prop="trId" label-width="85px">
+              <el-input
+                v-model="queryParams.trId"
+                placeholder="请输入交易流水号"
+                clearable
+                size="small"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="交易状态" prop="trStatus">
+              <el-select v-model="queryParams.trStatus" placeholder="请选择交易状态" clearable>
+                <el-option
+                  v-for="dict in dict.type.pay_source_statu"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="商户单号" prop="merOrderNo" label-width="85px">
+              <el-input
+                v-model="queryParams.merOrderNo"
+                placeholder="请输入商户单号"
+                clearable
+                size="small"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                style="margin-left: 10px;"
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button
+                icon="el-icon-refresh"
+                size="mini"
+                @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+          <!-- 页面查询表单 End -->
+        </div>
+        <div class="app-container_table app-container-main" :class="showSearch ? 'mt15' : ''">
+          <!-- 页面批量操作按钮 -->
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                v-hasPermi="['financeMr:statements:StatementsIndexNew:download']"
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                :disabled="tableDataList.length < 1"
+                @click="handleExport"
+                v-loading.fullscreen.lock="handleExportLoading"
+                element-loading-text="正在拼命生成数据中..."
+                element-loading-spinner="el-icon-loading"
+                element-loading-background="rgba(0, 0, 0, 0.5)"
+                >导出</el-button>
+            </el-col>
+    
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
+          </el-row>
+          <div class="app-container_table_main">
+            <!-- 页面表格数据区域 Start -->
+            <el-table
+                v-loading="loading"
+                ref="statementsTableRef"
+                :data="tableDataList"
+                border
+                row-key="orderNo"
+                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+                class="cust-table"
+                height="100%"
+              >
+                <el-table-column label="交易流水号" align="center" width="200" prop="trId" />
+                <el-table-column label="商户单号" align="center" width="200" prop="merId" />
+                <el-table-column label="交易码" align="center" width="200" prop="trCode" />
+                <el-table-column label="交易描述" align="center" width="200" prop="trDesc" />
+                <el-table-column label="货币类型" align="center" width="200" prop="currType" />
+                <el-table-column label="交易日期" align="center" width="200" prop="trDate" />
+                <el-table-column label="商号编号" align="center" width="200" prop="merId" />
+                <el-table-column label="终端编号" align="center" width="200" prop="termId" />
+                <el-table-column label="交易金额(元)" align="center" width="200" prop="trAmt" />
+                <el-table-column label="手续费(元)" align="center" width="200" prop="feeAmt" />
+                <el-table-column label="原交易日期" align="center" width="200" prop="oriTrDate" />
+                <el-table-column label="原交易流水号" align="center" width="200" prop="oriTrId" />
+                <el-table-column label="原交易金额(元)" align="center" width="200" prop="oriTrAmt" />
+                <el-table-column label="交易状态" align="center" width="200" prop="trStatus">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.pay_source_statu" :value="scope.row.trStatus"/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="卡类型" align="center" width="200" prop="cardType">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.pay_card_type" :value="scope.row.cardType"/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="受理渠道标记" align="center" width="200" prop="revCeFlag" />
+              </el-table>
+              <!-- 页面表格数据区域 End -->
+          </div>
+        </div>
+        <div class="app-container_table_page">
+          <!-- 表格右下角数据 -->
+          <div class="fl statements-total">
+            <div class="til"> 小计如下：</div>
+            <div class="summary">
+              <span>总笔数<span class="summary-num">{{ summary.totalNum || '--' }}</span>笔，</span>
+              <span>交易总额<span class="summary-num">{{ summary.totalAmount || '--' }}</span>元，</span>
+              <span>手续费<span class="summary-num">{{ summary.chargeAmount || '--' }}</span>元，</span>
+              <span>实际到账金额<span class="summary-num">{{ summary.realTotalAmount || '--' }}</span>元</span>
+            </div>
+          </div>
+          <PaginationNew 
+            :total="total" 
+            :page.sync="queryParams.pageNum" 
+            :limit.sync="queryParams.pageSize"
+            @pagination="initData" />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { listStatements, exportStatements } from '@/api/financeMr/guizhuoPOS';
+  import { exportExcel } from '@/utils/exportexcel';
+  import { pagePerformTimeList } from "@/api/schedulingMr/schedulingMr"
+  import moment from "moment"
+  export default {
+    name: 'Statements',
+    dicts: ['pay_source_statu', 'pay_card_type'],
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 显示搜索条件
+        showSearch: true,
+        rules: {},
+        // 总条数
+        total: 0,
+        // 表格数据
+        tableDataList: [],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        oweTotalObj: {},
+        // 导出数据状态
+        handleExportLoading: false,
+        summary:{},
+      };
+    },
+    created() {
+        this.$set(this.queryParams,'dateRange',[moment().subtract(1, 'days').format("yyyy-MM-DD"),moment().subtract(1, 'days').format("yyyy-MM-DD")])
+        this.initData();
+    },
+    methods: {
+      /** 初始化数据 */
+      async initData() {
+        this.loading = true;
+        // this.getRevenueReportOwetotal();
+        this.getList();
+      },
+      /** 查询列表信息 */
+      getList() {
+        this.loading = true;
+        listStatements(this.formatDateRange(this.queryParams, this.dateRange))
+          .then((response) => {
+            this.tableDataList = response?.data?.pageResult?.rows|| [];
+            this.total = response?.data?.pageResult?.total ?? 0;
+            this.summary = response?.data?.calInfo ?? 0;
+            this.loading = false;
+          })
+          .catch(() => {
+            this.tableDataList = [];
+            this.total = 0;
+            this.loading = false;
+          });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.$refs?.['queryForm']?.validate?.((valid) => {
+          if (valid) {
+            this.loading = true;
+            this.$refs.statementsTableRef?.clearSort?.();
+            this.queryParams = {
+              ...this.queryParams,
+              pageNum: 1,
+              sortField: undefined,
+              sortOrder: undefined,
+              payBeginTime: undefined,
+              payEndTime: undefined
+            };
+  
+            // 初始化表格数据
+            this.tableDataList = [];
+            this.total = 0;
+  
+            this.$nextTick(() => {
+              // 重新加载表格数据
+              this.initData();
+            });
+          }
+        });
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams = {}
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = 10
+        this.handleQuery();
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        this.$confirm(`确定要导出贵州银行POS对账的数据吗？`, '提示', {
+          confirmButtonText: '确定 ',
+          cancelButtonText: '取消 ',
+          type: 'warning'
+        })
+          .then(() => {
+            // 开启导出遮护罩
+            this.handleExportLoading = true;
+  
+            // 排除不需要的属性
+            let { pageNum, pageSize, ...otherObj } = this.formatDateRange(this.queryParams, this.dateRange);
+            let handleExportReq = { ...otherObj };
+            // 发送导出请求
+            exportStatements(handleExportReq)
+              .then((response) => {
+                exportExcel(response, '贵州银行POS对账_'+moment().format('yyyy_MM_DD'), '.xlsx');
+  
+                // 关闭导出遮护罩
+                this.handleExportLoading = false;
+              })
+              .catch(() => {
+                this.$message.error('导出异常！');
+                // 关闭导出遮护罩
+                this.handleExportLoading = false;
+              });
+          })
+          .catch(() => {
+            this.$message.info('您已取消导出！');
+            // 关闭导出遮护罩
+            this.handleExportLoading = false;
+          });
+      },
+      /**
+       * 格式参数数据
+       */
+      formatDateRange(params) {
+        var search = JSON.parse(JSON.stringify(params));
+        if (search.dateRange && search.dateRange.length>0) {
+          search['startDate'] = search.dateRange[0];
+          search['endDate'] = search.dateRange[1];
+        } else {
+          search['startDate'] = undefined;
+          search['endDate'] = undefined;
+        }
+
+        delete search.dateRange
+        return search;
+      },
+      /**
+       * 当表格的排序条件发生变化的时候会触发该事件
+       */
+      handleSortChang({ column, prop, order }) {
+        this.loading = true;
+        this.queryParams = {
+          ...this.queryParams,
+          pageNum: 1,
+          sortField: prop,
+          sortOrder: order == 'descending' ? 'desc' : 'asc'
+        };
+        this.initData();
+      },
+    }
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  ::v-deep {
+    .pagination-container {
+      text-align: center;
+  
+      .el-pagination {
+        position: initial;
+      }
+    }
+  }
+  
+  .cust-table {
+    .statements-column-orderNo {
+      color: #337ab7;
+      text-decoration: none;
+      cursor: pointer;
+  
+      &:hover {
+        color: #409eff;
+        text-decoration: underline;
+      }
+    }
+  }
+  
+  
+  .app-container-scheduling ::v-deep .el-select__tags {
+      flex-wrap: inherit !important;
+      overflow-x: auto !important;
+  }
+  .app-container-scheduling ::v-deep .el-form-item__content {
+    position: relative;
+  }
+  .app-container-scheduling ::v-deep .el-form-item__content .query_clear{
+    position: absolute;
+    top: -15px;
+    right: -10px;
+    display: none;
+    cursor: pointer;
+    z-index: 99;
+  }
+  .app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
+    display: block;
+  }
+  .app-container_table_page {
+    display: flex;
+    justify-content: space-between;
+    .statements-total{
+      .til{
+        font-weight: bold;
+        margin-bottom: 2px;
+        margin-top: 10px;
+        text-align: left;
+      }
+      .summary{
+        span{
+          color: #000;
+          margin-right: 5px;
+        }
+        .summary-num {
+          margin-right: 0px;
+          color: #f5bb00;
+          padding: 0 10px;
+          font-weight: bold;
+        }
+      }
+      .other-summary{
+        ::v-deep span{
+          color: #f5bb00;
+        }
+      }
+    }
+  }
+  </style>
+  

src/views/finance/Statements/quickReconciliation.vue

@@ -7,308 +7,272 @@
 -->
 
 <template>
-    <div class="app-container app-container-scheduling">
-      <div class="app-container-queryform" v-show="showSearch">
+  <div class="app-container app-container-scheduling">
+    <div class="app-container_flex_auto">
+      <div class="app-container_table app-container-queryform" v-show="showSearch">
         <!-- 页面查询表单 Start -->
         <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
-            <el-form-item label="演出日期" label-width="80px">
-            <el-date-picker
-                style="width: 250px;"
-                v-model="queryParams.performDate"
-                type="daterange"
-                :clearable="false"
-                value-format="yyyy-MM-dd"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
+          <el-form-item label="演出日期" label-width="80px">
+            <el-date-picker style="width: 250px;" v-model="queryParams.performDate" type="daterange" :clearable="false"
+              value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
             </el-date-picker>
-            </el-form-item>
+          </el-form-item>
           <el-form-item>
-            <el-button
-              style="margin-left: 10px;"
-              type="primary"
-              icon="el-icon-search"
-              size="mini"
-              @click="handleQuery"
-              >搜索</el-button
-            >
-            <el-button
-              icon="el-icon-refresh"
-              size="mini"
-              @click="resetQuery"
-              >重置</el-button
-            >
+            <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini"
+              @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
         <!-- 页面查询表单 End -->
       </div>
-  
-      <div class="app-container-main" :class="showSearch ? 'mt15' : ''">
+
+      <div class="app-container_table app-container-main" :class="showSearch ? 'mt15' : ''">
         <!-- 页面批量操作按钮 -->
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button
-              v-hasPermi="['financeMr:statements:export']"
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              :disabled="tableDataList.length < 1"
-              @click="handleExport"
-              v-loading.fullscreen.lock="handleExportLoading"
-              element-loading-text="正在拼命生成数据中..."
-              element-loading-spinner="el-icon-loading"
-              element-loading-background="rgba(0, 0, 0, 0.5)"
-              >导出</el-button>
+            <el-button v-hasPermi="['financeMr:statements:export']" type="warning" plain icon="el-icon-download"
+              size="mini" :disabled="tableDataList.length < 1" @click="handleExport"
+              v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
+              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出</el-button>
           </el-col>
-  
+
           <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
         </el-row>
-  
-        <el-row :gutter="10">
-          <el-col :span="24">
-            <!-- 页面表格数据区域 Start -->
-            <el-table
-              v-loading="loading"
-              ref="statementsTableRef"
-              :data="tableDataList"
-              border
-              row-key="id"
-              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-              class="cust-table"
-            >
-              <el-table-column label="日期" align="center" prop="performDate" width="200" />
-              <el-table-column label="演出时段" align="center" prop="performTime" width="200" />
-              <el-table-column label="下单人数(个)" align="center" prop="viewersCount" width="200" />
-              <el-table-column label="交易总额(元)" align="center" prop="orderPrice" width="200" />
-              <el-table-column label="核销金额(元)" align="center" prop="usePriceTotal" width="200" />
-              <el-table-column label="应到账金额(元)" align="center" prop="realPrice" width="200" />
-              <el-table-column label="分销金额(元)" align="center" prop="retailPriceTotal" width="200" />
-              <el-table-column label="费率(%)" align="center" prop="withdrawRate" width="200" />
-              <el-table-column label="手续费(元)" align="center" prop="proceMoney" width="200" />
-              <el-table-column label="退款人数(个)" align="center" prop="refundViewerTotal" width="200" />
-              <el-table-column label="退款金额(元)" align="center" prop="refundPriceTotal" width="200" />
-              <el-table-column label="提现金额(元)" align="center" prop="withdrawPriceTotal" width="200" />
-              <el-table-column label="分销提现金额(元)" align="center" prop="personWithdrawPriceTotal" width="200" /> 
-              <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
-                <template slot-scope="scope">
-                <el-button
-                    size="mini"
-                    type="text"
-                    @click="goStatementsIndexNew(scope.row)"
-                    v-hasPermi="['finance:Statements:quickReconciliation:difference']"
-                >查看差异</el-button>
-                <el-button
-                    size="mini"
-                    type="text"
-                    @click="goStatementsIndexNew(scope.row)"
-                    v-hasPermi="['finance:Statements:quickReconciliation:details']"
-                >对账详情</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <!-- 页面表格数据区域 End -->
-          </el-col>
-        </el-row>
+
+        <div class="app-container_table_main">
+          <!-- 页面表格数据区域 Start -->
+          <el-table v-loading="loading" ref="statementsTableRef" :data="tableDataList" border row-key="id"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" class="cust-table" height="100%">
+            <el-table-column label="日期" align="center" prop="performDate" width="200" />
+            <el-table-column label="演出时段" align="center" prop="performTime" width="200" />
+            <el-table-column label="下单人数(个)" align="center" prop="viewersCount" width="200" />
+            <el-table-column label="交易总额(元)" align="center" prop="orderPrice" width="200" />
+            <el-table-column label="核销金额(元)" align="center" prop="usePriceTotal" width="200" />
+            <el-table-column label="应到账金额(元)" align="center" prop="realPrice" width="200" />
+            <el-table-column label="分销金额(元)" align="center" prop="retailPriceTotal" width="200" />
+            <el-table-column label="费率(%)" align="center" prop="withdrawRate" width="200" />
+            <el-table-column label="手续费(元)" align="center" prop="proceMoney" width="200" />
+            <el-table-column label="退款人数(个)" align="center" prop="refundViewerTotal" width="200" />
+            <el-table-column label="退款金额(元)" align="center" prop="refundPriceTotal" width="200" />
+            <el-table-column label="提现金额(元)" align="center" prop="withdrawPriceTotal" width="200" />
+            <el-table-column label="分销提现金额(元)" align="center" prop="personWithdrawPriceTotal" width="200" />
+            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="goStatementsIndexNew(scope.row)"
+                  v-hasPermi="['finance:Statements:quickReconciliation:difference']">查看差异</el-button>
+                <el-button size="mini" type="text" @click="goStatementsIndexNew(scope.row)"
+                  v-hasPermi="['finance:Statements:quickReconciliation:details']">对账详情</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- 页面表格数据区域 End -->
+        </div>
+      </div>
+      <div class="app-container_table_page">
+        <PaginationNew 
+          :total="total" 
+          :page.sync="queryParams.pageNum" 
+          :limit.sync="queryParams.pageSize"
+          @pagination="initData" />
       </div>
-        <!-- 详情 -->
-        <details-dia ref="detailsDia" @getList="getList"></details-dia>
     </div>
-  </template>
-  
-  <script>
-  import { listStatements, exportStatements } from '@/api/financeMr/quickReconciliation';
-  // import { indoorParkList } from '@/api/ParkingPointMgr/IndoorMgr';
-  import { exportExcel } from '@/utils/exportexcel';
-  import detailsDia from "../../order/orderMr/dialog/details";
-  import moment from "moment"
-  export default {
-    name: 'Statements',
-    components: {
-      detailsDia,
-      'parkingrecord-pagination-select': () => import('@/components/CustPaginationSelect') // 支持分页搜索功能的[el-select]下拉框
+
+    <!-- 详情 -->
+    <details-dia ref="detailsDia" @getList="getList"></details-dia>
+  </div>
+</template>
+
+<script>
+import { listStatements, exportStatements } from '@/api/financeMr/quickReconciliation';
+// import { indoorParkList } from '@/api/ParkingPointMgr/IndoorMgr';
+import { exportExcel } from '@/utils/exportexcel';
+import detailsDia from "../../order/orderMr/dialog/details";
+import moment from "moment"
+export default {
+  name: 'Statements',
+  components: {
+    detailsDia,
+    'parkingrecord-pagination-select': () => import('@/components/CustPaginationSelect') // 支持分页搜索功能的[el-select]下拉框
+  },
+  dicts: ['order_form_type', 'pay_way_type', 'transaction_type'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      rules: {},
+      // 总条数
+      total: 0,
+      // 表格数据
+      tableDataList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 导出数据状态
+      handleExportLoading: false,
+    };
+  },
+  created() {
+    this.$set(this.queryParams, 'performDate', [moment().subtract(1, 'days').format("yyyy-MM-DD"), moment().subtract(1, 'days').format("yyyy-MM-DD")])
+    this.initData();
+  },
+  methods: {
+    /** 初始化数据 */
+    async initData() {
+      this.loading = true;
+      this.getList();
     },
-    dicts: ['order_form_type', 'pay_way_type','transaction_type'],
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 显示搜索条件
-        showSearch: true,
-        // 购票渠道格式化
-        sourceOptions: [],
-        // 支付渠道格式化
-        payWayOptions: [],
-        // 交易类型格式化
-        tranTypeOptions: [],
-        // 交易日期范围
-        dateRange: [],
-        rules: {},
-        exportType: 1,
-        // 总条数
-        total: 0,
-        // 表格数据
-        tableDataList: [],
-        // 查询参数
-        queryParams: {
-        //   pageNum: 1,
-        //   pageSize: 10,
-        },
-        oweTotalObj: {},
-        // 导出数据状态
-        handleExportLoading: false,
-        summary:'',
-        otherSummary:[],
-      };
+    setParams() {
+      let params = { ...this.addDateRange(this.queryParams, this.dateRange) };
+      if (params.performDate) {
+        params.performStartDate = moment(params.performDate[0]).startOf('day').format("yyyy-MM-DD HH:mm:ss");
+        params.performEndDate = moment(params.performDate[1]).endOf('day').format("yyyy-MM-DD HH:mm:ss");
+      }
+      console
+      delete params.performDate
+      return params
     },
-    created() {
-        this.$set(this.queryParams,'performDate',[moment().format("yyyy-MM-DD"),moment().format("yyyy-MM-DD")])
-        this.initData();
+    /** 查询列表信息 */
+    getList() {
+      this.loading = true;
+      listStatements(this.setParams())
+        .then((response) => {
+          this.tableDataList = response?.data?.rows || [];
+          this.total = response?.data?.total ?? 0;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.tableDataList = [];
+          this.total = 0;
+          this.loading = false;
+        });
     },
-    methods: {
-      /** 初始化数据 */
-      async initData() {
-        this.loading = true;
-        this.getList();
-      },
-      setParams(){
-        let params = {...this.addDateRange(this.queryParams, this.dateRange)};
-        if(params.performDate){
-            params.performStartDate = moment(params.performDate[0]).startOf('day').format("yyyy-MM-DD HH:mm:ss");
-            params.performEndDate = moment(params.performDate[1]).endOf('day').format("yyyy-MM-DD HH:mm:ss");
-        }
-        delete params.performDate
-        return params
-      },
-      /** 查询列表信息 */
-      getList() {
-        this.loading = true;
-        listStatements(this.setParams())
-          .then((response) => {
-            this.tableDataList = response?.data?.rows|| [];
-            this.loading = false;
-          })
-          .catch(() => {
-            this.tableDataList = [];
-            this.loading = false;
-          });
-        },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.initData();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.$set(this.queryParams,'performDate',[moment().format("yyyy-MM-DD"),moment().format("yyyy-MM-DD")])
-        this.handleQuery();
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        this.$confirm(`确定要导出快捷对账单的数据吗？`, '提示', {
-          confirmButtonText: '确定 ',
-          cancelButtonText: '取消 ',
-          type: 'warning'
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.initData();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.$set(this.queryParams, 'performDate', [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")])
+      this.handleQuery();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$confirm(`确定要导出快捷对账单的数据吗？`, '提示', {
+        confirmButtonText: '确定 ',
+        cancelButtonText: '取消 ',
+        type: 'warning'
+      })
+        .then(() => {
+          // 开启导出遮护罩
+          this.handleExportLoading = true;
+
+          // 排除不需要的属性
+          let { pageNum, pageSize, ...otherObj } = this.setParams();
+          let handleExportReq = { ...otherObj, exportType: this.exportType };
+          // 发送导出请求
+          exportStatements(handleExportReq)
+            .then((response) => {
+              exportExcel(response, '快捷对账单_' + moment().format('yyyy_MM_DD'), '.xlsx');
+
+              // 关闭导出遮护罩
+              this.handleExportLoading = false;
+            })
+            .catch(() => {
+              this.$message.error('导出异常！');
+              // 关闭导出遮护罩
+              this.handleExportLoading = false;
+            });
         })
-          .then(() => {
-            // 开启导出遮护罩
-            this.handleExportLoading = true;
-  
-            // 排除不需要的属性
-            let { pageNum, pageSize, ...otherObj } = this.setParams();
-            let handleExportReq = { ...otherObj, exportType: this.exportType };
-            // 发送导出请求
-            exportStatements(handleExportReq)
-              .then((response) => {
-                exportExcel(response, '快捷对账单_'+moment().format('yyyy_MM_DD'), '.xlsx');
-  
-                // 关闭导出遮护罩
-                this.handleExportLoading = false;
-              })
-              .catch(() => {
-                this.$message.error('导出异常！');
-                // 关闭导出遮护罩
-                this.handleExportLoading = false;
-              });
-          })
-          .catch(() => {
-            this.$message.info('您已取消导出！');
-            // 关闭导出遮护罩
-            this.handleExportLoading = false;
-          });
-      },
-      
-      
-      /**
-       *
-       */
-       goStatementsIndexNew(row) {
-        this.$router.push({path:'/financeMr/finance/Statements/StatementsIndexNew',query:{
+        .catch(() => {
+          this.$message.info('您已取消导出！');
+          // 关闭导出遮护罩
+          this.handleExportLoading = false;
+        });
+    },
+
+
+    /**
+     *
+     */
+    goStatementsIndexNew(row) {
+      this.$router.push({
+        path: '/financeMr/finance/Statements/StatementsIndexNew', query: {
           performDate: row.performDate,
-          performTimeId: row.performTimeId
-        }});
-      },
-    }
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  ::v-deep {
-    .pagination-container {
-      text-align: center;
-  
-      .el-pagination {
-        position: initial;
-      }
-    }
+          //performTimeId: row.performTimeId
+        }
+      });
+    },
   }
-  
-  .cust-table {
-    .statements-column-orderNo {
-      color: #337ab7;
-      text-decoration: none;
-      cursor: pointer;
-  
-      &:hover {
-        color: #409eff;
-        text-decoration: underline;
-      }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .pagination-container {
+    text-align: center;
+
+    .el-pagination {
+      position: initial;
     }
   }
-  .statements-total{
-    .til{
-      font-weight: bold;
-      margin-bottom: 2px;
-      margin-top: 10px;
-    }
-    .summary{
-      ::v-deep span{
-        color: blue;
-      }
-    }
-    .other-summary{
-      ::v-deep span{
-        color: #f5bb00;
-      }
+}
+
+.cust-table {
+  .statements-column-orderNo {
+    color: #337ab7;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #409eff;
+      text-decoration: underline;
     }
   }
-  
-  .app-container-scheduling ::v-deep .el-select__tags {
-      flex-wrap: inherit !important;
-      overflow-x: auto !important;
-  }
-  .app-container-scheduling ::v-deep .el-form-item__content {
-    position: relative;
+}
+
+.statements-total {
+  .til {
+    font-weight: bold;
+    margin-bottom: 2px;
+    margin-top: 10px;
   }
-  .app-container-scheduling ::v-deep .el-form-item__content .query_clear{
-    position: absolute;
-    top: -15px;
-    right: -10px;
-    display: none;
-    cursor: pointer;
-    z-index: 99;
+
+  .summary {
+    ::v-deep span {
+      color: blue;
+    }
   }
-  .app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
-    display: block;
+
+  .other-summary {
+    ::v-deep span {
+      color: #f5bb00;
+    }
   }
-  </style>
-  
+}
+
+.app-container-scheduling ::v-deep .el-select__tags {
+  flex-wrap: inherit !important;
+  overflow-x: auto !important;
+}
+
+.app-container-scheduling ::v-deep .el-form-item__content {
+  position: relative;
+}
+
+.app-container-scheduling ::v-deep .el-form-item__content .query_clear {
+  position: absolute;
+  top: -15px;
+  right: -10px;
+  display: none;
+  cursor: pointer;
+  z-index: 99;
+}
+
+.app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
+  display: block;
+}
+</style>