cruda
1.0.0
Cruda Um modelo de visualização CRUD fornece hospedagem de dados, estados e operações como submit() form.name loading.table , o que faz com que os desenvolvedores construam uma visualização CRUD mais rapidamente.
Cruda fornece APIs unificadas para diferentes UIFrameworks por 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 ( ) //PUTVocê pode definir padrões globais do Cruda se todas as cenas tiverem o mesmo comportamento em seu projeto.
//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'Você pode modificar o URL/método para se adaptar ao serviço de back-end
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 defina API somente de instância durante a ativação
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )* Observe que a chave da API deve estar em maiúscula
CRUD.xApi(apiName, apiUrl, config) é usado para estender CRUD RESTAPI personalizado. Abaixo está um exemplo
//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 atualizar a visualização da tabela automaticamente, isso pode ajudá-lo a evitar a perda do estado da página se você reload() a página após adicionar/atualizar/excluir/copiar o envio antes. Um caso típico é que você pode perder todas as hierarquias de TreeTable que você abriu antes ao reload() . Abaixo está a configuração
//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' Depois disso, a visualização da tabela será atualizada pelo CRUDA. Se você quiser atualizar manualmente, você pode chamar autoProcess() no gancho abaixo
// 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 a paginação 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 ) ;
} Depois de habilitar pagination.frontend, o método toQuery/reload não solicita mais o backend, use reset
Chave de exibição de componentes
- opQuery
- opAdicionar
- opUpdate
- opExcluir
- opExportar
- opImportar
- opSort
- opCopy
Alternar estado de carregamento
- consulta
- mesa
- del
- enviar
- forma
- exportar
- importar
- organizar
- cópia
Consultar contêiner de dados
Classificar contêiner de dados
Contêiner de dados de tabela
- dados
- seleção
- todas as colunas
- pedidos
- rowKey✅
Contêiner de paginação
- tamanho da página ✅
- página atual
- total
- front-end
Contêiner de dados de formulário
estado de forma. 0:Normal;1:Adicionar;2:Atualizar;3:Visualizar;4:AdicionarouAtualizar
parâmetros ativos brutos
mensagem de erro bruto {nome, mensagem, status}
editando o id do
table.row
chave crud em múltiplas instâncias
ativar/desativar edição de instantâneo
mapa instantâneo. A chave é
table.row[rowKey]
irá quebrar a validação após a primeira captura
atualizará a visualização da tabela automaticamente depois de adicionar/atualizar/excluir/copiar
crud.table.data
Será mesclado na solicitação GET
API de instância que irá recuperar o
8. RESTAPI
Habilite o cache de consulta e os dados de cache personalizados por meio do gancho
BEFORE_CACHEou use a resposta de back-end padrão como dados de cache. Esta propriedade será verdadeira sepagination.frontendestiver habilitado.
✅ Indica que os padrões globais são suportados ⚡ Indica que a ativação na forma de objeto é suportada
(Quando
frontendé falso) Consulta de instância. Envie a solicitação GET para o back-end。O argumento 'query' será mesclado com $crud.query
Instância del. Enviar solicitação DELETE para o back-end
Exportação de instância. Enviar solicitação GET para o back-end
Importação de instância. Use
fieldNamepara especificar o nome do arquivo da solicitação do servidor. Envie a solicitação POST para o back-end
Defina
formStatuscomo 'Adicionar'
Defina
formStatuscomo 'Atualizar' e envie a solicitação GET (padrão) para o back-end
Defina
formStatuscomo 'AddOrUpdate' e envie a solicitação GET (padrão) para o back-end
Defina
formStatuscomo 'View' e envie a solicitação GET (padrão) para o back-end
Classificação de instância. Enviar solicitação PUT (padrão) para o back-end
Cópia da instância. Enviar solicitação POST (padrão) para o back-end
Defina
formStatuscomo 'Normal'
Passe argumentos para
BEFORE_SUBMIT
O mesmo que
submit()mas não verificaformStatus
O mesmo que
submit()mas não verificaformStatus
O mesmo que
submit()mas não verificaformStatus
*Depende dos adaptadores . Validará um ou mais Formulários ou CustomComponent (que possui o método valid()) e depois chamará
submit()
Redefinir a paginação e chamar toQuery()
Retornar restUrl da instância
Definir parâmetros de URL
Retornar dados de linha
Geralmente usado em eventos de seleção de linha, como
selection-changeemelement-ui
Geralmente usado em eventos de classificação de tabela como
sort-changeemelement-ui, ele chamarátoQuery()automaticamente
Retorne o contexto do crud
Limpe os dados do cache e chame reload()
Emita antes da consulta. Pode modificar os parâmetros antes do envio da solicitação. Cancelável, se for cancelado o
AFTER_QUERYnão emitirá
Emita após consulta. Pode definir dados da tabela por 'rs'. Se
pagination.frontendestiver habilitado, params e slice() podem ser usados para filtrar e fatiar dados de cache
Emita antes de excluir. Cancelável, se for cancelado o
AFTER_DELETEnão emitirá
Emitir após excluir. Use
autoProcess()para atualizar a visualização da tabela
Emita antes de adicionar. Pode limpar os dados do formulário ou gerar um UUID. Cancelável, se for cancelado o
formStatusnão será alterado. ...argumentos detoAdd()
Emita após add e antes de
AFTER_SUBMIT. UseautoProcess()para atualizar a visualização da tabela
Emita antes da atualização. Cancelável, se for cancelado o
formStatusnão será alterado. Useskip()para interromper a consulta detalhada eAFTER_DETAILSnão emitirá
Emitir após atualização e antes de
AFTER_SUBMIT. UseautoProcess()para atualizar a visualização da tabela
Emita antes de adicionar/atualizar. Cancelável, se for cancelado o
formStatusnão será alterado. UsedoView()para consultar detalhes
Emita após adicionar/atualizar e antes de
AFTER_SUBMIT. UseautoProcess()para atualizar a visualização da tabela
Emita antes de visualizar. Cancelável, se for cancelado o
formStatusnão será alterado. Useskip()para interromper a consulta detalhada eAFTER_DETAILSnão emitirá
Emite após
toUpdate/toViewe não é ignorado porskip()
Emitir após
toUpdateeAFTER_DETAILS
Emitir depois de
toVieweAFTER_DETAILS
Emita antes do envio do formulário. Cancelável, se for cancelado o
AFTER_SUBMITnão emitirá. UsesetForm(formObject)para definir os dados do formulário a serem enviados
Emitir após o envio do formulário. Pode recarregar a página, envie aviso aqui. Use
autoProcess()para atualizar a visualização da tabela
Emitir antes de exportar. Cancelável, se for cancelado o
AFTER_EXPORTnão emitirá
Emitir após conclusão da exportação
Emita antes de importar. Pode modificar os parâmetros antes do envio da solicitação. Cancelável, se for cancelado o
AFTER_IMPORTnão emitirá
Emitir após conclusão da importação
Emita antes de classificar. Cancelável, se for cancelado o
AFTER_SORTnão emitirá
Emitir após a classificação ser concluída
Emita antes de copiar. Cancelável, se for cancelado o
AFTER_COPYnão emitirá
Emita após a conclusão da cópia. Use
autoProcess()para atualizar a visualização da tabela
Emitir em caso de erro
Emitir após cancelar() ser chamado
Emitir após submitForm() ser chamado
Emita antes de recuperar o snapshot
Emita após a consulta e
cacheserem ativados. Usecache(data)para personalizar os dados do cache
Deve especificar 'crudName' quando várias instâncias forem detectadas
Rx 【Componente personalizado】
validação de formulário Xxx
Rx 【verificar regras de validação】
Não é possível encontrar [solicitação] nas opções de instalação
Rx 【Instalar】
table.rowKey é um valor em branco 'Xxx', pode causar um erro - toDelete/Update/View()
Rx 【definir rowKey como um valor não vazio】
