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

<template>
    <a-card :bordered="false">
  
      <!-- 查询区域 -->
      <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.organization">
                    <a-select-option value="all">所有</a-select-option>
                    <a-select-option value="Apparel Group">Apparel Group</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-range-picker v-model="DateTime"  style="width: 100%;" @change="changeStartDate" />
              </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="all">所有</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="createMonthlyPayroll" type="primary" icon="plus">生成月度工资单</a-button>
        <a-button @click="createOvertimePayroll" type="primary" icon="plus">生成加班工资单</a-button>
        <a-button @click="createLeavePayroll" type="primary" icon="plus">生成年休工资单</a-button>
      </div>
  
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i>
          <span>已选择</span>
          <a style="font-weight: 600">
            {{ selectedRowKeys.length }}
          </a>
          <span>项</span>
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
  
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :scroll="{x: 1000}"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @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>
    </a-card>
  </template>
  
  <script>
  
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { getAction } from '@/api/manage'
    import moment from 'moment'
    import PayrollDetail from './modules/PayrollDetail.vue'
    export default {
      name: "Payroll",
      mixins: [JeecgListMixin],
      components: {
        moment,
        PayrollDetail
      },
      data () {
        return {
          description: '工资单列表',
          DateTime:[],
          selectedRowKeys:[],
          selectedRows:[],
          // 表头
          columns: [
            {
              title: '序号',
              width: 80,
              align:"center",
              dataIndex: 'code'
            },
            {
              title: '类型',
              align:"center",
              dataIndex: 'type'
            },
            {
              title: '组织',
              align:"center",
              dataIndex: 'organization'
            },
            {
              title: '发放人数',
              align:"center",
              dataIndex: 'distributionPersonnelNumber'
            },
            {
              title: '发放薪水',
              align:"center",
              dataIndex: 'payrollDistribution'
            },
            {
              title: '缴纳个税',
              align:"center",
              dataIndex: 'payPersonalTax'
            },
            {
              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: {
        changeStartDate(data){
            this.DateTime = data
            this.queryParam.Date_begin = data.length==2?moment(data[0]).format('YYYY-MM-DD'):''
            this.queryParam.Date_end = data.length==2?moment(data[1]).format('YYYY-MM-DD'):''
        },
        getTableList(){

        },
        createMonthlyPayroll(){

        },
        createOvertimePayroll(){

        },
        createLeavePayroll(){

        },
        handleDetail(record){
            this.$refs.PayrollDetail.visible = true
        },
        handleDownload(record){

        },
        handleexport(record){

        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectionRows;
        },
        handleTableChange(pagination, filters, sorter) {
            this.queryParam.pageNo = pagination.current
            this.queryParam.pageSize = pagination.pageSize
            this.getTableList()
        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less'
  </style>