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

<template>
    <a-card :bordered="false">
  <a-spin  :spinning="spinning" tip="执行中,请稍后...">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="时间">
                <a-range-picker
                    style="width: 100% !important"
                    v-model="DateTime"
                    :allowClear = 'false'
                    format="YYYY-MM"
                    :mode="mode2"
                    :open="open"
                    :placeholder="['开始时间', '结束时间']"
                    @panelChange="handlePanelChange2"
                    @openChange="onDateChange"
                    @change="changeData"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="公司">
                <a-select  v-model="queryParam.orgName">
                    <a-select-option value="">所有</a-select-option>
                    <a-select-option value="正织">正织</a-select-option>
                    <a-select-option value="森语">森语</a-select-option>
                    <a-select-option value="马菲羊">马菲羊</a-select-option>
                  </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="部门">
                <j-search-select-tag v-model="queryParam.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>
            <template v-if="toggleSearchStatus">
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="姓名">
                      <j-search-select-tag v-model="queryParam.name" placeholder="请选择名称" 
                         dict="sys_user,realname,realname" allowClear/>
                  </a-form-item>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="雇佣状态">
                      <a-select  v-model="queryParam.syHireType" mode="multiple">
                          <a-select-option value="">所有</a-select-option>
                          <a-select-option value="在职">在职</a-select-option>
                          <a-select-option value="离职">离职</a-select-option>
                          <a-select-option value="退休返聘">退休返聘</a-select-option>
                          <a-select-option value="系统运维">系统运维</a-select-option>
                      </a-select>
                  </a-form-item>
              </a-col>
            </template>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
  
          </a-row>
        </a-form>
      </div>
  
      <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button type="primary" @click="exportList" icon="plus">导出</a-button>
        </div>

        <a-table
          ref="tableRef"
          size="middle"
          bordered
          rowKey="userId"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :scroll="{x: 2000}"
          :loading="loading"
          :footer="showTotal"
          @change="handleTableChange"> 
        </a-table>
      </div>
      <!-- table区域-end -->
