工资单/薪资统计列表-增加合计行

src/views/oa/salary_management/personnelSalary/SalarysStatistics.vue

@@ -58,7 +58,7 @@
 
   
         <a-table
-          ref="table"
+          ref="tableRef"
           size="middle"
           bordered
           rowKey="userId"
@@ -67,6 +67,7 @@
           :pagination="ipagination"
           :scroll="{x: 2000}"
           :loading="loading"
+          :footer="showTotal"
           @change="handleTableChange">
         </a-table>
       </div>
@@ -102,14 +103,21 @@
               width: 80,
               align:"center",
               dataIndex: 'code',
-              customRender:function (t, r, index) {
-                    return parseInt(index)+1;
-              }
+              customRender:function (text, record, index) {
+                if(record.name=='合计'){
+                  return ''
+                }else{
+                  return parseInt(index)+1;
+                }              
+              },
+              fixed:'left'
             },
             {
               title: '姓名',
               align:"center",
               dataIndex: 'name',
+              width: 100,
+              fixed:'left'
             },
             {
               title: '基本薪资',
@@ -199,7 +207,9 @@
             {
               title: '实发合计',
               align:"center",
-              dataIndex: 'actualOccurrence'
+              dataIndex: 'actualOccurrence',
+              width: 120,
+              fixed:'right'
             },
           ],
           ipagination:{},
@@ -214,7 +224,39 @@
         //      },
           }
         },
-      computed: {},
+        watch:{
+            dataSource(){
+                this.$nextTick(()=>{  
+                    const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+                    dom.addEventListener(
+                        'scroll',
+                        () => {
+                             this.$refs.tableInfo.$el.querySelectorAll(
+                             '.ant-table-body'
+                            )[0].scrollLeft = dom.scrollLeft
+                        },
+                        true
+                    )
+                 })
+            }
+        },
+        computed: {
+                // 合计展示
+            totalDataSource(){
+                // 开票成本-衬衣 合计
+                 var item = {
+                     "name":"合计"
+                 };
+                var allNumber = 0
+                for (let row of this.dataSource){
+                    allNumber += row.actualOccurrence*1;
+                }
+      
+                item.actualOccurrence= parseFloat(allNumber.toFixed(2));
+                return [item];
+
+            }
+        },
       created () {
         this.getTableList()
       },
@@ -265,9 +307,37 @@
             this.queryParam.pageSize = pagination.pageSize
             this.getTableList()
         },
+        showTotal(data) {
+                return (
+                    <a-table
+                        ref="tableInfo"
+                        pagination={false}
+                        columns={this.columns}
+                        dataSource={this.totalDataSource || []}
+                        showHeader={false}
+                        scroll={{x:2000 }}
+                    ></a-table>
+                )
+            },
       }
     }
   </script>
