FUADIM / VBEN 三级联动下拉框的新方案，解决put请求问题

 

之前的两个三联方案，POST请求OK，可以实现新增，但后来进行修改时发现，PUT请求有问题,无法把字段的ID 传出来，本想用笨方法，创建一个接口，进行数据转换，通过字段查找到ID.

可能原因VBEN有BUG，data里的那个formType有问题：

后试了新方法，通过逻辑判断，是否是PUT请求，代码见下： 

data文件里

// 选择不同的机床类型时，会触发异步请求，动态更新机器型号和控制系统的选项列表
{
  field: 'machine_class',
  label: '机床类型',
  required: true,
  component: 'ApiSelect',
  componentProps: ({ formModel, formActionType }) => {
    return {
      api: getMachineClassList,
      labelField: 'type',
      valueField: 'id',
      onChange: async (selectedId) => {
        formModel.machine_type = undefined; // 目的是清空之前选择，将其重置为未定义状态
        formModel.control_type = undefined;
        if (formActionType != undefined) {  // 这个条件语句检查变量 formActionType 是否已经被赋值，或者是否存在。如果 formActionType 的值不是 undefined，则条件为真（true）；否则，条件为假（false）
          const { updateSchema } = formActionType;
          const res = await getMachineOrControlTypeList(selectedId);
          const machine_type_option = res.map((item) => ({
            label: item.type,
            value: item.id,
          }));
          updateSchema({
            field: 'machine_type',
            componentProps: ({ formModel, formActionType }) => {
              return {
                options: machine_type_option,
                onChange: async (value) => {
                  formModel.control_type = undefined;
                  if (formActionType != undefined) {
                    const { updateSchema } = formActionType;
                    const res = await getMachineOrControlTypeList(value);
                    const control_type_option = res.map((item) => ({
                      label: item.type,
                      value: item.id,
                    }));
                    updateSchema({
                      field: 'control_type',
                      componentProps: {
                        options: control_type_option,
                      },
                    });
                  }
                },
              };
            },
          });
        }
      },
    };
  },
},

 {
    field: 'machine_type',
    label: '机器型号',
    required: true,
    component: 'Select',
  },
  {
    field: 'control_type',
    label: '控制系统',
    required: true,
    component: 'Select',
  },

   在drwa文件里：

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  // 在打开抽屉时执行的操作，data 是传入的数据对象

  // 重置表单字段
  await resetFields();
  // 设置抽屉属性，如确认加载状态
  setDrawerProps({ confirmLoading: false });
  // 判断是否为更新操作
  isUpdate.value = !!data?.isUpdate;  // 双感叹号（!!）则是将一个值强制转换为布尔类型的一种常见方式

  // 如果是更新操作
  if (unref(isUpdate)) {
    // 设置表单字段值为从数据中获取的记录
    await setFieldsValue({
      ...data.record,
    });

    // 根据记录的机床类型（machine_class）获取机器型号（machine_type）选项列表
    const res = await getMachineOrControlTypeList(data.record.machine_class);
    const machine_type_option = res.map((item) => ({
      label: item.type,
      value: item.id,
    }));

    // 更新表单结构中的 machine_type 字段的选项和事件处理
    updateSchema({
      field: 'machine_type',
      componentProps: ({ formModel, formActionType }) => {
        return {
          options: machine_type_option,
          onChange: async (value) => {
            // 当 machine_type 改变时，重置控制系统（control_type）
            formModel.control_type = undefined;

            // 获取选中 machine_type 对应的控制系统选项列表
            const { updateSchema } = formActionType;
            const res = await getMachineOrControlTypeList(value);
            const control_type_option = res.map((item) => ({
              label: item.type,
              value: item.id,
            }));

            // 更新表单结构中的 control_type 字段的选项
            updateSchema({
              field: 'control_type',
              componentProps: {
                options: control_type_option,
              },
            });
          },
        };
      },
    });

    // 根据记录的机器型号（machine_type）获取控制系统（control_type）选项列表
    const res2 = await getMachineOrControlTypeList(data.record.machine_type);
    const control_type_option = res2.map((item) => ({
      label: item.type,
      value: item.id,
    }));

    // 更新表单结构中的 control_type 字段的选项
    updateSchema({
      field: 'control_type',
      componentProps: {
        options: control_type_option,
      },
    });
  }
});

补充一下为什么采用异步请求：

1. 动态数据获取：

   • 在表单中，特别是当选项数量较多或需要根据用户输入动态变化时，直接将所有选项静态加载到前端可能效率低下且不实际。通过异步请求，可以在用户进行交互时，根据需要获取新的数据，以保证选项列表的实时性和准确性。

2. 后端数据获取：

   • 异步请求通常用于从后端服务器获取数据。例如，在上面的代码中，getMachineClassList 和 getMachineOrControlTypeList 可能是从后端 API 获取机床类型和机器型号或控制系统列表的函数。这些数据通常存储在数据库中或通过其他服务提供。

3. 响应式用户体验：

   • 使用异步请求可以改善用户体验。当用户选择不同的机床类型时，能够快速、动态地加载相关的机器型号和控制系统选项，无需页面刷新或长时间等待。

4. 避免数据冗余和浪费：

   • 异步请求允许仅在需要时获取数据，避免在页面加载时一次性获取所有可能用到的选项，从而节省带宽和服务器资源。

在前端开发中，使用异步请求可以使应用更加灵活和响应式，适应用户需求和动态数据变化。因此，尤其是在需要动态更新选项列表的表单场景中，异步请求是一种常见且有效的实现方式。

if (formActionType != undefined) 这一语句的作用是检查 formActionType 是否未定义（undefined）。

具体解释如下：

• 判断条件：formActionType != undefined

  • 这个条件语句检查变量 formActionType 是否已经被赋值，或者是否存在。如果 formActionType 的值不是 undefined，则条件为真（true）；否则，条件为假（false）。

• 意图：

  • 在编程中，经常需要在使用变量之前先检查它是否已经被正确赋值。特别是在异步操作中，变量可能需要在后续某个时刻被赋值，因此在使用之前需要进行检查，以避免因未定义而引发错误。