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 生成詳情頁面。