From 757bb11e7afbe2ddc8bae1604ca2ff6a93d67de8 Mon Sep 17 00:00:00 2001
From: zhaoxiao <zhaoxiao@syxysoft.com>
Date: Tue, 14 Sep 2021 14:14:36 +0800
Subject: [PATCH] =?UTF-8?q?[update]=20=E6=89=93=E5=8C=85=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E7=BB=B4=E6=8A=A4=E5=AD=97=E6=AE=B5=E4=BF=AE=E6=94=B9=EF=BC=9B?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=8A=A5=E8=A1=A8=E6=A8=A1=E5=9D=97=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectWorkingGroupProjectModule.vue       |   8 +-
 .../packManagement/PackProjectMaintenance.vue |   8 +-
 .../WholeInstituteStatisticsList.vue          |  71 +++-
 .../IndividualPaymentStatisticsDetail.vue     | 286 +++++++++++++++
 .../IndividualPaymentStatisticsList.vue       | 330 ++++++++++++++++++
 .../ProjectPaymentStatisticsList.vue          | 288 +++++++++++++++
 .../EnterprisePaymentStatisticsDetail.vue     | 297 ++++++++++++++++
 .../EnterprisePaymentStatisticsList.vue       | 283 +++++++++++++++
 .../WorkingGroupPaymentStatisticsDetail.vue   | 310 ++++++++++++++++
 .../WorkingGroupPaymentStatisticsList.vue     | 294 ++++++++++++++++
 10 files changed, 2152 insertions(+), 23 deletions(-)
 create mode 100644 src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsDetail.vue
 create mode 100644 src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsList.vue
 create mode 100644 src/views/statisticalReport/departmentStatistics/ProjectPaymentStatisticsList.vue
 create mode 100644 src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsDetail.vue
 create mode 100644 src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsList.vue
 create mode 100644 src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsDetail.vue
 create mode 100644 src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsList.vue

diff --git a/src/views/contractManagement/revenueContract/modules/SelectWorkingGroupProjectModule.vue b/src/views/contractManagement/revenueContract/modules/SelectWorkingGroupProjectModule.vue
index 335eda8..d4b74bd 100644
--- a/src/views/contractManagement/revenueContract/modules/SelectWorkingGroupProjectModule.vue
+++ b/src/views/contractManagement/revenueContract/modules/SelectWorkingGroupProjectModule.vue
@@ -59,6 +59,11 @@
           <j-ellipsis :value="text" :length="18"></j-ellipsis>
         </template>
 
+        <!--        进度-->
+        <template slot="rateOfProgress" slot-scope="text">
+          <progress-bar :data="text"></progress-bar>
+        </template>
+
         <template slot="status-pack" slot-scope="text,record">
           <status-slot :statu-obj="record" :status-no="text"></status-slot>
         </template>
@@ -82,10 +87,11 @@ import { JeroListMixin } from '../../../../mixins/JeroListMixin'
 import JYearDate from '../../../../components/jero/JYearDate'
 import WorkingGroupMemberUnitModule from '../../../projectManagement/modules/WorkingGroupMemberUnitModule'
 import { associatedProject } from '../../../../api/incomePaymentsApi'
