Merge branch '24年2月变更'

src/views/packManagement/PackProjectMaintenance.vue

@@ -86,11 +86,14 @@
           bordered
           rowKey="id"
           :columns="columns"
+          :scroll="{x: 1300}"
           :dataSource="dataSource"
           :pagination="false"
           :loading="loading"
           :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-          @change="handleTableChange">
+          @change="handleTableChange"
+          :class="dataSource.length === 0 ? 'show-scroll' : ''"
+          class="j-table-force-nowrap main-table">
 
           <!--        项目名称-->
           <template slot="projectName" slot-scope="text, record">
@@ -135,8 +138,38 @@
           </template>
 
           <span slot="action" class="action-span-cell" slot-scope="text, record">
+<!--            <a @click="incomePayment(record)" :disabled="Number(record.receivableAmount) === 0"-->
+<!--               v-has="'packProject:incomePayment'">来款</a>-->
             <a @click="cancelPack(record.id)" v-has="'packProject:cancelPack'">取消打包</a>
+<!--            <a @click="invoicing(record)" :disabled="record.needInvoice === 0 || Number(record.receivableAmount) === 0"-->
+<!--               v-has="'packProject:invoicing'">开票</a>-->
+<!--            <a  v-has="'packProject:confirmPayment'" @click="confirmPayment(record)" :disabled="Number(record.receivableAmount) === 0">确认收入</a>-->
+            <!--工作组项目、普通项目、资料网员项目可以修改发票信息-->
+<!--            <a  v-has="'packProject:changeInvoiceInfo'" @click="changeInvoiceInfo(record)" :disabled="Number(record.projectType) !== ProjectTypeEnums.GENERAL_PRO.value && Number(record.projectType) !== ProjectTypeEnums.GROUP_PRO.value && Number(record.projectType) !== ProjectTypeEnums.MEMBER_PRO.value">开票类型</a>-->
           </span>
+
+
+          <template slot="footer" v-if="dataSource.length > 0">
+            <a-table
+              size="middle"
+              ref="footTable"
+              :rowKey="record=>record.id"
+              :columns="columnsFooter"
+              :scroll="{x: 1300}"
+              :dataSource="footerDataSource"
+              :showHeader="false"
+              :pagination="false"
+              class="j-table-force-nowrap footer-table">
+
+              <template slot="allMoney" slot-scope="text">
+                <a-tooltip>
+                  <template slot="title">{{ formatMoney(text+'') }}</template>
+                  <div class="table-text">{{ formatMoney(text+'') }}</div>
+                </a-tooltip>
+              </template>
+
+            </a-table>
+          </template>
         </a-table>
       </div>
       <!--      /项目信息-->
@@ -237,7 +270,7 @@ const defaultTableColumns = [
   {
     title: '打包项目名称',
     align: 'center',
-    width: 200,
+    // width: 300,
     dataIndex: 'chargeProject',
     scopedSlots: { customRender: 'projectName' }
   }, {
@@ -249,19 +282,19 @@ const defaultTableColumns = [
   }, {
     title: '待确收金额',
     align: 'center',
-    width: 100,
+    width: 200,
     dataIndex: 'receivableAmount',
     scopedSlots: { customRender: 'allMoney' }
   }, {
     title: '企业联系人',
     align: 'center',
-    width: 100,
+    width: 140,
     dataIndex: 'contactsTemporaryName',
     scopedSlots: { customRender: 'text' }
   }, {
     title: '联系人电话',
     align: 'center',
-    width: 100,
+    width: 120,
     dataIndex: 'phone',
     scopedSlots: { customRender: 'text' }
   }, {
@@ -274,12 +307,27 @@ const defaultTableColumns = [
     title: '操作',
     dataIndex: 'action',
     align: 'center',
-    // fixed: 'right',
+    fixed: 'right',
     width: 100,
     scopedSlots: { customRender: 'action' }
   }
 ]
 
+const firstColumnFooter = [
+  {
+    title: '多选',
+    dataIndex: 'selection',
+    align: 'center',
+    width: 60
+  },
+  {
+    title: '序号',
+    dataIndex: 'title',
+    align: 'center',
+    width: 60
+  }
+]
+
 export default {
   name: 'PackProjectMaintenance',
   components: {
@@ -342,6 +390,7 @@ export default {
         sm: { span: 10 }
       },
       columns: [firstColumnTop, ...defaultTableColumns],
+      columnsFooter: [...firstColumnFooter, ...defaultTableColumns],
       disableMixinCreated: true,
       selectPackProjectVisible: false,
       selectedProject: [], // 选中的项目
@@ -358,7 +407,8 @@ export default {
       url: {
         list: '/pack/payPackCompanyProject/listAll',
         exportXlsUrl: '/pack/payPackCompanyProject/exportXls'
-      }
+      },
+      footerDataSource: []
     }
   },
   created() {
@@ -589,6 +639,25 @@ export default {
       this.$refs.changeInvoiceInfo.open(record)
 
     },
+    /**
+     * 同步表与footer滚动，保留底部滚动条
+     */
+    setScroll() {
+      if (this.dataSource.length === 0) {
+        return
+      }
+      let dom = this.$refs.footTable.$el.querySelectorAll('.ant-table-body')[0]
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.table.$el.querySelectorAll(
+            '.ant-table-body'
+          )[0].scrollLeft = dom.scrollLeft
+        },
+        true
+      )
+      this.$forceUpdate()
+    },
     // 重写加载的方法
     loadData(arg) {
       if (!this.url.list) {
@@ -607,6 +676,13 @@ export default {
           //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
           this.dataSource = pageListObj.list
 
+          let obj = {
+            id: '1',
+            title: '总计',
+            receivableAmount: pageListObj.sumOfReceivableAmount || '0.00' + '',
+            paidAmount: pageListObj.sumOfPaidAmount || '0.00' + ''
+          }
+          this.footerDataSource = [obj]
           if (pageListObj.total) {
             this.ipagination.total = pageListObj.total
             //清空列表选中
@@ -616,6 +692,11 @@ export default {
           }
           //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
         }
+        if (this.dataSource.length > 0) {
+          this.$nextTick(() => {
+            this.setScroll()
+          })
+        }
         if (res.code === 510) {
           this.$message.warning(res.message)
         }
@@ -625,6 +706,9 @@ export default {
       })
     }
 
+  },
+  mounted() {
+    this.setScroll()
   }
 }
 </script>