cruda
1.0.0
克魯達CRUD 視圖模型提供資料、狀態和操作（例如submit() / form.name loading.table的託管，這使得開發人員可以更快地建立CRUD 視圖。
Cruda 透過 Cruda-adapters 為不同的 UIFrameworks 提供統一的 API。
<!-- $crud.query (query data hosting) -->
< el-input v-model =" $crud.query.xxx " > </ el-input >
<!-- $crud.table.data (table data hosting) -->
< el-table v-model =" $crud.table.data " > </ el-table >
<!-- $crud.form (form data hosting) -->
< el-form :model =" $crud.form " > </ el-form >
<!-- $crud.table.data (tree data hosting) -->
< el-tree :model =" $crud.table.data " > </ el-tree > $crud . submit ( formEl ) //submit form
$crud . reload ( ) //reload table
$crud . cancel ( ) //cancel form <!-- loading.query will be set automatically when reload() is called -->
< button class =" ... " :loading =" $crud.loading.query " @click =" $crud.reload() " >
查询
</ button > /* when you call the toQuery(), Cruda will
1. set loading.query to True
2. package query, pagination, order, ...
3. emit hooks
4. catch exceptions
5. ...
*/
$crud . toQuery ( ) $crud . toQuery ( ) //GET
$crud . toDelete ( ) //DELETE
$crud . doUpdate ( ) //PUT如果專案中所有場景都具有相同的行為，您可以設定 Cruda 的全域預設值。
//what properties does 'rs' have depends on the backend return value
CRUD . defaults [ CRUD . HOOK . AFTER_QUERY ] = function ( crud , rs ) {
crud . pagination . total = rs . data . total
crud . table . data = rs . data . records || [ ]
}
CRUD . defaults . pagination . pageSize = 10
CRUD . defaults . view . opQuery = true
CRUD . defaults . table . rowKey = 'id'可以修改URL/Method來適配後端服務
CRUD . RESTAPI = {
QUERY : { url : "" , method : "GET" } ,
QUERY_DETAILS : { url : "/{id}" , method : "GET" } , //(v1.20+)
ADD : { url : "" , method : "POST" } ,
UPDATE : { url : "" , method : "PUT" } ,
DELETE : { url : "" , method : "DELETE" } ,
EXPORT : { url : "/export" , method : "GET" } ,
IMPORT : { url : "/import" , method : "POST" } ,
SORT : { url : "/sort" , method : "PUT" } ,
COPY : { url : "/copy" , method : "POST" } ,
ADD_OR_UPDATE : { url : "/addorupdate" , method : "POST" } , //(v1.20+)
} 或在啟動時設定僅實例 API
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )*注意api key必須大寫
CRUD.xApi(apiName, apiUrl, config)用於擴充自訂 CRUD RESTAPI。下面是一個例子
//1. Extends an API. After that it will
/**
* a. Attach a method 'toClone' to the CRUD instance
* b. Add 'BEFORE_CLONE' and 'AFTER_CLONE' to CRUD.HOOK
*/
CRUD . xApi ( 'clone' , '/clone' , { method : 'POST' } )
//2. Add listener
onHook ( this , CRUD . HOOK . AFTER_CLONE , ( crud , rs ) => {
console . log ( 'xApi-->' , rs . data )
} )
//3. Call toClone
this . $crud . toClone ( { x : 1 , y : 2 } ) ;我們可以設定autoResponse自動刷新表格視圖，這可以幫助您避免在新增/更新/刪除/複製提交後reload()頁面時遺失頁面狀態。典型的情況是，當您reload()時，您可能會遺失先前開啟的所有 TreeTable 層次結構。下面是配置
//1. Set a response validator to check if the response is valid
$crud . autoResponse . validator = ( response : { status : number } ) => {
return response . status === 200
}
//2. For such an Add-Oper like add/copy/import/..., it must set a getter in order to obtain new records with primary key from backend
CRUD . defaults . autoResponse . getter = ( response : any ) => {
return [ response . data ]
}
//2. If primary keys are generated at frontend, you can either return submitRows
CRUD . defaults . autoResponse . getter = ( response : any , submitRows ?: any [ ] ) => {
return submitRows
}
//3. For TreeTable, you need set parentKeyField in order to find parentNode. Default 'pid'
CRUD . defaults . autoResponse . parentKeyField = 'pid'
//4. Set insert position with 'head/tail'. Default 'head'
CRUD . defaults . autoResponse . position = 'head'
//4. For TreeTable, you need set childrenKeyField in order to find childNodes. Default 'children'
CRUD . defaults . autoResponse . childrenKeyField = 'children'之後，表格視圖將由CRUDA刷新。如果你想手動刷新，你可以在下面的鉤子中呼叫autoProcess()
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} )我們可以設定pagination.frontend來啟用前端分頁
useCrud ( {
...
pagination : {
//enable
frontend : true ,
}
} )
//Set global cache hook(Optional)
CRUD . defaults [ CRUD . HOOK . BEFORE_CACHE ] = function ( crud , rs , cache ) {
//cache custom data
cache ( {
data : {
rows : rs . data . rows ,
total : rs . data . total
}
} )
}
CRUD . defaults [ CRUD . HOOK . AFTER_QUERY ] = function ( crud , rs , params , slice ) {
//filter cache data
const keyword = params . keyword
let list = filter ( defaultTo ( rs . data . rows , [ ] ) , ( item : any ) => {
return test ( item . email , keyword ) ||
test ( item . uname , keyword ) ||
test ( item . ip , keyword ) ||
test ( item . domain , keyword )
} )
crud . pagination . total = defaultTo ( list . length , 0 ) ;
//use slice() to slice list. If pagination.frontend is disabled, slice() will return the list directly
crud . table . data = slice ( list ) ;
}啟用pagination.frontend後， toQuery/reload方法不再要求後端，而是使用reset
組件顯示開關
- 操作查詢
- 操作添加
- 更新操作
- 刪除操作
- 導出操作
- 導入
- 排序
- 複製
切換載入狀態
- 詢問
- 桌子
- 德爾
- 提交
- 形式
- 出口
- 進口
- 種類
- 複製
查詢資料容器
將資料容器進行排序
表格資料容器
- 數據
- 選擇
- 所有列
- 訂單
- 行鍵✅
分頁容器
- 頁面大小✅
- 目前頁
- 全部的
- 前端
表單資料容器
形成狀態。 0：正常；1：新增；2：更新；3：檢視；4：新增或更新
增刪改查活動參數
增刪改查錯誤訊息{名稱，訊息，狀態}
編輯
table.row的id
多執行個體中的 CRUD 鍵
啟用/停用編輯快照
快照地圖。重點是
table.row[rowKey]
將在第一次捕獲後破壞驗證
新增/更新/刪除/複製
crud.table.data後將自動更新表格視圖
會合併到GET請求中
將還原
8. RESTAPI的實例api
透過鉤子
BEFORE_CACHE啟用查詢快取和自訂快取資料或使用預設後端回應作為快取資料。如果啟用pagination.frontend則此屬性將為 true。
✅表示支援全域預設值⚡表示支援物件形式激活
（當
frontend為 false 時）實例查詢。向後端發送 GET 請求。
實例刪除。向後端發送DELETE請求
實例導出。向後端發送GET請求
實例導入。使用
fieldName指定伺服器請求的檔案名稱。
將
formStatus設定為“新增”
將
formStatus設定為「Update」並向後端發送 GET （預設）請求
將
formStatus設定為「AddOrUpdate」並向後端發送 GET （預設）請求
將
formStatus設定為「View」並向後端發送 GET （預設）請求
實例排序。向後端發送PUT （預設）請求
實例副本。向後端發送POST （預設）請求
將
formStatus設定為“正常”
將參數傳遞給
BEFORE_SUBMIT
與
submit()相同，但不會檢查formStatus
與
submit()相同，但不會檢查formStatus
與
submit()相同，但不會檢查formStatus
submit()取決於適配器。
重置分頁並呼叫 toQuery()
傳回實例的restUrl
設定網址參數
傳回行數據
通常用於行選擇事件，例如
element-ui中的selection-change
通常用於表格排序事件，例如
element-ui中的sort-change，它會自動呼叫toQuery()
返回 crud 的上下文
清除快取資料並呼叫reload()
在查詢之前發出。可以在請求發送之前修改參數。可取消，如果被取消，
AFTER_QUERY將不會發出
查詢後發出。可以透過'rs'設定表格資料。如果啟用
pagination.frontend，則可以使用params和slice()對快取資料進行過濾和切片
刪除前發出。可取消，如果取消，
AFTER_DELETE將不會發出
刪除後發出。使用
autoProcess()更新表視圖
添加之前發出。可以清除表單資料或產生UUID。可取消，取消後
formStatus不會改變。 ...來自toAdd()參數
在 add 之後和
AFTER_SUBMIT之前發出。使用autoProcess()更新表視圖
更新前發出。可取消，取消後
formStatus不會改變。使用skip()停止詳細查詢且AFTER_DETAILS不會發出
在更新之後和
AFTER_SUBMIT之前發出。使用autoProcess()更新表視圖
在新增/更新之前發出。可取消，取消後
formStatus不會改變。使用doView()查詢詳情
在添加/更新之後和
AFTER_SUBMIT之前發出。使用autoProcess()更新表視圖
在查看之前發出。可取消，取消後
formStatus不會改變。使用skip()停止詳細查詢且AFTER_DETAILS不會發出
在
toUpdate/toView之後發出，並且不會被skip()跳過
在
toUpdate和AFTER_DETAILS之後發出
在
toView和AFTER_DETAILS之後發出
在表單提交之前發出。可取消，如果取消，
AFTER_SUBMIT將不會發出。使用setForm(formObject)設定要提交的表單數據
表單提交後發出。可以重新載入頁面，在此處發送通知。使用
autoProcess()更新表視圖
導出前發出。可取消，如果被取消，
AFTER_EXPORT將不會發出
匯出完成後發出
導入前發出。可以在請求發送之前修改參數。可取消，如果被取消，
AFTER_IMPORT將不會發出
導入完成後發出
排序前發出。可取消，如果取消，
AFTER_SORT將不會發出
排序完成後發出
在複製之前發出。可取消，如果取消，
AFTER_COPY將不會發出
複製完成後發出。使用
autoProcess()更新表視圖
出錯時發出
呼叫 cancel() 後發出
呼叫submitForm()後發出
在恢復快照之前發出
啟用查詢和
cache後發出。使用cache(data)自訂快取數據
偵測到多個實例時必須指定“crudName”
Rx 【自訂元件】
表單驗證 Xxx
Rx【查看驗證規則】
在安裝選項中找不到[請求]
接收【安裝】
table.rowKey 是一個空白值“Xxx”，它可能會導致錯誤 - toDelete/Update/View()
Rx【設定rowKey為非空值】