+import ProgressBar from '../../../../components/ProgressBar'
 
 export default {
   name: 'SelectWorkingGroupProjectModule',
-  components: { WorkingGroupMemberUnitModule, JYearDate },
+  components: { WorkingGroupMemberUnitModule, JYearDate, ProgressBar },
   mixins: [JeroListMixin],
   props: {
     // 打包状态
diff --git a/src/views/packManagement/PackProjectMaintenance.vue b/src/views/packManagement/PackProjectMaintenance.vue
index 7fb0346..0341715 100644
--- a/src/views/packManagement/PackProjectMaintenance.vue
+++ b/src/views/packManagement/PackProjectMaintenance.vue
@@ -39,17 +39,17 @@
           <a-row>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <a-input placeholder="请输入项目名称" v-model="queryParam.companyName"></a-input>
+                <a-input placeholder="请输入项目名称" v-model="queryParam.projectName"></a-input>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.packYear"></j-year-date>
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-form-item label="打包年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <j-year-date style="width:100%" placeholder="请选择打包年份" v-model="queryParam.packYear"></j-year-date>
+              <a-form-item label="运行年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.year"></j-year-date>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
diff --git a/src/views/statisticalReport/WholeInstituteStatisticsList.vue b/src/views/statisticalReport/WholeInstituteStatisticsList.vue
index 387e19f..f0c1ec8 100644
--- a/src/views/statisticalReport/WholeInstituteStatisticsList.vue
+++ b/src/views/statisticalReport/WholeInstituteStatisticsList.vue
@@ -39,19 +39,13 @@
                 <j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
               </a-form-item>
             </a-col>
-            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
               <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName"></a-input>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
               </a-form-item>
             </a-col>
-            <a-col :xl="6" :lg="7" :md="8" :sm="24">
-              <a-row>
-                <a-col :span="1">~</a-col>
-                <a-col :span="18">
-                  <a-input placeholder="请输入应收款项" v-model="queryParam.contractName"></a-input>
-                </a-col>
-              </a-row>
-            </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                 <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
@@ -100,9 +94,8 @@
           :dataSource="dataSource"
           :pagination="ipagination"
           :loading="loading"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
           @change="handleTableChange"
-          class="j-table-force-nowrap">
+          class="j-table-force-nowrap main-table">
 
           <!--        项目名称-->
           <template slot="projectName" slot-scope="text, record">
@@ -118,6 +111,7 @@
 
             <a-table
               size="middle"
+              ref="footTable"
               rowKey="id"
               :columns="columnsFooter"
               :scroll="{x: 1100}"
@@ -272,7 +266,27 @@ export default {
   created() {
     this.loadDepartTreeData()
   },
+  mounted() {
+    this.setScroll()
+  },
   methods: {
+    /**
+     * 同步表与footer滚动，保留底部滚动条
+     */
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    },
     /**
      * 获取科室（部门）数据
      */
@@ -298,18 +312,39 @@ export default {
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
-/deep/ .ant-table-footer {
-  padding: 0 0;
-}
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
 
-/deep/ .ant-table.ant-table-bordered .ant-table-footer {
-  border-left: none;
-  margin-top: -2px;
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
 }
 
+// 去除底部表格边框
 .footer-table {
   /deep/ .ant-table-tbody > tr > td {
     border: none;
   }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsDetail.vue b/src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsDetail.vue
new file mode 100644
index 0000000..b0f4098
--- /dev/null
+++ b/src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsDetail.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <page-header-title :is-level-one="false" level-two-title="个人来款详情"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.pack"
+                                   placeholder="请选择付款状态"
+                                   dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1100}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+                <a @click="goDetail(record.id)">详情</a>
+          </span>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1100}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+            </a-table>
+          </template>
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'IndividualPaymentStatisticsDetail',
+  components: { PageHeaderTitle, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 100,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '来款项目',
+          align: 'center',
+          width: 160,
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workGroup: 'zx工作组',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ],
+      // 总计表头，与主表表头一致
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          width: 100,
+          align: 'center'
+        }, {
+          title: '来款项目',
+          align: 'center',
+          width: 160,
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      // 总计数据
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsList.vue b/src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsList.vue
new file mode 100644
index 0000000..522c692
--- /dev/null
+++ b/src/views/statisticalReport/departmentStatistics/IndividualPaymentStatisticsList.vue
@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款单位" v-model="queryParam.contractNum"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="项目负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <select-principal placeholder="请选择项目负责人" v-model="queryParam.principalId"></select-principal>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="所属科室" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-tree-select
+                  style="width:100%"
+                  :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflow-y': 'auto' }"
+                  :treeData="treeDepartData"
+                  v-model="queryParam.departId"
+                  placeholder="请选择科室">
+                </a-tree-select>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="是否打包" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.pack"
+                                   placeholder="请选择是否打包"
+                                   dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.pack"
+                                   placeholder="请选择付款状态"
+                                   dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :scroll="{x: 1100}"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="goDetail(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :scroll="{x: 1100}"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              class="j-table-force-nowrap footer-table">
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+
+            </a-table>
+          </template>
+
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+import SelectPrincipal from '../../../components/company/SelectPrincipal'
+
+export default {
+  name: 'IndividualPaymentStatisticsList',
+  components: { PageHeaderTitle, JYearDate, SelectPrincipal },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      treeDepartData: [],
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '项目名称',
+          align: 'center',
+          // width: 200,
+          dataIndex: 'chargeProject',
+          scopedSlots: { customRender: 'projectName' }
+        }, {
+          title: '负责人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'principalName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '所属科室',
+          align: 'center',
+          width: 140,
+          dataIndex: 'departId',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '来款用途',
+          align: 'center',
+          dataIndex: 'chargeUse_dictText',
+          width: 140
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          chargeProject: '项目名称'
+        }
+      ],
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          key: 'rowIndex',
+          width: 120,
+          align: 'center'
+        }, {
+          title: '项目名称',
+          align: 'center',
+          // width: 200,
+          dataIndex: 'chargeProject',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '负责人',
+          align: 'center',
+          width: 140,
+          dataIndex: 'principalName',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '所属科室',
+          align: 'center',
+          width: 140,
+          dataIndex: 'departId',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'receivableAmount'
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 140,
+          dataIndex: 'paidAmount'
+        }, {
+          title: '来款用途',
+          align: 'center',
+          dataIndex: 'chargeUse_dictText',
+          width: 140
+        }
+      ],
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          receivableAmount: 4000,
+          paidAmount: 200
+        }
+      ],
+      url: {
+        list: ''
+      }
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    },
+    goDetail(id) {
+      this.$router.push({
+        path: '/statisticalReport/departmentStatistics/IndividualPaymentStatisticsDetail'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/departmentStatistics/ProjectPaymentStatisticsList.vue b/src/views/statisticalReport/departmentStatistics/ProjectPaymentStatisticsList.vue
new file mode 100644
index 0000000..a995040
--- /dev/null
+++ b/src/views/statisticalReport/departmentStatistics/ProjectPaymentStatisticsList.vue
@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.pack"
+                                   placeholder="请选择付款状态"
+                                   dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1100}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+                <a @click="goDetail(record.id)">详情</a>
+          </span>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1100}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+            </a-table>
+          </template>
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'ProjectPaymentStatisticsList',
+  components: { PageHeaderTitle, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 100,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '来款项目',
+          align: 'center',
+          width: 160,
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workGroup: 'zx工作组',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ],
+      // 总计表头，与主表表头一致
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          width: 100,
+          align: 'center'
+        }, {
+          title: '来款项目',
+          align: 'center',
+          width: 160,
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      // 总计数据
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsDetail.vue b/src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsDetail.vue
new file mode 100644
index 0000000..2ea6f99
--- /dev/null
+++ b/src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsDetail.vue
@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <page-header-title :is-level-one="false" level-two-title="企业来款详情"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.pack"
+                                   placeholder="请选择付款状态"
+                                   dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1100}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+                <a @click="goDetail(record.id)">详情</a>
+          </span>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1100}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+            </a-table>
+          </template>
+
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'EnterprisePaymentStatisticsDetail',
+  components: { PageHeaderTitle, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 100,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款单位',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'moneyRate',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workGroup: 'zx工作组',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ],
+      // 总计表头，与主表表头一致
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          width: 100,
+          align: 'center'
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款单位',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'moneyRate',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      // 总计数据
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsList.vue b/src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsList.vue
new file mode 100644
index 0000000..b45829f
--- /dev/null
+++ b/src/views/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsList.vue
@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款企业" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款企业" v-model="queryParam.workGroup"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.year"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1100}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+                <a @click="goDetail(record.id)">详情</a>
+          </span>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1100}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+            </a-table>
+          </template>
+
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'EnterprisePaymentStatisticsList',
+  components: { PageHeaderTitle, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 100,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '来款企业',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workGroup: 'zx工作组',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ],
+      // 总计表头，与主表表头一致
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          width: 100,
+          align: 'center'
+        }, {
+          title: '来款企业',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160
+        }
+      ],
+      // 总计数据
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    goDetail(id) {
+      console.log(id)
+      this.$router.push({
+        path: '/statisticalReport/enterprisePaymentStatistics/EnterprisePaymentStatisticsDetail'
+      })
+    },
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsDetail.vue b/src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsDetail.vue
new file mode 100644
index 0000000..11eaea3
--- /dev/null
+++ b/src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsDetail.vue
@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <page-header-title :is-level-one="false" level-two-title="工作组来款详情"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款单位" v-model="queryParam.contractNum"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款项目" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入来款项目" v-model="queryParam.contractName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款用途" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.chargeUse" placeholder="请选择来款用途" dictCode="payment_charge_use"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.paymentDate"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="付款状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag v-model="queryParam.pack"
+                                   placeholder="请选择付款状态"
+                                   dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="项目负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <select-principal placeholder="请选择项目负责人" v-model="queryParam.principalId"></select-principal>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1100}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+                <a @click="goDetail(record.id)">详情</a>
+          </span>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1100}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+            </a-table>
+          </template>
+
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import SelectPrincipal from '../../../components/company/SelectPrincipal'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'WorkingGroupPaymentStatisticsDetail',
+  components: { PageHeaderTitle, SelectPrincipal, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 100,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款单位',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'moneyRate',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workGroup: 'zx工作组',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ],
+      // 总计表头，与主表表头一致
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          width: 100,
+          align: 'center'
+        }, {
+          title: '项目负责人',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款单位',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'moneyRate',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '来款用途',
+          align: 'center',
+          width: 160,
+          dataIndex: 'chargeUse_dictText',
+          scopedSlots: { customRender: 'text' }
+        }
+      ],
+      // 总计数据
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsList.vue b/src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsList.vue
new file mode 100644
index 0000000..f0e1fc6
--- /dev/null
+++ b/src/views/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsList.vue
@@ -0,0 +1,294 @@
+<template>
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+
+    <a-card :bordered="false">
+      <!--    查询区域-start -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="工作组" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入工作组" v-model="queryParam.workGroup"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="来款年份" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-year-date style="width:100%" placeholder="请选择来款年份" v-model="queryParam.year"></j-year-date>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="10" :lg="11" :md="12" :sm="24">
+              <a-form-item label="应收款项" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+                <span class="query-group-split-cust"></span>
+                <a-input placeholder="请输入应收款项" v-model="queryParam.contractName" class="query-group-cust"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
+              <a-button icon="reload" @click="searchReset" class="reset-button">重置</a-button>
+            </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--    /查询区域-end-->
+
+      <!--    操作按钮区域-->
+      <div class="table-operator">
+        <a-button type="primary" icon="export" @click="handleExportXls('全所统计')">导出</a-button>
+      </div>
+      <!--    操作按钮区域-end-->
+
+      <!--    table表格区域-->
+      <div>
+        <a-table
+          size="middle"
+          ref="table"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{x: 1100}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap main-table">
+
+          <!--        项目名称-->
+          <template slot="projectName" slot-scope="text, record">
+            <j-ellipsis :value="text" :length="18" class="primary-color"
+                        @click="openDetailModal(record)"></j-ellipsis>
+          </template>
+
+          <template slot="text" slot-scope="text">
+            <j-ellipsis :value="text" :length="18"></j-ellipsis>
+          </template>
+
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
+                <a @click="goDetail(record.id)">详情</a>
+          </span>
+
+          <template slot="footer" slot-scope="currentPageData">
+
+            <a-table
+              size="middle"
+              ref="footTable"
+              rowKey="id"
+              :columns="columnsFooter"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              :scroll="{x: 1100}"
+              class="j-table-force-nowrap footer-table">
+
+              <!--        项目名称-->
+              <template slot="projectName" slot-scope="text, record">
+                <j-ellipsis :value="text" :length="18" class="primary-color"
+                            @click="openDetailModal(record)"></j-ellipsis>
+              </template>
+
+              <template slot="text" slot-scope="text">
+                <j-ellipsis :value="text" :length="18"></j-ellipsis>
+              </template>
+            </a-table>
+          </template>
+
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import IconImg from '@/assets/imgs/icon/icon_statistical_report.png'
+import PageHeaderTitle from '../../../components/layouts/PageHeaderTitle'
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JYearDate from '../../../components/jero/JYearDate'
+
+export default {
+  name: 'WorkingGroupPaymentStatisticsList',
+  components: { PageHeaderTitle, JYearDate },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      IconImg,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      url: {
+        list: ''
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 100,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '工作组',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收完成率',
+          align: 'center',
+          width: 160,
+          dataIndex: 'moneyRate',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      dataSource: [
+        {
+          id: 1,
+          workGroup: 'zx工作组',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ],
+      // 总计表头，与主表表头一致
+      columnsFooter: [
+        {
+          title: '序号',
+          dataIndex: 'title',
+          width: 100,
+          align: 'center'
+        }, {
+          title: '工作组',
+          align: 'center',
+          dataIndex: 'workGroup',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '应收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'allMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收总金额',
+          align: 'center',
+          width: 160,
+          dataIndex: 'comeAllMoney',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '实收完成率',
+          align: 'center',
+          width: 160,
+          dataIndex: 'moneyRate',
+          scopedSlots: { customRender: 'text' }
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160
+        }
+      ],
+      // 总计数据
+      footerDataSource: [
+        {
+          id: 1,
+          title: '总计',
+          allMoney: '500',
+          comeAllMoney: '600'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.setScroll()
+  },
+  methods: {
+    goDetail(id) {
+      console.log(id)
+      this.$router.push({
+        path: '/statisticalReport/workingGroupPaymentStatistics/WorkingGroupPaymentStatisticsDetail'
+      })
+    },
+    // 同步表与footer滚动，保留底部滚动条
+    setScroll() {
+      //
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      console.log(this.$refs.footTable.$el.querySelectorAll('.ant-table-body'))
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+// 隐藏主列表的横向滚动条
+.main-table {
+  /deep/ .ant-table-body {
+    overflow-x: hidden !important;
+  }
+
+  /deep/ .ant-table-footer {
+    padding: 0 0;
+  }
+
+  /deep/ .ant-table.ant-table-bordered .ant-table-footer {
+    border-left: none;
+    margin-top: -2px;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+  }
+
+  /deep/ .ant-table-fixed-right table {
+    border-left: none !important;
+    background: none;
+  }
+
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+
+  /deep/ .ant-table-bordered .ant-table-header > table {
+    border-left: none;
+  }
+}
+</style>
\ No newline at end of file