PHP - Abrir e Fechar janela

violin101 · 23 horas

Caros amigos, saudações.

Estou com uma pequena dúvida.

Estou escrevendo um Sistema que tem vários Módulos.

O módulo principal tem:
Estoque | Compras | Expedição | Vendas

Minha dúvida:
como faço após Acessar o Módulo Principal e Escolher o Módulo que quero trabalhar,

eu possa fechar o Módulo aberto por exemplo: Estoque, sem alterar o Módulo principal e outros se estiver aberto ?

Grato,

Cesar

Williams Duarte · 9 horas

Bom, correto hoje em dia é usar alguma biblioteca para fazer isto, VueJs, React, para deixar mais reativo.

Mas voce pode usar um Js para fazer isto.

Exemplo Jquey usando modal:

Logo abaixo um exemplo com vuejs

<?php

if (isset($_GET['modulo'])) {
    // Mock
    $modulos = [
        'estoque' => '<h1>Módulo Estoque</h1><p>Conteúdo do módulo de Estoque...</p>',
        'compras' => '<h1>Módulo Compras</h1><p>Conteúdo do módulo de Compras...</p>',
        'expedicao' => '<h1>Módulo Expedição</h1><p>Conteúdo do módulo de Expedição...</p>',
        'vendas' => '<h1>Módulo Vendas</h1><p>Conteúdo do módulo de Vendas...</p>'
    ];

    $modulo = $_GET['modulo'];
    if (isset($modulos[$modulo])) {
        echo $modulos[$modulo] . '<a href="#" class="close-module" data-module="' . $modulo . '">Fechar Módulo</a>';
    }
    exit;
}

if (isset($_GET['close_modulo'])) {
    $modulo = 'modulo_' . $_GET['close_modulo'];
    exit;
}

$modulos = [
    'modulo_estoque' => 'Estoque',
    'modulo_compras' => 'Compras',
    'modulo_expedicao' => 'Expedição',
    'modulo_vendas' => 'Vendas'
];
?>
<!DOCTYPE html>
<html>

<head>
    <title>Sistema Principal</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.open-module').on('click', function(e) {
                e.preventDefault();
                var module = $(this).data('module');
                $('#moduleContent').load('?modulo=' + module, function() {
                    $('#moduleModal').modal('show');
                });
            });

            $(document).on('click', '.close-module', function(e) {
                e.preventDefault();
                var module = $(this).data('module');
                $.get('?close_modulo=' + module, function() {
                    $('#moduleModal').modal('hide');
                    updateModuleStatus();
                });
            });

            function updateModuleStatus() {
                $('#modulos_abertos').load(' #modulos_abertos > *');
            }

            setInterval(updateModuleStatus, 5000);
        });
    </script>
</head>

<body>
    <div class="container">
        <h1>Módulo Principal</h1>
        <ul>
            <li><a href="#" class="open-module" data-module="estoque">Estoque</a></li>
            <li><a href="#" class="open-module" data-module="compras">Compras</a></li>
            <li><a href="#" class="open-module" data-module="expedicao">Expedição</a></li>
            <li><a href="#" class="open-module" data-module="vendas">Vendas</a></li>
        </ul>



        <!-- Modal -->
        <div class="modal fade" id="moduleModal" tabindex="-1" aria-labelledby="moduleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="moduleModalLabel">Módulo</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="moduleContent">
                        <!-- Conteúdo do módulo será carregado aqui -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Exemplos simples usando vuejs:

modules.php:

<?php
header('Content-Type: application/json');

if (isset($_GET['modulo'])) {
    // Mock data for modules
    $modulos = [
        'estoque' => '<h1>Módulo Estoque</h1><p>Conteúdo do módulo de Estoque...</p>',
        'compras' => '<h1>Módulo Compras</h1><p>Conteúdo do módulo de Compras...</p>',
        'expedicao' => '<h1>Módulo Expedição</h1><p>Conteúdo do módulo de Expedição...</p>',
        'vendas' => '<h1>Módulo Vendas</h1><p>Conteúdo do módulo de Vendas...</p>'
    ];

    $modulo = $_GET['modulo'];
    if (isset($modulos[$modulo])) {
        echo json_encode(['content' => $modulos[$modulo]]);
    } else {
        echo json_encode(['content' => 'Módulo não encontrado']);
    }
    exit;
}

echo json_encode(['error' => 'Nenhum módulo especificado']);
?>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Sistema Principal</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container">
        <h1>Módulo Principal</h1>
        <ul>
            <li><a href="#" @click.prevent="openModule('estoque')">Estoque</a></li>
            <li><a href="#" @click.prevent="openModule('compras')">Compras</a></li>
            <li><a href="#" @click.prevent="openModule('expedicao')">Expedição</a></li>
            <li><a href="#" @click.prevent="openModule('vendas')">Vendas</a></li>
        </ul>

        <h2>Módulos Abertos:</h2>
        <div id="modulos_abertos">
            <div v-for="(modulo, index) in modulosAbertos" :key="index">
                <p>{{ modulo.nome }} <button @click="closeModule(index)">Fechar</button></p>
            </div>
        </div>

        <div v-if="moduleContent" class="mt-4">
            <div v-html="moduleContent"></div>
            <button class="btn btn-secondary" @click="moduleContent = ''">Fechar Módulo Atual</button>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                modulosAbertos: [],
                moduleContent: ''
            },
            methods: {
                openModule(module) {
                    axios.get('modules.php?modulo=' + module)
                        .then(response => {
                            this.moduleContent = response.data.content;
                            if (!this.modulosAbertos.find(m => m.nome === module)) {
                                this.modulosAbertos.push({ nome: module });
                            }
                        })
                        .catch(error => {
                            console.error("There was an error opening the module:", error);
                        });
                },
                closeModule(index) {
                    this.modulosAbertos.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

Entrar

PHP - Abrir e Fechar janela

Recommended Posts

violin101 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

index.html

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP - Abrir e Fechar janela

Pergunta: Beautiful Womans from your city - Verified Women

Search Pretty Womans in your city for night

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante