CRUD 组件的畅想

陈帅_2144
868 阅读4分钟

现在已经有 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 气泡确认框来展示确认，确认成功后，刷新列表项。 image.png

新建与编辑

新建可以放到 header 的操作区中，点击之后根据 Props 中的 newType 不同，分别跳页，弹框， 或者抽屉中显示根据 schema 生成的 ProFrom。如果非 page，操作完成后需要进行 table 的刷新。 image.png

查看

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

avatar
文章
阅读
粉丝