-  <style scoped>
-    @import '~@assets/less/common.less'
+  <style scoped lang="less">
+    // @import '~@assets/less/common.less';
+    /deep/ .ant-table-footer .ant-table-body {
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-footer{
+        padding:0 !important;
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-fixed-left{
+        min-width:180px !important
+    }
+    /deep/.ant-table-bordered .ant-table-thead > tr > th{
+      min-width: 120px !important;
+    }
+    /deep/ .ant-table-bordered .ant-table-tbody > tr > td{
+      min-width: 120px !important;
+    }
   </style>

src/views/oa/salary_management/personnelSalary/modules/AnnualLeavePayroll.vue

@@ -35,12 +35,14 @@
                     </a-row>
                 </a-form-model>
                 <a-table
+                    ref="tableRef"
                     bordered
                     :columns="columns"
                     :data-source="dataSource"
                     :loading="loading"
-                    :scroll="{x: 1200 ,y:400}"
+                    :scroll="{x: 1000 ,y:400}"
                     :pagination="false"
+                    :footer="showTotal"
                 >
                 </a-table>
             </div>
@@ -73,75 +75,156 @@
                 {
                     title: '序号',
                     align:"center",
-                    width:'5%',
+                    fixed: 'left',
+                    width:80,
                     dataIndex: 'index',
-                    customRender:function (t, r, index) {
-                        return parseInt(index)+1;
+                    customRender:function (t, record, index) {
+                        if(record.name=='合计'){
+                            return ''
+                        }else{
+                            return parseInt(index)+1;
+                        } 
                     }
                 },
                 {
-                    title: '编号',
+                    title: '姓名',
                     align: "center",
-                    dataIndex: 'code',
-                    ellipsis: true,
+                    dataIndex: 'name',
                     customRender: (t) => ellipsis(t,17),
-                    width:'10%'
+                    width:120,
+                    fixed: 'left',
                 },
                 {
-                    title: '姓名',
+                    title: '编号',
                     align: "center",
-                    dataIndex: 'name',
-                    customRender: (t) => ellipsis(t,17),
-                    width:'10%'
+                    dataIndex: 'code',
+                    ellipsis: true,
+                    customRender: (t) => ellipsis(t,10),
+                    customCell: column => {
+                        return {
+                            style: {
+                                'min-width': "100px",
+                            }
+                         };
+                    },
+                    customHeaderCell: () => ({ style: { 'min-width': "100px" } }),
+                    // width:120,
                 },
                 {
                     title: '年假天数',
                     align: "center",
                     dataIndex: 'annualLeave',
                     ellipsis: true,
-                    width:'10%'
+                    customCell: column => {
+                        return {
+                            style: {
+                                'min-width': "100px",
+                            }
+                         };
+                    },
+                    customHeaderCell: () => ({ style: { 'min-width': "100px" } }),
                 },
                 {
                     title: '已请天数',
                     align: "center",
                     dataIndex: 'used',
                     ellipsis: true,
-                    width:'10%'
+                    customCell: column => {
+                        return {
+                            style: {
+                                'min-width': "100px",
+                            }
+                         };
+                    },
+                    customHeaderCell: () => ({ style: { 'min-width': "100px" } }),
                 },
                 {
                     title: '剩余天数',
                     align: "center",
                     dataIndex: 'surplus',
                     ellipsis: true,
-                    width:'10%'
+                    customCell: column => {
+                        return {
+                            style: {
+                                'min-width': "100px",
+                            }
+                         };
+                    },
+                    customHeaderCell: () => ({ style: { 'min-width': "100px" } }),
                 },
                 {
                     title: '应发薪资',
                     align: "center",
                     dataIndex: 'wages',
                     ellipsis: true,
-                    width:'10%'
+                    customCell: column => {
+                        return {
+                            style: {
+                                'min-width': "100px",
+                            }
+                         };
+                    },
+                    customHeaderCell: () => ({ style: { 'min-width': "100px" } }),
                 },
                 {
                     title: '个税',
                     align: "center",
                     dataIndex: 'personalTax',
                     ellipsis: true,
-                    width:'10%'
+                    customCell: column => {
+                        return {
+                            style: {
+                                'min-width': "100px",
+                            }
+                         };
+                    },
+                    customHeaderCell: () => ({ style: { 'min-width': "100px" } }),
                 },
                 {
                     title: '实发合计',
                     align: "center",
                     dataIndex: 'actualOccurrence',
                     ellipsis: true,
-                    width:'10%'
+                    width:180,
+                    fixed: 'right',
                 },
              ]
           }
         },
         created(){
         },
