1.0.5 • Published 4 years ago

use-dynamic-form-lxh

Licence

MIT

Version

1.0.5

Deps

Size

50 kB

Vulns

Weekly

Summary Dependency Versions

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`	指定动态元素插入的位置，可以为正整数或者负整数，正整数往后插入，负整数往前插入