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**.
|
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>`.
|
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
|
### Exemplo Completo Tipado
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { EliTabela, celulaTabela } from "eli-vue";
|
import { EliTabela, celulaTabela } from "eli-vue";
|
||||||
import type { EliTabelaConsulta } from "eli-vue";
|
import type { EliTabelaConsulta } from "eli-vue";
|
||||||
import type { ComponenteEntrada } from "eli-vue/dist/types/componentes/EliEntrada/tiposEntradas";
|
// Tipos auxiliares (opcionais, mas úteis)
|
||||||
// ^ 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.
|
|
||||||
|
|
||||||
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
||||||
|
|
||||||
// 1. Defina o tipo da linha
|
// 1. Defina o tipo da linha
|
||||||
|
|
@ -338,13 +436,13 @@ const tabelaUsuarios: EliTabelaConsulta<Usuario> = {
|
||||||
mostrarCaixaDeBusca: true,
|
mostrarCaixaDeBusca: true,
|
||||||
registros_por_consulta: 10,
|
registros_por_consulta: 10,
|
||||||
|
|
||||||
// Colunas
|
// Colunas Visuais
|
||||||
colunas: [
|
colunas: [
|
||||||
{
|
{
|
||||||
rotulo: "Nome",
|
rotulo: "Nome",
|
||||||
celula: (row) => celulaTabela("textoSimples", { texto: row.nome }),
|
celula: (row) => celulaTabela("textoSimples", { texto: row.nome }),
|
||||||
visivel: true,
|
visivel: true,
|
||||||
coluna_ordem: "nome" // Habilita ordenação
|
coluna_ordem: "nome" // Habilita ordenação por esta coluna
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
rotulo: "Status",
|
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: [
|
filtroAvancado: [
|
||||||
{
|
{
|
||||||
rotulo: "Documento",
|
rotulo: "Documento",
|
||||||
coluna: "documento",
|
coluna: "documento",
|
||||||
operador: "like", // like, =, >, <, etc
|
operador: "like",
|
||||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as any,
|
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) => {
|
consulta: async (params) => {
|
||||||
console.log("Consultando com:", params);
|
// Aqui você conectaria com sua API, passando params.filtros, params.texto_busca, etc.
|
||||||
// params contém: { filtro, coluna_ordem, direcao_ordem, offSet, limit, texto_busca }
|
console.log("Filtros aplicados:", params.filtros);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
cod: 0,
|
cod: 0,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue