antd-dynamic-form-render
v1.1.4
Published
基于webapck5、react、antd5搭建的动态配置表单组件，支持编辑和视图模式
Downloads
11
Readme
DynamicForm
基于webapck5、react、antd5搭建的动态配置表单组件，支持编辑和视图模式
构建和发布
安装依赖
npm i
运行项目
npm run start
打包
npm run build
发布
npm run release
基本使用
支持类型（FORM_FIELD_TYPE）
引入方式
import { FORM_FIELD_TYPE } from 'antd-dynamic-form-render';基本配置
| 类型 | 字段 |------ |----------- |普通文本 | FIELD_TYPE_INPUT |大文本 | FIELD_TYPE_TEXTAREA |数字（整数）| FIELD_TYPE_INT |数字（浮点）| FIELD_TYPE_FLOAT |下拉单选 | FIELD_TYPE_SELECT |下拉多选 | FIELD_TYPE_MULTI_SELECT |下拉Tag选择 | FIELD_TYPE_TAG_SELECT |下拉单选搜索 | FIELD_TYPE_SEARCH |下拉多选搜索 | FIELD_TYPE_MULTI_SEARCH |下拉数形单选 | FIELD_TYPE_TREE_SELECT |下拉数形多选 | FIELD_TYPE_MULTI_TREE_SELECT |日期 | FIELD_TYPE_DATE |日期区间 | FIELD_TYPE_RANGE |开关 | FIELD_TYPE_SWITCH |单选框 | FIELD_TYPE_RADIO |复选框 | FIELD_TYPE_CHECKBOX |组合组件 | FIELD_TYPE_FIELD_GROUP |自定义组件 | FIELD_TYPE_COMPONENT
表单项组件（FormFieldRender）
引入方式
import { FormFieldRender } from 'antd-dynamic-form-render';基本配置
| 参数 | 描述 |------ | ------ |mode | 字段模式，可选值可为edit、view，默认edit |fieldType | 字段类型，可选择为FORM_FIELD_TYPE支持类型 |rules | 规则字段，数字类型rules可以转换为antd属性 |... | 其他prop参考antd各个表单组件配置
动态表单项组件
此组件和表单项组件的区别在于mode字段多了hover模式，表示字段默认为为view模式，当字段被点击是，会切换成edit模式；除此之外 此组件支持配置rules，在字段onChange时自动进行校验。
引入方式
import { DynamicFieldRender } from 'antd-dynamic-form-render';基本配置
| 参数 | 描述 |------ | ------ |mode | 字段模式，可选值可为edit、view、hover，默认edit |fieldType | 字段类型，可选择为FORM_FIELD_TYPE支持类型 |rules | 规则字段，onChange时会自动进行表单项的校验 |... | 其他prop参考antd各个表单组件配置
动态表单组件（DynamicFormRender）
引入方式
import { DynamicFormRender } from 'antd-dynamic-form-render';
基本配置
| 参数 | 描述 |------ | ------ |mode | 字段模式，可选值可为edit、view |form | antd的form实例 |size | 字段尺寸大小，可选small、default、large |layoutType | 布局方式，顺序布局normal、栅格布局layout， 默认layout |rowCount | 一行显示的字段个数，默认为3 |initialValues | 表单初始值 |formLayout | 自定义表单布局，否则默认通过 layoutType和rowCount值进行生成 |formItemProps | 其他antd的Form.item的配置 |formList | 配置表单项字段，具体参考formList配置 |... | 其他prop参考antd的Form配置
formList配置
| 参数 | 描述 |------- | -------- |title | 字段名称 |name | 字段编码 |fieldType | 字段类型 |rules | 校验规则，参考antd的表单rules配置 |isEnabled | 字段是否使能，字符串0或1，0表示不使能，1表示使能， 默认使能 |isEditable | 字段是否可编辑，字符串0或1，0表示不可编辑，1表示可编辑，默认可编辑 |isRequired | 字段是否可必填，字符串0或1，0表示不必填，1表示必填，默认不必填 |isRowAlone | 字段是否可单行展示，字符串0或1，1表示单行展示 |dataSource | 数据源字段，针对部分字段类型有效 |fetch | 搜索类型字段必填，自定义搜索接口 |onLoaded | 数据源字段加载数据回调 |groupFields | 只针对字段组字段类型有效，数组类型，配置参考formList配置 |component | 只针对自定义组件字段类型有效，可自定义表单项组件 |... | 其他prop参考antd各个表单组件配置
完整案例（在线调试地址）
import React, { useRef, useState } from "react";
import { Form, Button, Input } from 'antd';
import jsonp from 'fetch-jsonp';
import qs from 'qs';
import { FORM_FIELD_TYPE, DynamicFormRender, DynamicFieldRender } from 'antd-dynamic-form-render'
const {
FIELD_TYPE_INPUT,
FIELD_TYPE_TEXTAREA,
FIELD_TYPE_INT,
FIELD_TYPE_FLOAT,
FIELD_TYPE_SELECT,
FIELD_TYPE_MULTI_SELECT,
FIELD_TYPE_TAG_SELECT,
FIELD_TYPE_SEARCH,
FIELD_TYPE_MULTI_SEARCH,
FIELD_TYPE_DATE,
FIELD_TYPE_RANGE,
FIELD_TYPE_FIELD_GROUP,
FIELD_TYPE_SWITCH,
FIELD_TYPE_RADIO,
FIELD_TYPE_CHECKBOX,
FIELD_TYPE_COMPONENT,
} = FORM_FIELD_TYPE;
const DATASOURCE = [{ code: '1', name: '1111'}, { code: '2', name: '2222'}];
const UNIT_DATA = [{ code: '1', name: 'cm'}, { code: '2', name: 'm'}];
const defaultValue = {
field1: '1233',
field2: 222.332,
field3: '1',
field33: ['1', '2'],
field4: 123431,
field5: '114311.8010847826',
field6: ['114311.8010847826'],
field7: 1680019200000,
field8: [1677945600000, 1682092799000],
field9: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
field11: true,
field12: '1',
field13: ['1', '2'],
field14: '啦啦啦',
component: {field1: '123', field2: '2' }
}
const TestDynamicFormRender = (props) => {
const [mode, setMode]= useState('view');
const initialValues = useRef(defaultValue)
const [form] = Form.useForm();
const fetchData = (params) => {
const { name } = params || {}
return jsonp(`https://suggest.taobao.com/sug?code='utf-8'&q=${name}`).then((response: any) => response.json())
}
const handleFetchLoaded = (res) => {
return (res.result || []).map(v => ({ code: v[1], name: v[0]}))
}
const handleSubmit = () => {
form.validateFields().then(values =>{
console.log(values)
})
}
const handleReset = () => {
form.resetFields();
}
const handleChangeMode = () => {
setMode(mode === 'edit' ? 'view' : 'edit')
}
const generateComponent = (props) => {
const aProps = _.omit(props, ['mode', 'component'])
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Input {...aProps}/>
<a style={{ marginLeft: '10px' }}>link</a>
</div>
)
}
const formProps = {
form,
mode: mode,
initialValues: initialValues.current,
size: 'small',
// layout: 'vertical',
// formLayout: { labelCol: { span: 3 }, wrapperCol: { span: 12 } },
layoutType: 'normal',
rowCount: 4,
formList: [
{
title: '文本',
name: 'field1',
fieldType: FIELD_TYPE_INPUT,
rules: [
{ max: 5, message: '最大长度为5' },
],
},
{
title: '浮点数字',
name: 'field2',
rules: [
{ max: 100, type: 'number', message: '最大值为100' },
{ min: 10, type: 'number', message: '最小值为10' },
],
// isRequired: '1',
fieldType: FIELD_TYPE_FLOAT,
},
{
title: '下拉单选',
name: 'field3',
// isRequired: '1',
fieldType: FIELD_TYPE_SELECT,
dataSource: [...DATASOURCE],
},
{
title: '下拉多选',
name: 'field33',
isRequired: '1',
fieldType: FIELD_TYPE_MULTI_SELECT,
dataSource: [...DATASOURCE],
},
{
title: '整数',
name: 'field4',
fieldType: FIELD_TYPE_INT,
},
{
title: '下拉单选搜索',
name: 'field5',
fieldType: FIELD_TYPE_SEARCH,
isClearOptionsAfterSelect: true,
fetch: fetchData,
onLoaded: handleFetchLoaded,
},
{
title: '下拉多选搜索',
name: 'field6',
fieldType: FIELD_TYPE_MULTI_SEARCH,
fetch: fetchData,
onLoaded: handleFetchLoaded,
},
{
title: '日期',
name: 'field7',
fieldType: FIELD_TYPE_DATE,
},
{
title: '日期区间',
name: 'field8',
fieldType: FIELD_TYPE_RANGE,
},
{
title: '大文本',
name: 'field9',
fieldType: FIELD_TYPE_TEXTAREA,
},
{
title: '开关',
name: 'field11',
fieldType: FIELD_TYPE_SWITCH,
},
{
title: '单选框',
name: 'field12',
fieldType: FIELD_TYPE_RADIO,
dataSource: [...DATASOURCE],
},
{
title: '复选框',
name: 'field13',
fieldType: FIELD_TYPE_CHECKBOX,
dataSource: [...DATASOURCE],
},
{
title: '自定义组件',
name: 'field14',
fieldType: FIELD_TYPE_COMPONENT,
isRequired: '1',
component: generateComponent,
},
{
title: '组合组件',
name: 'component',
fieldType: FIELD_TYPE_FIELD_GROUP,
isRowAlone: '1',
isRequired: '1',
style: { maxWidth: '400px' },
groupFields: [
{
name: 'field1',
title: '数字',
fieldType: FIELD_TYPE_INT,
// isRequired: '1',
},
{
name: 'field2',
title: '单位',
// allowClear: false,
fieldType: FIELD_TYPE_SELECT,
dataSource: [...UNIT_DATA],
// isRequired: '1',
},
{
title: '下拉多选搜索',
name: 'field6',
fieldType: FIELD_TYPE_MULTI_SEARCH,
fetch: fetchData,
onLoaded: handleFetchLoaded,
},
]
},
]
}
const fieldProps = {
fieldType: FIELD_TYPE_MULTI_SELECT,
id: 'ceshi1',
mode: 'hover',
size: 'default',
dataSource: DATASOURCE,
style: { width: 200 },
placeholder: '请输入',
rules: [
{ required: true, message: '字段不能为空' }
],
}
return (
<>
<DynamicFormRender {...formProps}/>
<div style={{ padding: '10px 0'}}>
<Button onClick={handleChangeMode}>切换模式</Button>
<Button style={{ marginLeft: '10px' }} onClick={handleSubmit}>提交</Button>
<Button style={{ marginLeft: '10px' }} onClick={handleReset}>重置</Button>
</div>
<div style={{ marginTop: '20px' }}>
<DynamicFieldRender {...fieldProps}/>
</div>
</>
)
}
export default TestDynamicFormRender;