cruda
1.0.0
Cruda Un modèle de vue CRUD fournit l'hébergement de données, d'états et d'opérations telles que submit() / form.name / loading.table , ce qui permet aux développeurs de créer une vue CRUD plus rapidement.
Cruda fournit des API unifiées pour différents UIFrameworks par Cruda-adapters.
<!-- $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 ( ) //PUTVous pouvez définir les paramètres globaux par défaut de Cruda si toutes les scènes ont le même comportement dans votre projet.
//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'Vous pouvez modifier l'URL/la méthode pour vous adapter au service backend
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+)
} Ou définissez une API d'instance uniquement lors de l'activation
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )* Notez que la clé API doit être en majuscule
CRUD.xApi(apiName, apiUrl, config) est utilisé pour étendre le CRUD RESTAPI personnalisé. Ci-dessous un exemple
//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 } ) ; Nous pouvons configurer autoResponse pour actualiser automatiquement la vue du tableau, cela pourrait vous aider à éviter de perdre l'état de la page si vous reload() la page après l'ajout/mise à jour/suppression/copie de la soumission auparavant. Un cas typique est que vous risquez de perdre toutes les hiérarchies de TreeTable que vous avez ouvertes auparavant lorsque vous reload() . Ci-dessous la configuration
//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' Après cela, la vue du tableau sera actualisée par CRUDA. Si vous souhaitez actualiser manuellement, vous pouvez appeler autoProcess() dans le hook ci-dessous
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} ) Nous pouvons configurer pagination.frontend pour activer la 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 ) ;
} Après avoir activé pagination.frontend, la méthode toQuery/reload ne demande plus au backend, utilisez plutôt reset
Commutateur d'affichage des composants
- opQuery
- opAdd
- opUpdate
- opSupprimer
- opExporter
- opImport
- opérationTri
- opCopie
Basculer l'état de chargement
- requête
- tableau
- del
- soumettre
- formulaire
- exporter
- importer
- trier
- copie
Conteneur de données de requête
Trier le conteneur de données
Conteneur de données de table
- données
- sélection
- toutes les colonnes
- ordres
- RowKey✅
Conteneur de pagination
- taille de la page✅
- Page actuelle
- total
- l'extrémité avant
Conteneur de données de formulaire
état de forme. 0：Normal；1：Ajouter；2：Mettre à jour；3：Afficher；4：AddOrUpdate
paramètres actifs bruts
msg d'erreur crud{nom，message，statut}
édition de l'identifiant de la
table.row
clé crud en multi-instance
activer/désactiver l'édition d'un instantané
carte instantanée. La clé est
table.row[rowKey]
brisera la validation après la première capture
mettra automatiquement à jour la vue du tableau après avoir ajouté/mis à jour/supprimé/copier
crud.table.data
Fusionnera dans la requête GET
API d'instance qui récupérera le
8. RESTAPI
Activez le cache de requêtes et les données de cache personnalisées via le hook
BEFORE_CACHEou utilisez la réponse backend par défaut comme données de cache. Cet accessoire sera vrai sipagination.frontendest activé.
✅ Indique que les valeurs globales par défaut sont prises en charge ⚡ Indique que l'activation sous forme d'objet est prise en charge
(Lorsque
frontendest fausse) Requête d'instance. Envoyez la requête GET au backend. L'argument 'query' fusionnera avec $crud.query
Instance del. Envoyer la demande DELETE au backend
Exportation d'instances. Envoyer la requête GET au backend
Importation d'instances. Utilisez
fieldNamepour spécifier le nom de fichier de la requête du serveur. Envoyez la requête POST au backend
Définissez
formStatussur « Ajouter »
Définissez
formStatussur « Mettre à jour » et envoyez la demande GET (par défaut) au backend
Définissez
formStatussur « AddOrUpdate » et envoyez la requête GET (par défaut) au backend
Définissez
formStatussur « View » et envoyez la requête GET (par défaut) au backend
Tri des instances. Envoyer la requête PUT (par défaut) au backend
Copie d'instance. Envoyer une requête POST (par défaut) au backend
Définir
formStatussur « Normal »
Transmettre les arguments à
BEFORE_SUBMIT
Identique
submit()mais ne vérifiera pasformStatus
Identique
submit()mais ne vérifiera pasformStatus
Identique
submit()mais ne vérifiera pasformStatus
* Dépend des adaptateurs . Validera un ou plusieurs formulaires ou composants personnalisés (qui ont la méthode validate()), puis appellera
submit()
Réinitialiser la pagination et appeler toQuery()
Renvoie l'URL rest de l'instance
Définir les paramètres d'URL
Renvoie les données de la ligne
Habituellement utilisé dans un événement de sélection de ligne comme
selection-changedanselement-ui
Habituellement utilisé dans un événement de tri de table comme
sort-changedanselement-ui, il appellera automatiquementtoQuery()
Renvoie le contexte du crud
Effacez les données du cache et appelez reload()
Émettre avant la requête. Peut modifier les paramètres avant l'envoi de la demande. Annulable, s'il est annulé,
AFTER_QUERYn'émettra pas
Émettre après requête. Peut définir les données du tableau par 'rs'. Si
pagination.frontendest activé, params et slice() peuvent être utilisés pour filtrer et découper les données du cache
Émettre avant de supprimer. Annulable, s'il est annulé,
AFTER_DELETEn'émettra pas
Émettre après suppression. Utilisez
autoProcess()pour mettre à jour la vue table
Émettre avant d'ajouter. Peut effacer les données du formulaire ou générer un UUID. Annulable, en cas d'annulation, le
formStatusne sera pas modifié. ...arguments detoAdd()
Émettre après l'ajout et avant
AFTER_SUBMIT. UtilisezautoProcess()pour mettre à jour la vue table
Émettre avant la mise à jour. Annulable, en cas d'annulation, le
formStatusne sera pas modifié. Utilisezskip()pour arrêter la requête détaillée etAFTER_DETAILSn'émettra pas
Émettre après la mise à jour et avant
AFTER_SUBMIT. UtilisezautoProcess()pour mettre à jour la vue table
Émettre avant l'ajout/la mise à jour. Annulable, en cas d'annulation, le
formStatusne sera pas modifié. UtilisezdoView()pour interroger les détails
Émettre après l'ajout/la mise à jour et avant
AFTER_SUBMIT. UtilisezautoProcess()pour mettre à jour la vue table
Émettre avant la vue. Annulable, en cas d'annulation, le
formStatusne sera pas modifié. Utilisezskip()pour arrêter la requête détaillée etAFTER_DETAILSn'émettra pas
Émis après
toUpdate/toViewet n'est pas ignoré parskip()
Émettre après
toUpdateetAFTER_DETAILS
Émettre après
toViewetAFTER_DETAILS
Émettre avant la soumission du formulaire. Annulable, s'il est annulé, l'
AFTER_SUBMITne sera pas émis. UtilisezsetForm(formObject)pour définir les données du formulaire à soumettre
Émettre après la soumission du formulaire. Peut recharger la page, envoyer un avis ici. Utilisez
autoProcess()pour mettre à jour la vue table
Émettre avant l'exportation. Annulable, s'il est annulé,
AFTER_EXPORTn'émettra pas
Émettre une fois l'exportation terminée
Émettre avant l'importation. Peut modifier les paramètres avant l'envoi de la demande. Annulable, s'il est annulé, l'
AFTER_IMPORTn'émettra pas
Émettre une fois l'importation terminée
Émettre avant le tri. Annulable, s'il est annulé, l'
AFTER_SORTn'émettra pas
Émettre une fois le tri terminé
Émettre avant de copier. Annulable, s'il est annulé, l'
AFTER_COPYn'émettra pas
Émettre une fois la copie terminée. Utilisez
autoProcess()pour mettre à jour la vue table
Émettre en cas d'erreur
Émettre après l'appel de Cancel()
Émettre après l'appel de submitForm()
Émettre avant de récupérer l'instantané
Émettre après que la requête et
cachesoient activés. Utilisercache(data)pour personnaliser les données du cache
Doit spécifier 'crudName' lorsque plusieurs instances sont détectées
Rx 【Composant personnalisé】
validation du formulaire Xxx
Rx 【vérifier les règles de validation】
Impossible de trouver [requête] dans les options d'installation
Rx 【Installer】
table.rowKey est une valeur vide 'Xxx', cela peut provoquer une erreur - toDelete/Update/View()
Rx 【définir rowKey une valeur non vide】
