CRUD 组件的畅想

如今已经有 ProTable，ProList, ProFrom ，CRUD 组件已经具备雏形，这里提供一个方案，来将其统一使用。

Entity 实体

实体表明基本的数据结构，这个数据结构应该与后端对应，用于和后端的数据进行映射。同时前端的 CRUD 都应该是基于这个数据的进行逻辑上的计算。

使用方式：

interface Entity = {};

<CRUD<Entity> />
复制代码

Schema 最小配置

单纯的数据没法知足用户的自定义展现功能，因此须要一些配置来将其映射为 antd 的组件。 CRUD 里面须要作一个最小子集的 Schema 来进行操做。

title 列标题

类型：string

• 表格的列 title
• 表单的 label
• Descriptions 的 label

dataIndex 列数据键

类型：string

• 表格从 Entity 中取数据的 key
• 表单的 name，也是 Entity 的 key
• Descriptions 从 Entity 中取数据的 key

render 渲染

类型： (entity, schema) => ReactNode

• 表格数据的展现
• Descriptions 数据的展现
• 表单无需使用

renderFormItem 渲染表单项

类型 ： (entity, schema, form) => ReactNode

• 表格搜索表单的展现
• 表单具体表单项的展现
• Descriptions 无需使用

valueType 数据格式

类型:  (entity,schema,form)=> valueType 做为 render 的语法糖来出现，也会影响 renderFormItem，会有一些具体的映射。 类型： 一系列 string 枚举 

• 表格用于搜索表单的展现和 render 的展现
• 表单具体表单项的展现
• Descriptions 的 render 的展现

valueEnum 数据枚举

类型:  (entity,schema,form)=> valueEnum 做为配合 valueType 的使用， valueEnum 的用于生成 table 的显示，内置了一个 tag 的展现。

• 表格用于展现 tag 和状态列，而且用与生成下拉框
• 表单用于生成下拉框
• Descriptions展现 tag 和状态

FormItemProps 表单项属性

类型:  (entity,schema,form)=> Props 透传给 antd 表单项的 props，用于作一些简单的控制，例如 select 是否多选。

• Descriptions 不须要
• 表格用与控制搜索的字段
• 表单用于控制表单项

formatValue 渲染值的方法

类型： (valueType,value,type: "read"|"edit"|"update")=>  ReactNode | string

提供一个valueType 和 type 为 dom 的方法

CRUD 组件的属性

HeaderTitle 标题

类型：ReactNode | (type)=>ReactNode 配置总体的 title 的展现

• Table 的 操做栏标题
• form 的表单名称（不少时间不存在）
• Descriptions 的标题名（分组）

actionsRender  操做区渲染

类型：(action: UseFetchDataAction<RequestData>,{SelectedRow}) => React.ReactNode[]

• Table 的 操做栏操做项
• Descriptions 的行动按钮（编辑，刷新）
• Form 不须要

newType 新建表单展现形式

类型： drawer | model | page

详情页展现方式默认是 page。

viewType 详情的展现形式

类型： drawer | page

详情页的展现方式 默认是 page。

page 和 onPageChange

类型：

type PageType = "new" | "list" | "view" | "update";
type onPageChange = (page: PageType) => void;
复制代码

用于受控的展现当前页面的类型和 类型修改时的切换。

request 服务器的交互形式

类型:

interface Request {
  list: ( params: { pageSize; current }, sort, filter ) => Promise<{ data: Entity[]; total: number; success: boolean }>;
  get: ( rowKey: string | number, data: Entity ) => Promise<{ data: Entity; success: boolean }>;
  delete: (rowKey: string | number) => Promise<{ success: boolean }>;
  update: (data: Entity) => Promise<{ data: Entity; success: boolean }>;
  newData: (data: Entity) => Promise<{ data: Entity; success: boolean }>;
}

复制代码

CURD 的各个接口，会自动拼接参数。

listType 列表的类型

类型：table | list | cardList 用于展现 list 是基于什么的显示

viewPageRender

类型：(Entity,Schema)=>ReactNode

自定义查看页面的 render

listPageRender

类型：(Entity[],Schema)=>ReactNode

自定义列表的 render

newPageRender

类型：(Schema)=>ReactNode

自定义新建的 render

updatePageRender

类型：(Entity,Schema)=>ReactNode

自定义更新的 render 

actionRef

类型 action:{reload, reset}

用于更新从新加载，和重置为默认格式。

formRef

类型 action:From antd From 的实例。

组件通讯与实现

组件的定义

ProTable 和 ProList

根据 schema 和 entity 数组来渲染 dom，而且包含对 entity 数组进行操做和查看逻辑。

(entity[],schema)=> ReactNode

ProDescriptions

根据 schema 和 entity 来渲染 dom，包含对 entity  进行查看的逻辑。

(entity,schema)=> ReactNode

ProFrom

根据 schema 和 entity 来渲染 dom，包含对 entity  进行新建，更新等操做的逻辑。

(entity,schema)=> ReactNode

组件的功能

ProTable 和 ProDescriptions 有自然的优点能够结合，Table 的 render 中已经有相关的配置，ProDescriptions 直接消费 schema 来进行生成。理想状况下应该是这样的。

同时咱们能够将逻辑内置，ProTable 的 valueType 为 view 的列，默认支持点击跳转，而且 触发 onPageChange，同时将当前的页面信息保存到 url 中。

//修改页
?page=update&id=xxx
//查看页
?page=view&id=xxx
//新建页
?page=new
复制代码

预设行为

CRUD 组件中能够有一些复杂的预设行为，例如很是常见的 删除，新建，查看，编辑。

删除

删除能够做为默认的操做注入的到每列中去，默认提供一个 Popconfirm 气泡确认框来展现确认，确认成功后，刷新列表项。

新建与编辑

新建能够放到 header 的操做区中，点击以后根据 Props 中的 newType 不一样，分别跳页，弹框， 或者抽屉中显示根据 schema 生成的 ProFrom。若是非 page，操做完成后须要进行 table 的刷新。

查看

查看有两种形态，一种是做为默认的操做项，项目中通常还会使用一列做为查看列，给一个 a 标签，而且跳转到新的页面。 在操做去或者查看列点击以后会调用 get 接口，同时将数据根据 schema 生成详情页面。