本文已参与「新人创作礼」活动，一起开启掘金创作之路。
gitHub地址：Ant Design Pro V5
动态表单
介绍
ProForm 在原来的 Form 的基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。 文档地址： ProForm
我所做的是将 ProForm 的每个表单项进行二次封装，整合百分之80%的 Pro 表单项，满足大部分开发需求
主要包含：input（输入框）、password（密码）、captcha（验证码）、select（选择框）、checkbox（多选）、radio（单选）、switch（开关）、textArea（文本框）、rate（评星）、slider（滑动输入条）、digit(步进器）、filed（自定义）、dependency（表单联动）
其中，图片上传属于自定义的格式，自定义的组件为 OSSUpLoad，具体用法请参考 图片文件上传（OSSUpload）这篇文章
他的功能类似于 Schema From - JSON表单，本质是将说有的 Pro 表单项 进行整合起来，希望通过一个数组，构建出表单~
看着整合起来似乎没什么，但实际上还是比较麻烦的，遇到很多问题（有点扯远了）~~
在线演示： 动态表单
功能
当你有以下需求时，可以试试本组件:
- 当你需要为系统的所有表单设定统一的样式，如表单的布局，占位，按钮的颜色等~
- 想要通过一个数组就能实现 80% 的表单场景
- 在表单中常见的正则功能（如：手机号、身份证、验证码等），只需要一个字段就能对应的实现
- 兼容 ProFrorm表单项、 Ant Design 表单项的所有属性
代码演示
功能展示
统一默认值
布局样式
表单按钮
表单联动
具体代码
文件位置：src/components/Form
全局配置文件：src/utils/Setting/FormSy
如何使用
import { Form } from '@/components';
import type { formProps } from '@/components'
export default () => {
const list: formProps[] = [
{
name: '最终表单获得的值，多个会覆盖~'
type: '表单类型'
....
}
....
]
return (
<Form
formList={list}
onFinish=((values:any) => {}) //表单提交后的值
...
/>
)
}
特殊说明
- 文件上传 OSSUpLoad 的类型为自定义，并有具体使用案例
- 我所做的是整合，这样做的好处时，可以全局控制所有表单样式，使单页面的代码更加简洁，更好维护，如果有更好的建议，请在评论区留言~~
动态表格
介绍
ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。文档地址: ProTable
这里的理念，通过简单的数组，构画符合项目的表单~
跟动态表单一样，我这里做了二次分装，在这里我将 表格的 分页器、搜索框、工具栏做了简单的配置，并结合Mask.From(弹出表框)实现新建、导出、编辑、状态、删除、自定义按钮的功能，别结合正则对表单搜索做了些额外的处理~
并设置全局配置文件，使整个系统的表格更好的管理~
目前他在样式上的功能并不是很完善，后期会将常用的属性提取出来~，有什么好的建议也可以通过评论区留言告诉我~~~
在线预览： 动态表格
功能
当你有以下需求时，可以试试本组件:
- 当你需要为系统所有的表格设定统一的样式，如分页器的页数，大小，搜索框的框占位样式等功能~
- 当你需要 新建、导出、编辑、状态、删除等功能，结合接口，一键式构画的时候
- 兼容 ProTable、Mask.From 、From 的所有属性
代码演示
功能演示
基础配置
操作配置
具体代码
文件位置：src/components/Table
全局配置文件：src/utils/Setting/tableSy
如何使用
import { Table } from '@/components';
import type { tableListProps，formProps } from '@/components'
import { queryTable } from './services'
export default () => {
const columns: tableListProps[] = [
{
title: '表头名称',
dataIndex: '接口返回的对应字段',
},
...,
{
title: '操作',
dataIndex: 'option',
type: 'tools',
tools: [
{
method: 'edit', //编辑
edit: {
go: '跳转的页面，如 /list ',
payload: '跳转时所带的参数',
onBeforeStart: (data：any）=> { // 开始执行的方法，用作表单的
const list: formProps[] = [
{
name: 'test1',
default: data.name,
label: '姓名'
},
{
name: 'test2',
label: '随意字符串'
},
]
// return '暂未配置' // 返回对应字符串
return list // 返回列表
},
onEdit: (values: any, record: any) => {}, // 调用接口的参数
maskFrom: {
onRequest: queryTable //请求的接口
},
...
},
{
method: 'state',
state: {} //状态的配置
},
{
method: 'delete',
delete: {} //删除的配置
},
{
fieldRender: (data:any) => { //自定义配置
return React.Node
}
}
]
}
]
return <Table
request={(params, sorter, filter) => queryTable({ ...params, sorter, filter })} //列表请求的接口
tableList={columns} //表单数据
rowKey='key' // 表单的索引，不能相同，接口返回字段的key
search={{
options: [
{
method: 'export', //导出
export：{} // 导出的相关配置
}
]
}}
toolBar={[
{
method: 'creat', //新建
create：{} //新建的配置，与编辑差不多
},
{
fieldRender: (action:any) => { // 自定义按钮
return [<Button>测试</Button>]
}
}
]}
/>
}
特殊说明
- 表单关于一些常用的配置，这里还没有做，完全兼容于ProTabl，如果有更好的建议，请在评论区留言~~
