canrd-outside / order-erp-front · Files

<template>
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </template>
  <script lang="ts">
    import { defineComponent, ref, watch, computed, onMounted, onUnmounted } from 'vue';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { formSchema } from './attendance.data';
    import { defHttp } from '/@/utils/http/axios';
    export default defineComponent({
      name: 'AttendanceForm',
      components: { BasicForm },
      props: {
        record: {
          type: Object,
          default: () => ({}),
        },
        isUpdate: {
          type: Boolean,
          default: false,
        },
        dateTime:{
          type: String,
          default:''
        }
      },
      setup(props, { emit }) {
        const rowId = ref('');
        const attendanceOptions = ref<any[]>([]);
        const modifiedFormSchema = ref<any[]>([...formSchema]);
        // 存储原始考勤组数据，方便通过ID查找详细信息
        const attendanceData = ref<any[]>([]);
        const dateTime = ref(props.dateTime || '');
        // 存储当前表单数据的引用
        const formData = ref<any>({});
        
        // 更新上月存休字段，添加或移除警告样式
        function updateLastMonthField(showWarning) {
          // 获取当前记录的审核状态和字段权限信息
          const currentRecord = props.record || {};
          const attendanceStatus = currentRecord.attendanceStatus;
          const fieldPermissions = currentRecord.userOldAttendanceFieldVO || {};
          
          // 判断lastMonthLeaveDays字段是否应该被禁用
          let shouldDisableByPermission = false;
          if (attendanceStatus === 10) {
            const fieldKey = getFieldPermissionKey('lastMonthLeaveDays');
            if (fieldKey && fieldPermissions[fieldKey] === 'LOCKED') {
              shouldDisableByPermission = true;
            }
          }
          
          const updatedSchema = modifiedFormSchema.value.map(item => {
            if (item.field === 'lastMonthLeaveDays') {
              // 保存原有的onChange处理器
              const originalOnChange = item.componentProps?.onChange;
              
              if (showWarning) {
                return {
                  ...item,
                  required: true,
                  componentProps: {
                    placeholder: '上月数据没配置或未审核，请手动输入上月存休数据',
                    style: { 
                      borderColor: '#ff4d4f',
                      background: '#fff2f0'
                    },
                    disabled: shouldDisableByPermission,
                    onChange: (value) => {
                      calculateTotalLeaveDays(value, 'lastMonthLeaveDays');
                      setTimeout(() => {
                        formData.value = getFieldsValue() || {};
                      }, 0);
                      if (typeof originalOnChange === 'function') {
                        originalOnChange(value);
                      }
                    }
                  }
                };
              } else {
                return {
                  ...item,
                  componentProps: {
                    disabled: shouldDisableByPermission,
                    onChange: (value) => {
                      calculateTotalLeaveDays(value, 'lastMonthLeaveDays');
                      setTimeout(() => {
                        formData.value = getFieldsValue() || {};
                      }, 0);
                      if (typeof originalOnChange === 'function') {
                        originalOnChange(value);
                      }
                    }
                  }
                };
              }
            }
            return item;
          });
          
          modifiedFormSchema.value = updatedSchema;
        }
        
        // 获取考勤组数据
        async function getAttendanceOptions() {
          try {
            const [year, month] = dateTime.value.split('-');
            // const relationName = +month < 10 ? +month + 1 : +month;
            const relationName = +month;
            const res = await defHttp.post<any>({
              url: '/order/erp/system_setting/query_list',
              params: {
                setting_type: [61, 62, 63, 64],
                setting_value:  year,
                relation_name: relationName,
              }
            });
            
            if (Array.isArray(res)) {
              // 存储原始数据
              attendanceData.value = res;
              
              // 按settingType和settingValue分组处理数据
              const groupedData: Record<number, Record<string, any[]>> = {
                61: {},
                62: {},
                63: {},
                64: {}
              };
              
              // 按年份分组
              const yearGroups: Record<string, { label: string, options: any[] }> = {};
              
              // 清空选项
              attendanceOptions.value = [];
              
              // 分组处理数据
              res.forEach(item => {
                const type = item.settingType;
                const value = item.settingValue;
                
                if (type >= 61 && type <= 64 && value) {
                  if (!groupedData[type][value]) {
                    groupedData[type][value] = [];
                  }
                  groupedData[type][value].push(item);
                }
              });
              
              // 为每个分组创建选项
              Object.entries(groupedData).forEach(([typeStr, valueGroups]) => {
                const type = parseInt(typeStr);
                const baseLabel = getAttendanceLabel(type);
                
                Object.entries(valueGroups).forEach(([value, items]) => {
                  if (items.length > 0) {
                    const ids = items.map(item => item.id);
                    // 创建选项，值格式为 "type:value"
                    const optionValue = `${type}:${value}`;
                    const optionLabel = `${baseLabel}(${value})`;
                    
                    // 按年份分组
                    if (!yearGroups[value]) {
                      yearGroups[value] = {
                        label: `${value}年`,
                        options: []
                      };
                    }
                    
                    yearGroups[value].options.push({
                      label: optionLabel,
                      value: optionValue,
                      ids: ids
                    });
                    
                    // 同时保存到扁平数组中，方便后续查找
                    attendanceOptions.value.push({
                      value: optionValue,
                      label: optionLabel,
                      ids: ids
                    });
                  }
                });
              });
              
              // 将年份分组转为数组，并按年份降序排序
              const yearGroupsArray = Object.entries(yearGroups).map(([year, group]) => {
                // 按考勤类型排序选项
                const sortedOptions = group.options.sort((a, b) => {
                  const typeA = parseInt(a.value.split(':')[0]);
                  const typeB = parseInt(b.value.split(':')[0]);
                  return typeA - typeB;
                });
                
                return {
                  ...group,
                  options: sortedOptions
                };
              }).sort((a, b) => {
                const yearA = a.label.replace('年', '');
                const yearB = b.label.replace('年', '');
                return yearB.localeCompare(yearA); // 降序排序，新年份在前
              });
              
              // 更新表单架构，将monthlyAttendanceName字段改为分组下拉选择
              updateFormSchema(yearGroupsArray);
            }
          } catch (error) {
            console.error('获取考勤组数据失败:', error);
          }
        }
        
        // 获取考勤组标签
        function getAttendanceLabel(type: number) {
          switch (type) {
            case 61:
              return '9小时双休';
            case 62:
              return '9小时大小周';
            case 63:
              return '8小时双休';
            case 64:
              return '8.5小时大小周';
            default:
              return '未知考勤组';
          }
        }
  
        // 计算累计存休
        function calculateTotalLeaveDays(newFieldValue: any = null, fieldName: string | null = null) {
          // 获取当前表单值
          let values = formData.value || {};
          
          // 如果传入了新值和字段名，则使用新值覆盖原有值进行计算
          if (newFieldValue !== null && fieldName !== null) {
            values = { ...values, [fieldName]: newFieldValue };
          }
          
          // 获取相关字段值，如果不存在则默认为0
          const lastMonthLeaveDays = values.lastMonthLeaveDays !== undefined ? Number(values.lastMonthLeaveDays) : 0;
          const storageLeaveDays = values.storageLeaveDays !== undefined ? Number(values.storageLeaveDays) : 0;
          const compensatoryLeaveDays = values.compensatoryLeaveDays !== undefined ? Number(values.compensatoryLeaveDays) : 0;
          
          // 计算累计存休
          const totalStorageLeaveDays = lastMonthLeaveDays + storageLeaveDays - compensatoryLeaveDays;
          
          // 更新累计存休字段
          setFieldsValue({
            totalStorageLeaveDays
          });
        }
  
        // 更新表单架构，将monthlyAttendanceName字段改为下拉选择
        function updateFormSchema(yearGroupsArray: any[]) {
          // 获取当前系统年月
          const now = new Date();
          const currentYear = now.getFullYear();
          const currentMonth = now.getMonth() + 1; 
          
          // 获取查询年月
          let queryYear = 0;
          let queryMonth = 0;
          
          if (dateTime.value) {
            const parts = dateTime.value.split('-');
            queryYear = parseInt(parts[0]);
            queryMonth = parseInt(parts[1]);
          }
          
          // 判断是否禁止修改
          const isDisabled = (queryYear === currentYear && queryMonth === currentMonth);
          
          // 获取当前记录的审核状态和字段权限信息
          const currentRecord = props.record || {};
          const attendanceStatus = currentRecord.attendanceStatus;
          const fieldPermissions = currentRecord.userOldAttendanceFieldVO || {};
          
          const updatedSchema = modifiedFormSchema.value.map(item => {
            // 处理考勤组字段
            if (item.field === 'monthlyAttendanceName') {
              // 判断考勤组字段是否应该被禁用
              let shouldDisableByPermission = false;
              
              // 如果审核状态为10，则根据字段权限判断是否禁用
              if (attendanceStatus === 10) {
                const fieldKey = getFieldPermissionKey(item.field);
                if (fieldKey && fieldPermissions[fieldKey] === 'LOCKED') {
                  shouldDisableByPermission = true;
                }
              }
              
              // 最终的禁用状态：要么因为是当前年月，要么因为权限被锁定
              const finalDisabled = isDisabled || shouldDisableByPermission;
              
              return {
                ...item,
                component: 'Select',
                componentProps: {
                  options: yearGroupsArray,
                  optionGroups: true,
                  placeholder: finalDisabled ? (isDisabled ? '请在员工档案中配置考勤组' : '该字段已被锁定，无法编辑') : '请选择考勤组',
                  onChange: handleAttendanceChange,
                  disabled: finalDisabled,
                },
              };
            } 
            // 处理存休相关字段的onChange事件
            else if (['storageLeaveDays', 'compensatoryLeaveDays'].includes(item.field)) {
              // 判断当前字段是否应该被禁用
              let shouldDisable = false;
              
              // 如果审核状态为10，则根据字段权限判断是否禁用
              if (attendanceStatus === 10) {
                const fieldKey = getFieldPermissionKey(item.field);
                if (fieldKey && fieldPermissions[fieldKey] === 'LOCKED') {
                  shouldDisable = true;
                }
              }
              
              return {
                ...item,
                componentProps: {
                  ...(item.componentProps || {}),
                  disabled: shouldDisable,
                  onChange: (value) => {
                    const fieldName = item.field;
                    
                    try {
                      calculateTotalLeaveDays(value, fieldName);
                      setTimeout(() => {
                        formData.value = getFieldsValue() || {};
                      }, 0);
                    } catch (error) {
                      console.error('计算累计存休时出错:', error);
                    }
                  },
                },
              };
            }
            // 处理其他可编辑字段
            else if (['attendanceDays', 'leaveDays', 'workHours'].includes(item.field)) {
              // 判断当前字段是否应该被禁用
              let shouldDisable = false;
              
              // 如果审核状态为10，则根据字段权限判断是否禁用
              if (attendanceStatus === 10) {
                const fieldKey = getFieldPermissionKey(item.field);
                if (fieldKey && fieldPermissions[fieldKey] === 'LOCKED') {
                  shouldDisable = true;
                }
              }
              
              return {
                ...item,
                componentProps: {
                  ...(item.componentProps || {}),
                  disabled: shouldDisable,
                },
              };
            }
            // 处理累计存休字段（只读）
            else if (item.field === 'totalStorageLeaveDays') {
              return {
                ...item,
                componentProps: {
                  ...(item.componentProps || {}),
                  disabled: true,
                },
              };
            }
            
            return item;
          });
          
          modifiedFormSchema.value = updatedSchema;
          resetFields();
          
          // 如果有记录数据，重新设置表单值
          if (props.record && Object.keys(props.record).length > 0) {
            setFormValues(props.record);
          }
        }
        
        // 获取字段权限对应的key
        function getFieldPermissionKey(fieldName: string): string | null {
          const fieldMapping: Record<string, string> = {
            'attendanceDays': 'attendanceDays',
            'leaveDays': 'leaveDays',
            'compensatoryLeaveDays': 'compensatoryLeaveDays',
            'storageLeaveDays': 'storageLeaveDays',
            'lastMonthLeaveDays': 'lastMonthLeaveDays',
            'totalStorageLeaveDays': 'totalStorageLeaveDays',
            'workHours': 'workHours',
            'monthlyAttendanceName': 'monthlyAttendance'
          };
          
          return fieldMapping[fieldName] || null;
        }
        
        // 尝试解析 relationValue 字符串
        function tryParseRelationValue(relationValue: string) {
          try {
            if (!relationValue) return null;
            
            const parsedData = JSON.parse(relationValue);
            return parsedData;
          } catch (error) {
            console.error('解析 relationValue 失败:', error);
            return null;
          }
        }
        
        // 处理考勤组选择变更
        function handleAttendanceChange(value: string) {
          // 获取当前系统年月
          const now = new Date();
          const currentYear = now.getFullYear();
          const currentMonth = now.getMonth() + 1; 
          
          // 获取查询年月
          let queryYear = 0;
          let queryMonth = 0;
          
          if (dateTime.value) {
            const parts = dateTime.value.split('-');
            queryYear = parseInt(parts[0]);
            queryMonth = parseInt(parts[1]);
          }
          
          // 判断是否禁止修改
          const isDisabled = (queryYear === currentYear && queryMonth === currentMonth);
          
          // 如果是当前年份，禁止修改
          if (isDisabled) {
            console.warn('当前年份考勤组不可修改');
            return;
          }
          
          // 非当前年份，允许修改
          if (value) {
            const selectedOption = attendanceOptions.value.find(opt => opt.value === value);
            if (selectedOption) {
              // 设置考勤组名称和ID
              setFieldsValue({
                monthlyAttendanceName: selectedOption.label,
                monthlyAttendanceIds: selectedOption.ids,
                monthlyAttendanceId: selectedOption.ids && selectedOption.ids.length > 0 ? selectedOption.ids[0] : undefined
              });
              
              // 查找考勤组数据中的 relationValue 并解析
              if (selectedOption.ids && selectedOption.ids.length > 0) {
                const attendanceId = selectedOption.ids[0];
                const attendanceItem = attendanceData.value.find(item => item.id === attendanceId);
                
                if (attendanceItem && attendanceItem.relationValue) {
                  const parsedData = tryParseRelationValue(attendanceItem.relationValue);
                  
                  if (parsedData) {
                    const updateValues: Record<string, any> = {};
                    
                    if (parsedData.payDay !== undefined) {
                      updateValues.payDay = parsedData.payDay;
                    }
                    
                    if (parsedData.monthlyWorkingDay !== undefined) {
                      updateValues.monthlyWorkingDay = parsedData.monthlyWorkingDay;
                    }
                    
                    if (Object.keys(updateValues).length > 0) {
                      setFieldsValue(updateValues);
                    }
                  }
                }
              }
            }
          }
        }
  
        const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
          labelWidth: 100,
          baseColProps: { span: 24 },
          schemas: computed(() => modifiedFormSchema.value),
          showActionButtonGroup: false,
        });
  
        // 更新表单值并触发计算
        function setFormValues(record: any) {
          if (!record) return;
          
          // 如果有考勤组名称，尝试找到匹配的选项
          if (record.monthlyAttendanceName) {
            const matchingOption = attendanceOptions.value.find(opt => 
              opt.label === record.monthlyAttendanceName
            );
            
            if (matchingOption) {
              // 如果找到匹配选项，设置值为选项的value
              record.monthlyAttendanceName = matchingOption.value;
            }
          }
          
          // 检查是否有上月存休数据，没有则显示警告
          const hasLastMonthData = record.lastMonthLeaveDays !== undefined && record.lastMonthLeaveDays !== null;
          updateLastMonthField(!hasLastMonthData);
          
          setFieldsValue({
            ...record,
          });
          
          // 更新formData引用
          formData.value = record;
          
          // 计算累计存休
          try {
            calculateTotalLeaveDays();
          } catch (error) {
            console.error('初始计算累计存休时出错:', error);
          }
        }
  
        // 监听props变化，更新表单数据
        watch(
          () => props.record,
          (record) => {
            if (record && Object.keys(record).length > 0) {
              resetFields();
              rowId.value = record.id || '';
              
              // 编辑模式下只获取考勤组数据，不再获取上月存休数据
              if (props.isUpdate && record.userId) {
                getAttendanceOptions();
              }
              
              // 设置表单值
              setFormValues(record);
            } else {
              resetFields();
              // 新建模式，显示警告样式
              updateLastMonthField(true);
            }
          },
          { immediate: true, deep: true }
        );
        
        // 监听dateTime属性变化
        watch(
          () => props.dateTime,
          (newVal) => {
            if (newVal) {
              dateTime.value = newVal;
              // 当日期变化时，重新获取考勤组数据
              getAttendanceOptions();
            }
          },
          { immediate: true }
        );
  
        // 添加监听表单字段变化的逻辑
        const watchStopHandle = ref<any>(null);
        
        onMounted(() => {
          // 在组件挂载后再设置监听，避免过早访问
          watchStopHandle.value = watch(
            () => {
              const values = getFieldsValue();
              return values ? [
                values.lastMonthLeaveDays,
                values.storageLeaveDays,
                values.compensatoryLeaveDays
              ] : [];
            },
            (newValues, oldValues) => {
              // 只在初始化和通过其他方式修改值时执行
              // 不要与onChange事件产生冲突
              if (newValues && newValues.length === 3 && 
                  (newValues[0] !== oldValues?.[0] || 
                   newValues[1] !== oldValues?.[1] || 
                   newValues[2] !== oldValues?.[2])) {
                
                // 更新formData引用
                formData.value = getFieldsValue() || {};
                // 计算累计存休，但不传递特定字段的新值
                try {
                  calculateTotalLeaveDays();
                } catch (error) {
                  console.error('监听字段变化时计算累计存休出错:', error);
                }
              }
            },
            { deep: true }
          );
        });
        
        // 组件卸载时清除监听
        onUnmounted(() => {
          if (watchStopHandle.value) {
            watchStopHandle.value();
          }
        });
  
        // 提供给父组件调用的保存方法
        async function handleSave() {
          try {
            // 获取当前系统年份
            const currentYear = new Date().getFullYear();
            
            // 获取查询年份
            const queryYear = dateTime.value ? parseInt(dateTime.value.split('-')[0]) : 0;
            
            // 如果是当前年份且考勤组有变更，进行警告
            const isCurrentYear = queryYear === currentYear;
            const hasAttendanceId = props.isUpdate && props.record && props.record.monthlyAttendanceId !== undefined;
            
            let finalValues = null;
            
            if (isCurrentYear && hasAttendanceId) {
              try {
                const values = await validate();
                
                // 如果尝试修改了考勤组，使用原始值覆盖
                const attendanceIdChanged = values.monthlyAttendanceId !== props.record.monthlyAttendanceId;
                const attendanceIdsChanged = values.monthlyAttendanceIds && values.monthlyAttendanceIds[0] !== props.record.monthlyAttendanceId;
                
                if (attendanceIdChanged || attendanceIdsChanged) {
                  console.warn('当前年份考勤组不可修改，已还原为原始值');
                  
                  // 还原为原始的考勤组ID和名称
                  values.monthlyAttendanceId = props.record.monthlyAttendanceId;
                  values.monthlyAttendanceIds = props.record.monthlyAttendanceIds || [props.record.monthlyAttendanceId];
                  values.monthlyAttendanceName = props.record.monthlyAttendanceName;
                  
                  // 更新表单值
                  setFieldsValue({
                    monthlyAttendanceId: props.record.monthlyAttendanceId,
                    monthlyAttendanceIds: props.record.monthlyAttendanceIds || [props.record.monthlyAttendanceId],
                    monthlyAttendanceName: props.record.monthlyAttendanceName
                  });
                  
                  // 等待表单状态更新完成
                  await new Promise(resolve => setTimeout(resolve, 100));
                }
                
                // 确保在保存前重新计算一次累计存休
                formData.value = values;
                try {
                  calculateTotalLeaveDays();
                } catch (error) {
                  console.error('保存前计算累计存休时出错:', error);
                }
                
                // 直接使用已验证的值，避免再次调用validate
                finalValues = values;
                
              } catch (validateError) {
                console.error('当前年份分支validate失败:', validateError);
                throw validateError;
              }
            } else {
              // 非当前年份，允许正常修改
              try {
                const values = await validate();
                
                // 确保在保存前重新计算一次累计存休
                if (values) {
                  formData.value = values;
                  try {
                    calculateTotalLeaveDays();
                  } catch (error) {
                    console.error('保存前计算累计存休时出错:', error);
                  }
                }
                
                finalValues = values;
                
              } catch (validateError) {
                console.error('非当前年份分支validate失败:', validateError);
                throw validateError;
              }
            }
            
            // 如果没有获取到最终值，则进行最后一次验证
            if (!finalValues) {
              try {
                finalValues = await validate();
              } catch (finalValidateError) {
                console.error('最终validate调用失败:', finalValidateError);
                throw finalValidateError;
              }
            }
            
            // 类型安全检查
            if (!finalValues) {
              throw new Error('无法获取有效的表单数据');
            }
            
            // 确保包含用户ID
            if (!finalValues.userId && props.record && props.record.userId) {
              finalValues.userId = props.record.userId;
            }
            
            // 如果是更新操作，带上ID
            if (props.isUpdate && rowId.value) {
              finalValues.id = rowId.value;
            }
            
            // 确保包含日期信息
            if (dateTime.value && !finalValues.dateTime) {
              finalValues.dateTime = dateTime.value;
            }
            
            // 尝试从多个可能的来源获取考勤组ID
            const possibleIds = [
              finalValues.monthlyAttendanceId,
              props.record?.monthlyAttendanceId,
              finalValues.monthlyAttendanceIds?.[0],
              props.record?.monthlyAttendanceIds?.[0],
              finalValues.monthlyAttendanceSelectedId
            ];
            
            // 过滤掉undefined和null，并取第一个有效的ID
            const validId = possibleIds.find(id => id !== undefined && id !== null);
            
            // 如果找到有效ID，设置到要发送的数据中
            if (validId) {
              finalValues.monthlyAttendanceId = validId;
            }
            
            // 移除不需要的字段
            const { chineseName, nickName, ...dataToSend } = finalValues;
            
            // 发送请求到服务器保存编辑后的数据
            const result = await defHttp.post({
              url: '/order/erp/users/oldAttendance/edit',
              params: dataToSend
            });
            
            if (result) {
              return result;
            }
            
            return dataToSend;
          } catch (error) {
            console.error('保存失败:', error);
            
            // 如果是表单验证错误，输出关键信息
            if (error && typeof error === 'object') {
              if (error.values) {
                console.error('表单值:', error.values);
              }
              if (error.errorFields) {
                console.error('错误字段:', error.errorFields);
              }
              if (error.outOfDate !== undefined) {
                console.error('表单是否过期:', error.outOfDate);
              }
            }
            
            return Promise.reject(error);
          }
        }
  
        return { 
          registerForm, 
          handleSave 
        };
      },
    });
  </script>