Skip to content
Extensões

Repeater Funcionário

Versão: 1.0.0 Data: 13/03/2026


Visão Geral

O componente Repeater Funcionário permite adicionar e remover dinamicamente blocos de funcionários com informações de lotação. Cada bloco representa um funcionário com papel definido (responsável ou colaborador). Utiliza o prefixo .repeater- para suas classes e depende de card.css, badge.css, button.css e fk-v2.css.


Estrutura HTML

html
<div class="repeater-funcionario" id="meuRepeater">
    <div class="repeater-header">
        <span class="repeater-header-title">Funcionários</span>
        <button type="button" class="repeater-add-btn">Adicionar</button>
    </div>

    <div class="repeater-items">
        <!-- Item de funcionário -->
        <div class="repeater-item">
            <div class="repeater-item-header">
                <span class="repeater-item-role badge">Responsável</span>
                <button type="button" class="repeater-item-remove">&times;</button>
            </div>
            <div class="repeater-item-body">
                <div class="repeater-item-field">
                    <label>Funcionário</label>
                    <input type="text" class="repeater-item-nome" placeholder="Buscar funcionário...">
                    <input type="hidden" name="funcionarios[0][id]">
                </div>
                <div class="repeater-item-field">
                    <label>Lotação</label>
                    <input type="text" class="repeater-item-lotacao" readonly>
                </div>
            </div>
        </div>
    </div>
</div>

Funcionalidades

  1. Adicionar funcionário: Botão cria um novo bloco de funcionário com campos vazios.
  2. Remover funcionário: Cada bloco possui botão para remoção individual.
  3. Papéis: Suporte aos papéis de responsável e colaborador, identificados por badge.
  4. Busca de funcionário: Campo com integração FK v2 para localizar funcionários cadastrados.
  5. Lotação automática: Ao selecionar o funcionário, o campo de lotação é preenchido automaticamente.

JavaScript

javascript
$('#meuRepeater').repeaterFuncionario({
    maxItems: 10,
    roles: ['responsavel', 'colaborador'],
    fkEndpoint: '/api/funcionarios',
    onAdd: function (item) {
        console.log('Funcionário adicionado:', item);
    },
    onRemove: function (item) {
        console.log('Funcionário removido:', item);
    }
});

Dark Mode

Suporte completo ao modo escuro, ajustando cores de fundo dos cards, bordas dos itens, badges de papel e campos de formulário.


Mantido por: Equipe Ipeweb

Design System interno do GALES