循环表单班型数据联动

在当前的实现中，处理动态添加多个班型并保持各自岗位与班型关联的逻辑需要一些改进。以下是分析和解决方案：

当前问题分析

1. 初始只有一条数据，但可以动态添加多个班型
2. 每个班型需要独立关联自己的岗位和班型选项
3. 当前实现中班型数据(JobClassExam)是全局状态，所有表单项共享同一份班型数据

解决方案

1. 改进班型数据存储方式

// 改为使用对象存储不同岗位对应的班型
const [jobClassExamMap, setJobClassExamMap] = useState<Record<string, ClassExamOption[]>>({});

2. 修改获取班型逻辑

const getJobClassExam = async (projectId: string) => {
    if (jobClassExamMap[projectId]) return; // 已存在则不再请求
    
    let res = await request.get(
        `/sms/business/bizChargeStandard?project=${projectId}&useNum=0&_size=999&enable=true`
    );
    
    const options = projectClassExamListFn(res.data.content);
    setJobClassExamMap(prev => ({
        ...prev,
        [projectId]: options
    }));
}

3. 修改岗位选择处理

const handleChangeProject = (e: any, index: number) => {
    const projectId = e[e.length - 1]; // 获取最后一级的岗位ID
    getJobClassExam(projectId);
    
    // 更新当前表单项的班型选项
    formRef.current?.setFieldsValue({
        users: formRef.current?.getFieldValue('users').map((item: any, i: number) => 
            i === index ? {...item, JobClassExam: undefined} : item
        )
    });
}

4. 修改ProFormSelect的班型选项

<ProFormSelect
    label="班型选择"
    name="JobClassExam"
    fieldProps={{
        options: jobClassExamMap[当前岗位ID] || [],
        showSearch: true,
        onSelect: (e: string) => {
            const arr = JSON.parse(e);
            formRef.current?.setFieldsValue({
                users: formRef.current?.getFieldValue('users').map((item: any, i: number) => 
                    i === index ? {...item, receivable: arr.receivable} : item
                )
            });
        },
    }}
    // ...其他props
/>

5. 获取当前岗位ID的方法

需要在ProFormCascader中保存完整的岗位路径：

<ProFormCascader
    // ...
    fieldProps={{
        onChange: (value: any) => {
            // 保存完整路径到表单数据中
            formRef.current?.setFieldsValue({
                users: formRef.current?.getFieldValue('users').map((item: any, i: number) => 
                    i === index ? {...item, projectPath: value} : item
                )
            });
            handleChangeProject(value, index);
        }
    }}
/>

完整改进思路

1. 数据结构：

   • 使用jobClassExamMap对象存储不同岗位对应的班型列表
   • 每个表单项保存自己的岗位路径和选择的班型

2. 数据加载：

   • 当选择岗位时，检查是否已加载过该岗位的班型
   • 未加载则发起请求，已加载则直接使用缓存

3. 表单联动：

   • 岗位变化时清空当前项的班型选择
   • 班型选择时自动更新收费标准

4. 性能优化：

   • 避免重复请求相同岗位的班型数据
   • 使用函数式更新确保状态更新正确

这样改进后，每个动态添加的班型表单项都能独立维护自己的岗位和班型关联关系，且能正确获取和显示对应的班型选项。

注意事项

1. 需要为每个表单项保存完整的岗位路径信息
2. 切换岗位时需要重置相关字段
3. 新增表单项时应初始化必要的字段
4. 考虑添加加载状态提升用户体验