在LowCode-Engine中实现动态下拉框与表单联动

动态下拉框的实现方式

在LowCode-Engine中，当我们需要在物料属性面板中实现一个动态下拉框时，可以通过以下几种方式来实现：

自定义Setter组件

最灵活的方式是创建一个自定义Setter组件。这个Setter本质上是一个React组件，可以在组件内部处理异步数据请求：

import { useEffect, useState } from 'react';
import { Select } from '@alifd/next';

const AsyncSelectSetter = ({ value, onChange }) => {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    // 这里发起网络请求获取下拉选项
    fetch('/api/options')
      .then(res => res.json())
      .then(data => {
        setOptions(data);
        setLoading(false);
      });
  }, []);

  return (
    <Select
      value={value}
      onChange={onChange}
      dataSource={options}
      loading={loading}
    />
  );
};

然后在物料配置中引用这个Setter：

{
  name: 'dynamicSelect',
  title: '动态下拉框',
  setter: AsyncSelectSetter
}

使用Setter函数动态返回配置

对于简单的场景，可以直接在setter属性中使用函数动态返回配置：

{
  name: 'dynamicSelect',
  title: '动态下拉框',
  setter: (target) => {
    // 这里可以获取上下文信息或发起请求
    const options = fetchOptionsSync(); // 同步获取选项
    return [{
      componentName: 'SelectSetter',
      props: {
        options: options
      }
    }];
  }
}

表单字段联动实现

在LowCode-Engine中实现表单字段联动，可以通过以下几种方式：

使用Setter上下文

Setter函数可以接收target参数，通过它可以获取其他字段的值：

{
  name: 'dependentField',
  title: '依赖字段',
  setter: (target) => {
    const mainFieldValue = target.parent.getPropValue('mainField');
    const options = getOptionsBasedOnValue(mainFieldValue);
    
    return [{
      componentName: 'SelectSetter',
      props: {
        options: options
      }
    }];
  }
}

自定义联动Setter组件

对于复杂的联动逻辑，可以创建专门的联动Setter组件：

const DependentSelectSetter = ({ value, onChange, target }) => {
  const mainValue = target.parent.getPropValue('mainField');
  const [options, setOptions] = useState([]);

  useEffect(() => {
    fetch(`/api/options?dep=${mainValue}`)
      .then(res => res.json())
      .then(setOptions);
  }, [mainValue]);

  return (
    <Select
      value={value}
      onChange={onChange}
      dataSource={options}
    />
  );
};

最佳实践建议

1. 性能优化：对于频繁变化的依赖字段，考虑添加防抖处理，避免过多请求

2. 错误处理：在异步Setter中务必添加错误处理逻辑，展示友好的错误提示

3. 缓存机制：对于相同参数的请求结果可以考虑缓存，避免重复请求

4. 默认值处理：注意处理异步数据加载完成前的默认值显示问题

5. 组件复用：将通用的联动逻辑抽象为高阶组件或自定义Hook

通过以上方式，可以在LowCode-Engine中灵活实现各种动态表单交互需求，构建出功能丰富、用户体验良好的可视化配置界面。