[update] 打包项目维护字段修改；统计报表模块页面

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: {
     // 打包状态

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">
+              <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.year"></j-year-date>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">

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,6 +312,12 @@ export default {
 <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;
   }
@@ -306,10 +326,25 @@ export default {
     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>

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>

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>

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>

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>

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>

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>

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>