Configuração Inicial para Páginas de Detalhes

Para criar uma página de detalhes com layUI, siga a estrutura abaixo. O código inclui formulários, guias e diversos tipos de entrada.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="caminho/layui.css">
<script src="caminho/jquery.min.js"></script>
<script src="caminho/layui.js"></script>

Exemplo de formulário com guias:

<form class="layui-form" action="" lay-filter="formularioUsuario">
    <div class="layui-tab" lay-filter="guiaUsuario">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="1">Dados Básicos</li>
            <li lay-id="2">Informações Detalhadas</li>
            <li lay-id="3">Biografia</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- Conteúdo da guia 1 -->
            </div>
            <div class="layui-tab-item">
                <!-- Conteúdo da guia 2 -->
            </div>
            <div class="layui-tab-item">
                <!-- Conteúdo da guia 3 -->
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="salvarUsuario">Enviar</button>
            <button type="reset" class="layui-btn layui-btn-primary">Limpar</button>
        </div>
    </div>
</form>

Compnoentes de Entrada

Exemplo de upload de imagem:

<div class="layui-form-item">
    <label class="layui-form-label">Avatar</label>
    <div class="layui-input-inline">
        <input type="text" name="avatarUrl" lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <button type="button" class="layui-btn" id="botaoUpload"><i class="layui-icon">&#xe67c;</i>Carregar Imagem</button>
        <input type="file" id="arquivoUpload" accept="image/*" name="arquivoUpload" style="display:none;">
    </div>
</div>
<div class="layui-form-item">
    <div class="layui-input-block">
        <img src="#" width="100" height="100" id="imagemAvatar" alt="Avatar do Usuário" style="border: 1px solid #CCC;">
    </div>
</div>

Exemplos de outros componentes, como caixas de seleção, botões de rádio e listas suspensas, podem ser implementados seguindo padrões semelhantes. Por exemplo:

<div class="layui-form-item">
    <label class="layui-form-label">Gênero</label>
    <div class="layui-input-inline">
        <input type="radio" name="genero" value="1" title="Masculino">
        <input type="radio" name="genero" value="0" title="Feminino" checked>
    </div>
</div>

Lógica JavaScript para Detalhes

Configure os módulos e funções necessárias. Altere nomes de variáveis e funções para reduzir a similaridade, mantendo a funcionalidade.

// Configuração da página
var configPagina = {
    modulos: ['form', 'upload', 'laydate', 'element'],
    dadosUpload: {
        elem: '#arquivoUpload',
        accept: 'jpeg|png|gif',
        url: '/api/upload',
        done: function(res) {
            if (res.sucesso) {
                $('#imagemAvatar').attr('src', res.caminho);
                $('input[name="avatarUrl"]').val(res.caminho);
            }
        }
    },
    validacao: {
        nome: [/^[\u4e00-\u9fa5]{2,15}$/, 'Nome deve ter entre 2 e 15 caracteres'],
        senha: [/^[\S]{6,12}$/, 'Senha deve ter 6 a 12 caracteres sem espaços']
    }
};

layui.use(configPagina.modulos, function() {
    var form = layui.form;
    var upload = layui.upload;

    // Renderizar upload
    upload.render(configPagina.dadosUpload);

    // Aplicar validação
    form.verify(configPagina.validacao);

    // Monitorar envio do formulário
    form.on('submit(salvarUsuario)', function(dados) {
        // Lógica de validação e envio
        var campos = dados.field;
        if (!campos.dataNascimento) {
            layer.msg('Data de nascimento é obrigatória');
            return false;
        }
        // Exemplo de chamada AJAX
        $.ajax({
            type: 'POST',
            url: '/api/salvar',
            data: campos,
            success: function(resposta) {
                if (resposta.sucesso) {
                    layer.msg('Salvo com sucesso');
                }
            }
        });
        return false;
    });
});

Página de Listas com layUI

A estrutura para páginas de listas envolve filtros de pesquisa e tabelas de dados.

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <!-- Filtros de pesquisa -->
            <div class="layui-inline">
                <label class="layui-form-label">Categoria</label>
                <div class="layui-input-inline">
                    <select name="categoriaId" lay-filter="categoriaId">
                        <option value="">Todas</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="pesquisar"><i class="layui-icon layui-icon-search"></i> Pesquisar</button>
            </div>
        </div>
        <div class="layui-card-body">
            <!-- Tabela de dados -->
            <table id="tabelaDados" lay-filter="tabelaDados"></table>
        </div>
    </div>
</div>

Configuração da Tabela de Dados

Renderize a tabela com opções como paginação, barra de ferramentas e eventos de linha.

layui.use(['table', 'form'], function() {
    var tabela = layui.table;
    var form = layui.form;

    // Renderizar tabela
    var tabelaPrincipal = tabela.render({
        elem: '#tabelaDados',
        url: '/api/dados',
        method: 'get',
        page: true,
        cols: [[
            {checkbox: true},
            {field: 'id', title: 'ID', width: 80},
            {field: 'nome', title: 'Nome', edit: 'text'},
            {field: 'status', title: 'Status', templet: function(d) {
                return d.status === 1 ? 'Ativo' : 'Inativo';
            }},
            {fixed: 'right', title: 'Ações', width: 130, toolbar: '#barraAcoes'}
        ]]
    });

    // Monitorar pesquisa
    form.on('submit(pesquisar)', function(dados) {
        tabelaPrincipal.reload({
            where: dados.field,
            page: {curr: 1}
        });
        return false;
    });

    // Eventos da tabela
    tabela.on('tool(tabelaDados)', function(obj) {
        var dado = obj.data;
        if (obj.event === 'editar') {
            // Lógica de edição
            layer.open({
                type: 2,
                content: '/editar?id=' + dado.id,
                title: 'Editar Item'
            });
        } else if (obj.event === 'excluir') {
            layer.confirm('Confirmar exclusão?', function(index) {
                $.ajax({
                    url: '/api/excluir?id=' + dado.id,
                    type: 'DELETE',
                    success: function() {
                        obj.del();
                        layer.close(index);
                    }
                });
            });
        }
    });
});

Funções Auxiliares

Implemente funções para exportação e validação customiazda, adaptando a lógica conforme necesário.

// Exemplo de função para exportar dados
function exportarDados() {
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = '/api/exportar';
    document.body.appendChild(form);
    form.submit();
}

// Validação customizada com layUI
layui.use('form', function() {
    var form = layui.form;
    // Definir regras de validação adicionais, se necessário
});

Este guia fornece uma base para construir páginas de detalhes e listas utilizando layUI, com exemplos reestruturados para reduzir a similaridade com o código original.