cd-work-flow-web/src/views/oa/salary_management/personnelSalary/modules/PayrollDetail.vue

<template>
    <div class="reply" ref = "replyModal">
      <a-modal
        title="月度工资单"
        width="100%"
        :visible="visible"
        :confirmLoading="loading"
        :getContainer ='()=>$refs.replyModal'
        @cancel="handleCancel"
        destroyOnClose
       >
            <template #footer>
                <a-button  @click="handleCancel" style="margin-left: 8px;">取消</a-button>
            </template>
            <div class="table-page-search-wrapper">
                <a-form-model layout="inline" ref="form" :model="formState" >
                    <a-row :gutter="24">
                        <a-col :md="6" :sm="8">
                            <a-form-model-item label="姓名"  >
                                <j-search-select-tag v-model="formState.name" placeholder="请选择名称" 
                                    dict="sys_user,realname,realname" allowClear/>
                            </a-form-model-item>
                        </a-col>
                        <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
                            <a-form-item label="部门">
                                <j-search-select-tag v-model="formState.sysOrgCode" placeholder="请选择部门" 
                                    dict="sys_depart,depart_name,depart_name,org_type='3' or org_code='TBD' order by org_code"/>
                            </a-form-item> -->
                        <!-- </a-col> -->
                        <a-col :md="6" :sm="8">
                            <a-form-model-item label=""  >
                                <a-button type="primary" icon="search" @click="searchSonList">查询</a-button>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
                <a-table
                    ref="tableRef"
                    bordered
                    :columns="columns"
                    :data-source="dataSource"
                    :loading="loading"
                    :scroll="{x: 2000 ,y:400}"
                    :pagination="false"
                    :footer="showTotal"
                >
                </a-table>
            </div>
      </a-modal>
    </div>
