Ant Design Pro Table 项目名称选择后更新机芯和项目 ID

根据代码分析，选择项目名称后，应该会触发 ProFormInstance 组件的 onChange 事件，从而更新对应的机芯和项目 ID。但是在代码中，并没有监听这个事件，需要在 ProFormInstance 中加入 onChange 的监听，然后在回调函数中更新对应的数据。具体实现可以参考以下代码：

在 ProFormInstance 中添加 onChange 监听：

<ModalForm
  ...
  formRef={formRef}
  onVisibleChange={(visible) => {
    if (visible) {
      formRef.current?.resetFields();
      setEditableRowKeys(focusData.map((item: any) => item.id));
    }
    else {
      setEditableRowKeys([]);
    }
  }}
  onChange={(values) => {
    // 遍历 values，找到对应的行数据并更新机芯和项目 ID
    const newData = focusData.map((item) => {
      const matchValue = values.find((value) => value.rowIndex === item.rowIndex);
      if (matchValue) {
        const { projectChip, id } = matchValue;
        return {
          ...item,
          chip: projectChip,
          projectId: id,
        };
      }
      return item;
    });
    setFocusData(newData);
  }}
>
  ...
</ModalForm>

另外，需要将 ProColumns 中的 fieldProps 属性修改为以下形式，以便能够在回调函数中获取到 rowIndex：

fieldProps: (text: string, record: ListItem, index) => ({
  ...
  onChange: (value: string, option: any) => {
    const { projectChip, id, projectType, projectName } = option;
    const currentRowIndex = index;
    const currentRowData = focusData[currentRowIndex];
    const updatedRowData = {
      ...currentRowData,
      chip: projectChip,
      projectType,
      projectId: id,
      projectName,
      oaName: initialState?.currentUser?.userName,
      rowIndex: currentRowIndex,
    };
    const updatedFocusData = [...focusData];
    updatedFocusData[currentRowIndex] = updatedRowData;
    setFocusData(updatedFocusData);
    setEditableRowKeys([...editableKeys, id]);
  },
}),