cd-work-flow-web/src/views/oa/salary_management/personnelSalary/Payroll.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-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="年度">
                <a-date-picker placeholder="请选择" :allowClear="true" :open="isopen" mode="year" format="YYYY" v-model="yearWith" 
                 @openChange="changeopen" @panelChange="handlePanelChange1" @change="onChange" style="width:100% !important"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="时间">
                <!-- <a-month-picker placeholder="请选择" :allowClear="false" v-model="yearWithMonth" @change="onChange" style="width:100% !important"/> -->
                <a-range-picker
                    style="width: 100% !important"
                    v-model="DateTime"
                    format="YYYY-MM"
                    valueFormat="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.type">
                    <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-option value="年终奖">年终奖</a-select-option>
                  </a-select>
              </a-form-item>
            </a-col>
            <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>
              </span>
            </a-col>
  
          </a-row>
        </a-form>
      </div>
  
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="createPayroll" type="primary" icon="plus">生成工资单</a-button>
        <a-button @click="addPayroll" type="primary" icon="plus">导入</a-button>
        <!-- <a-button @click="daochu" type="primary" icon="plus">导出明细</a-button> -->
      </div>

      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :scroll="{x: 1000}"
          :loading="loading"
          @change="handleTableChange">
           <span slot="operation" slot-scope="text, record">
                <a @click="handleDetail(record)" >查看详情</a>
                <a-divider type="vertical" />
                <a @click="handleDownload(record)" >下载</a>
                <a-divider type="vertical" />
                <a @click="handleExport(record)" >导出</a>
           </span>
        </a-table>
      </div>
      <!-- table区域-end -->
  
      <!-- 表单区域 -->
      <PayrollDetail ref="PayrollDetail"></PayrollDetail>
      <AnnualLeavePayroll ref="AnnualLeavePayroll"></AnnualLeavePayroll>
      <OvertimePayroll ref="OvertimePayroll"></OvertimePayroll>
      <uploadModal ref="uploadModal" @ok="searchQuery"></uploadModal>
      <uploadPayroll ref="uploadPayroll" @ok="searchQuery"></uploadPayroll>
      <YearEndBonusPayroll ref="YearEndBonusPayroll" @ok="searchQuery"></YearEndBonusPayroll>
      </a-spin>
    </a-card>
  </template>
  
  <script>
  
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { getAction,downFile } from '@/api/manage'
    import moment from 'moment'
    import PayrollDetail from './modules/PayrollDetail.vue'
    import AnnualLeavePayroll from './modules/AnnualLeavePayroll.vue'
    import OvertimePayroll from './modules/OvertimePayroll.vue'
    import uploadModal from './modules/uploadModal.vue'
    import uploadPayroll from './modules/uploadPayroll.vue'
    import YearEndBonusPayroll from './modules/YearEndBonusPayroll.vue'
    import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
    export default {
      name: "Payroll",
      mixins: [JeecgListMixin],
      components: {
        moment,
        PayrollDetail,
        JSearchSelectTag,
        uploadModal,
        uploadPayroll,
        AnnualLeavePayroll,
        OvertimePayroll,
        YearEndBonusPayroll
      },
      data () {
        return {
          description: '工资单列表',
          yearWith:'',
          mode2: ['month', 'month'],
          DateTime:[],
          spinning:false,
          open:false,
          isopen:false,
          // 表头
          columns: [
            {
              title: '序号',
              width: 80,
              align:"center",
              dataIndex: 'index',
              customRender:function (t, r, index) {
                    return parseInt(index)+1;
              }
            },
            {
              title: '月份',
              align:"center",
              dataIndex: 'yearWithMonth',
              // customRender:function (t, r, index) {
              //     if(r.type == '年休工资单'){
              //       return t + "-12";
              //     }else{
              //       return t;
              //     }
              // }
            },
            {
              title: '类型',
              align:"center",
              dataIndex: 'type'
            },
            {
              title: '组织',
              align:"center",
              dataIndex: 'orgName'
            },
            {
              title: '发放人数',
              align:"center",
              dataIndex: 'numberPeople'
            },
            {
              title: '发放薪水',
              align:"center",
              dataIndex: 'salary'
            },
            {
              title: '缴纳个税',
              align:"center",
              dataIndex: 'personalTax'
            },
            {
              title: '生成时间',
              align:"center",
              dataIndex: 'generationTime'
            },
            {
              title: '版本',
              align:"center",
              dataIndex: 'version'
            },
            {
              title: '操作',
              align:"center",
              dataIndex: 'operation',
              width: 200,
              scopedSlots: { customRender: 'operation' } 
            },
          ],
          queryParam:{},
          dataSource:[],
          // 请求参数
        //   url: {

        //      },
          }
        },
      computed: {},
      created () {
        this.getTableList()
      },
      methods: {
       
        searchQuery(){
          this.queryParam.pageNo = 1
          this.getTableList()
        },
        searchReset(){
          this.queryParam={}
          this.DateTime = []
          this.getTableList()
        },
        getTableList(){
          this.loading = true
          getAction('/salary/salaryManagement/list',this.queryParam).then(res=>{
            if(res.success){
                this.loading = false
                this.dataSource =res.result.records
                this.dataSource.map(item=>item.version=item.version?item.version+'.0':'')
                this.ipagination = {
                  total: res.result.total,
                  current: res.result.current,
                  pageSize: res.result.size
                }
            }else{
                this.$message.error(res.message);
            }
          })
        },
        createPayroll(){
          this.$refs.uploadModal.visible = true
        },
        addPayroll(){
          this.$refs.uploadPayroll.visible = true
        },
        handleDetail(record){
          if(record.type=='加班工资单'){
            this.$refs.OvertimePayroll.visible = true
            this.$refs.OvertimePayroll.detail(record.id)
          }else if(record.type=='年休工资单'){
            this.$refs.AnnualLeavePayroll.visible = true
            this.$refs.AnnualLeavePayroll.detail(record.id)
          }else if(record.type=='月度工资单'){
            this.$refs.PayrollDetail.visible = true
            this.$refs.PayrollDetail.detail(record.id,)
          }else if(record.type=='福利现金'||record.type=='年终奖'){
            this.$refs.YearEndBonusPayroll.visible = true
            this.$refs.YearEndBonusPayroll.detail(record.id,record.type)
          }
          
        },
        alertMsg(st){
          this.spinning = false
          this.$message.warning('执行失败，请联系系统管理员'+st)
        },
        // tempChange(){
        //   // console.log("=====================执行开始-五月考勤 - 森语");
          
        //   // let par = {"excelName":"五月考勤 - 马菲羊","month":"2024-05"}
        //   // let par = {"excelName":"五月考勤 - 正织","month":"2024-05"}
        //   // let par = {"excelName":"五月考勤 - 森语","month":"2024-05"}
          
        //   // getAction('/salary/salaryManagement/tempChange',par).then(res=>{
        //   //   console.log("=====================执行结束");
        //   // })
          
          
        // },
        daochu(){
          this.spinning = true
          downFile('/salary/salaryManagement/exportXls99',{}).then(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' }),  record.type + '.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());
             }
          )
        },
        handleDownload(record){
          this.spinning = true
          var titleFlie = moment(record.yearWithMonth).format('YYYY年MM月')
          titleFlie =titleFlie+record.orgName+record.type
          downFile('/salary/salaryManagement/exportXls',{id:record.id,type:record.type}).then(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' }),  titleFlie + '.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',  titleFlie+'.xlsx')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) // 下载完成移除元素
              window.URL.revokeObjectURL(url) // 释放掉blob对象
            }
          }).catch(
             error => {
                  this.alertMsg(error.toString());
             }
          )
        },
        handleExport(record){
          this.spinning = true
          downFile('/salary/salaryManagement/exportXls2',{id:record.id,type:record.type}).then(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' }),  record.type + '.xls')
            } 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',  record.orgName+record.yearWithMonth+record.type+'.xls')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link) // 下载完成移除元素
              window.URL.revokeObjectURL(url) // 释放掉blob对象
            }
          }).catch(
             error => {
                  this.alertMsg(error.toString());
             }
          )
        },
        handleTableChange(pagination, filters, sorter) {
            this.queryParam.pageNo = pagination.current
            this.queryParam.pageSize = pagination.pageSize
            this.getTableList()
        },
        handlePanelChange2(value,mode){
            if (this.DateTime[1] && this.DateTime[1]._d != value[1]._d) {
                this.open = false;
            }
            this.DateTime = value
            this.queryParam.yearWithMonth_begin = this.DateTime[0]&&this.DateTime[0]!==''?moment(this.DateTime[0]).format('YYYY-MM'):''
            this.queryParam.yearWithMonth_end = 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]];
        },
        onDateChange(status) {
            if(status){
                this.open = true;
            }else{
                this.open = false
            }
        },
        changeData(value){
          if(value == null || value.length == 0){
            this.queryParam.yearWithMonth_begin = ''
            this.queryParam.yearWithMonth_end = ''
          }
          this.DateTime = value
            
        },
        handlePanelChange1(value){
            this.isopen = false
            this.yearWith = value
            this.queryParam.yearWith = this.yearWith?moment(this.yearWith).format('YYYY'):''
        },
        changeopen(status){
            if(status){
                this.isopen =  true
            }
        },
        onChange(data){
          // if(data == null || data == ''){
          //   this.yearWithMonth = ''
          //   this.queryParam.yearWithMonth = ''
          // }
          this.yearWith = data
          this.queryParam.yearWith = this.yearWith?moment(this.yearWith).format('YYYY'):''
        }
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less'
  </style>