</template>
<script>
    
      import moment from 'moment'
      import pick from 'lodash.pick'
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { putAction,getAction } from '@/api/manage'
      import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
      import JEllipsis from '@/components/jeecg/JEllipsis'
      export default {
        name: 'PayrollDetail',
        components: {
            moment,
            JSearchSelectTag,
            JEllipsis
        },
        data() {
          let ellipsis = (v, l) => <j-ellipsis value={v} length={l} />
          return {
              formState:{},
              dataSource: [{}],
              visible:false,
              loading:false,
              columns: [
                {
                    title: '序号',
                    align:"center",
                    width:90,
                    dataIndex: 'index',
                    customRender:function (t, record, index) {
                        if(record.name=='合计'){
                            return ''
                        }else{
                            return parseInt(index)+1;
                        } 
                    },
                    fixed:'left'
                },
                {
                    title: '姓名',
                    align: "center",
                    dataIndex: 'name',
                    ellipsis: true,
                    width:120,
                    fixed:'left'
                },
                {
                    title: '基本薪资',
                    align: "center",
                    dataIndex: 'wages',
                    width:110,
                    fixed:'left'
                },
                // {
                //     title: '编号',
                //     align: "center",
                //     dataIndex: 'code',
                //     ellipsis: true,
                //     customRender: (t) => ellipsis(t,17),
                //     width:120,
                // },
                {
                    title: '话费补贴',
                    align: "center",
                    dataIndex: 'phoneBill',
                    ellipsis: true,
                    // width:110
                },
                {
                    title: '午餐补贴',
                    align: "center",
                    dataIndex: 'lunch',
                    ellipsis: true,
                    width:110
                },
                {
                    title: '住房补贴',
                    align: "center",
                    dataIndex: 'housingSubsidies',
                    ellipsis: true,
                    width:110
                },
                {
                    title: '交通补贴',
                    align: "center",
                    dataIndex: 'transportation',
                    ellipsis: true,
                    width:110
                },
                {
                    title: '全勤奖',
                    align: "center",
                    dataIndex: 'fullAttendance',
                    ellipsis: true,
                    width:100
                },
                {
                    title: '社保',
                    align: "center",
                    dataIndex: 'socialSecurity',
                    ellipsis: true,
                    width:100
                },
                {
                    title: '公积金',
                    align: "center",
                    dataIndex: 'accumulationFund',
                    ellipsis: true,
                    width:100
                },
                
                {
                    title: '迟到',
                    align: "center",
                    dataIndex: 'latenessCost',
                    ellipsis: true,
                    width:100
                },
                {
                    title: '事假',
                    align: "center",
                    dataIndex: 'personalCost',
                    ellipsis: true,
                    width:100
                },
                {
                    title: '病假',
                    align: "center",
                    dataIndex: 'sickCost',
                    ellipsis: true,
                    width:100
                },
                {
                    title: '婚假',
                    align: "center",
                    dataIndex: 'marriageCost',
                    ellipsis: true,
                    width:100
                },
                {
                    title: '丧假',
                    align: "center",
                    dataIndex: 'funeralCost',
                    ellipsis: true,
                    width:100
                },
               
                {
                    title: '合计应发',
                    align: "center",
                    dataIndex: 'totalPayable',
                    ellipsis: true,
                    width:110,
                    fixed:'right'
                },
                {
                    title: '个税',
                    align: "center",
                    dataIndex: 'personalTax',
                    ellipsis: true,
                    width:100,
                    fixed:'right'
                },
                {
                    title: '合计应扣',
                    align: "center",
                    dataIndex: 'totalDeduction',
                    ellipsis: true,
                    width:110,
                    fixed:'right'
                },
                {
                    title: '实发合计',
                    align: "center",
                    dataIndex: 'actualOccurrence',
                    ellipsis: true,
                    width:110,
                    fixed:'right'
                },
             ]
          }
        },
        created(){
        },
        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
                var allWages = 0
                var allPersonalTax = 0
                var allTotalPayable = 0
                var allTotalDeduction = 0
                var allPhoneBill = 0
                var allLunch = 0
                var allHousingSubsidies = 0
                var allTransportation = 0
                var allFullAttendance = 0
                var allSocialSecurity = 0
                var allAccumulationFund = 0
                var allLatenessCost = 0
                var allPersonalCost = 0
                var allSickCost = 0
                var allMarriageCost = 0
                var allFuneralCost = 0
                for (let row of this.dataSource){
                    allNumber += row.actualOccurrence*1;
                    allWages +=Number(row.wages);
                    allPersonalTax+=Number(row.personalTax);
                    allTotalPayable+=Number(row.totalPayable);
                    allTotalDeduction+=Number(row.totalDeduction);
                    allPhoneBill+=Number(row.phoneBill);
                    allLunch+=Number(row.lunch);
                    allHousingSubsidies+=Number(row.housingSubsidies);
                    allTransportation+=Number(row.transportation);
                    allFullAttendance+=Number(row.fullAttendance);
                    allSocialSecurity+=Number(row.socialSecurity);
                    allAccumulationFund+=Number(row.accumulationFund);
                    allLatenessCost+=Number(row.latenessCost);
                    allPersonalCost+=Number(row.personalCost);
                    allSickCost+=Number(row.sickCost);
                    allMarriageCost+=Number(row.marriageCost);
                    allFuneralCost+=Number(row.funeralCost);
                }
      
                item.actualOccurrence= parseFloat(allNumber.toFixed(2));
                item.wages =  parseFloat(allWages.toFixed(2));
                item.personalTax =  parseFloat(allPersonalTax.toFixed(2));
                item.totalPayable = parseFloat(allTotalPayable.toFixed(2));
                item.totalDeduction = parseFloat(allTotalDeduction.toFixed(2));
                item.phoneBill = parseFloat(allPhoneBill.toFixed(2));
                item.lunch = parseFloat(allLunch.toFixed(2));
                item.housingSubsidies = parseFloat(allHousingSubsidies.toFixed(2));
                item.transportation = parseFloat(allTransportation.toFixed(2));
                item.fullAttendance = parseFloat(allFullAttendance.toFixed(2));
                item.socialSecurity = parseFloat(allSocialSecurity.toFixed(2));
                item.accumulationFund = parseFloat(allAccumulationFund.toFixed(2));
                item.latenessCost = parseFloat(allLatenessCost.toFixed(2));
                item.personalCost = parseFloat(allPersonalCost.toFixed(2));
                item.sickCost = parseFloat(allSickCost.toFixed(2));
                item.marriageCost = parseFloat(allMarriageCost.toFixed(2));
                item.funeralCost = parseFloat(allFuneralCost.toFixed(2));
                return [item];

            }
        },
        methods: {
            handleCancel(){
                this.visible = false
                this.formState = {}
            },
            detail(id){
                this.formState = {}
                this.formState.id = id
                this.getTableList()
            },
            getTableList(){
                this.loading = true
                getAction('/salary/salaryManagement/querySalaryManagementDetailByMainId',this.formState).then(res=>{
                    this.loading = false
                    if(res.success){
                        this.dataSource =res.result
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },
            searchSonList(){
                this.getTableList()
            },
            showTotal(data) {
                return (
                    <a-table
                        ref="tableInfo"
                        pagination={false}
                        columns={this.columns}
                        dataSource={this.totalDataSource || []}
                        showHeader={false}
                        scroll={{x:2000 ,y:400}}
                    ></a-table>
                )
            },
        }
    }
    </script>
    
    <style scoped lang="less">
    /deep/ .nresume .ant-input{
      height: 100px !important;
    }
    /deep/ .ant-table-footer .ant-table-body {
        overflow-x: hidden !important;
    }
    /deep/.ant-table-footer{
        padding:0 !important;
        overflow: hidden !important;
    }
    /deep/.ant-table-fixed-left .ant-table-body-inner {
        margin-right: -28px !important;
        padding-right: 20px !important;
    }
    </style>