预写对账单,为对接接口

src/api/financeMr/Statements.js

@@ -0,0 +1,60 @@
+import request from '@/utils/request';
+
+/**
+ * 查询对账单记录列表
+ * @query [ pageNum: 分页对象的起始页码; pageSize: 分页对象的每页显示条目个数; beginTime: 开始时间; endTime: 结束时间; sortField: 排序字段; sortOrder: 排序方式; ]
+ */
+export function listStatements(query) {
+  return request({
+    url: '/admin/bill/list',
+    method: 'get',
+    params: query
+  });
+}
+
+/**
+ * 导出对账单记录
+ * @query [ beginTime: 开始时间; endTime: 结束时间; sortField: 排序字段; sortOrder: 排序方式; ]
+ */
+export function exportStatements(query) {
+  return request({
+    url: '/admin/bill/downloadbill',
+    method: 'get',
+    responseType: 'blob',
+    params: query
+  });
+}
+
+/**
+ * 查询对账单汇总信息
+ * @query [ beginTime: 开始时间; endTime: 结束时间; ]
+ */
+export function queryStatementsBillTotal(query) {
+  return request({
+    url: '/admin/bill/total',
+    method: 'get',
+    params: query
+  });
+}
+/**
+ * 对账单统计
+ */
+export function listStatementsStatistics(query) {
+  return request({
+    url: '/admin/bill/statis',
+    method: 'get',
+    params: query
+  });
+}
+
+/**
+ * 导出对账单
+ */
+export function exportStatementsStatistics(query) {
+  return request({
+    url: '/admin/bill/downloadbillstatis',
+    method: 'get',
+    responseType: 'blob',
+    params: query
+  });
+}

src/components/CustPaginationSelect/index.vue

