melhoria no IA.md
This commit is contained in:
parent
f396203085
commit
cb81107199
1 changed files with 111 additions and 13 deletions
122
IA.md
122
IA.md
|
|
@ -309,17 +309,115 @@ export default defineComponent({
|
|||
O componente `EliTabela` suporta ordenação, paginação, busca e **filtro avançado**.
|
||||
Para type-safety, recomenda-se definir a estrutura da consulta usando `EliTabelaConsulta<T>`.
|
||||
|
||||
### Barra de Busca e Filtros
|
||||
|
||||
O `EliTabela` oferece duas formas principais de filtrar dados:
|
||||
1. **Busca Textual Simples**: Uma caixa de busca global.
|
||||
2. **Filtro Avançado**: Um modal para composição de filtros específicos por coluna.
|
||||
|
||||
#### 1. Busca Textual Simples
|
||||
|
||||
Para habilitar, defina `mostrarCaixaDeBusca: true`.
|
||||
O termo digitado será passado para a função `consulta` no parâmetro `texto_busca`.
|
||||
|
||||
```ts
|
||||
mostrarCaixaDeBusca: true,
|
||||
consulta: async ({ texto_busca }) => {
|
||||
// Use 'texto_busca' para filtrar no backend (ex: ILIKE %texto%)
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. Filtro Avançado
|
||||
|
||||
Permite que o usuário crie filtros complexos (ex: "Data > X" E "Status = Y").
|
||||
Você define os campos disponíveis em `filtroAvancado`.
|
||||
|
||||
Cada definição de filtro precisa de:
|
||||
- `rotulo`: Nome exibido ao usuário.
|
||||
- `coluna`: Chave do dado (`keyof T`) a ser filtrada.
|
||||
- `operador`: Operação padrão (ex: `like`, `=`, `>`, `<`, `>=`, `<=`, `!=`, `in`, `between`).
|
||||
- `entrada`: Definição do componente de entrada (`EliEntrada*`) usado para capturar o valor.
|
||||
|
||||
> **Dica de Tipagem**: O campo `entrada` espera uma tupla `[Tipo, Opcoes]`. Devido à complexidade do TypeScript, pode ser necessário usar `as any` ou castar para `ComponenteEntrada`.
|
||||
|
||||
```ts
|
||||
filtroAvancado: [
|
||||
{
|
||||
rotulo: "Nome do Cliente",
|
||||
coluna: "nome", // chave em T
|
||||
operador: "like",
|
||||
// Configuração do input (igual ao usar EliEntradaTexto)
|
||||
entrada: ["texto", { rotulo: "Digite o nome", placeholder: "Ex: João" }] as any,
|
||||
},
|
||||
{
|
||||
rotulo: "Data de Criação",
|
||||
coluna: "criado_em",
|
||||
operador: ">=",
|
||||
// Configuração do input (EliEntradaDataHora)
|
||||
entrada: ["dataHora", { rotulo: "A partir de", modo: "data" }] as any,
|
||||
},
|
||||
{
|
||||
rotulo: "Status",
|
||||
coluna: "status",
|
||||
operador: "=",
|
||||
// Configuração do input com seleção
|
||||
entrada: ["selecao", {
|
||||
rotulo: "Selecione",
|
||||
itens: () => [
|
||||
{ chave: "ativo", rotulo: "Ativo" },
|
||||
{ chave: "inativo", rotulo: "Inativo" }
|
||||
]
|
||||
}] as any
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### Processando a Consulta
|
||||
|
||||
A função `consulta` recebe um objeto com todos os parâmetros necessários para buscar os dados corretamente.
|
||||
|
||||
```ts
|
||||
consulta: async (params) => {
|
||||
const {
|
||||
offSet, // Paginação: pular N registros
|
||||
limit, // Paginação: limite por página
|
||||
texto_busca, // Busca simples (string | undefined)
|
||||
coluna_ordem, // Ordenação: qual coluna
|
||||
direcao_ordem, // Ordenação: "asc" | "desc"
|
||||
filtros // Array de filtros aplicados pelo usuário
|
||||
} = params;
|
||||
|
||||
// Exemplo de estrutura de 'filtros':
|
||||
// [
|
||||
// { coluna: "nome", operador: "like", valor: "Ana" },
|
||||
// { coluna: "criado_em", operador: ">=", valor: "2024-01-01" }
|
||||
// ]
|
||||
|
||||
console.log("Buscando dados...", params);
|
||||
|
||||
// ... chamada à API ...
|
||||
|
||||
return {
|
||||
cod: 0,
|
||||
eCerto: true,
|
||||
eErro: false,
|
||||
mensagem: undefined,
|
||||
valor: {
|
||||
// Retorne SEMPRE o total real de registros para a paginação funcionar
|
||||
quantidade: 100,
|
||||
valores: [ /* ... array de T ... */ ]
|
||||
},
|
||||
};
|
||||
},
|
||||
```
|
||||
|
||||
### Exemplo Completo Tipado
|
||||
|
||||
```ts
|
||||
import { defineComponent } from "vue";
|
||||
import { EliTabela, celulaTabela } from "eli-vue";
|
||||
import type { EliTabelaConsulta } from "eli-vue";
|
||||
import type { ComponenteEntrada } from "eli-vue/dist/types/componentes/EliEntrada/tiposEntradas";
|
||||
// ^ Nota: Tipos internos podem precisar de caminho completo se não exportados na raiz.
|
||||
// Melhor prática: use 'any' ou 'unknown' castado se o tipo não estiver disponível,
|
||||
// mas `EliTabelaConsulta` geralmente infere.
|
||||
|
||||
// Tipos auxiliares (opcionais, mas úteis)
|
||||
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
||||
|
||||
// 1. Defina o tipo da linha
|
||||
|
|
@ -338,13 +436,13 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
|
|||
mostrarCaixaDeBusca: true,
|
||||
registros_por_consulta: 10,
|
||||
|
||||
// Colunas
|
||||
// Colunas Visuais
|
||||
colunas: [
|
||||
{
|
||||
rotulo: "Nome",
|
||||
celula: (row) => celulaTabela("textoSimples", { texto: row.nome }),
|
||||
visivel: true,
|
||||
coluna_ordem: "nome" // Habilita ordenação
|
||||
coluna_ordem: "nome" // Habilita ordenação por esta coluna
|
||||
},
|
||||
{
|
||||
rotulo: "Status",
|
||||
|
|
@ -377,12 +475,12 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
|
|||
}
|
||||
],
|
||||
|
||||
// Filtro Avançado (definição dos campos de filtro)
|
||||
// Definição dos Filtros Avançados disponíveis
|
||||
filtroAvancado: [
|
||||
{
|
||||
rotulo: "Documento",
|
||||
coluna: "documento",
|
||||
operador: "like", // like, =, >, <, etc
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as any,
|
||||
},
|
||||
{
|
||||
|
|
@ -393,10 +491,10 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
|
|||
}
|
||||
],
|
||||
|
||||
// Função de consulta (simulada ou API real)
|
||||
// Função de consulta
|
||||
consulta: async (params) => {
|
||||
console.log("Consultando com:", params);
|
||||
// params contém: { filtro, coluna_ordem, direcao_ordem, offSet, limit, texto_busca }
|
||||
// Aqui você conectaria com sua API, passando params.filtros, params.texto_busca, etc.
|
||||
console.log("Filtros aplicados:", params.filtros);
|
||||
|
||||
return {
|
||||
cod: 0,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue