[update] -打包管理数字增加分隔符、并增加总计功能

src/views/packManagement/PackCompanyList.vue

@@ -51,7 +51,8 @@
           :loading="loading"
           :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
           @change="handleTableChange"
-          class="j-table-force-nowrap">
+          :class="dataSource.length === 0 ? 'show-scroll' : ''"
+          class="j-table-force-nowrap main-table">
 
           <!--        项目名称-->
           <template slot="projectName" slot-scope="text, record">
@@ -68,10 +69,38 @@
             <j-ellipsis :value="text" :length="18"></j-ellipsis>
           </template>
 
+          <template slot="allMoney" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ formatMoney(text) }}</template>
+              <div class="table-text">{{ formatMoney(text) }}</div>
+            </a-tooltip>
+          </template>
           <span slot="action" class="action-span-cell" slot-scope="text, record">
             <a @click="handleEdit(record)" v-has="'packCompany:edit'">编辑</a>
             <a @click="handleDelete(record.id)" v-has="'packCompany:delete'">删除</a>
           </span>
+
+          <template slot="footer" v-if="dataSource.length > 0">
+            <a-table
+              size="middle"
+              ref="footTable"
+              :rowKey="record=>record.id"
+              :columns="columnsFooter"
+              :scroll="{x: 1500}"
+              :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>
     </a-card>
@@ -85,6 +114,86 @@ import PageHeaderTitle from '../../components/layouts/PageHeaderTitle'
 import JYearDate from '../../components/jero/JYearDate'
 import { JeroListMixin } from '../../mixins/JeroListMixin'
 import PackCompanyModule from './modules/PackCompanyModule'
+import {formatMoney} from '@/utils/formatMoney'
+import {getAction} from '../../api/manage'
+
+const defaultTableColumns = [
+  {
+    title: '企业名称',
+    align: 'center',
+    width: 240,
+    dataIndex: 'companyTemporaryName',
+    scopedSlots: { customRender: 'projectName' }
+  },
+  {
+    title: '企业联系人',
+    align: 'center',
+    width: 140,
+    dataIndex: 'companyContactTemporaryName',
+    scopedSlots: { customRender: 'nameText' }
+  },
+  {
+    title: '打包联系人',
+    align: 'center',
+    width: 140,
+    dataIndex: 'packContactTemporaryName',
+    scopedSlots: { customRender: 'nameText' }
+  },
+  {
+    title: '打包费用总计',
+    align: 'center',
+    width: 180,
+    dataIndex: 'packChargeTotal',
+    scopedSlots: { customRender: 'allMoney' }
+  },
+  {
+    title: '实际到账费用',
+    align: 'center',
+    width: 180,
+    dataIndex: 'receiptExpense',
+    scopedSlots: { customRender: 'allMoney' }
+  },
+  {
+    title: '打包年份',
+    align: 'center',
+    dataIndex: 'packYear',
+    scopedSlots: { customRender: 'text' }
+  },
+
+  {
+    title: '操作',
+    dataIndex: 'action',
+    align: 'center',
+    fixed: 'right',
+    width: 160,
+    scopedSlots: { customRender: 'action' }
+  }
+]
+const firstColumnTop =   {
+  title: '序号',
+  dataIndex: '',
+  key: 'rowIndex',
+  width: 60,
+  align: 'center',
+  customRender: function (t, r, index) {
+    return parseInt(index) + 1
+  }
+}
+
+const firstColumnFooter = [
+  {
+    title: '多选',
+    dataIndex: 'selection',
+    align: 'center',
+    width: 60
+  },
+  {
+    title: '序号',
+    dataIndex: 'title',
+    align: 'center',
+    width: 60
+  }
+]
 
 export default {
   name: 'PackCompanyList',
@@ -101,76 +210,8 @@ export default {
         xs: { span: 24 },
         sm: { span: 10 }
       },
-      columns: [
+      columns: [firstColumnTop, ...defaultTableColumns],
-        {
+      columnsFooter: [...firstColumnFooter, ...defaultTableColumns],
-          title: '序号',
-          dataIndex: '',
-          key: 'rowIndex',
-          width: 60,
-          align: 'center',
-          customRender: function (t, r, index) {
-            return parseInt(index) + 1
-          }
-        }, {
-          title: '企业名称',
-          align: 'center',
-          width: 240,
-          dataIndex: 'companyTemporaryName',
-          scopedSlots: { customRender: 'projectName' }
-        },
-        {
-          title: '企业联系人',
-          align: 'center',
-          width: 140,
-          dataIndex: 'companyContactTemporaryName',
-          scopedSlots: { customRender: 'nameText' }
-        },{
-          title: '打包联系人',
-          align: 'center',
-          width: 140,
-          dataIndex: 'packContactTemporaryName',
-          scopedSlots: { customRender: 'nameText' }
-        }, {
-          title: '打包费用总计',
-          align: 'center',
-          width: 180,
-          dataIndex: 'packChargeTotal',
-          scopedSlots: { customRender: 'text' }
-        }, {
-          title: '实际到账费用',
-          align: 'center',
-          width: 180,
-          dataIndex: 'receiptExpense',
-          scopedSlots: { customRender: 'text' }
-        }, {
-          title: '打包年份',
-          align: 'center',
-          dataIndex: 'packYear',
-          scopedSlots: { customRender: 'text' }
-        },
-
-        // {
-        //   title: '联系人电话',
-        //   align: 'center',
-        //   width: 200,
-        //   dataIndex: 'phone',
-        //   scopedSlots: { customRender: 'text' }
-        // }, {
-        //   title: '邮箱',
-        //   align: 'center',
-        //   width: 280,
-        //   dataIndex: 'email',
-        //   scopedSlots: { customRender: 'text' }
-        // },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          align: 'center',
-          fixed: 'right',
-          width: 160,
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
       url: {
         list: '/pack/payPackCompany/list',
         delete: '/pack/payPackCompany/delete',
@@ -180,6 +221,7 @@ export default {
     }
   },
   methods: {
+    formatMoney,
     /**
      * 跳转至打包企业维护页面
      * 路由参数---打包企业的id
@@ -193,11 +235,121 @@ export default {
           packCompanyName: record.companyTemporaryName
         }
       })
-    }
+    },
+    /**
+     * 同步表与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
+      )
+    },
+    // 重写加载的方法
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let pageListObj = res.result.pageList || {}
+          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          this.dataSource = pageListObj.records
+
+          let obj = {
+            id: '1',
+            title: '总计',
+            packChargeTotal: res.result.sumOfMoney || '0.00' + '',
+            receiptExpense: res.result.sumOfConfirmAmount || '0.00' + ''
+          }
+          this.footerDataSource = [obj]
+          if (pageListObj.total) {
+            this.ipagination.total = pageListObj.total
+            //清空列表选中
+            this.onClearSelected()
+          } else {
+            this.ipagination.total = 0
+          }
+          //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)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+  },
+  mounted() {
+    this.setScroll()
   }
 }
 </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;
+  }
+}
+
+.show-scroll {
+  /deep/ .ant-table-body {
+    overflow-x: auto !important;
+  }
+}
+
+// 去除底部表格边框
+.footer-table {
+  /deep/ .ant-table-tbody > tr > td {
+    border: none;
+    background-color: #F5F5F5;
+  }
+
+  /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>