cruda
1.0.0
cruda Un modelo de vista CRUD proporciona alojamiento de datos, estados y operaciones como submit() / form.name , lo que hace que loading.table desarrolladores creen una vista CRUD más rápido.
Cruda proporciona API unificadas para diferentes UIFrameworks mediante adaptadores Cruda.
<!-- $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 ( ) //PUTPuede establecer valores predeterminados globales de Cruda si todas las escenas tienen el mismo comportamiento en su proyecto.
//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'Puedes modificar la URL/Método para adaptarlo al servicio 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+)
} O configurar API de solo instancia durante la activación
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )* Tenga en cuenta que la clave API debe estar en mayúsculas
CRUD.xApi(apiName, apiUrl, config) se utiliza para ampliar CRUD RESTAPI personalizado. A continuación se muestra un ejemplo
//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 } ) ; Podemos configurar autoResponse para actualizar la vista de tabla automáticamente, esto podría ayudarlo a evitar perder el estado de la página si reload() la página después de agregar/actualizar/eliminar/copiar el envío antes. Un caso típico es que puedes perder todas las jerarquías de TreeTable que abriste antes cuando reload() . A continuación se muestra la configuración.
//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' Después de eso, CRUDA actualizará la vista de tabla. Si desea actualizar manualmente, puede llamar autoProcess() en el siguiente enlace
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} ) Podemos configurar pagination.frontend para habilitar la paginación del 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 ) ;
} Después de habilitar pagination.frontend, el método toQuery/reload ya no solicita el backend, use reset en su lugar
Interruptor de visualización de componentes
- opQuery
- opAgregar
- opActualizar
- opDelete
- opExportar
- opImportar
- ordenar
- opCopiar
Alternar estado de carga
- consulta
- mesa
- del
- entregar
- forma
- exportar
- importar
- clasificar
- Copiar
Contenedor de datos de consulta
Ordenar contenedor de datos
Contenedor de datos de tabla
- datos
- selección
- todas las columnas
- pedidos
- clave de fila ✅
Contenedor de paginación
- tamaño de página ✅
- página actual
- total
- Interfaz
Contenedor de datos del formulario
estado de forma. 0: Normal; 1: Agregar; 2: Actualizar; 3: Ver; 4: Agregar o actualizar
parámetros activos crudos
mensaje de error crudo {nombre, mensaje, estado}
ID de edición de
table.row
clave cruda en instancias múltiples
habilitar/deshabilitar la edición de instantáneas
mapa instantáneo. La clave es
table.row[rowKey]
romperá la validación después de la primera captura
actualizará la vista de tabla automáticamente después de agregar/actualizar/eliminar/copiar
crud.table.data
Se fusionará con la solicitud GET
API de instancia que recuperará el
8. RESTAPI
Habilite el caché de consultas y los datos de caché personalizados mediante el enlace
BEFORE_CACHEo use la respuesta de backend predeterminada como datos de caché. Esta propiedad será verdadera sipagination.frontendestá habilitado.
✅ Indica que se admiten los valores predeterminados globales ⚡ Indica que se admite la activación en forma de objeto
(Cuando
frontendes falsa) Consulta de instancia. Enviar solicitud GET al backend. El argumento 'consulta' se fusionará con $crud.query
Instancia del. Enviar solicitud DELETE al backend
Exportación de instancias. Enviar solicitud GET al backend
Importación de instancias. Utilice
fieldNamepara especificar el nombre del archivo de la solicitud del servidor. Envíe la solicitud POST al backend
Establezca
formStatusen 'Agregar'
Establezca
formStatusen 'Actualizar' y envíe la solicitud GET (predeterminada) al backend
Establezca
formStatusen 'AddOrUpdate' y envíe la solicitud GET (predeterminada) al backend
Establezca
formStatusen 'Ver' y envíe la solicitud GET (predeterminada) al backend
Ordenación de instancias. Enviar solicitud PUT (predeterminada) al backend
Copia de instancia. Enviar solicitud POST (predeterminada) al backend
Establecer
formStatusen 'Normal'
Pasar argumentos a
BEFORE_SUBMIT
Igual que
submit()pero no verificaráformStatus
Igual que
submit()pero no verificaráformStatus
Igual que
submit()pero no verificaráformStatus
*Depende de los adaptadores . Validará uno o más formularios o componentes personalizados (que tienen el método validar()) y luego llamará
submit()
Restablecer paginación y llamar a toQuery()
Devolver restUrl de la instancia
Establecer parámetros de URL
Devolver datos de la fila
Generalmente se usa en eventos de selección de filas como
selection-changeenelement-ui
Generalmente se usa en eventos de clasificación de tablas como
sort-changeenelement-ui, llamarátoQuery()automáticamente
Devolver el contexto de la basura.
Borrar datos de caché y llamar a reload()
Emitir antes de la consulta. Puede modificar los parámetros antes de enviar la solicitud. Cancelable, si se cancela,
AFTER_QUERYno se emitirá
Emitir después de la consulta. Puede configurar los datos de la tabla por 'rs'. Si
pagination.frontendestá habilitado, se pueden usar params y slice() para filtrar y dividir datos de caché
Emitir antes de eliminar. Cancelable, si se cancela,
AFTER_DELETEno se emitirá
Emitir después de eliminar. Utilice
autoProcess()para actualizar la vista de tabla
Emitir antes de agregar. Puede borrar los datos del formulario o generar un UUID. Cancelable, si se cancela, el
formStatusno cambiará. ... argumentos detoAdd()
Emitir después de agregar y antes de
AFTER_SUBMIT. UtiliceautoProcess()para actualizar la vista de tabla
Emitir antes de actualizar. Cancelable, si se cancela el
formStatusno cambiará. Utiliceskip()para detener la consulta detallada yAFTER_DETAILSno se emitirá
Emitir después de la actualización y antes de
AFTER_SUBMIT. UtiliceautoProcess()para actualizar la vista de tabla
Emitir antes de agregar/actualizar. Cancelable, si se cancela el
formStatusno cambiará. UtilicedoView()para consultar detalles
Emitir después de agregar/actualizar y antes de
AFTER_SUBMIT. UtiliceautoProcess()para actualizar la vista de tabla
Emitir antes de ver. Cancelable, si se cancela el
formStatusno cambiará. Utiliceskip()para detener la consulta detallada yAFTER_DETAILSno se emitirá
Se emite después de
toUpdate/toViewyskip()no lo omite
Emitir después de
toUpdateyAFTER_DETAILS
Emitir después de
toViewyAFTER_DETAILS
Emitir antes de enviar el formulario. Cancelable, si se cancela,
AFTER_SUBMITno se emitirá. UtilicesetForm(formObject)para configurar los datos del formulario a enviar
Emitir después de enviar el formulario. Puede recargar la página, enviar aviso aquí. Utilice
autoProcess()para actualizar la vista de tabla
Emitir antes de exportar. Cancelable, si se cancela,
AFTER_EXPORTno se emitirá
Emitir después de completar la exportación
Emitir antes de importar. Puede modificar los parámetros antes de enviar la solicitud. Cancelable, si se cancela,
AFTER_IMPORTno se emitirá
Emitir después de completar la importación
Emitir antes de ordenar. Cancelable, si se cancela,
AFTER_SORTno se emitirá
Emitir después de completar la clasificación
Emitir antes de copiar. Cancelable, si se cancela,
AFTER_COPYno se emitirá
Emitir después de completar la copia. Utilice
autoProcess()para actualizar la vista de tabla
Emitir en caso de error
Emitir después de cancelar() ser llamado
Emitir después de que se llame a submitForm()
Emitir antes de recuperar la instantánea.
Emitir después de habilitar la consulta y
cache. Utilicecache(data)para personalizar los datos del caché
Debe especificar 'crudName' cuando se detectan varias instancias
Rx 【Componente personalizado】
validación de formulario Xxx
Rx 【verificar reglas de validación】
No puedo encontrar [solicitud] en las opciones de instalación
Rx 【Instalar】
table.rowKey es un valor en blanco 'Xxx', puede causar un error - toDelete/Update/View()
Rx 【establecer filaKey un valor no vacío】
