canrd-outside / order-erp-front · Files

<template>
    <div class="payroll-container">
      <!-- 搜索表单 -->
      <div class="search-form">
        <a-form layout="inline" @submit.prevent="handleSearch">
          <a-form-item label="姓名">
            <a-input v-model:value="searchParams.chineseName" placeholder="输入姓名" />
          </a-form-item>
          <a-form-item label="昵称">
            <a-input v-model:value="searchParams.nickName" placeholder="输入昵称" />
          </a-form-item>
          <a-form-item label="公司">
            <a-select 
              v-model:value="searchParams.companyId" 
              style="width: 160px" 
              placeholder="请选择公司"
              allowClear
            >
              <a-select-option 
                v-for="company in companyOptions" 
                :key="company.id" 
                :value="company.id"
              >
                {{ company.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="工资月份" required>
            <a-date-picker 
              v-model:value="searchParams.dateTime" 
              picker="month" 
              :format="monthFormat"
              value-format="YYYY-MM" 
              placeholder="选择月份"
              style="width: 120px"
            />
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select v-model:value="searchParams.wagesStatus" style="width: 120px">
              <a-select-option value="0">待审核</a-select-option>
              <a-select-option value="10">已审核</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="发放状态">
            <a-select v-model:value="searchParams.distributionStatus" style="width: 120px">
              <a-select-option value="20">未发放</a-select-option>
              <a-select-option value="10">已发放</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      
      <!-- 工具栏 -->
      <div class="toolbar">
        <!-- 显示已选择数量 -->
        <a-alert v-if="selectedRowKeys.length > 0" class="selected-alert" type="info" show-icon>
          <template #message>
            <span>已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> 项</span>
            <a-button type="link" @click="onClearSelected">取消选择</a-button>
          </template>
        </a-alert>
        
        <!-- 操作按钮始终显示 -->
        <div class="batch-actions">
          <!-- 设置审核状态 -->
          <a-dropdown>
            <a-button type="primary">
              <span>设置审核状态</span>
              <down-outlined />
            </a-button>
            <template #overlay>
              <a-menu @click="handleSetWagesStatus">
                <a-menu-item key="10">审核通过</a-menu-item>
                <a-menu-item key="20">驳回</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          
          <!-- 设置发放状态 -->
          <a-dropdown class="ml-2">
            <a-button type="primary">
              <span>设置发放状态</span>
              <down-outlined />
            </a-button>
            <template #overlay>
              <a-menu @click="handleSetDistributionStatus">
                <a-menu-item key="10">已发放</a-menu-item>
                <a-menu-item key="20">未发放</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          
          <!-- 导出按钮 -->
          <a-button type="primary" class="ml-2" @click="handleExport">导出</a-button>
          
          <!-- 工资汇总按钮 -->
          <a-button type="primary" class="ml-2" @click="handleSalarySummary">工资汇总</a-button>
        </div>
      </div>
      
      <!-- 原生表格显示数据 -->
      <div class="table-container">
        <a-table 
          :loading="loading" 
          :columns="columns"
          :data-source="tableData" 
          :pagination="pagination"
          :row-key="record => record.userId"
          :row-selection="rowSelection"
          @change="handleTableChange"
          bordered
          :scroll="{ x: 3800 }"
          :customRow="customRow"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'wagesStatus'">
              {{ getWagesStatusText(record.wagesStatus) }}
            </template>
            <template v-else-if="column.dataIndex === 'distributionStatus'">
              {{ getDistributionStatusText(record.distributionStatus) }}
            </template>
            <template v-else-if="isNumericColumn(column.dataIndex) && record[column.dataIndex] !== null && record[column.dataIndex] !== undefined">
              {{ formatNumber(record[column.dataIndex]) }}
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" @click="handleEdit(record, searchParams.dateTime)">编辑</a-button>
              <a-divider type="vertical" />
              <a-button type="link" @click="handleApplyPermission(record)">申请权限</a-button>
              <a-divider type="vertical" />
              <a-popconfirm
                title="是否确认删除"
                @confirm="handleDelete(record)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
              
              <a-popconfirm
                v-if="record.wagesStatus === '0'"
                title="确认审核通过？"
                @confirm="handleApprove(record)"
              >
                <a-button type="link" style="color: #52c41a">审核通过</a-button>
              </a-popconfirm>
              
              <a-popconfirm
                v-if="record.wagesStatus === '0'"
                title="确认驳回？"
                @confirm="handleReject(record)"
              >
                <a-button type="link" danger>驳回</a-button>
              </a-popconfirm>
              
              <a-popconfirm
                v-if="record.wagesStatus === '10' && record.distributionStatus === '0'"
                title="确认发放工资？"
                @confirm="handleDistribute(record)"
              >
                <a-button type="link" style="color: #fa8c16">发放</a-button>
              </a-popconfirm>
          </template>
        </template>
        </a-table>
      </div>
      
      <!-- 工资记录编辑抽屉 -->
      <PayrollModal @register="registerDrawer" @success="handleSuccess" />
      
      <!-- 申请权限抽屉 -->
      <BasicDrawer
        v-bind="$attrs"
        @register="registerApplyDrawer"
        @ok="handleApplySubmit"
        title="字段编辑权限申请"
        width="60%"
        :destroyOnClose="true"
        :isDetail="true"
        :showFooter="true"
        okText="申请"
        :showDetailBack="false"
        :closable="true"
        class="apply-permission-drawer"
      >
        <div>
          <h3 style="margin-bottom: 16px; color: #1890ff;">请选择需要申请编辑权限的字段：</h3>
          <BasicForm @register="registerApplyForm" />
        </div>
      </BasicDrawer>
      
      <!-- 申请理由组件 -->
      <ApproveReason @register="registerApproveReason" @success="handleApproveSuccess" />
      
      <!-- 年月份选择对话框 -->
      <a-modal
        v-model:visible="dateSelectVisible"
        title="选择年月份"
        @ok="handleDateSelectOk"
        @cancel="handleDateSelectCancel"
        width="700px"
        class="date-select-modal"
      >
        <div>
          <p class="selection-title">请选择想要统计的年月份（可多选）：</p>
          <!-- 年份选择 -->
          <div class="year-selection">
            <p class="section-title">选择年份：</p>
            <a-radio-group v-model:value="selectedYear" button-style="solid" size="large">
              <a-radio-button 
                v-for="year in availableYears" 
                :key="year" 
                :value="year"
              >
                {{ year }}年
              </a-radio-button>
            </a-radio-group>
          </div>
          
          <!-- 月份选择 -->
          <div class="month-selection" style="margin-top: 24px;">
            <p class="section-title">选择月份：</p>
            <a-checkbox-group v-model:value="selectedMonths" class="month-checkbox-group">
              <a-row :gutter="[16, 16]">
                <a-col :span="6" v-for="month in 12" :key="month">
                  <a-checkbox :value="month.toString().padStart(2, '0')" class="month-checkbox">
                    {{ month }}月
                  </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </div>
          
          <!-- 已选择的年月份展示 -->
          <div class="selected-dates" style="margin-top: 24px;">
            <p class="section-title">已选择的年月：</p>
            <div class="tag-container">
              <a-tag 
                v-for="date in formattedSelectedDates" 
                :key="date" 
                closable 
                @close="removeSelectedDate(date)"
                class="date-tag"
              >
                {{ date }}
              </a-tag>
            </div>
          </div>
        </div>
      </a-modal>
      
      <!-- 工资汇总结果对话框 -->
      <a-modal
        v-model:visible="summaryResultVisible"
        title="工资汇总结果"
        @cancel="handleSummaryResultClose"
        :footer="null"
        width="600px"
      >
        <a-spin :spinning="summaryLoading">
          <div class="summary-result">
            <a-descriptions :column="1" bordered>
              <a-descriptions-item label="月份含量">
                {{ summaryData.monthlyCount || 0 }}
              </a-descriptions-item>
              <a-descriptions-item label="人数总额">
                {{ summaryData.personCount || 0 }}
              </a-descriptions-item>
              <a-descriptions-item label="实际发放工资总额">
                ￥{{ formatNumber(summaryData.actualSalary || 0) }}
              </a-descriptions-item>
              <a-descriptions-item label="缴纳保险总金额">
                ￥{{ formatNumber(summaryData.insuranceSalary || 0) }}
              </a-descriptions-item>
              <a-descriptions-item label="合计本月用工成本">
                ￥{{ formatNumber(summaryData.totalMonthlyWorkCost || 0) }}
              </a-descriptions-item>
              <a-descriptions-item label="平均每月用工成本">
                ￥{{ formatNumber(summaryData.averageMonthlyWorkCost || 0) }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-spin>
      </a-modal>
    </div>
  </template>
  
  <script lang="ts">
    import { defineComponent, ref, reactive, onMounted, computed, watch } from 'vue';
    import { message } from 'ant-design-vue';
    import { useModal } from '/@/components/Modal';
    import { useDrawer } from '/@/components/Drawer';
    import { BasicDrawer } from '/@/components/Drawer';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import PayrollModal from './PayrollModal.vue';
    import ApproveReason from '../attendance/ApproveReason.vue';
    import type { WagesParams, WagesItem } from '/@/api/system/salary';
    import { getWagesListByPage, deleteWages, approveWages, rejectWages, distributeWages } from '/@/api/system/salary';
    import { defHttp } from '/@/utils/http/axios';
    import dayjs from 'dayjs';
    import { DownOutlined } from '@ant-design/icons-vue';
  import axios from 'axios';
  import { useUserStoreWithOut } from '/@/store/modules/user';
const userStore = useUserStoreWithOut(); 
    export default defineComponent({
      name: 'PayrollManagement',
      components: { 
        PayrollModal,
        BasicDrawer,
        BasicForm,
        ApproveReason,
        DownOutlined
      },
      setup() {
        // 表格数据相关状态
        const loading = ref(false);
        const tableData = ref<WagesItem[]>([]);
        const pagination = reactive({
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
          showTotal: (total: number) => `共 ${total} 条数据`,
        });
        
        // 工资汇总相关状态
        const dateSelectVisible = ref(false);
        const summaryResultVisible = ref(false);
        const summaryLoading = ref(false);
        const selectedDateTimes = ref<string[]>([]);
        
        // 新增年月份选择相关状态
        const selectedYear = ref<string>('');
        const selectedMonths = ref<string[]>([]);
        const availableYears = ref<string[]>([]);
        
        // 计算属性 - 格式化后的已选择年月
        const formattedSelectedDates = computed(() => {
          return selectedDateTimes.value.sort((a, b) => a.localeCompare(b));
        });
        
        // 移除已选择的年月
        const removeSelectedDate = (date: string) => {
          selectedDateTimes.value = selectedDateTimes.value.filter(d => d !== date);
        };
        
        const availableDateTimes = ref<{label: string, value: string}[]>([]);
        const summaryData = ref<any>({
          monthlyCount: 0,
          personCount: 0,
          actualSalary: 0,
          insuranceSalary: 0,
          totalMonthlyWorkCost: 0,
          averageMonthlyWorkCost: 0
        });
        
        // 公司选项数据
        const companyOptions = ref<{ id: number | string; name: string }[]>([]);
        
        // 注册抽屉
        const [registerDrawer, { openDrawer }] = useDrawer();
        
        // 申请权限相关状态
        const currentApplyRecord = ref<any>(null);
        const selectedApplyFields = ref<any>({});
        
        // 多选相关状态
        const selectedRowKeys = ref<(string | number)[]>([]);
        const selectedRows = ref<WagesItem[]>([]);
        
        // 搜索参数
        const monthFormat = 'YYYY-MM';
        const searchParams = reactive<any>({
          nickName: '',
          chineseName: '',
          companyId: undefined,
          dateTime: dayjs().format(monthFormat),
          wagesStatus: '',
          distributionStatus: '',
          page: 1,
          pageSize: 10,
        });
  
        // 表格行选择配置
        const rowSelection = computed(() => {
          return {
            selectedRowKeys: selectedRowKeys.value,
            onChange: (keys: (string | number)[], rows: WagesItem[]) => {
              selectedRowKeys.value = keys;
              selectedRows.value = rows;
            },
            preserveSelectedRowKeys: true,
          };
        });
        
        // 清除所有选择
        const onClearSelected = () => {
          selectedRowKeys.value = [];
          selectedRows.value = [];
        };
  
        // 表格行自定义样式
        const customRow = (record: WagesItem) => {
          return {
            style: {
              fontSize: '14px',
            },
          };
        };
  
        // 定义表格列
        const columns = [
          { title: '昵称', dataIndex: 'nickName', key: 'nickName', width: 80, fixed: 'left', className: 'column-left-fixed' },
          { title: '姓名', dataIndex: 'chineseName', key: 'chineseName', width: 80, fixed: 'left', className: 'column-left-fixed' },
          { title: '公司', dataIndex: 'companyName', key: 'companyName', width: 120, fixed: 'left', className: 'column-left-fixed' },
          {
            title: '应发工资',
            className: 'column-group-header salary-payable',
            children: [
              { title: '基本工资', dataIndex: 'basicWages', key: 'basicWages', width: 90, className: 'salary-payable-item' },
              { title: '岗位津贴', dataIndex: 'postAllowance', key: 'postAllowance', width: 90, className: 'salary-payable-item' },
              { title: '管理岗位津贴', dataIndex: 'managementAllowance', key: 'managementAllowance', width: 120, className: 'salary-payable-item' },
              { title: '话费补贴', dataIndex: 'phoneAllowance', key: 'phoneAllowance', width: 90, className: 'salary-payable-item' },
              { title: '餐补', dataIndex: 'mealAllowance', key: 'mealAllowance', width: 80, className: 'salary-payable-item' },
              { title: '交通补贴', dataIndex: 'transportationAllowance', key: 'transportationAllowance', width: 90, className: 'salary-payable-item' },
              { title: '全勤奖', dataIndex: 'attendanceAllowance', key: 'attendanceAllowance', width: 80, className: 'salary-payable-item' },
              { title: '绩效部分', dataIndex: 'performanceAllowance', key: 'performanceAllowance', width: 90, className: 'salary-payable-item' },
              { title: '提成', dataIndex: 'commissionPrice', key: 'commissionPrice', width: 80, className: 'salary-payable-item' },
              { title: '奖金', dataIndex: 'bonusPrice', key: 'bonusPrice', width: 80, className: 'salary-payable-item' },
              { title: '应扣工资', dataIndex: 'deductibleSalaryPrice', key: 'deductibleSalaryPrice', width: 90, className: 'salary-payable-item' },
              { title: '其他扣款', dataIndex: 'otherDeductionsPrice', key: 'otherDeductionsPrice', width: 90, className: 'salary-payable-item' },
              { title: '应发工资', dataIndex: 'salaryPrice', key: 'salaryPrice', width: 90, className: 'salary-payable-total' },
            ]
          },
    
          {
            title: '个人承担社保公积金',
            className: 'column-group-header personal-insurance',
            children: [
              { title: '个人养老保险', dataIndex: 'personalPensionInsurance', key: 'personalPensionInsurance', width: 120, className: 'personal-insurance-item' },
              { title: '个人医疗保险', dataIndex: 'personalPensionMedicalInsurance', key: 'personalPensionMedicalInsurance', width: 120, className: 'personal-insurance-item' },
              { title: '个人失业保险', dataIndex: 'personalPensionUnemploymentInsurance', key: 'personalPensionUnemploymentInsurance', width: 120, className: 'personal-insurance-item' },
              { title: '个人大额医疗', dataIndex: 'personalPensionLargeScaleMedicalInsurance', key: 'personalPensionLargeScaleMedicalInsurance', width: 120, className: 'personal-insurance-item' },
              { title: '个人公积金', dataIndex: 'personalPensionProvidentFundInsurance', key: 'personalPensionProvidentFundInsurance', width: 120, className: 'personal-insurance-item' },
              { title: '个人合计', dataIndex: 'individualTotal', key: 'individualTotal', width: 90, className: 'personal-insurance-total' },
            ]
          },
         
          {
            title: '公司承担社保公积金',
            className: 'column-group-header company-insurance',
            children: [
              { title: '公司养老保险', dataIndex: 'companyInsurance', key: 'companyInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司医疗保险', dataIndex: 'companyMedicalInsurance', key: 'companyMedicalInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司失业保险', dataIndex: 'companyUnemploymentInsurance', key: 'companyUnemploymentInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司工伤保险', dataIndex: 'companyEmploymentInjuryInsurance', key: 'companyEmploymentInjuryInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司生育保险', dataIndex: 'companyMaternityInsurance', key: 'companyMaternityInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司大额医疗', dataIndex: 'companyLargeScaleMedicalInsurance', key: 'companyLargeScaleMedicalInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司公积金', dataIndex: 'companyProvidentFundInsurance', key: 'companyProvidentFundInsurance', width: 120, className: 'company-insurance-item' },
              { title: '公司合计', dataIndex: 'companyTotal', key: 'companyTotal', width: 90, className: 'company-insurance-total' },
            ]
          },
         
          { title: '个人所得税', dataIndex: 'tax', key: 'tax', width: 120, className: 'other-item' },
          { title: '实发金额', dataIndex: 'actualSalaryPrice', key: 'actualSalaryPrice', width: 100, className: 'other-item' },
          { title: '总成本', dataIndex: 'totalCost', key: 'totalCost', width: 90, className: 'other-item' },
          { title: '审核状态', dataIndex: 'wagesStatus', key: 'wagesStatus', width: 90, className: 'other-item' },
          { title: '发放状态', dataIndex: 'distributionStatus', key: 'distributionStatus', width: 90, className: 'other-item' },
          { title: '操作', dataIndex: 'action', key: 'action', width: 240, fixed: 'right', className: 'column-right-fixed' },
        ];
  
        // 定义申请权限表单字段
        const getApplySchema = () => [
          {
            field: 'basicWages',
            label: '基本工资',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'postAllowance',
            label: '岗位津贴',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'managementAllowance',
            label: '管理岗位津贴',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'phoneAllowance',
            label: '话费补贴',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'mealAllowance',
            label: '餐补',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'transportationAllowance',
            label: '交通补贴',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'attendanceAllowance',
            label: '全勤奖',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'performanceAllowance',
            label: '绩效部分',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'wages',
            label: '社保配置',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'commissionPrice',
            label: '提成',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'bonusPrice',
            label: '奖金',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'deductibleSalaryPrice',
            label: '应扣工资',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'otherDeductionsPrice',
            label: '其他扣款',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'tax',
            label: '个人所得税',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
        ];
  
        // 注册申请权限表单
        const [registerApplyForm, { getFieldsValue: getApplyFieldsValue }] = useForm({
          labelWidth: 180,
          schemas: getApplySchema(),
          showActionButtonGroup: false,
          actionColOptions: {
            span: 24,
          },
        });
        
        // 注册申请权限抽屉
        const [registerApplyDrawer, { openDrawer: openApplyDrawer, closeDrawer: closeApplyDrawer }] = useDrawer();
        
        // 注册申请理由模态框
        const [registerApproveReason, { openModal: openApproveReasonModal }] = useModal();
  
        // 格式化日期为YYYY-MM格式
        function formatYearMonth(date: any): string {
          if (!date) return getCurrentYearMonth();
          
          if (typeof date === 'string' && /^\d{4}-\d{2}$/.test(date)) {
            return date;
          }
          
          let dateObj;
          try {
            dateObj = new Date(date);
            if (isNaN(dateObj.getTime())) {
              return getCurrentYearMonth();
            }
          } catch (e) {
            return getCurrentYearMonth();
          }
          
          const year = dateObj.getFullYear();
          const month = String(dateObj.getMonth() + 1).padStart(2, '0');
          return `${year}-${month}`;
        }
  
        // 获取当前年月
        function getCurrentYearMonth(): string {
          const now = new Date();
          const year = now.getFullYear();
          const month = String(now.getMonth() + 1).padStart(2, '0');
          return `${year}-${month}`;
        }
  
        // 获取审核状态文本
        function getWagesStatusText(status: string): string {
          if (status === undefined || status === null || status === '') {
            return '未创建';
          }
          
          const statusMap: Record<string, string> = {
            '0': '待审核',
            '10': '已审核',
            '20': '已驳回',
          };
          return statusMap[status] || '未创建';
        }
        
        // 获取发放状态文本
        function getDistributionStatusText(status: string): string {
          const statusMap: Record<string, string> = {
            '20': '未发放',
            '10': '已发放',
          };
          return statusMap[status] || status;
        }
        
        // 加载公司数据
        const loadCompanyOptions = async () => {
          try {
            const result = await defHttp.post<any[]>({
              url: '/order/erp/jobs/all'
            });
            
            if (Array.isArray(result)) {
              companyOptions.value = result;
            }
          } catch (error) {
            console.error('加载公司数据失败:', error);
          }
        };
  
        // 加载数据
        const loadData = async () => {
          try {
            loading.value = true;
            
            const params: WagesParams = {
              page: pagination.current,
              pageSize: pagination.pageSize,
              dateTime: formatYearMonth(searchParams.dateTime),
            };
            
            if (searchParams.nickName) params.nickName = searchParams.nickName;
            if (searchParams.chineseName) params.chineseName = searchParams.chineseName;
            if (searchParams.companyId) params.companyId = searchParams.companyId;
            if (searchParams.wagesStatus) params.wagesStatus = searchParams.wagesStatus;
            if (searchParams.distributionStatus) params.distributionStatus = searchParams.distributionStatus;
            
            const result = await getWagesListByPage({
              ...params,
              // 强制转换为数字确保API正确处理
              page: Number(params.page),
              pageSize: Number(params.pageSize)
            });
            
            if (result && result.records) {
            
              
              // 检查记录中是否包含wagesName字段
              if (result.records.length > 0) {
                const sampleRecord = result.records[0];
                console.log('记录样例:', { 
                  wagesId: sampleRecord.wagesId,
                  userId: sampleRecord.userId,
                  chineseName: sampleRecord.chineseName,
                  wagesName: sampleRecord.wagesName,
                  dateTime: sampleRecord.dateTime,
                });
              }
              
              tableData.value = [...result.records];  // 使用新数组确保Vue更新视图
              pagination.total = result.total || 0;
            } else {
              tableData.value = [];
              pagination.total = 0;
            }
          } catch (error) {
            console.error('加载数据失败:', error);
            message.error('加载数据失败，请稍后重试');
            tableData.value = [];
            pagination.total = 0;
          } finally {
            loading.value = false;
          }
        };
        
        // 处理表格分页变化
        const handleTableChange = (pag: any) => {
          pagination.current = pag.current;
          pagination.pageSize = pag.pageSize;
          loadData();
        };
        
        // 处理搜索表单提交
        const handleSearch = () => {
          pagination.current = 1;
          loadData();
        };
        
        // 重置搜索条件
        const handleReset = () => {
          Object.assign(searchParams, {
            nickName: '',
            chineseName: '',
            companyId: undefined,
            dateTime: dayjs().format(monthFormat),
            wagesStatus: '',
            distributionStatus: '',
          });
          pagination.current = 1;
          loadData();
        };
  
        // 编辑记录
        const handleEdit = (record: WagesItem, dateTime: string) => {
          openDrawer(true, {
            record,
            isUpdate: true,
            dateTime: dateTime,
          });
        };
  
        // 删除记录
        const handleDelete = async (record: WagesItem) => {
          try {
            // 使用新的删除接口
            await defHttp.post({
              url: '/order/erp/users/oldWages/delete',
              data: {
                userId: record.userId,
                dateTime: searchParams.dateTime
              }
            });
            
            message.success('删除成功');
            
            if (selectedRowKeys.value.includes(record.userId)) {
              selectedRowKeys.value = selectedRowKeys.value.filter(key => key !== record.userId);
              selectedRows.value = selectedRows.value.filter(row => row.userId !== record.userId);
            }
            
            loadData();
          } catch (error) {
            console.error('删除失败', error);
            message.error('删除失败');
          }
        };
  
        // 审核通过
        const handleApprove = async (record: WagesItem) => {
          try {
            await approveWages(record.wagesId);
            message.success('审核通过');
            loadData();
          } catch (error) {
            console.error('审核操作失败', error);
            message.error('审核操作失败');
          }
        };
  
        // 驳回
        const handleReject = async (record: WagesItem) => {
          try {
            await rejectWages(record.wagesId);
            message.success('驳回成功');
            loadData();
          } catch (error) {
            console.error('驳回操作失败', error);
            message.error('驳回操作失败');
          }
        };
  
        // 发放
        const handleDistribute = async (record: WagesItem) => {
          try {
            await distributeWages(record.wagesId);
            message.success('发放成功');
            loadData();
          } catch (error) {
            console.error('发放操作失败', error);
            message.error('发放操作失败');
          }
        };
  
        // 操作成功回调
        const handleSuccess = () => {
          loadData();
        };
        
        // 设置审核状态（批量）
        const handleSetWagesStatus = async ({ key }) => {
          if (selectedRowKeys.value.length === 0) {
            message.warning('请先选择需要设置的记录');
            return;
          }
          
          try {
            // 获取用户IDs
            const userIds = selectedRows.value.map(row => row.userId);
            
            await defHttp.post({
              url: '/order/erp/users/oldWages/setWagesStatus',
              data: {
                userIds: userIds,
                dateTime: searchParams.dateTime,
                wagesStatus: key
              }
            });
            
            message.success('设置审核状态成功');
            onClearSelected();
            loadData();
          } catch (error) {
            console.error('设置审核状态失败:', error);
            message.error('设置审核状态失败，请稍后重试');
          }
        };
        
        // 设置发放状态（批量）
        const handleSetDistributionStatus = async ({ key }) => {
          if (selectedRowKeys.value.length === 0) {
            message.warning('请先选择需要设置的记录');
            return;
          }
          
          try {
            // 获取用户IDs
            const userIds = selectedRows.value.map(row => row.userId);
            
            await defHttp.post({
              url: '/order/erp/users/oldWages/setDistributionStatus',
              data: {
                userIds: userIds,
                dateTime: searchParams.dateTime,
                distributionStatus: key
              }
            });
            
            message.success('设置发放状态成功');
            onClearSelected();
            loadData();
          } catch (error) {
            console.error('设置发放状态失败:', error);
            message.error('设置发放状态失败，请稍后重试');
          }
        };
        
        // 导出工资记录
        const handleExport = async () => {
          if (selectedRowKeys.value.length === 0) {
            message.warning('请先选择需要导出的记录');
            return;
          }
            // 获取用户IDs
            const ids = selectedRows.value.map(row => row.userId);
            loading.value = true;
            message.loading({content:'正在导出数据，请稍候...',key:'exporting',duration:0});
            const token = userStore.getToken;
            // 方法一：直接通过axios请求二进制数据
            axios
            .post(
              'basic-api/order/erp/users/oldWages/export',
              {
                  ids: ids,
                  dateTime: searchParams.dateTime,
                  isExport: true
              },
              { 
                 responseType: 'blob' ,
                 headers: {
                   Authorization: `${token}`, // 去掉引号
                 },
                }
            )
            .then((response) => {
              const blob = new Blob([response.data], { type: 'application/octet-stream' });
              const link = document.createElement('a');
              link.href = URL.createObjectURL(blob);
              link.download = `工资表_${searchParams.dateTime}.xlsx`;
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              message.success({content:'导出成功',key:'exporting'});
            })
            .catch(async (error) => {
              console.error('导出失败:', error);
              if (error.response && error.response.data instanceof Blob) {
                const text = await error.response.data.text();
                console.error('服务器返回的错误信息:', text); 
              }
              message.error({ content: '导出失败，请稍后重试', key: 'exporting' });
            })
            .finally(() => {
              loading.value = false;
            });
        };
        
        // 处理工资汇总
        const handleSalarySummary = () => {
          if (selectedRowKeys.value.length === 0) {
            message.warning('请先选择需要汇总的记录');
            return;
          }
          
          // 清空已选择的年月
          selectedDateTimes.value = [];
          
          // 准备年份选项 - 从当前年份往前5年
          const now = new Date();
          const currentYear = now.getFullYear();
          const years = [];
          for (let i = 0; i < 5; i++) {
            years.push((currentYear - i).toString());
          }
          
          availableYears.value = years;
          
          // 先设置年份
          selectedYear.value = currentYear.toString(); // 默认选中当前年份
          
          // 准备一个默认月份（当前月份）
          const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
          
          // 再设置月份 - 这样会通过watch触发updateSelectedDateTimes
          selectedMonths.value = [currentMonth];
          
          dateSelectVisible.value = true;
        };
        
        // 更新已选年月列表
        const updateSelectedDateTimes = () => {
          const year = selectedYear.value;
          if (!year) {
            return;
          }
          
          // 清除当前年份的选择
          selectedDateTimes.value = selectedDateTimes.value.filter(date => !date.startsWith(year));
          
          // 只有当有选择的月份时才添加新的年月组合
          if (selectedMonths.value.length > 0) {
            // 添加新选择的年月
            selectedMonths.value.forEach(month => {
              const formattedDate = `${year}-${month}`;
              if (!selectedDateTimes.value.includes(formattedDate)) {
                selectedDateTimes.value.push(formattedDate);
              }
            });
          }
        };
        
        // 处理日期选择确认
        const handleDateSelectOk = async () => {
          if (selectedDateTimes.value.length === 0) {
            message.warning('请至少选择一个年月份');
            return;
          }
          
          dateSelectVisible.value = false;
          summaryLoading.value = true;
          summaryResultVisible.value = true;
          
          try {
            // 获取用户IDs
            const ids = selectedRows.value.map(row => row.userId);
            
            // 调用汇总接口
            const result = await defHttp.post({
              url: '/order/erp/users/oldWages/count',
              data: {
                ids: ids,
                dateTimes: selectedDateTimes.value
              }
            });
            
            if (result) {
              // 更新结果数据
              summaryData.value = {
                monthlyCount: result.monthlyCount || 0,
                personCount: result.personCount || 0,
                actualSalary: result.actualSalary || 0,
                insuranceSalary: result.insuranceSalary || 0,
                totalMonthlyWorkCost: result.totalMonthlyWorkCost || 0,
                averageMonthlyWorkCost: result.averageMonthlyWorkCost || 0
              };
            } else {
              message.warning('未获取到汇总数据');
              summaryData.value = {
                monthlyCount: 0,
                personCount: 0,
                actualSalary: 0,
                insuranceSalary: 0,
                totalMonthlyWorkCost: 0,
                averageMonthlyWorkCost: 0
              };
            }
          } catch (error) {
            console.error('汇总数据失败:', error);
            message.error('汇总数据失败，请稍后重试');
            summaryResultVisible.value = false;
          } finally {
            summaryLoading.value = false;
          }
        };
        
        // 处理日期选择取消
        const handleDateSelectCancel = () => {
          dateSelectVisible.value = false;
          selectedDateTimes.value = [];
          selectedMonths.value = [];
        };
        
        // 处理汇总结果关闭
        const handleSummaryResultClose = () => {
          summaryResultVisible.value = false;
        };
        
        // 处理申请权限
        const handleApplyPermission = (record: WagesItem) => {
          currentApplyRecord.value = { ...record };
          openApplyDrawer(true);
        };
        
        // 处理申请权限提交
        const handleApplySubmit = async () => {
          try {
            const fieldValues = getApplyFieldsValue();
            selectedApplyFields.value = fieldValues;
            closeApplyDrawer();
            
            // 打开申请理由模态框
            openApproveReasonModal(true, {
              fieldValues: selectedApplyFields.value,
              dateTime: searchParams.dateTime,
              userId: currentApplyRecord.value?.userId,
              apiUrl: '/order/erp/users/oldWages/applyEditFields'
            });
          } catch (error) {
            console.error('获取表单数据失败:', error);
            message.error('获取表单数据失败');
          }
        };
        
        // 处理申请成功回调
        const handleApproveSuccess = () => {
          selectedApplyFields.value = {};
          currentApplyRecord.value = null;
          message.success('申请提交成功');
        };
        
        // 组件挂载后自动加载数据
        onMounted(() => {
          loadCompanyOptions();
          loadData();
        });
        
        // 监听年份和月份选择的变更
        watch([selectedYear, selectedMonths], () => {
          updateSelectedDateTimes();
        });
        
        // 单独监听年份变化，清空月份选择
        watch(selectedYear, (newYear, oldYear) => {
          if (newYear !== oldYear) {
            if (selectedMonths.value.length > 0) {
              // 先存储选择的月份数量
              const monthCount = selectedMonths.value.length;
              
              // 清空月份选择
              selectedMonths.value = [];
              
              // 显示提示信息
              message.info(`已切换至${newYear}年，请重新选择月份`);
            }
          }
        });
  
        // 格式化数字为两位小数
        const formatNumber = (value: any): string => {
          if (value === null || value === undefined || value === '') {
            return '';
          }
          
          const num = parseFloat(value);
          if (isNaN(num)) {
            return '';
          }
          
          return num.toFixed(2);
        };
        
        // 判断是否为数值类型的列
        const isNumericColumn = (dataIndex: string): boolean => {
          const numericColumns = [
            'basicWages', 'postAllowance', 'managementAllowance', 'phoneAllowance', 
            'mealAllowance', 'transportationAllowance', 'attendanceAllowance', 
            'performanceAllowance', 'commissionPrice', 'bonusPrice', 
            'deductibleSalaryPrice', 'otherDeductionsPrice', 'salaryPrice',
            'personalPensionInsurance', 'personalPensionMedicalInsurance', 
            'personalPensionUnemploymentInsurance', 'personalPensionLargeScaleMedicalInsurance', 
            'personalPensionProvidentFundInsurance', 'individualTotal',
            'companyInsurance', 'companyMedicalInsurance', 'companyUnemploymentInsurance', 
            'companyEmploymentInjuryInsurance', 'companyMaternityInsurance', 
            'companyLargeScaleMedicalInsurance', 'companyProvidentFundInsurance', 
            'companyTotal', 'tax', 'actualSalaryPrice', 'totalCost'
          ];
          
          return numericColumns.includes(dataIndex);
        };
  
        return {
          loading,
          tableData,
          columns,
          pagination,
          searchParams,
          monthFormat,
          companyOptions,
          registerDrawer,
          selectedRowKeys,
          selectedRows,
          rowSelection,
          customRow,
          onClearSelected,
          loadData,
          handleTableChange,
          handleSearch,
          handleReset,
          handleEdit,
          handleDelete,
          handleSuccess,
          handleApprove,
          handleReject,
          handleDistribute,
          getWagesStatusText,
          getDistributionStatusText,
          formatNumber,
          isNumericColumn,
          handleSetWagesStatus,
          handleSetDistributionStatus,
          handleExport,
          handleSalarySummary,
          handleDateSelectOk,
          handleDateSelectCancel,
          handleSummaryResultClose,
          dateSelectVisible,
          summaryResultVisible,
          summaryLoading,
          selectedDateTimes,
          availableDateTimes,
          summaryData,
          selectedYear,
          selectedMonths,
          availableYears,
          formattedSelectedDates,
          removeSelectedDate,
          registerApplyForm,
          getApplyFieldsValue,
          registerApplyDrawer,
          openApplyDrawer,
          closeApplyDrawer,
          registerApproveReason,
          openApproveReasonModal,
          handleApplyPermission,
          handleApplySubmit,
          handleApproveSuccess,
          currentApplyRecord,
          selectedApplyFields
        };
      },
    });
  </script>
  
  <style lang="less" scoped>
    .payroll-container {
      padding: 16px;
      
      .search-form {
        margin-bottom: 16px;
        background: #fff;
        padding: 16px;
        border-radius: 2px;
      }
      
      .toolbar {
        margin-bottom: 16px; 
        margin-top: 16px;
        
        .selected-alert {
          margin-bottom: 16px;
        }
        
        .batch-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 8px;
          
          @media (max-width: 576px) {
            button {
              margin-bottom: 8px;
            }
          }
        }
      }
      
      .table-container {
        background: #fff;
        padding: 16px;
        border-radius: 2px;
        overflow-x: auto;
      }
      
      .ml-2 {
        margin-left: 8px;
      }
      
      .summary-result {
        max-height: 600px;
        overflow-y: auto;
        
        :deep(.ant-descriptions-item-label) {
          width: 180px;
          font-weight: bold;
          background-color: #f5f5f5;
        }
        
        :deep(.ant-descriptions-item-content) {
          font-size: 16px;
          text-align: right;
          padding-right: 16px;
        }
      }
      
      .year-selection, .month-selection, .selected-dates {
        margin-bottom: 16px;
        
        p {
          margin-bottom: 8px;
          font-weight: 500;
        }
      }
      
      .year-selection {
        :deep(.ant-radio-button-wrapper) {
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
      
      .month-selection {
        :deep(.ant-checkbox-wrapper) {
          margin-bottom: 8px;
        }
      }
      
      .selected-dates {
        .tag-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        
        :deep(.date-tag) {
          font-size: 14px;
          padding: 6px 10px;
          margin-bottom: 8px;
          
          .anticon-close {
            font-size: 12px;
            margin-left: 6px;
          }
        }
      }
      
      :deep(.ant-table) {
        
        .column-group-header {
          background-color: #e6f7ff;
          font-weight: 600;
        }
        
        .column-left-fixed, .column-right-fixed {
          background-color: #fafafa;
        }
        
        .salary-payable {
          background-color: #e6f7ff;
        }
        
        .personal-insurance {
          background-color: #f6ffed;
        }
        
        .company-insurance {
          background-color: #fff7e6;
        }
        
        .salary-payable-total, .personal-insurance-total, .company-insurance-total {
          font-weight: 600;
          background-color: #f5f5f5;
        }
      }
      
      // 年月份选择对话框样式
      :deep(.date-select-modal) {
        .ant-modal-content {
          .ant-modal-body {
            padding: 24px;
          }
        }
      }
      
      .selection-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      
      .section-title {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 12px;
      }
      
      .year-selection, .month-selection, .selected-dates {
        margin-bottom: 20px;
      }
      
      .year-selection {
        :deep(.ant-radio-group) {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }
        
        :deep(.ant-radio-button-wrapper) {
          height: 40px;
          line-height: 38px;
          padding: 0 16px;
          font-size: 14px;
          margin-right: 12px;
          margin-bottom: 12px;
          
          &.ant-radio-button-wrapper-checked {
            font-weight: 600;
          }
        }
      }
      
      .month-selection {
        :deep(.month-checkbox-group) {
          width: 100%;
        }
        
        :deep(.ant-checkbox-wrapper) {
          font-size: 14px;
          margin-bottom: 12px;
          
          .ant-checkbox {
            top: 0.2em;
            
            &-inner {
              width: 18px;
              height: 18px;
            }
          }
          
          &.ant-checkbox-wrapper-checked {
            font-weight: 600;
          }
        }
      }
      
      .selected-dates {
        .tag-container {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }
        
        :deep(.date-tag) {
          font-size: 14px;
          padding: 6px 10px;
          margin-bottom: 8px;
          
          .anticon-close {
            font-size: 12px;
            margin-left: 6px;
          }
        }
      }
    }
    
    // 申请权限抽屉样式
    :deep(.apply-permission-drawer) {
      .ant-drawer-content {
        position: fixed;
        z-index: 10;
      }
    }
  </style>