@@ -0,0 +1,473 @@
+<!--
+ * @Tite: 支持分页远程搜索功能的[el-select]下拉框
+ * @Author: Rockery <1113269755@qq.com>
+-->
+
+<template>
+  <div class="paginationselect">
+    <el-select
+      v-model="selectModelValue"
+      ref="paginationSelectRef"
+      filterable
+      remote
+      :clearable="clearable"
+      :disabled="disabled"
+      reserve-keyword
+      :size="size"
+      style="width: 100%;"
+      :popper-class="purposeType != 'QUERY'?'paginationselect-select paginationselect-noquery':'paginationselect-select'"
+      :placeholder="placeholder"
+      :remote-method="handleSelectRemoteMethod"
+      :loading="remoteLoading"
+      @change="handleSelectChange"
+      @visible-change="handleSelectVisibleChange"
+    >
+      <div class="paginationselect-currentselectoption">
+        <el-divider>选中选项</el-divider>
+        <el-option
+          :key="currentSelectOption.id"
+          :label="currentSelectOption.label"
+          remote
+          disabled
+          :value="currentSelectOption.value"
+          placeholder="当前选中值"
+        />
+      </div>
+
+      <el-option
+        v-for="item in selectOptiones"
+        :key="item.id || getComponentKey('OPTION_KEY-')"
+        :label="item.label"
+        remote
+        :value="item.value"
+        placeholder="请选择"
+      />
+
+      <el-pagination
+        v-show="total>0"
+        small
+        class="fr mt5 mb10"
+        :total="total"
+        @current-change="handleCurrentChange"
+        :current-page.sync="currentPage"
+        :page-size.sync="currentPageSize"
+        layout="total, prev, pager, next"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustPaginationSelect',
+  props: {
+    // 向父组件传递查询参数数据
+    value: String,
+    // 远程查询方法
+    queryFun: {
+      type: Function,
+      require: true
+    },
+    // 父组件操作方式
+    parentOperationType: {
+      type: String,
+      require: false,
+      default: ''
+    },
+    // 下拉框大小
+    size: {
+      type: String,
+      require: false
+    },
+    // 起始页码
+    pageNum: {
+      type: Number,
+      default: 1
+    },
+    // 每一页目录条数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 查询条件
+    queryConditions: {
+      required: false,
+      type: Object,
+      default: () => ({})
+    },
+    // 关键字
+    keywordField: {
+      type: String,
+      require: false,
+      default() {
+        return 'label';
+      }
+    },
+    // 选项对象属性
+    defaultProps: {
+      required: false,
+      type: Object,
+      default() {
+        return {
+          id: 'id',
+          value: 'value',
+          label: 'label'
+        };
+      }
+    },
+    // 应用类型
+    purposeType: {
+      type: String,
+      require: false,
+      default() {
+        return 'QUERY';
+      }
+    },
+    // 是否立即查询
+    isImmediatelyQuery: {
+      type: Boolean,
+      require: false,
+      default: true
+    },
+    // 是否设置默认值
+    isSetDefaultValue: {
+      type: Boolean,
+      require: false,
+      default: false
+    },
+    // 是否可以清空
+    clearable: {
+      type: Boolean,
+      require: false,
+      default: true
+    },
+    // 是否停车点范围  0：否 1：是
+    isParkScope: {
+      type: String,
+      require: false,
+      default: '0'
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      require: false,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      require: false,
+      default: '请选择或输入关键词搜索'
+    }
+  },
+  data() {
+    return {
+      // 当前选中选项
+      currentSelectOption: {},
+      // 远程搜索定时器
+      handleRemoteTimeout: null,
+      // 下拉框选项列表
+      selectOptiones: [],
+      // 是否正在从远程获取数据
+      remoteLoading: false,
+      // 列表查询入参
+      queryParams: {},
+      // 操作方式
+      operationType: '',
+      // 数据总数
+      total: 0
+    };
+  },
+  computed: {
+    // 组件绑定值
+    selectModelValue: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    },
+    // 当前页码
+    currentPage: {
+      get() {
+        return this.pageNum;
+      },
+      set(val) {
+        this.$emit('update:pageNum', val);
+      }
+    },
+    // 当前每一页目录条数
+    currentPageSize: {
+      get() {
+        return this.pageSize;
+      },
+      set(val) {
+        this.$emit('update:pageSize', val);
+      }
+    },
+    // 查询条件
+    currentQueryConditions: {
+      get() {
+        return this.queryConditions;
+      },
+      set(val) {
+        this.$emit('update:queryConditions', val);
+      }
+    }
+  },
+  watch: {
+    value(newValue, oldValue) {
+      if (!this.operationType) {
+        this.parentOperationType != 'CANCEL' && this.initData(newValue);
+      } else {
+        this.parentOperationType != '';
+      }
+    },
+    isImmediatelyQuery() {
+      this.initData();
+    }
+  },
+  created() {
+    if (this.parentOperationType == 'EDIT') {
+      this.value && this.initData(this.value);
+    } else {
+      this.initData(this.value);
+    }
+  },
+  mounted() {},
+  methods: {
+    /** 初始化数据 */
+    initData(currModelValue) {
+      this.initCurrentOption(currModelValue);
+      this.assembleQueryParams();
+      if (this.isImmediatelyQuery) {
+        this.selectOptiones = [];
+        this.option = 0;
+        this.getOptiones();
+      }
+    },
+    /** 组装查询条件 */
+    assembleQueryParams() {
+      this.queryParams[this.keywordField] = '';
+      this.queryParams['pageNum'] = this.currentPage;
+      this.queryParams['pageSize'] = this.currentPageSize;
+      this.queryParams['isParkScope'] = this.isParkScope;
+      for (let item in this.currentQueryConditions) {
+        this.queryParams[item] = this.currentQueryConditions[item];
+      }
+    },
+    /** 初始化当前数据项 */
+    initCurrentOption(param) {
+      if (param) {
+        this.getCurrentOption(param);
+      } else {
+        this.currentSelectOption = {
+          id: `curr_page_select_${new Date().getTime()}`,
+          value: `curr_page_select_${new Date().getTime()}`,
+          label: '暂无选中数据'
+        };
+      }
+    },
+    /** 初始化拉框选项数据 */
+    initGetOptiones() {
+      // 开启加载状态
+      this.remoteLoading = true;
+      this.selectOptiones = [];
+      this.option = 0;
+      this.getOptiones();
+    },
+    /** 获取当前选中选项数据 */
+    getCurrentOption(param) {
+      let queryCurrReq = { pageNum: 1, pageSize: 2 };
+      queryCurrReq[this.defaultProps.value] = param;
+
+      this.queryFun(queryCurrReq).then((response) => {
+        let currentOptiones = (response?.rows || []).map((item, index) => {
+          return Object.assign(
+            {},
+            {
+              id: `curr_page_select_${new Date().getTime()}`,
+              value: item[this.defaultProps?.value],
+              label: item[this.defaultProps?.label]
+            }
+          );
+        });
+        this.currentSelectOption =
+          currentOptiones?.length > 0
+            ? currentOptiones[0]
+            : {
+                id: `curr_page_select_${new Date().getTime()}`,
+                value: `curr_page_select_${new Date().getTime()}`,
+                label: '暂无选中数据'
+              };
+      });
+    },
+    /** 获取下拉框选项数据 */
+    getOptiones() {
+      // 通过查询条件远程获取选项
+      this.queryFun(this.queryParams)
+        .then(
+          // 成功返回数据
+          (response) => {
+            // 定义是否含当前数据项标识
+            let isHasCurrentSelectOption = false;
+
+            // 处理返回数据
+            this.selectOptiones = (response?.rows || []).map((item, index) => {
+              // 组装新元素对象
+              let tempItemObj = Object.assign(
+                {},
+                {
+                  id: item[this.defaultProps.id],
+                  value: item[this.defaultProps.value],
+                  label: item[this.defaultProps.label]
+                }
+              );
+
+              // 判断是否存在当前选项数据
+              if (!isHasCurrentSelectOption && tempItemObj.value == this.currentSelectOption?.value) {
+                isHasCurrentSelectOption = true;
+                this.currentSelectOption = { ...tempItemObj };
+              }
+
+              return tempItemObj;
+            });
+
+            // 如果存在当前数据，更改数据id
+            if (isHasCurrentSelectOption) {
+              this.currentSelectOption.id = `curr_page_select_${new Date().getTime()}`;
+            }
+
+            // 数目总条数
+            this.total = response?.total ?? 0;
+
+            if (this.isSetDefaultValue && !this.selectModelValue && this.selectOptiones?.length > 0) {
+              this.selectModelValue = this.selectOptiones?.[0]?.value;
+              this.$nextTick(() => {
+                this.$emit('component-rendering-complete', this.$refs.paginationSelectRef);
+              });
+            }
+
+            // 关闭加载状态
+            this.remoteLoading = false;
+
+            this.handleRemoteTimeout != null && clearTimeout(this.handleRemoteTimeout);
+          }
+        )
+        .catch(() => {
+          // 异常返回数据
+          this.selectOptiones = [];
+          this.total = 0;
+          this.remoteLoading = false;
+        });
+    },
+    /** 远程搜索方法 */
+    handleSelectRemoteMethod(query) {
+      // 更新操作方式
+      this.operationType = 'HANDLEREMOTEMETHOD';
+
+      // 绑定关键字查询条件
+      this.queryParams[this.keywordField] = query;
+      this.currentPage = 1;
+      this.queryParams.pageNum = 1;
+
+      // 开启加载状态
+      this.remoteLoading = true;
+
+      // 设置定时器
+      this.handleRemoteTimeout = setTimeout(() => {
+        this.selectOptiones = [];
+        this.option = 0;
+        this.getOptiones();
+      }, 500);
+    },
+    /** 分页当前页码改变操作 */
+    handleCurrentChange(val) {
+      // 更新操作方式
+      this.operationType = 'HANDLEREMOTEMETHOD';
+
+      // 设置当前页码
+      this.queryParams.pageNum = val;
+      this.currentPage = val;
+      this.initGetOptiones();
+    },
+    /** 选中值操作事件 */
+    handleSelectChange(val) {
+      // 更新操作方式
+      this.operationType = 'HANDLESELECTCHANGE';
+
+      // 处理选中数据
+      if (val) {
+        for (let index = 0; index < this.selectOptiones?.length; index++) {
+          if (val == this.selectOptiones[index]?.value) {
+            this.currentSelectOption = {
+              id: `curr_page_select_${new Date().getTime()}`,
+              value: this.selectOptiones[index]?.value,
+              label: this.selectOptiones[index]?.label
+            };
+            this.$emit('pagination-select-change', this.selectOptiones[index]);
+            break;
+          }
+        }
+      } else {
+        this.currentPage = 1;
+        this.queryParams.pageNum = 1;
+        this.queryParams[this.keywordField] = '';
+        this.currentSelectOption = {
+          id: `curr_page_select_${new Date().getTime()}`,
+          value: `curr_page_select_${new Date().getTime()}`,
+          label: '暂无选中数据'
+        };
+        this.selectOptiones = [];
+        this.option = 0;
+        this.getOptiones();
+        this.$emit('pagination-select-clear');
+      }
+      let curItem = {};
+      this.selectOptiones.forEach((item) => {
+        if (val === item.value) {
+          curItem = item;
+        }
+      });
+      this.$emit('handleSelectChange', val, curItem);
+    },
+    handleSelectVisibleChange(val) {
+      if (this.isImmediatelyQuery && val) {
+        this.assembleQueryParams();
+        this.currentPage = 1;
+        this.queryParams.pageNum = 1;
+        this.queryParams[this.keywordField] = '';
+        this.selectOptiones = [];
+        this.option = 0;
+        this.getOptiones();
+      }
+    },
+    /** 获取随机唯一标识 */
+    getComponentKey(param) {
+      return `${param}${new Date().getTime()}_${this.option++}`;
+    }
+  },
+  beforeDestroy() {
+    this.handleRemoteTimeout != null && clearTimeout(this.handleRemoteTimeout);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.paginationselect {
+  &-currentselectoption {
+    border-bottom: 1px solid #e7eaec;
+
+    .el-divider--horizontal {
+      margin: 10px 0 !important;
+    }
+
+    .el-select-dropdown__item.selected {
+      font-size: 14px;
+      color: #c0c4cc;
+      cursor: text;
+      font-weight: normal;
+    }
+  }
+}
+</style>

src/views/finance/Statements/StatementsIndex.vue

@@ -0,0 +1,566 @@
+<!--
+ * @Description: 财务管理 => 对账单
+ * @Author: Rockery
+ * @Date: 2021-07-28 15:14:06
+ * @LastEditors: gcz
+ * @LastEditTime: 2024-06-28 14:57:28
+ * @FilePath: \great_webui\src\views\finance\Statements\StatementsIndex.vue
+ * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
+-->
+
+<template>
+  <div class="app-container">
+    <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="orderId">
+          <el-input
+            v-model="queryParams.orderId"
+            placeholder="请输入订单号"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="支付单号" prop="transactionId">
+          <el-input
+            v-model="queryParams.transactionId"
+            placeholder="请输入支付单号"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="购票渠道" prop="ordeFormType">
+          <el-select v-model="queryParams.ordeFormType" clearable placeholder="请选择购票渠道">
+            <el-option
+              v-for="ordeFormTypeOption in ordeFormTypeOptions"
+              :key="ordeFormTypeOption.dictValue"
+              :label="ordeFormTypeOption.dictLabel"
+              :value="ordeFormTypeOption.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付渠道" prop="payChannel">
+          <el-select v-model="queryParams.payChannel" clearable placeholder="请选择支付渠道">
+            <el-option
+              v-for="payChannelOption in payChannelOptions"
+              :key="payChannelOption.dictValue"
+              :label="payChannelOption.dictLabel"
+              :value="payChannelOption.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="交易类型" prop="tranType">
+          <el-select v-model="queryParams.tranType" clearable placeholder="请选择交易类型">
+            <el-option
+              v-for="tranTypeOption in tranTypeOptions"
+              :key="tranTypeOption.dictValue"
+              :label="tranTypeOption.dictLabel"
+              :value="tranTypeOption.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- <el-form-item label="交易状态" prop="tranStatus">
+          <el-select v-model="queryParams.tranStatus" clearable placeholder="请选择交易状态">
+            <el-option
+              v-for="tranStatusOption in tranStatusOptions"
+              :key="tranStatusOption.dictValue"
+              :label="tranStatusOption.dictLabel"
+              :value="tranStatusOption.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>-->
+        <el-form-item label="交付时间">
+          <el-date-picker
+            v-model="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>
+          <el-button
+            v-hasPermi="['financeMr:statements:query']"
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button
+            v-hasPermi="['financeMr:statements:reset']"
+            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">
+          <div style="border: 1px solid #dfe4ed">
+            <span style="color: #ff4949">请选择导出账单记录类型：</span>
+            <el-switch
+              v-model="reportType"
+              inactive-color="#ffba00"
+              active-color="#13ce66"
+              inactive-text="运营方"
+              active-text="银联"
+              inactive-value="0"
+              active-value="1"
+            ></el-switch>
+          </div>
+        </el-col>
+        <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-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
+            lazy
+            :load="load"
+            row-key="id"
+            @sort-change="handleSortChang"
+            :tree-props="{ children: 'orderList', hasChildren: 'hasChildren' }"
+            class="cust-table"
+          >
+            <el-table-column label="订单号" align="center" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                <template v-if="scope.row.showDetail">
+                  <div
+                    class="statements-column-orderid"
+                    @click="handleViewOrder(scope.row)"
+                    style="display: inline-block"
+                  >
+                    {{ scope.row.orderId }}
+                  </div>
+                </template>
+                <template v-else>
+                  <div style="display: inline-block">{{ scope.row.orderId }}</div>
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column label="支付单号" align="center" prop="transactionId" :show-overflow-tooltip="true" />
+            <el-table-column label="支付金额(元)" align="center" prop="payAmount" :show-overflow-tooltip="true" />
+            <el-table-column label="手续费(元)" align="center" prop="feeAmt" :show-overflow-tooltip="true" />
+            <el-table-column label="到账金额(元)" align="center" prop="paiAmt" :show-overflow-tooltip="true" />
+            <el-table-column
+              label="支付渠道"
+              align="center"
+              prop="payChannel"
+              :formatter="payChannelFormatter"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="交易类型"
+              align="center"
+              prop="tranType"
+              :formatter="tranTypeFormatter"
+              :show-overflow-tooltip="true"
+            />
+            <!-- <el-table-column
+              label="交易状态"
+              align="center"
+              prop="tranStatus"
+              :formatter="tranStatusFormatter"
+              :show-overflow-tooltip="true"
+            />-->
+            <el-table-column label="交易时间" align="center" prop="tranTime" :show-overflow-tooltip="true" />
+          </el-table>
+          <!-- 页面表格数据区域 End -->
+        </el-col>
+
+        <el-col :span="24" class="mt20 mb20">
+          <!-- 表格右下角数据 -->
+          <div class="fl statements-total">
+            银行账单数据汇总：
+            <br />总笔数累计
+            <span class="statements-all">{{oweTotalObj.totalCount || 0}}</span> 笔，交易金额
+            <span class="statements-all">{{oweTotalObj.totalAmount || 0}}</span> 元，手续费
+            <span class="statements-all">{{oweTotalObj.totalFeeAmount || 0}}</span> 元；退款成功
+            <span class="statements-all">{{oweTotalObj.totalRefundCount || 0}}</span> 笔，交易金额
+            <span class="statements-all">{{oweTotalObj.totalRefundAmount || 0}}</span> 元，手续费
+            <span class="statements-all">{{oweTotalObj.totalRefundFeeAmount || 0}}</span> 元；实际到账金额
+            <span class="statements-all">{{oweTotalObj.totalRealAmount || 0}}</span> 元
+            <br />明细如下：
+            <br />微信支付成功
+            <span>{{oweTotalObj.wechatCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.wechatAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.wechatFeeAmount || 0}}</span> 元；退款成功
+            <span>{{oweTotalObj.wechatRefundCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.wechatRefundAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.wechatRefundFeeAmount || 0}}</span> 元；实际到账金额
+            <span>{{oweTotalObj.wechatRealAmount || 0}}</span> 元
+            <br />快捷支付成功
+            <span>{{oweTotalObj.quickCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.quickAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.quickFeeAmount || 0}}</span> 元；退款成功
+            <span>{{oweTotalObj.quickRefundCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.quickRefundAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.quickRefundFeeAmount || 0}}</span> 元；实际到账金额
+            <span>{{oweTotalObj.quickRealAmount || 0}}</span> 元
+            <br />无感支付成功
+            <span>{{oweTotalObj.unconsCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.unconsAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.unconsFeeAmount || 0}}</span> 元；退款成功
+            <span>{{oweTotalObj.unconsRefundCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.unconsRefundAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.unconsRefundFeeAmount || 0}}</span> 元；实际到账金额
+            <span>{{oweTotalObj.unconsRealAmount || 0}}</span> 元
+            <br />聚合支付成功
+            <span>{{oweTotalObj.unionCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.unionAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.unionFeeAmount || 0}}</span> 元；退款成功
+            <span>{{oweTotalObj.unionRefundCount || 0}}</span> 笔，交易金额
+            <span>{{oweTotalObj.unionRefundAmount || 0}}</span> 元，手续费
+            <span>{{oweTotalObj.unionRefundFeeAmount || 0}}</span> 元；实际到账金额
+            <span>{{oweTotalObj.unionRealAmount || 0}}</span> 元
+          </div>
+        </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>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listStatements, exportStatements, queryStatementsBillTotal } from '@/api/financeMr/Statements';
+// import { indoorParkList } from '@/api/ParkingPointMgr/IndoorMgr';
+import { exportExcel } from '@/utils/exportexcel';
+
+export default {
+  name: 'Statements',
+  components: {
+    'parkingrecord-pagination-select': () => import('@/components/CustPaginationSelect') // 支持分页搜索功能的[el-select]下拉框
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 购票渠道格式化
+      ordeFormTypeOptions: [],
+      // 支付渠道格式化
+      payChannelOptions: [],
+      // 交易类型格式化
+      tranTypeOptions: [],
+      // 交易状态格式化
+      tranStatusOptions: [],
+      // 交易日期范围
+      dateRange: [],
+      rules: {
+        orderId: [
+          {
+            pattern: /^[+]{0,1}(\d+)$/,
+            message: '订单号必须为纯数字',
+            trigger: 'blur'
+          }
+        ],
+        // transactionId: [
+        //   {
+        //     pattern: /^[+]{0,1}(\d+)$/,
+        //     message: '支付单号必须为纯数字',
+        //     trigger: 'blur'
+        //   }
+        // ]
+      },
+      reportType: 0,
+      reportTypeObj: {
+        0: '运营方账单记录',
+        1: '微信或贵州银行账单记录'
+      },
+      // 总条数
+      total: 0,
+      // 表格数据
+      tableDataList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderId: undefined,
+        transactionId: undefined,
+        payChannel: undefined,
+        tranType: undefined,
+        tranStatus: undefined,
+        parkNo: undefined,
+        ordeFormType: undefined,
+      },
+      oweTotalObj: {},
+      // 导出数据状态
+      handleExportLoading: false,
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    /** 初始化数据 */
+    async initData() {
+      this.loading = true;
+      await this.getMainOptions();
+      this.getRevenueReportOwetotal();
+      this.getList();
+    },
+    /** 查询列表信息 */
+    getList() {
+      this.loading = true;
+      listStatements(this.formatDateRange(this.queryParams, this.dateRange))
+        .then((response) => {
+          this.tableDataList = response?.rows || [];
+          this.total = response?.total ?? 0;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.tableDataList = [];
+          this.total = 0;
+          this.loading = false;
+        });
+    },
+    getRevenueReportOwetotal() {
+      let { pageNum, pageSize, sortField, sortOrder, ...otherObj } = this.formatDateRange(
+        this.queryParams,
+        this.dateRange
+      );
+      queryStatementsBillTotal(otherObj).then((response) => {
+        this.oweTotalObj = response?.data || {};
+      });
+    },
+    /** 获取主要选项列表 */
+    async getMainOptions() {
+      // 购票渠道选项列表
+      await this.getDicts('order_form_type').then((response) => {
+        this.ordeFormTypeOptions = response?.data || [];
+      });
+
+      // 支付渠道选项列表
+      await this.getDicts('pay_way_type').then((response) => {
+        this.payChannelOptions = response?.data || [];
+      });
+
+      // 交易类型选项列表
+      await this.getDicts('tran_type').then((response) => {
+        this.tranTypeOptions = response?.data || [];
+      });
+
+      // 交易状态选项列表
+      // await this.getDicts('tran_status').then(response => {
+      //   this.tranStatusOptions = response?.data || [];
+      // });
+    },
+    /** 购票渠道格式化 */
+    ordeFormTypeFormatter(row) {
+      return this.selectDictLabel(this.ordeFormTypeOptions, row?.ordeFormType);
+    },
+    /** 支付渠道格式化 */
+    payChannelFormatter(row) {
+      return this.selectDictLabel(this.payChannelOptions, row?.payChannel);
+    },
+    /** 交易类型格式化 */
+    tranTypeFormatter(row) {
+      return this.selectDictLabel(this.tranTypeOptions, row?.tranType);
+    },
+    /** 交易状态格式化 */
+    tranStatusFormatter(row) {
+      return this.selectDictLabel(this.tranStatusOptions, row?.tranStatus);
+    },
+    /** 搜索按钮操作 */
+    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,
+            beginTime: undefined,
+            endTime: undefined
+          };
+
+          // 初始化表格数据
+          this.tableDataList = [];
+          this.total = 0;
+
+          this.$nextTick(() => {
+            // 重新加载表格数据
+            this.initData();
+          });
+        }
+      });
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.$confirm(`确定要导出“${this.reportTypeObj[this.reportType] || ''}”的数据吗？`, '提示', {
+        confirmButtonText: '确定 ',
+        cancelButtonText: '取消 ',
+        type: 'warning'
+      })
+        .then(() => {
+          // 开启导出遮护罩
+          this.handleExportLoading = true;
+
+          // 排除不需要的属性
+          let { pageNum, pageSize, ...otherObj } = this.formatDateRange(this.queryParams, this.dateRange);
+          let handleExportReq = { ...otherObj, reportType: this.reportType };
+          handleExportReq.isParkScope = this.proPointListEnv.indexOf(this.proEnv) > -1 ? '1' : '0';
+          // 发送导出请求
+          exportStatements(handleExportReq)
+            .then((response) => {
+              exportExcel(response, this.reportTypeObj[this.reportType] || '', '.xlsx');
+
+              // 关闭导出遮护罩
+              this.handleExportLoading = false;
+            })
+            .catch(() => {
+              this.msgError('导出异常！');
+              // 关闭导出遮护罩
+              this.handleExportLoading = false;
+            });
+        })
+        .catch(() => {
+          this.msgInfo('您已取消导出！');
+          // 关闭导出遮护罩
+          this.handleExportLoading = false;
+        });
+    },
+    /**
+     * 格式参数数据
+     */
+    formatDateRange(params, dateRange) {
+      var search = params;
+      if (null != dateRange && '' != dateRange) {
+        search['beginTime'] = dateRange[0];
+        search['endTime'] = dateRange[1];
+      } else {
+        search['beginTime'] = undefined;
+        search['endTime'] = undefined;
+      }
+
+      return search;
+    },
+    /**
+     * 当表格的排序条件发生变化的时候会触发该事件
+     */
+    handleSortChang({ column, prop, order }) {
+      this.loading = true;
+      this.queryParams = {
+        ...this.queryParams,
+        pageNum: 1,
+        sortField: prop,
+        sortOrder: order == 'descending' ? 'desc' : 'asc'
+      };
+      this.initData();
+    },
+    load(tree, treeNode, resolve) {
+      resolve(tree.orderList);
+    },
+    /**
+     * 查看原订单
+     */
+    handleViewOrder(row) {
+      // orderId不存在
+      if (!row?.orderId) return;
+
+      if (row.businessType != '2') {
+        // 保存当前路由信息
+        this.$store.dispatch('PushCurrRouteInfo', {
+          name: 'OwnerinfoBillingDetails',
+          metaTitle: `查看原订单【${row?.orderId}】`,
+          key: `OwnerinfoBillingDetails_${row?.orderId}`
+        });
+        // 跳转详情页面
+        if (Number(row.orderType) === 1) {
+          this.$router.push(`/ownerinfobilling/details/${row?.orderId}&type=parking`);
+        } else {
+          this.$router.push(`/ownerinfobilling/details/${row?.orderId}`);
+        }
+      } else {
+        // 保存当前路由信息
+        this.$store.dispatch('PushCurrRouteInfo', {
+          name: 'MonthlyVehicleDetails',
+          metaTitle: `查看原订单【${row?.orderId}】`,
+          key: `MonthlyVehicleDetails_${row?.orderId}`
+        });
+
+        // 跳转详情页面
+        this.$router.push(`/monthlyvehicle/details/${row?.orderId}`);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .pagination-container {
+    text-align: center;
+
+    .el-pagination {
+      position: initial;
+    }
+  }
+}
+
+.cust-table {
+  .statements-column-orderid {
+    color: #337ab7;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: #409eff;
+      text-decoration: underline;
+    }
+  }
+}
+</style>