cruda
1.0.0
Cruda Ein CRUD-Ansichtsmodell ermöglicht das Hosten von Daten, Zuständen und Vorgängen wie submit() / form.name / loading.table , wodurch Entwickler CRUD-Ansichten schneller erstellen können.
Cruda bietet durch Cruda-Adapter einheitliche APIs für verschiedene UIFrameworks.
<!-- $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 ( ) //PUTSie können globale Standardeinstellungen für Cruda festlegen, wenn alle Szenen in Ihrem Projekt das gleiche Verhalten aufweisen.
//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'Sie können die URL/Methode ändern, um sie an den Backend-Dienst anzupassen
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+)
} Oder legen Sie bei der Aktivierung eine Nur-Instanz-API fest
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )* Beachten Sie, dass der API-Schlüssel in Großbuchstaben angegeben werden muss
CRUD.xApi(apiName, apiUrl, config) wird zum Erweitern der benutzerdefinierten CRUD-RESTAPI verwendet. Unten finden Sie ein Beispiel
//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 } ) ; Wir können autoResponse so konfigurieren, dass die Tabellenansicht automatisch aktualisiert wird. Dies kann Ihnen dabei helfen, den Verlust des Seitenstatus zu vermeiden, wenn Sie die Seite nach der Übermittlung zum Hinzufügen/Aktualisieren/Löschen/Kopieren zuvor reload() . Ein typischer Fall ist, dass Sie möglicherweise alle zuvor geöffneten TreeTable-Hierarchien verlieren, wenn Sie reload() . Unten ist die Konfiguration
//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' Danach wird die Tabellenansicht von CRUDA aktualisiert. Wenn Sie manuell aktualisieren möchten, können Sie im Hook unten autoProcess() aufrufen
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} ) Wir können pagination.frontend konfigurieren, um die Frontend-Paginierung zu aktivieren
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 ) ;
} Nach der Aktivierung von pagination.frontend fordert die Methode toQuery/reload das Backend nicht mehr an, sondern verwenden Sie stattdessen reset
Anzeigewechsel der Komponenten
- opQuery
- opAdd
- opUpdate
- opDelete
- opExport
- opImport
- opSort
- opCopy
Ladestatus umschalten
- Abfrage
- Tisch
- del
- einreichen
- bilden
- Export
- Import
- Sortieren
- Kopie
Datencontainer abfragen
Datencontainer sortieren
Tabellendatencontainer
- Daten
- Auswahl
- allColumns
- Bestellungen
- rowKey✅
Paginierungscontainer
- Seitengröße✅
- aktuelle Seite
- gesamt
- Frontend
Formulardatencontainer
Formzustand. 0: Normal; 1: Hinzufügen; 2: Aktualisieren; 3: Anzeigen; 4: Hinzufügen oder Aktualisieren
grobe aktive Parameter
grobe Fehlermeldung {Name, Nachricht, Status}
Bearbeitungs-ID der
table.row
Rohschlüssel in mehreren Instanzen
Bearbeiten des Schnappschusses aktivieren/deaktivieren
Snapshot-Karte. Der Schlüssel ist
table.row[rowKey]
unterbricht die Validierung nach dem ersten Fang
aktualisiert die Tabellenansicht automatisch, nachdem Sie
crud.table.datahinzugefügt/aktualisiert/löscht/kopiert haben
Wird in die GET-Anfrage eingefügt
Instanz-API, die die
8. RESTAPIwiederherstellt
Aktivieren Sie den Abfrage-Cache und benutzerdefinierte Cache-Daten mit dem Hook
BEFORE_CACHEoder verwenden Sie die Standard-Backend-Antwort als Cache-Daten. Diese Requisite ist wahr, wennpagination.frontendaktiviert ist.
✅ Zeigt an, dass globale Standardeinstellungen unterstützt werden . ⚡ Zeigt an, dass die Aktivierung in Objektform unterstützt wird
(Wenn
frontend„false“ ist) Instanzabfrage. Senden Sie eine GET-Anfrage an das Backend. Das Argument „query“ wird mit $crud.query zusammengeführt
Instanz del. Senden Sie eine DELETE-Anfrage an das Backend
Instanzexport. Senden Sie eine GET-Anfrage an das Backend
Instanzimport. Verwenden Sie
fieldName, um den Dateinamen der Serveranfrage anzugeben. Senden Sie eine POST-Anfrage an das Backend
formStatusauf „Hinzufügen“ setzen
Setzen Sie
formStatusauf „Update“ und senden Sie eine GET-Anfrage (Standard) an das Backend
Setzen Sie
formStatusauf „AddOrUpdate“ und senden Sie eine GET-Anfrage (Standard) an das Backend
Setzen Sie
formStatusauf „View“ und senden Sie eine GET-Anfrage (Standard) an das Backend
Instanzsortierung. Senden Sie eine PUT-Anfrage (Standard) an das Backend
Instanzkopie. Senden Sie eine POST-Anfrage (Standard) an das Backend
formStatusauf „Normal“ setzen
Übergeben Sie Argumente an
BEFORE_SUBMIT
Identisch mit
submit()prüft jedoch nichtformStatus
Identisch mit
submit()prüft jedoch nichtformStatus
Identisch mit
submit()prüft jedoch nichtformStatus
*Hängt von den Adaptern ab . Validiert ein oder mehrere Formulare oder benutzerdefinierte Komponenten (die über die Methode „validate()“ verfügen) und ruft dann
submit()auf.
Paginierung zurücksetzen und toQuery() aufrufen
RestUrl der Instanz zurückgeben
Legen Sie URL-Parameter fest
Zeilendaten zurückgeben
Wird normalerweise bei Zeilenauswahlereignissen wie
selection-changeinelement-uiverwendet
Wird normalerweise in Tabellensortierereignissen wie
sort-changeinelement-uiverwendet und rufttoQuery()automatisch auf
Gibt den Kontext des Rohmaterials zurück
Cache-Daten löschen und reload() aufrufen
Vor der Abfrage ausgeben. Kann die Parameter vor dem Senden der Anfrage ändern. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_QUERYnicht ausgegeben
Nach Abfrage ausgeben. Kann Tabellendaten durch „rs“ festlegen. Wenn
pagination.frontendaktiviert ist, können Parameter und Slice() zum Filtern und Slice-Cache-Daten verwendet werden
Vor dem Löschen ausgeben. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_DELETEnicht ausgegeben
Nach dem Löschen ausgeben. Verwenden Sie
autoProcess()um die Tabellenansicht zu aktualisieren
Vor dem Hinzufügen ausgeben. Kann die Formulardaten löschen oder eine UUID generieren. Stornierbar. Bei Stornierung wird der
formStatusnicht geändert. ...Argumente vontoAdd()
Nach dem Hinzufügen und vor
AFTER_SUBMITausgeben. Verwenden SieautoProcess()um die Tabellenansicht zu aktualisieren
Vor dem Update ausgeben. Stornierbar. Bei Stornierung wird der
formStatusnicht geändert. Verwenden Sieskip()um die Detailabfrage zu stoppen, undAFTER_DETAILSwird nicht ausgegeben
Nach dem Update und vor
AFTER_SUBMITausgeben. Verwenden SieautoProcess()um die Tabellenansicht zu aktualisieren
Vor dem Hinzufügen/Aktualisieren ausgeben. Stornierbar. Bei Stornierung wird der
formStatusnicht geändert. Verwenden SiedoView()um Details abzufragen
Nach dem Hinzufügen/Aktualisieren und vor
AFTER_SUBMITausgeben. Verwenden SieautoProcess()um die Tabellenansicht zu aktualisieren
Vor der Ansicht aussenden. Stornierbar. Bei Stornierung wird der
formStatusnicht geändert. Verwenden Sieskip()um die Detailabfrage zu stoppen, undAFTER_DETAILSwird nicht ausgegeben
Wird nach
toUpdate/toViewausgegeben und wird vonskip()nicht übersprungen.
Nach
toUpdateundAFTER_DETAILSausgeben
Nach
toViewundAFTER_DETAILSausgeben
Vor dem Absenden des Formulars senden. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_SUBMITnicht ausgegeben. Verwenden SiesetForm(formObject)um die zu sendenden Formulardaten festzulegen
Nach dem Absenden des Formulars senden. Kann die Seite neu laden, Benachrichtigung hier senden. Verwenden Sie
autoProcess()um die Tabellenansicht zu aktualisieren
Vor dem Export ausgeben. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_EXPORTnicht ausgegeben
Nach Abschluss des Exports ausgeben
Vor dem Import ausgeben. Kann die Parameter vor dem Senden der Anfrage ändern. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_IMPORTnicht ausgegeben
Nach Abschluss des Imports ausgeben
Vor dem Sortieren ausgeben. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_SORTnicht ausgegeben
Nach Abschluss der Sortierung ausgeben
Vor dem Kopieren ausgeben. Abbrechbar, wenn es abgebrochen wird, wird
AFTER_COPYnicht ausgegeben
Nach Abschluss des Kopiervorgangs ausgeben. Verwenden Sie
autoProcess()um die Tabellenansicht zu aktualisieren
Bei Fehler ausgeben
Nach dem Aufruf von cancel() ausgeben
Nach dem Aufruf vonsubmitForm() ausgeben
Vor dem Wiederherstellen des Snapshots ausgeben
Nach Abfrage ausgeben und
cacheaktiviert ist. Verwenden Siecache(data)um die Cache-Daten anzupassen
Wenn mehrere Instanzen erkannt werden, muss „crudName“ angegeben werden
Rx 【Benutzerdefinierte Komponente】
Formularvalidierung Xxx
Rx 【Validierungsregeln prüfen】
[request] kann in den Installationsoptionen nicht gefunden werden
Rx 【Installieren】
table.rowKey ist ein leerer Wert „Xxx“, es kann einen Fehler verursachen – toDelete/Update/View()
Rx 【setze rowKey auf einen nicht leeren Wert】