-        watch: {
+        watch:{
+            dataSource(){
+                this.$nextTick(()=>{  
+                    const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+                    dom.addEventListener(
+                        'scroll',
+                        () => {
+                             this.$refs.tableInfo.$el.querySelectorAll(
+                             '.ant-table-body'
+                            )[0].scrollLeft = dom.scrollLeft
+                        },
+                        true
+                    )
+                 })
+            }
+        },
+        computed: {
+                // 合计展示
+            totalDataSource(){
+                // 开票成本-衬衣 合计
+                 var item = {
+                     "name":"合计"
+                 };
+                var allNumber = 0
+                for (let row of this.dataSource){
+                    allNumber += row.actualOccurrence*1;
+                }
+      
+                item.actualOccurrence= parseFloat(allNumber.toFixed(2));
+                return [item];
+
+            }
         },
         methods: {
             handleCancel(){
@@ -165,14 +248,26 @@
             },
             searchSonList(){
                 this.getTableList()
-            }
+            },
+            showTotal(data) {
+                return (
+                    <a-table
+                        ref="tableInfo"
+                        pagination={false}
+                        columns={this.columns}
+                        dataSource={this.totalDataSource || []}
+                        showHeader={false}
+                        scroll={{x:1000 }}
+                    ></a-table>
+                )
+            },
         }
     }
     </script>
     
     <style scoped lang="less">
     /deep/ .nresume .ant-input{
-      height: 100px !important;
+      height: 150px !important;
     }
 
     /deep/ .ant-select{
@@ -185,4 +280,14 @@
     /deep/ .ant-calendar-picker{
       width: 113px !important;
     }
+    /deep/ .ant-table-footer .ant-table-body {
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-footer{
+        padding:0 !important;
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-fixed-left{
+        min-width:200px !important
+    }
     </style>

src/views/oa/salary_management/personnelSalary/modules/OvertimePayroll.vue

@@ -35,12 +35,14 @@
                     </a-row>
                 </a-form-model>
                 <a-table
+                    ref="tableRef"
                     bordered
                     :columns="columns"
                     :data-source="dataSource"
                     :loading="loading"
                     :scroll="{x: 1000 ,y:400}"
                     :pagination="false"
+                    :footer="showTotal"
                 >
                 </a-table>
             </div>
@@ -75,24 +77,29 @@
                     align:"center",
                     width:'5%',
                     dataIndex: 'index',
-                    customRender:function (t, r, index) {
-                        return parseInt(index)+1;
+                    customRender:function (t, record, index) {
+                        if(record.name=='合计'){
+                            return ''
+                        }else{
+                            return parseInt(index)+1;
+                        } 
                     }
                 },
                 {
-                    title: '编号',
+                    title: '姓名',
                     align: "center",
-                    dataIndex: 'code',
+                    dataIndex: 'name',
                     customRender: (t) => ellipsis(t,17),
                     width:'10%'
                 },
                 {
-                    title: '姓名',
+                    title: '编号',
                     align: "center",
-                    dataIndex: 'name',
+                    dataIndex: 'code',
                     customRender: (t) => ellipsis(t,17),
                     width:'10%'
                 },
+                
                 {
                     title: '加班工资',
                     align: "center",
@@ -119,7 +126,38 @@
         },
         created(){
         },
-        watch: {
+        watch:{
+            dataSource(){
+                this.$nextTick(()=>{  
+                    const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+                    dom.addEventListener(
+                        'scroll',
+                        () => {
+                             this.$refs.tableInfo.$el.querySelectorAll(
+                             '.ant-table-body'
+                            )[0].scrollLeft = dom.scrollLeft
+                        },
+                        true
+                    )
+                 })
+            }
+        },
+        computed: {
+                // 合计展示
+            totalDataSource(){
+                // 开票成本-衬衣 合计
+                 var item = {
+                     "name":"合计"
+                 };
+                var allNumber = 0
+                for (let row of this.dataSource){
+                    allNumber += row.actualOccurrence*1;
+                }
+      
+                item.actualOccurrence= parseFloat(allNumber.toFixed(2));
+                return [item];
+
+            }
         },
         methods: {
             handleCancel(){
@@ -138,6 +176,7 @@
                     this.loading = false
                     if(res.success){
                         this.dataSource =res.result
+                        var all=0
                         this.dataSource.map(item=>{
                             item.actualOccurrence = Number(item.actualOccurrence).toFixed(2)
                         })
@@ -148,7 +187,19 @@
             },
             searchSonList(){
                 this.getTableList()
-            }
+            },
+            showTotal(data) {
+                return (
+                    <a-table
+                        ref="tableInfo"
+                        pagination={false}
+                        columns={this.columns}
+                        dataSource={this.totalDataSource || []}
+                        showHeader={false}
+                        scroll={{x:1000 }}
+                    ></a-table>
+                )
+            },
         }
     }
     </script>
@@ -168,4 +219,14 @@
     /deep/ .ant-calendar-picker{
       width: 113px !important;
     }
+    /deep/ .ant-table-footer .ant-table-body {
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-footer{
+        padding:0 !important;
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-fixed-left{
+        min-width:25% !important
+    }
     </style>

src/views/oa/salary_management/personnelSalary/modules/PayrollDetail.vue

@@ -35,12 +35,14 @@
                     </a-row>
                 </a-form-model>
                 <a-table
+                    ref="tableRef"
                     bordered
                     :columns="columns"
                     :data-source="dataSource"
                     :loading="loading"
-                    :scroll="{x: 2500 ,y:400}"
+                    :scroll="{x: 2000 ,y:400}"
                     :pagination="false"
+                    :footer="showTotal"
                 >
                 </a-table>
             </div>
@@ -73,152 +75,189 @@
                 {
                     title: '序号',
                     align:"center",
-                    width:'2%',
+                    width:80,
                     dataIndex: 'index',
-                    customRender:function (t, r, index) {
-                        return parseInt(index)+1;
-                    }
+                    customRender:function (t, record, index) {
+                        if(record.name=='合计'){
+                            return ''
+                        }else{
+                            return parseInt(index)+1;
+                        } 
+                    },
+                    fixed:'left'
                 },
                 {
-                    title: '编号',
+                    title: '姓名',
                     align: "center",
-                    dataIndex: 'code',
+                    dataIndex: 'name',
                     ellipsis: true,
-                    customRender: (t) => ellipsis(t,17),
-                    width:'6%'
+                    width:110,
+                    fixed:'left'
                 },
                 {
-                    title: '姓名',
+                    title: '编号',
                     align: "center",
-                    dataIndex: 'name',
+                    dataIndex: 'code',
                     ellipsis: true,
-                    customRender: (t) => ellipsis(t,5),
-                    width:'4%'
+                    customRender: (t) => ellipsis(t,17),
+                    width:120,
                 },
                 {
                     title: '基本薪资',
                     align: "center",
                     dataIndex: 'wages',
-                    width:'5%'
+                    width:110
                 },
                 {
                     title: '话费补贴',
                     align: "center",
                     dataIndex: 'phoneBill',
                     ellipsis: true,
-                    width:'4%'
+                    width:110
                 },
                 {
                     title: '午餐补贴',
                     align: "center",
                     dataIndex: 'lunch',
                     ellipsis: true,
-                    width:'4%'
+                    width:110
                 },
                 {
                     title: '住房补贴',
                     align: "center",
                     dataIndex: 'housingSubsidies',
                     ellipsis: true,
-                    width:'4%'
+                    width:110
                 },
                 {
                     title: '交通补贴',
                     align: "center",
                     dataIndex: 'transportation',
                     ellipsis: true,
-                    width:'4%'
+                    width:110
                 },
                 {
                     title: '全勤奖',
                     align: "center",
                     dataIndex: 'fullAttendance',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '合计应发',
                     align: "center",
                     dataIndex: 'totalPayable',
                     ellipsis: true,
-                    width:'4%'
+                    width:110
                 },
                 {
                     title: '社保',
                     align: "center",
                     dataIndex: 'socialSecurity',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '公积金',
                     align: "center",
                     dataIndex: 'accumulationFund',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '个税',
                     align: "center",
                     dataIndex: 'personalTax',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '迟到',
                     align: "center",
                     dataIndex: 'latenessCost',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '事假',
                     align: "center",
                     dataIndex: 'personalCost',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '病假',
                     align: "center",
                     dataIndex: 'sickCost',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '婚假',
                     align: "center",
                     dataIndex: 'marriageCost',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '丧假',
                     align: "center",
                     dataIndex: 'funeralCost',
                     ellipsis: true,
-                    width:'4%'
+                    width:100
                 },
                 {
                     title: '合计应扣',
                     align: "center",
                     dataIndex: 'totalDeduction',
                     ellipsis: true,
-                    width:'4%'
+                    width:110
                 },
                 {
                     title: '实发合计',
                     align: "center",
                     dataIndex: 'actualOccurrence',
                     ellipsis: true,
-                    width:'4%'
+                    width:110,
+                    fixed:'right'
                 },
              ]
           }
         },
         created(){
         },
-        watch: {
+        watch:{
+            dataSource(){
+                this.$nextTick(()=>{  
+                    const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+                    dom.addEventListener(
+                        'scroll',
+                        () => {
+                             this.$refs.tableInfo.$el.querySelectorAll(
+                             '.ant-table-body'
+                            )[0].scrollLeft = dom.scrollLeft
+                        },
+                        true
+                    )
+                 })
+            }
+        },
+        computed: {
+                // 合计展示
+            totalDataSource(){
+                // 开票成本-衬衣 合计
+                 var item = {
+                     "name":"合计"
+                 };
+                var allNumber = 0
+                for (let row of this.dataSource){
+                    allNumber += row.actualOccurrence*1;
+                }
+      
+                item.actualOccurrence= parseFloat(allNumber.toFixed(2));
+                return [item];
+
+            }
         },
         methods: {
             handleCancel(){
@@ -243,7 +282,19 @@
             },
             searchSonList(){
                 this.getTableList()
-            }
+            },
+            showTotal(data) {
+                return (
+                    <a-table
+                        ref="tableInfo"
+                        pagination={false}
+                        columns={this.columns}
+                        dataSource={this.totalDataSource || []}
+                        showHeader={false}
+                        scroll={{x:2000 }}
+                    ></a-table>
+                )
+            },
         }
     }
     </script>
@@ -263,4 +314,14 @@
     /deep/ .ant-calendar-picker{
       width: 113px !important;
     }
+    /deep/ .ant-table-footer .ant-table-body {
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-footer{
+        padding:0 !important;
+        overflow: hidden !important;
+    }
+    /deep/.ant-table-fixed-left{
+        min-width:190px !important
+    }
     </style>