Filtro "automático" para tabelas de paginação do element (campo e valor)
Por André Müller:
************** RESUMO **************
Este input pegará todos os props definos em "columns" e irá tratar como um filtro na tabela.
************** HTML - IMPORTANTE **************
Tive que tirar o sinal de menor (não posso digitar aqui, senão buga) do inicio das tags, pois o forum estava interpretando como um real HTML, rsrs.
************** HTML - CÓDIGO **************
el-form-item label="Pesquisar:">
el-input placeholder="Selecione e informe o campo..."
class="input-with-select"
ref="edit_multipleFieldsValue"
v-model="filterModel.multipleFieldsValue"
@keyup.enter.native="filter(true)">
el-select slot="prepend"
style="width: 140px;"
placeholder="Selecione"
v-model="filterModel.multipleFieldsSelected">
el-option label="Todos"
:value="getAllMultipleFieldsValue()">
/el-option>
el-option v-for="field in $options.columns"
v-if="field.sqlColumnField"
:key="field.sqlColumnField"
:label="field.label"
:value="field.sqlColumnField">
/el-option>
/el-select>
/el-input>
/el-form-item>
************** JAVASCRIPT - VARIAVEIS **************
Novo campo sqlColumnField ou vazio para ignorar.
columns: [
{ prop: 'cod_fornecedor', label: 'Código', width: 100, sortable: 'custom', align: 'right', sqlColumnField: 'l.codfornec' },
{ prop: 'fornecedor', label: 'Fornecedor', minWidth: 300, sortable: 'custom', align: 'left', sqlColumnField: 'f.fornecedor' },
{ prop: 'valor', label: 'Valor', width: 120, sortable: 'custom', align: 'right', sqlColumnField: 'l.valor',
render: function(el){
return 'R$ '+(el.valor).format(2, ',', '.');
}
},
{ prop: 'valor_pago', label: 'Valor Pago', width: 120, sortable: 'custom', align: 'right', sqlColumnField: 'l.vpago' ,
render: function(el){
return 'R$ '+(el.valor_pago).format(2, ',', '.');
}
},
{ prop: 'vencimento', label: 'Vencimento', width: 130, sortable: 'custom', align: 'center', sqlColumnField: '' },
{ prop: 'historico2', label: 'Histórico 2', width: 500, sortable: 'custom', align: 'left', sqlColumnField: '' },
{ prop: 'historico', label: 'Histórico', width: 500, sortable: 'custom', align: 'left', sqlColumnField: '' },
{ prop: 'cod_conta', label: 'Código', width: 120, sortable: 'custom', align: 'right', sqlColumnField: '' },
{ prop: 'conta', label: 'Conta', width: 350, sortable: 'custom', align: 'left', sqlColumnField: '' },
{ prop: 'cod_grupo', label: 'Código', width: 120, sortable: 'custom', align: 'right', sqlColumnField: '' },
{ prop: 'grupo', label: 'Grupo', width: 350, sortable: 'custom', align: 'left', sqlColumnField: '' },
],
defaultFilter: {
multipleFieldsSelected: null,
multipleFieldsValue: null
},
************** JAVASCRIPT - MÉTODOS **************
getAllMultipleFieldsValue() {
const vm = this;
let value = '';
vm.$options.columns.forEach((col, index) => {
if (col.sqlColumnField) {
value += "coalesce(cast(" + col.sqlColumnField + " as varchar), '')||' '||";
}
});
value = value + "' '";
return value;
}
************** SCRIPT FUNCTION - FILTRO **************
set multipleFieldsValue = "$v{multipleFieldsValue#}".replace(" ","%");
set filtroMulipleFields = "$v{multipleFieldsSelected#}".equals("") ? "" : "$v{multipleFieldsValue#}".equals("") ? "" : " and trim(upper($v{multipleFieldsSelected})) like trim(upper('$v{multipleFieldsValue}'))";
************** SCRIPT FUNCTION - SQL **************
sql
Select
*
From
meusql
Where
1=1
$v{filtroMulipleFields}
;