</a-spin>
      <!-- 表单区域 -->
    </a-card>
  </template>
  
  <script>
  
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { getAction,downFile } from '@/api/manage'
    import moment from 'moment'
    import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
    export default {
      name: "SalarysStatistics",
      mixins: [JeecgListMixin],
      components: {
        moment,
        JSearchSelectTag
      },
      data () {
        return {
          description: '薪资统计',
          DateTime:[moment().subtract(1, 'months'),moment().subtract(1, 'months'),],
          mode2: ['month', 'month'],
          open:false,
          spinning:false,
          // 表头
          columns: [
            {
              title: '序号',
              width: 80,
              align:"center",
              dataIndex: 'code',
              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: '基本薪资',
              align:"center",
              dataIndex: 'beforeAdjustment',
              fixed:'left'
            },
            {
              title: '公司',
              align:"center",
              dataIndex: 'orgName',
            },
            {
              title: '话费补贴',
              align:"center",
              dataIndex: 'phoneBill'
            },
            {
              title: '午餐补贴',
              align:"center",
              dataIndex: 'lunch'
            },
            {
              title: '住房补贴',
              align:"center",
              dataIndex: 'housingSubsidies',
            },
            {
              title: '交通补贴',
              align:"center",
              dataIndex: 'transportation',
            },
            {
              title: '全勤奖',
              align:"center",
              dataIndex: 'fullAttendance'
            },
            {
              title: '加班工资',
              align:"center",
              dataIndex: 'overtimePay'
            },
            {
              title: '年休工资',
              align:"center",
              dataIndex: 'yearSalary'
            },
            {
              title: '社保',
              align:"center",
              dataIndex: 'socialSecurity'
            },
            {
              title: '公积金',
              align:"center",
              dataIndex: 'accumulationFund'
            },
            
            {
              title: '迟到',
              align:"center",
              dataIndex: 'latenessCost'
            },
            {
              title: '事假',
              align:"center",
              dataIndex: 'personalCost'
            },
            {
              title: '病假',
              align:"center",
              dataIndex: 'sickCost'
            },
            {
              title: '婚假',
              align:"center",
              dataIndex: 'marriageCost'
            },
            {
              title: '丧假',
              align:"center",
              dataIndex: 'funeralCost'
            },
           {
             title: '个税',
             align:"center",
             dataIndex: 'personalTax',
              fixed:'right'
           },
            {
              title: '合计应发',
              align:"center",
              dataIndex: 'totalPayable',
              fixed:'right'
            },
            {
              title: '合计应扣',
              align:"center",
              dataIndex: 'totalDeduction',
              fixed:'right'
            },
            {
              title: '实发合计',
              align:"center",
              dataIndex: 'actualOccurrence',
              width: 120,
              fixed:'right'
            },
          ],
          ipagination:{},
          queryParam:{
            beginDate:moment().subtract(1, 'months').format('YYYY-MM'),
            endDate:moment().subtract(1, 'months').format('YYYY-MM'),
            syHireType:['在职','退休返聘']
          },
          dataSource:[{}],
          totalDataSource:[]
          // 请求参数
        //   url: {

        //      },
          }
        },
        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: {
        },
      created () {
        // this.getTableList()
      },
      methods: {
        getTableList(){
          this.spinning = true
          var param = Object.assign({}, this.queryParam)
          param.syHireType = (param.syHireType).toString()
          getAction('/salary/salaryManagement/querySalaryTotalList',param).then(res=>{
            this.spinning = false
            if(res.success){
                this.dataSource =res.result.records
                this.totalDataSourceList(res.data)
                this.ipagination = {
                  total: res.result.total,
                  current: res.result.current,
                  pageSize: res.result.size
                }
            }else{
                this.$message.error(res.message);
            }
          })
        },
        totalDataSourceList(data){
          this.totalDataSource = [];
          var item={
            name:'合计',
            beforeAdjustment:data.beforeAdjustment,//data.beforeAdjustment?parseFloat(data.beforeAdjustment.toFixed(2)):'',
            personalTax:data.personalTax?parseFloat(data.personalTax.toFixed(2)):'',
            totalPayable:data.totalPayable?parseFloat(data.totalPayable.toFixed(2)):'',
            totalDeduction: data.totalDeduction?parseFloat(data.totalDeduction.toFixed(2)):'',
            actualOccurrence: data.actualOccurrence?parseFloat(data.actualOccurrence.toFixed(2)):''
          }
          this.totalDataSource.push(item)
        },
        changeData(value){
            this.DateTime = value
        },
        onDateChange(status) {
            if(status){
                this.open = true;
            }else{
                this.open = false
            }
        },
        handlePanelChange2(value,mode){
            if (this.DateTime[1] && this.DateTime[1]._d != value[1]._d) {
                this.open = false;
            }
            this.DateTime = value
            this.queryParam.beginDate = this.DateTime[0]&&this.DateTime[0]!==''?moment(this.DateTime[0]).format('YYYY-MM'):''
            this.queryParam.endDate = this.DateTime[1]&&this.DateTime[1]!==''?moment(this.DateTime[1]).format('YYYY-MM'):''
            this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
        },
        searchQuery(){
          // this.spinning = true
          // this.toggleSearchStatus = false
          this.queryParam.pageNo = 1
          this.getTableList()
        },
        searchReset(){
          this.queryParam={
            beginDate:moment().subtract(1, 'months').format('YYYY-MM'),
            endDate:moment().subtract(1, 'months').format('YYYY-MM'),
            syHireType:['在职','退休返聘']
          }
          // this.spinning = true
          this.getTableList()
        },
        handleTableChange(pagination, filters, sorter) {
            this.queryParam.pageNo = pagination.current
            this.queryParam.pageSize = pagination.pageSize
            this.getTableList()
        },
        exportList(){
          this.spinning = true
          var param1 = Object.assign({}, this.queryParam)
          param1.syHireType = (param1.syHireType).toString()
          downFile('/salary/salaryManagement/exportXls3',param1).then(data => {
            console.log("================"+data)
            this.spinning = false
            if (!data) {
              this.$message.warning('文件下载失败')
              return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }),  '薪资统计' + '.xlsx')
            } else {
              let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', '薪资统计'+'.xlsx')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) // 下载完成移除元素
              window.URL.revokeObjectURL(url) // 释放掉blob对象
            }
          }).catch(
             error => {
                  this.alertMsg(error.toString());
             }
          )
        },
        alertMsg(st){
          this.spinning = false
          this.$message.warning('文件导出失败，请联系系统管理员'+st)
        },
        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 lang="less">
    // @import '~@assets/less/common.less';
    /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: -22px !important;
        padding-right: 20px !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>