cruda
1.0.0
クルーダCRUD ビュー モデルは、 submit() / form.name loading.tableなどのデータ、状態、操作のホスティングを提供するため、開発者は CRUD ビューをより迅速に構築できます。
Cruda は、Cruda アダプターによってさまざまな UIFramework に統合された 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/メソッドを変更してバックエンドサービスに適応させることができます
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 キーは大文字である必要があることに注意してください
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使用します。
コンポーネントの表示スイッチ
- opQuery
- opAdd
- opUpdate
- op削除
- opExport
- opインポート
- オプソート
- opコピー
読み込み状態を切り替えます
- クエリ
- テーブル
- デル
- 提出する
- 形状
- 輸出
- 輸入
- 選別
- コピー
クエリデータコンテナ
データコンテナの並べ替え
テーブルデータコンテナ
- データ
- 選択
- すべての列
- 注文
- 行キー✅
ページネーションコンテナ
- ページサイズ✅
- 現在のページ
- 合計
- フロントエンド
フォームデータコンテナ
フォームの状態。 0：通常；1：追加；2：更新；3：表示；4：追加または更新
クルードアクティブパラメータ
crud エラー メッセージ{名前、メッセージ、ステータス}
table.rowの ID を編集します
マルチインスタンスの crud キー
スナップショットの編集を有効/無効にする
スナップショットマップ。キーは
table.row[rowKey]です。
最初のキャッチ後に検証が中断されます
crud.table.dataを追加/更新/削除/コピーすると、テーブルビューが自動的に更新されます
GET リクエストにマージされます
8. RESTAPIを回復するインスタンスAPI
BEFORE_CACHEフックによってクエリ キャッシュとカスタム キャッシュ データを有効にするか、キャッシュ データとしてデフォルトのバックエンド応答を使用します。pagination.frontendが有効な場合、このプロパティは true になります。
✅グローバルデフォルトがサポートされていることを示します。 ⚡オブジェクト形式でのアクティブ化がサポートされていることを示します
(
frontendがfalseの場合) インスタンスクエリ。 GET リクエストをバックエンドに送信します。引数「query」は $crud.query とマージされます。
インスタンスのデル。 DELETE リクエストをバックエンドに送信する
インスタンスのエクスポート。 GET リクエストをバックエンドに送信する
インスタンスのインポート。
fieldName使用してサーバーリクエストのファイル名を指定します。 POST リクエストをバックエンドに送信します。
formStatus「追加」に設定します
formStatus「Update」に設定し、GET (デフォルト)リクエストをバックエンドに送信します。
formStatus「AddOrUpdate」に設定し、GET (デフォルト)リクエストをバックエンドに送信します。
formStatus「View」に設定し、GET (デフォルト)リクエストをバックエンドに送信します。
インスタンスの並べ替え。 PUT (デフォルト)リクエストをバックエンドに送信します。
インスタンスのコピー。 POST (デフォルト)リクエストをバックエンドに送信します
formStatus「通常」に設定します
BEFORE_SUBMITに引数を渡します
submit()と同じですが、formStatusはチェックされません
submit()と同じですが、formStatusはチェックされません
submit()と同じですが、formStatusはチェックされません
*アダプターに依存します。1つ以上のFormまたはCustomComponent(validate()メソッドを持つ)を検証し、
submit()を呼び出します。
ページネーションをリセットし、toQuery() を呼び出します。
インスタンスのrestUrlを返す
URLパラメータを設定する
行データを返す
通常、
element-uiのselection-changeなどの行選択イベントで使用されます。
通常、
element-uiのsort-changeなどのテーブル ソート イベントで使用され、自動的にtoQuery()呼び出します。
ククラッドのコンテキストを返す
キャッシュデータをクリアして reload() を呼び出す
クエリの前に出力します。リクエストを送信する前にパラメータを変更できます。キャンセル可能。キャンセルされた場合、
AFTER_QUERYは発行されません。
クエリ後に発行します。 'rs'でテーブルデータを設定できます。
pagination.frontendが有効になっている場合、params とスライス() を使用してキャッシュ データをフィルタリングおよびスライスできます。
削除する前に発行します。キャンセル可能。キャンセルされた場合、
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に空でない値を設定】
