use-dynamic-form-lxh

Install

Using npm:

$ npm install --save  use-dynamic-form-lxh

or using yarn:

$ yarn add use-dynamic-form-lxh

使用

useDynamicForm 可以帮助我们管理表单联动。实际上就是在 SchemaForm 表单的 columns 数据上添加了 dynamic 属性，记录动态数据信息，根据信息控制表单元素的显示隐藏。

import React, { useMemo } from 'react'
import type { ProFormColumnsType } from '@ant-design/pro-form'
import { BetaSchemaForm } from '@ant-design/pro-form'
import useDynamicForm, { ProFormColumnsTypeDynamic } from 'use-dynamic-form-lxh'
import { Form } from 'antd'

const labels: ProFormColumnsType = {
  title: '标签',
  dataIndex: 'labels',
  width: 'm',
}
const createName: ProFormColumnsType = {
  title: '创建时间',
  key: 'showTime',
  dataIndex: 'createName',
  valueType: 'date',
}
const formList: ProFormColumnsType = {
  title: '列表',
  valueType: 'formList',
  dataIndex: 'list',
  initialValue: [{ state: 'all', title: '标题' }],
  columns: [
    {
      valueType: 'group',
      columns: [
        {
          title: '状态',
          dataIndex: 'state',
          valueType: 'select',
          width: 'xs',
          valueEnum,
        },
        {
          title: '标题',
          dataIndex: 'title',
          formItemProps: {
            rules: [
              {
                required: true,
                message: '此项为必填项',
              },
            ],
          },
          width: 'm',
        },
      ],
    },
  ],
}

const dynamicColumns: ProFormColumnsTypeDynamic<DataItem>[] = [
  {
    title: '切换表单',
    dataIndex: 'selectType',
    valueType: 'select',
    valueEnum,
    width: 'm',
    dynamic: {
      id: 'selectType',
      addColumns: {
        labels: [labels],
        createName: [createName],
        formList: [formList],
      },
    },
  },
]

export default () => {
  ...
  const [columns, onValuesChange] = useDynamicForm(dynamicColumns, form, initialValues);
  return (
    <BetaSchemaForm<DataItem>
      columns={columns}
      onValuesChange={onValuesChange}
      initialValues={initialValues}
      form={form}
    />
  );
};

API

| 字段名称 | 类型 | 说明 | | --- | --- | --- | | dynamicColumns | ProFormColumnsTypeDynamic<T, ValueType>[] | 参数，带有 dynamic 属性的 columns 数组【需要使用 useMemo 包裹】 | | form | (FormInstance<T> & FormInstance<any>) | 参数，表单的 form 实例 | | initialValues | Store | 参数，初始值 | | columns | ProFormColumnsType<T, ValueType>[] | ProFormColumnsType<T, ValueType>[][] | 返回值，SchemaForm 表单的 columns | | onValuesChange | (changedValues: any, values: Values) => void | 返回值，SchemaForm 表单的 onValuesChange |

dynamic

Dynamic {id, addColumns, delColumns?, children?, index?}， 存放动态数据的对象

| 字段名称 | 类型 | 说明 | | --- | --- | --- | | id | string | 建议与 dataIndex 保持一致 | | addColumns | Record<string, ProFormColumnsTypeDynamic<T, ValueType>[]> | 指定要动态添加的表单元素集合，格式：{ key: columns }，比如{ ActiveMQ: [host, port] }，表示 select 值等于 ActiveMQ 时展示 host 和 port | | delColumns | Record<string, ProFormColumnsTypeDynamic<T, ValueType>[]> | 格式同 addColumns，只是作用相反，记录的是选中时需要特别删掉的表单元素集合 | | children | string[] | 所有动态的后代元素的 id 集合（包括子级、孙子级...所有动态的后代元素），切换的时候需要去清除子级的数据 | | index | number | 指定动态元素插入的位置，可以为正整数或者负整数，正整数往后插入，负整数往前插入 |