其他联动

queryConfig 设置选项

每个表单 ui 配置都有一个queryConfig用来配置接口，可以将接口某个字段映射到 ui 配置中。

type QueryConfig =
  | {
      //刷新请求id （id和上一次不一致，会重新请求接口）
      refreshId?: number
      //请求url
      url: string
      //请求参数
      params: Array<{ key: string; value: string }>
      //请求方法
      method: 'GET' | 'POST'
      //需要获取接口数据返回值的路径
      dataPath: string
      //使用接口请求设置数据
      optionsType: '0'
      //映射到ui中的路径
      setPath: string
    }
  | {
      //手动设置数据
      optionsType: '1'
      //映射到ui中的路径
      setPath: string
      //手动设置的数据
      options: Array<{ label: string; value: string }>
    }

使用场景：

• 单选框选项由后端下发
• 多选框选项由后端下发
• 选择框选项由后端下发
• ...

请求相关

Drip form内部使用 原生 fetch Api 实现简易的接口请求。如果对浏览器兼容、请求库、数据拦截、错误统一提示有要求，可以通过 Drip form 提供的 fetchApi prop 进行定制。

代码示例

• App.tsx
• unitedSchema.ts

import DripForm from '@jdfed/drip-form'
import antd from '@jdfed/drip-form-theme-antd'
import unitedSchema from './unitedSchema'
import '@jdfed/drip-form/dist/index.css'
import '@jdfed/drip-form-theme-antd/dist/index.css'
import 'antd/dist/antd.css'

function App() {
  return (
    <DripForm
      // 表单配置文件
      unitedSchema={unitedSchema}
      // 导入组件
      uiComponents={{ antd }}
      // 设置表单值
    ></DripForm>
  )
}

export default App

多表单联动

当一页面存在多个 drip-form 表单时，如何控制多个 drip-form 表单之间的联动？

如上图所示，存在两个 drip-form 构建的表单（表单 1 和表单 2）。当表单 1 的输入是123的时候，表单 2 的开关按钮会被关闭

多表单联动实现步骤:

1. 通过 ref prop 获取到表单的 set Api

2. 通过 control prop 控制表单联动

3. 通过 ref.current.set 和 control prop 的配合既可以做到任意 drip form 表单之间的联动控制。

代码示例

• App.tsx
• unitedSchema.ts

import { useRef } from 'react';
import DripForm, { DripFormRefType } from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import { unitedSchema, unitedSchemaMulti } from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';

function App() {
  const ref = useRef<DripFormRefType>();
  return (
    <>
      <DripForm
        // 表单配置文件
        unitedSchema={unitedSchemaMulti}
        // 导入组件
        uiComponents={{ antd }}
        control={({ formData }) => {
          if (formData.name === '123') {
            ref?.current?.set('switch', 'data', false);
          } else {
            ref?.current?.set('switch', 'data', true);
          }
        }}
      ></DripForm>
      <DripForm
        ref={ref}
        // 表单配置文件
        unitedSchema={unitedSchema}
        // 导入组件
        uiComponents={{ antd }}
      ></DripForm>
    </>
  );
}

export default App;

代码沙盒：

联动可配制化

为了支持在表单设计器中配置生成联动。支持 controlFlow 联动配置协议。

具体介绍查看 水滴表单联动可视化配置的实现

提示

建议在表单设计器中直接使用 配置联动¹ 功能，快速生成 controlFlow。

---

1. 配置联动功能还在 alpha 测试中↩