canrd-outside / order-erp-front · Files

<template>
    <div>
      <!-- 添加类似于标签页的年份筛选 -->
      <div class="year-tabs">
        <a-radio-group v-model:value="selectedYear" button-style="solid" @change="handleYearChange">
          <a-radio-button v-for="year in yearOptions" :key="year.value" :value="year.value">
            {{ year.label }}
          </a-radio-button>
        </a-radio-group>
      </div>
      
      <!-- 配置卡片区域 - 改为标签页形式 -->
      <div class="config-section">
        <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange">
          <a-tab-pane key="calendar" tab="人事考勤日历配置">
        <div class="config-card">
          <div class="table-header">
            <div class="title">人事考勤日历配置</div>
            <a-button type="primary" @click="handleCreate(60)">新建</a-button>
          </div>
          
          <a-table
            :columns="calendarColumns"
            :data-source="calendarData"
            :pagination="false"
            bordered
            class="mt-4"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <a-space>
                  <a-button type="link" @click="handleEdit(record)">
                    <template #icon><Icon icon="clarity:note-edit-line" /></template>
                    编辑
                  </a-button>
                  <a-popconfirm
                    title="是否确认删除？"
                    placement="left"
                    @confirm="handleDelete(record)"
                  >
                    <a-button type="link" danger>
                      <template #icon><Icon icon="ant-design:delete-outlined" /></template>
                      删除
                    </a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </template>
          </a-table>
        </div>
          </a-tab-pane>
        
          <a-tab-pane key="attendance" tab="考勤配置">
        <div class="config-card">
          <div class="table-header">
            <div class="title">考勤配置</div>
            <a-button type="primary" @click="handleAddAttendance">新建</a-button>
          </div>
          
          <a-table
            :columns="attendanceColumns"
                :data-source="attendanceTypes"
            :pagination="false"
            bordered
            class="mt-4"
                :scroll="{ x: 1500 }"
          >
            <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'typeName'">
                    <span class="attendance-type-name">{{ record.typeName }}</span>
                    <span class="year-indicator">({{ selectedYear }})</span>
                  </template>
                  <template v-else-if="column.key === 'action'">
                <a-space>
                      <a-button type="link" size="small" @click="handleEditAttendanceType(record)">
                    <template #icon><Icon icon="clarity:note-edit-line" /></template>
                    编辑
                  </a-button>
                </a-space>
              </template>
              <!-- 处理月份单元格，使其可点击编辑 -->
              <template v-else-if="column.key && column.key.startsWith('month') && column.key.includes('WorkDays')">
                <div class="editable-cell" @click="handleEditMonthCell(record, column.key)">
                  {{ record[column.dataIndex] }}
                </div>
              </template>
              <template v-else-if="column.key && column.key.startsWith('month') && column.key.includes('SalaryDays')">
                <div class="editable-cell" @click="handleEditMonthCell(record, column.key)">
                  {{ record[column.dataIndex] }}
                </div>
              </template>
            </template>
          </a-table>
        </div>
          </a-tab-pane>
          
          <a-tab-pane key="fiveInsurances" tab="五险一金配置">
            <div class="config-card">
              <div class="table-header">
                <div class="title">五险一金配置</div>
                <a-button type="primary" @click="handleAddInsurance">新建</a-button>
              </div>
              
              <a-table
                :columns="insuranceColumns"
                :data-source="insuranceData"
                :pagination="false"
                bordered
                class="mt-4"
                :scroll="{ x: 1500 }"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex === 'relationName'">
                    <span class="insurance-type-name">{{ record.relationName }}({{ selectedYear }})</span>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <a-space>
                      <a-button type="link" size="small" @click="handleEditInsurance(record)">
                        <template #icon><Icon icon="clarity:note-edit-line" /></template>
                        编辑
                      </a-button>
                    </a-space>
                  </template>
                  <template v-else-if="column.dataIndex === 'personalTotal'">
                    <span class="total-cell">￥{{ calculatePersonalTotal(record) }}</span>
                  </template>
                  <template v-else-if="column.dataIndex === 'companyTotal'">
                    <span class="total-cell">￥{{ calculateCompanyTotal(record) }}</span>
                  </template>
                  <!-- 格式化所有金额显示 -->
                  <template v-else-if="isInsuranceAmountColumn(column.dataIndex)">
                    <span>￥{{ formatAmount(record[column.dataIndex]) }}</span>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      
      <PersonnelConfigModal @register="registerModal" @success="handleSuccess" />
      <AttendanceConfigModal @register="registerAttendanceModal" @success="handleSuccess" />
      <AttendanceEditModal @register="registerAttendanceEditModal" @success="handleSuccess" />
      <InsuranceConfigModal @register="registerInsuranceModal" @success="handleSuccess" />
    </div>
  </template>
  <script lang="ts">
    import { defineComponent, ref, onMounted } from 'vue';
    import Icon from '/@/components/Icon/Icon.vue';
    import { useModal } from '/@/components/Modal';
    import { useMessage } from '/@/hooks/web/useMessage';
    import PersonnelConfigModal from './PersonnelConfigModal.vue';
    import AttendanceConfigModal from './AttendanceConfigModal.vue';
    import AttendanceEditModal from './AttendanceEditModal.vue';
    import InsuranceConfigModal from './InsuranceConfigModal.vue';
    import { columns } from './personnelConfig.data';
    import { getPersonnelConfigList, deletePersonnelConfig } from '/@/api/project/account';
    import { defHttp } from '/@/utils/http/axios';
    
    // 生成年份选项
    const generateYearOptions = () => {
      const currentYear = new Date().getFullYear();
      const years: { label: string; value: string }[] = [];
      
      for (let i = -2; i <= 5; i++) {
        const year = currentYear + i;
        years.push({
          label: `${year}年`,
          value: year.toString(),
        });
      }
      
      return years;
    };
    
    // 定义后端返回的人事配置数据接口
    interface ApiPersonnelConfig {
      id: number;
      relationCode: string;
      relationName: string; // 月份
      relationValue: string; // JSON字符串，包含工作日和计薪日
      settingType: number; // 61-64对应不同的考勤类型
      settingValue: string; // 年份
    }
    
    // 定义前端使用的人事配置数据接口
    interface PersonnelConfig {
      id: number;
      year: string;
      month: string;
      calendarDays: number;
      workDays: number;
      salaryDays: number;
      legalHolidays: number;
      settingType?: string | number;
    }
    // 定义考勤类型接口
    interface AttendanceType {
      key: string;
      typeName: string; // 类型名称
      typeDisplayName: string; // 显示名称（包含年份）
      workHours: number;
      formula: string;
      data: Record<string, any>;
    }
    export default defineComponent({
      name: 'PersonnelConfigManagement',
      components: { Icon, PersonnelConfigModal, AttendanceConfigModal, AttendanceEditModal, InsuranceConfigModal },
      setup() {
        const { createMessage } = useMessage();
        const yearOptions = generateYearOptions();
        const selectedYear = ref(new Date().getFullYear().toString());
        
        // 增加标签页激活键的状态
        const activeTabKey = ref<string>('calendar');
        
        // 创建数据
        const calendarData = ref<PersonnelConfig[]>([]);
        const attendanceData = ref<ApiPersonnelConfig[]>([]);
        const insuranceData = ref<any[]>([]);
        
        // 固定的考勤类型
        const attendanceTypes = ref<AttendanceType[]>([
          {
            key: 'type-1',
            typeName: '9小时双休',
            typeDisplayName: '9小时双休',
            workHours: 9,
            formula: '计薪日*每日工时',
            data: {},
          },
          {
            key: 'type-2',
            typeName: '9大小周双休(生产科)',
            typeDisplayName: '9大小周双休(生产科)',
            workHours: 9,
            formula: '计薪日*每日工时+18',
            data: {},
          },
          {
            key: 'type-3',
            typeName: '8双休',
            typeDisplayName: '8双休',
            workHours: 8,
            formula: '计薪日*每日工时',
            data: {},
          },
          {
            key: 'type-4',
            typeName: '8.5大小周',
            typeDisplayName: '8.5大小周',
            workHours: 8.5,
            formula: '计薪日*每日工时+17',
            data: {},
          },
        ]);
        
        // 添加操作列到日历配置表格
        const calendarColumns = ref([
          ...columns,
          {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
          }
        ]);
        
        // 重新定义考勤配置表格列
        const attendanceColumns = ref([
          {
            title: '考勤项目',
            dataIndex: 'typeName',
            key: 'typeName',
            width: 160,
            fixed: 'left',
            align: 'left',
          },
          {
            title: '工时',
            dataIndex: 'workHours',
            key: 'workHours',
            width: 80,
            align: 'center',
          },
          {
            title: '每月工时计算',
            dataIndex: 'formula',
            key: 'formula',
            width: 160,
            align: 'center',
          },
          {
            title: '1月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month1WorkDays',
                key: 'month1WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month1SalaryDays',
                key: 'month1SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '2月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month2WorkDays',
                key: 'month2WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month2SalaryDays',
                key: 'month2SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '3月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month3WorkDays',
                key: 'month3WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month3SalaryDays',
                key: 'month3SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '4月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month4WorkDays',
                key: 'month4WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month4SalaryDays',
                key: 'month4SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '5月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month5WorkDays',
                key: 'month5WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month5SalaryDays',
                key: 'month5SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '6月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month6WorkDays',
                key: 'month6WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month6SalaryDays',
                key: 'month6SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '7月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month7WorkDays',
                key: 'month7WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month7SalaryDays',
                key: 'month7SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '8月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month8WorkDays',
                key: 'month8WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month8SalaryDays',
                key: 'month8SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '9月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month9WorkDays',
                key: 'month9WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month9SalaryDays',
                key: 'month9SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '10月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month10WorkDays',
                key: 'month10WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month10SalaryDays',
                key: 'month10SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '11月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month11WorkDays',
                key: 'month11WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month11SalaryDays',
                key: 'month11SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '12月',
            children: [
              {
                title: '工作日',
                dataIndex: 'month12WorkDays',
                key: 'month12WorkDays',
                width: 70,
                align: 'center',
              },
              {
                title: '计薪日',
                dataIndex: 'month12SalaryDays',
                key: 'month12SalaryDays',
                width: 70,
                align: 'center',
              },
            ],
          },
          {
            title: '操作',
            key: 'action',
            width: 70,
            fixed: 'right',
            align: 'center',
          }
        ]);
        
        // 五险一金配置表格列
        const insuranceColumns = ref([
          {
            title: '社保待遇',
            dataIndex: 'relationName',
            key: 'relationName',
            width: 110,
            fixed: 'left',
            align: 'left',
          },
          {
            title: '个人承担社保公积金',
            children: [
              {
                title: '养老保险',
                dataIndex: 'personalPensionInsurance',
                key: 'personalPensionInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '医疗保险',
                dataIndex: 'personalPensionMedicalInsurance',
                key: 'personalPensionMedicalInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '失业保险',
                dataIndex: 'personalPensionUnemploymentInsurance',
                key: 'personalPensionUnemploymentInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '大额医疗',
                dataIndex: 'personalPensionLargeScaleMedicalInsurance',
                key: 'personalPensionLargeScaleMedicalInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '住房公积金',
                dataIndex: 'personalPensionProvidentFundInsurance',
                key: 'personalPensionProvidentFundInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '合计',
                dataIndex: 'personalTotal',
                key: 'personalTotal',
                width: 100,
                align: 'center',
              },
            ]
          },
          {
            title: '公司承担社保公积金',
            children: [
              {
                title: '养老保险',
                dataIndex: 'companyInsurance',
                key: 'companyInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '医疗保险',
                dataIndex: 'companyMedicalInsurance',
                key: 'companyMedicalInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '失业保险',
                dataIndex: 'companyUnemploymentInsurance',
                key: 'companyUnemploymentInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '工伤保险',
                dataIndex: 'companyEmploymentInjuryInsurance',
                key: 'companyEmploymentInjuryInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '生育保险',
                dataIndex: 'companyMaternityInsurance',
                key: 'companyMaternityInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '大额医疗',
                dataIndex: 'companyLargeScaleMedicalInsurance',
                key: 'companyLargeScaleMedicalInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '住房公积金',
                dataIndex: 'companyProvidentFundInsurance',
                key: 'companyProvidentFundInsurance',
                width: 90,
                align: 'center',
              },
              {
                title: '合计',
                dataIndex: 'companyTotal',
                key: 'companyTotal',
                width: 100,
                align: 'center',
              },
            ]
          },
          {
            title: '操作',
            key: 'action',
            width: 80,
            fixed: 'right',
            align: 'center',
          }
        ]);
        
        const [registerModal, { openModal }] = useModal();
        const [registerAttendanceModal, { openModal: openAttendanceModal }] = useModal();
        const [registerAttendanceEditModal, { openModal: openAttendanceEditModal }] = useModal();
        const [registerInsuranceModal, { openModal: openInsuranceModal }] = useModal();
        
        // 加载日历配置数据
        async function loadCalendarData() {
          try {
            const res = await getPersonnelConfigList({
              settingType: [60],
              settingValue: selectedYear.value
            });
            if (res && res.items) {
              calendarData.value = res.items.sort((a,b) =>{
                return a.month - b.month;
              });
            }
          } catch (error) {
            console.error('加载日历配置数据失败:', error);
          }
        }
        
        // 加载考勤配置数据
        async function loadAttendanceData() {
          try {
            const res = await getPersonnelConfigList({
              settingType: [61, 62, 63, 64],
              settingValue: selectedYear.value
            });
            console.log('API返回原始考勤数据:', res);
            if (res && res.items) {
              attendanceData.value = res.items;
              console.log('处理后的考勤数据:', attendanceData.value);
              // 检查每条记录的关键字段
              attendanceData.value.forEach((item, index) => {
                console.log(`考勤数据项 ${index}:`, {
                  id: item.id,
                  month: item.month,
                  settingType: item.settingType,
                  workDays: item.workDays,
                  salaryDays: item.salaryDays
                });
              });
              // 更新固定考勤类型数据
              processAttendanceTypeData();
            }
          } catch (error) {
            console.error('加载考勤配置数据失败:', error);
          }
        }
        
        // 处理考勤数据，按类型整理
        function processAttendanceTypeData() {
          const data = attendanceData.value;
          console.log('考勤数据5:', data);
          // 更新考勤类型的显示名称，添加年份
          attendanceTypes.value.forEach(type => {
            type.typeDisplayName = `${type.typeName}(${selectedYear.value})`;
            
            // 重置月份数据 - 不设置初始值，让未配置的月份保持为空
            for (let i = 1; i <= 12; i++) {
              type[`month${i}WorkDays`] = undefined;
              type[`month${i}SalaryDays`] = undefined;
              // 存储原始数据记录，用于编辑
              type[`month${i}Record`] = undefined;
            }
          });
          
          // 将数据分配到不同考勤类型
          data.forEach(item => {
            try {
              // 确保relationName存在且可转换为数字
              if (!item.month) return;
              
              const month = parseInt(item.month);
              const settingType = item.settingType;
              
              // 检查并使用workDays和salaryDays字段
              const workDays = item.workDays !== undefined ? item.workDays : undefined;
              const salaryDays = item.salaryDays !== undefined ? item.salaryDays : undefined;
              
              if (month >= 1 && month <= 12) {
                let targetType;
                
                // 根据settingType确定目标考勤类型
                if (settingType === 61) {
                  targetType = attendanceTypes.value[0]; // 9小时双休
                } else if (settingType === 62) {
                  targetType = attendanceTypes.value[1]; // 9大小周双休(生产科)
                } else if (settingType === 63) {
                  targetType = attendanceTypes.value[2]; // 8双休
                } else if (settingType === 64) {
                  targetType = attendanceTypes.value[3]; // 8.5大小周
                }
                
                if (targetType) {
                  // 只设置有效值
                  if (workDays !== undefined && workDays !== null) {
                    targetType[`month${month}WorkDays`] = workDays;
                  }
                  
                  if (salaryDays !== undefined && salaryDays !== null) {
                    targetType[`month${month}SalaryDays`] = salaryDays;
                  }
                  
                  // 存储原始记录，用于编辑操作
                  targetType[`month${month}Record`] = {
                    id: item.id,
                    month: month,
                    settingType: settingType,
                    workDays: workDays,
                    salaryDays: salaryDays
                  };
                }
              }
            } catch (e) {
              console.error('处理考勤数据出错:', e, item);
            }
          });
          
          // 调试日志
          console.log('处理后的考勤类型数据:', attendanceTypes.value);
        }
        
        // 加载五险一金配置数据
        async function loadInsuranceData() {
          try {
            const res = await defHttp.post({
              url: '/order/erp/system_setting/query_list',
              params: {
                settingType: [70, 71, 72,73],
                settingValue: selectedYear.value
              }
            });
            
            console.log('五险一金原始数据:', res);
            
            if (res && Array.isArray(res)) {
              console.log('是否执行:', res);
              // 处理返回的数据
              insuranceData.value = res.map(item => {
                console.log('是否执行2', item);
                // 解析relationValue JSON字符串
                let insuranceValues = {};
                
                try {
                  if (item.relationValue) {
                   
                    if (typeof item.relationValue === 'string') {
                      
                      insuranceValues = JSON.parse(item.relationValue);
                    } else if (typeof item.relationValue === 'object') {
                     
                      insuranceValues = item.relationValue;
                    }
                  }
                } catch (e) {
                  console.error('解析五险一金数据失败:', e);
                }
                
                // 合并原始数据和解析后的数据
                return {
                  ...item,
                  ...insuranceValues,
                };
              });
              
              console.log('处理后的五险一金数据:', insuranceData.value);
            }
          } catch (error) {
            console.error('加载五险一金配置数据失败:', error);
          }
        }
        
        // 计算个人承担社保公积金合计
        function calculatePersonalTotal(record) {
          const fields = [
            'personalPensionInsurance',
            'personalPensionMedicalInsurance',
            'personalPensionUnemploymentInsurance',
            'personalPensionLargeScaleMedicalInsurance',
            'personalPensionProvidentFundInsurance'
          ];
          
          let total = 0;
          for (const field of fields) {
            const value = Number(record[field] || 0);
            if (!isNaN(value)) {
              total += value;
            }
          }
          
          return total.toFixed(2);
        }
        
        // 计算公司承担社保公积金合计
        function calculateCompanyTotal(record) {
          const fields = [
            'companyInsurance',
            'companyMedicalInsurance',
            'companyUnemploymentInsurance',
            'companyEmploymentInjuryInsurance',
            'companyMaternityInsurance',
            'companyLargeScaleMedicalInsurance',
            'companyProvidentFundInsurance'
          ];
          
          let total = 0;
          for (const field of fields) {
            const value = Number(record[field] || 0);
            if (!isNaN(value)) {
              total += value;
            }
          }
          
          return total.toFixed(2);
        }
        
        // 加载所有数据
        function loadAllData() {
          console.log('开始加载所有数据...');
          loadCalendarData();
          loadAttendanceData();
          console.log('开始加载五险一金数据...');
          loadInsuranceData();
        }
        
        // 组件挂载后加载数据
        onMounted(() => {
          console.log('组件挂载，开始加载数据...');
          loadAllData();
        });
        // 处理年份变更
        function handleYearChange() {
          loadAllData();
        }
        
        // 处理标签页切换
        function handleTabChange(key: string) {
          console.log('标签页切换到:', key);
          
          // 如果切换到五险一金标签页，确保数据已加载
          if (key === 'fiveInsurances') {
            loadInsuranceData();
          }
        }
        function handleCreate(settingType: number) {
          openModal(true, {
            isUpdate: false,
            year: selectedYear.value,
            settingType: settingType,
          });
        }
        function handleEdit(record: PersonnelConfig) {
          openModal(true, {
            record,
            isUpdate: true,
          });
        }
        async function handleDelete(record: PersonnelConfig) {
          try {
            await deletePersonnelConfig({ids:[record.id]});
            createMessage.success('删除成功');
            // 重新加载数据
            loadAllData();
          } catch (error) {
            console.error('删除失败:', error);
          }
        }
        function handleSuccess() {
          // 重新加载数据
          loadAllData();
        }
        // 编辑考勤类型数据
        function handleEditAttendanceType(record: AttendanceType) {
          const settingTypeMap = {
            'type-1': 61, // 9小时双休
            'type-2': 62, // 9大小周双休(生产科)
            'type-3': 63, // 8双休
            'type-4': 64, // 8.5大小周
          };
          
          const settingType = settingTypeMap[record.key as keyof typeof settingTypeMap];
          
          if (settingType) {
            // 打开编辑模态框
            openAttendanceEditModal(true, {
              isUpdate: true,
              year: selectedYear.value,
              settingType: settingType,
              attendanceTypeName: record.typeName,
            });
          }
        }
        
        // 编辑考勤类型的月份数据
        function handleEditMonth(record: AttendanceType, month: number) {
          const settingTypeMap = {
            'type-1': 61, // 9小时双休
            'type-2': 62, // 9大小周双休(生产科)
            'type-3': 63, // 8双休
            'type-4': 64, // 8.5大小周
          };
          
          const settingType = settingTypeMap[record.key as keyof typeof settingTypeMap];
          const monthRecord = record[`month${month}Record`];
          
          if (settingType) {
            openAttendanceEditModal(true, {
              isUpdate: true,
              year: selectedYear.value,
              settingType: settingType,
              attendanceTypeName: record.typeName,
              record: monthRecord || {
                month: month,
                workDays: record[`month${month}WorkDays`],
                salaryDays: record[`month${month}SalaryDays`]
              }
            });
          }
        }
        function handleAddAttendance() {
          openAttendanceModal(true, {
            year: selectedYear.value,
          });
        }
        // 处理点击月份单元格
        function handleEditMonthCell(record: AttendanceType, key: string) {
          // 解析月份
          const monthMatch = key.match(/month(\d+)/);
          if (monthMatch && monthMatch[1]) {
            const month = parseInt(monthMatch[1]);
            handleEditMonth(record, month);
          }
        }
        // 处理新增五险一金配置
        function handleAddInsurance() {
          openInsuranceModal(true, {
            isUpdate: false,
            year: selectedYear.value,
          });
        }
        
        // 处理编辑五险一金配置
        function handleEditInsurance(record) {
          openInsuranceModal(true, {
            isUpdate: true,
            year: selectedYear.value,
            record,
          });
        }
        // 检查是否为五险一金金额列
        function isInsuranceAmountColumn(dataIndex: string) {
          const amountColumns = [
            'personalPensionInsurance',
            'personalPensionMedicalInsurance',
            'personalPensionUnemploymentInsurance',
            'personalPensionLargeScaleMedicalInsurance',
            'personalPensionProvidentFundInsurance',
            'companyInsurance',
            'companyMedicalInsurance',
            'companyUnemploymentInsurance',
            'companyEmploymentInjuryInsurance',
            'companyMaternityInsurance',
            'companyLargeScaleMedicalInsurance',
            'companyProvidentFundInsurance'
          ];
          return amountColumns.includes(dataIndex);
        }
        
        // 格式化金额，保留两位小数
        function formatAmount(amount) {
          if (amount === undefined || amount === null) return '0.00';
          return Number(amount).toFixed(2);
        }
        return {
          calendarColumns,
          attendanceColumns,
          insuranceColumns,
          calendarData,
          attendanceData,
          insuranceData,
          attendanceTypes,
          registerModal,
          registerAttendanceModal,
          registerAttendanceEditModal,
          registerInsuranceModal,
          yearOptions,
          selectedYear,
          activeTabKey,
          handleYearChange,
          handleTabChange,
          handleCreate,
          handleEdit,
          handleEditAttendanceType,
          handleEditMonth,
          handleEditMonthCell,
          handleDelete,
          handleSuccess,
          handleAddAttendance,
          handleAddInsurance,
          handleEditInsurance,
          calculatePersonalTotal,
          calculateCompanyTotal,
          isInsuranceAmountColumn,
          formatAmount,
        };
      },
    });
  </script>
  <style lang="less" scoped>
  .year-tabs {
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    
    .ant-radio-button-wrapper {
      min-width: 90px;
      text-align: center;
    }
  }
  .config-section {
    background-color: #fff;
    padding: 16px;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }
  .config-card {
    width: 100%;
  }
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .ant-table-wrapper {
    margin-bottom: 20px;
  }
  .mb-4 {
    margin-bottom: 16px;
  }
  .mt-4 {
    margin-top: 16px;
  }
  .ant-table {
    .ant-table-thead > tr > th {
      text-align: center;
      padding: 8px 4px;
    }
    
    .ant-table-tbody > tr > td {
      text-align: center;
      padding: 8px 4px;
    }
  }
  .attendance-type-name {
    color: #ff4d4f;
    font-weight: 500;
  }
  .insurance-type-name {
    color: #1890ff;
    font-weight: 500;
  }
  .total-cell {
    color: #ff4d4f;
    font-weight: bold;
  }
  .editable-cell {
    cursor: pointer;
    padding: 4px;
    border-radius: 2px;
    
    &:hover {
      background-color: #f5f5f5;
      color: #1890ff;
      text-decoration: underline;
    }
  }
  </style>