HTML |
---|
<style> /* Início estilo banner */ .compositiondani-banner { position: relative; min-height: 220px; border-radius: 5px; margin-bottom: 5px; overflow: hidden; } .compositiondani-banner-image { background-image: url("https://totvscrm.com/wp-content/uploads/2024/04/capa-com-fundo-e-sem-icone-TDN-AZUL2.png"); background-size: cover; min-height: inherit; width: 100%; } .compositiondani-banner-overlay { min-height: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; pointer-events: none; } .compositiondani-banner-logo-container { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; bottom: 0; transform: translate(-50%, -50%); } .compositiondani-banner-logo { width: 350px; height: 180px; background-image: url("https://totvscrm.com/wp-content/uploads/2023/0908/logo-com-descricao-totvsgc.png"); background-size: contain; background-repeat: no-repeat; } .compositiondani-banner-title { margin-bottom: 10px !important; padding: 10px !important; background: rgba(0, 0, 0, 0.5) !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 12px !important; line-height: 1.3 !important; max-height: 133px !important; font-family: "Roboto", sans-serif !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #ffffff !important; position: relative !important; margin-top: 130px !important; border-radius: 10px !important; } .compositiondani-banner-content { position: absolute; padding: 30px; max-width: 60%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; color: white; text-align: center; } .custom-header h1 { font-size: 16px; background-color: rgba(0, 0, 0, 0.6); padding: 10px; border-radius: 5px; margin: 0; } .negrito-materialize { font-weight: bold; } .custom-margin-justified { margin: 0 20px; text-align: justify; } /* Final estilo banner */ #content.page.view { padding-right: 0 !important; } /* impedir vermelho no nav */ #breadcrumb-section > nav { background-color: initial !important; box-shadow: none !important; } @media only screen and (min-width: 601px) { nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { height: auto !important; line-height: normal !important; } } /* final vermelho no nav */ </style> <header> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/> <div class="compositiondani-banner"> <div class="compositiondani-banner-image"></div> <div class="compositiondani-banner-overlay"></div> <div class="compositiondani-banner-logo-container"> <div class="compositiondani-banner-logo"></div> </div> <div class="compositiondani-banner-content"> <h1 class="compositiondani-banner-title"> CLONAGEM SELETIVA DE QUANTIDADES PENDENTES NOS PEDIDOS </h1> </header> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Inclua o estilo do tema Monokai --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <style> /* ============================== = CONFIGURAÇÕES GERAIS = =============================== */ * { font-family: "Roboto", sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; } a { text-decoration: none; -webkit-tap-highlight-color: transparent; } a:hover { } li { font-size: 14px !important; } h3 { font-size: 14px !important; font-weight: bold; } h1 { font-size: 13px !important; } h2 { font-size: 15px !important; font-weight: bold; } td, th { padding: 6px; } * p { margin-bottom: 0 !important; } /* ============================== = ESTILOS DE TÍTULOS = =============================== */ #title-text { display: none !important; } #content > div.page-metadata > div { float: none !important; line-height: normal !important; width: auto !important; display: none !important; /* ou outra propriedade de display que você deseja usar */ margin: 0 !important; /* ou outra propriedade de margin que você deseja usar */ } #section2 > ol > li:nth-child(2) > p { margin-bottom: 0; } .wiki-content h1, .wiki-content h2 { font-family: "Roboto", sans-serif !important; font-size: 13px!important; } .wiki-content h1 { font-size: 13px !important; } .wiki-content h2 { font-size: 14px !important; color: #42526e !important; border-bottom: 2px solid #dfe1e5; padding-bottom: 5px; font-weight: bold; } .custom-heading, h3.custom-h3 { font-size: 16px; color: #42526e; margin-bottom: 20px; } .custom-h1 { color: #feac0e; } .explanation h2 { font-weight: bold; } /* ============================== = ESTILOS DE TEXTO = =============================== */ .wiki-content p { font-size: 14px !important; } .justificado, .custom-justified { text-align: justify; margin: 10px 0; } /* ============================== = ESTILOS DE LINKS = =============================== */ .wiki-content a, .wiki-content a:link, .wiki-content a:visited, .wiki-content a:focus, .wiki-content a:active { text-decoration: none; color: #42526e; font-size: 14px; } .wiki-content a:hover { color: white; } /* ============================== = ESTILOS DE CONTAINER = =============================== */ .custom-content { background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin: 0 10px; max-width: 100%; overflow: hidden; } .faq-container { max-width: 800px; margin: 0 auto; padding: 20px; } /* ============================== = ESTILOS DE CARDS = =============================== */ .card { border: 2px solid #9aa1ad; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; background-color: #f4f5f7; color: #42526e; overflow-x: hidden; top: 0; } /* ============================== = ESTILOS DE TABS = =============================== */ .tabs { background-color: #dfe1e5; } .tabs .tab a { color: rgb(66, 82, 110); } .tabs .tab a:hover, .tabs .tab a.active, .tabs .tab a:focus.active { color: #0897E9; background-color: transparent; } .tabs .tab a:focus { background-color: rgba(8, 151, 233, 0.25); } .tabs .tab.disabled a, .tabs .tab.disabled a:hover { color: rgba(16, 148, 184, 0.24); } .tabs .indicator { background-color: #0897E9; } .tab-content { gap: 0; padding: 10px; } .tab-content pre { max-width: 100%; overflow-x: hidden; } /* ============================== = ESTILOS DE ÍCONES = =============================== */ .icon-list, .icon { padding-left: 0; list-style-type: none; } .icon { display: inline-block; width: 24px; vertical-align: middle; margin-right: 45px; position: relative; left: -25px; } .item .label i { margin-right: 10px; } .label b { color: #42526e; } td th { color: #42526e; } /* ============================== = ESTILOS DE COMPONENTES = =============================== */ .collapsible, .collapsible-header, .collapsible-body { box-shadow: none !important; } .faq-question { font-weight: bold; margin-bottom: 5px; } .faq-answer { margin-bottom: 20px; } .item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; } .item:last-child { border-bottom: none; } .item .label { flex: 1; font-weight: bold; } .item .value { flex: 1; text-align: right; } .item { border-bottom: 1px solid #e0e0e0; padding: 10px 0; display: flex; justify-content: space-between; align-items: center; } .item:last-child { border-bottom: none; } /* Estilos para o label */ .label { font-weight: bold; display: flex; align-items: center; } .item .label i { margin-right: 10px; /* Adiciona espaço depois dos ícones */ } /* ============================== = ESTILOS DE IMAGENS = =============================== */ .imagem-responsiva { max-width: 100%; height: auto; } .custom-header-bg img { width: 100%; height: auto; display: block; } /* ============================== = ESTILOS DE VÍDEO = =============================== */ #youtube-video-container iframe { width: 100%; height: auto; display: block; } .video-container { max-width: 800px; margin: 0 auto; } .ytp-cued-thumbnail-overlay-image { background-size: cover; background-position: center; width: 100%; height: 100%; position: absolute; } /* ============================== = OUTROS ESTILOS PERSONALIZADOS = =============================== */ .custom-content { background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin: 0 10px; max-width: 100%; overflow: hidden; } .custom-heading { font-size: 16px; color: #42526e; margin: 10px 0; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px; font-weight: bold; } #indice { border-radius: 5px; padding: 20px; max-width: 100%; overflow: hidden; } #indice h2 { text-align: center; margin-bottom: 16px; } #indice ul { list-style-type: none; padding-left: 0; } #indice li { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.1s ease; } #indice li:last-child { border-bottom: none; } #indice li:hover { background-color: #0897E9; color: white; } /* ============================== = ESTILOS DE TABELAS = ============================== */ .custom-grey { background-color: #ffffff; } .custom-grey th, .custom-grey td { border: 1px solid #086ea8; padding: 10px; color:#064569 } .custom-grey tr:nth-child(even) td { background-color: #d2e6f1; } .custom-grey tr:nth-child(odd) td { background-color: #f4f5f7; } .custom-grey th { color: #fff; background-color: #0897E9; } .custom-grey td { font-size: 13px; } .custom-grey tr:nth-child(odd) { background-color: #e4e4e6; } .custom-grey tr:nth-child(even) { background-color: #dfdfdf; } .custom-alert-warning { background-color: #fdf1dc; /* ou qualquer outra cor que preferir */ color: #5c4225; /* cor do texto */ border: 1px solid #d6800f; /* adicionando borda da mesma cor que o ícone */ padding: 10px; /* adicione padding conforme necessário */ } .custom-alert-warning .fas { color: #5c4225; /* cor do ícone no alerta de aviso */ margin-right: 10px; /* espaço extra entre o ícone e o texto */ } .custom-alert-danger { background-color: #ffe7ec; /* ou qualquer outra cor que preferir */ color: #9e1d3b; /* cor do texto */ border: 1px solid #eb7893; /* adicionando borda da mesma cor que o ícone */ padding: 10px; /* adicione padding conforme necessário */ } .custom-alert-danger .fas { color: #f34b72; /* cor do ícone no alerta de perigo */ margin-right: 10px; /* espaço extra entre o ícone e o texto */ } .alert-secondary-custom { background-color: #d9eefa; /* Cor de fundo do alerta */ color: #094f77; /* Cor do texto */ border: 1px solid #094f77; /* adicionando borda da mesma cor que o ícone */ padding: 10px; /* adicione padding conforme necessário */ } .alert-secondary-custom .fas { color: #0897E9; /* Cor dos ícones FontAwesome */ margin-right: 10px; /* Espaço extra entre o ícone e o texto */ } .custom-content ul li { list-style-type: disc !important; /* Forçando 'bolinhas' */ padding-left: 30px; /* Espaçamento para alinhar com o texto se necessário */ margin-bottom: 10px; /* Espaço entre itens da lista se necessário */ } /* ========== FIM DO ESTILO ========= */ pre { border-radius: 5px; padding: 10px; overflow: auto; } .copy-button { background-color: #4CAF50; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; } </style> <!-- Tabs e conteúdo das guias --> <div class="card"> <ul class="tabs"> <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li> <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li> <li class="tab col s4"><a href="#tab3">FAQ</a></li> </ul> <!-- Tab Content --> <div id="tab1" class="col s12"> <div class="tab-content"> <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;"> <section id="section1" style="margin-top: 40px;"> <!-- Tab 70 conteúdo --> <!-- Segundo Card --> <!-- Primeiro Card --> <!-- Primeiro Card --> <div class="card"> <div class="item"> <span class="label"> <table border="1"> <tr> <td><i class="fas fa-tags"></i> <b>Produto:</b></td> <td>Automação da Força de Vendas</td> </tr> <tr> <td><i class="fas fa-link"></i> <b>Linha de Produto:</b></td> <td>TOTVS CRM</td> </tr> <tr> <td><i class="fas fa-chart-pie"></i> <b>Segmento:</b></td> <td>Cross Segmentos</td> </tr> <tr> <td><i class="fas fa-desktop"></i> <b>Módulo:</b></td> <td>Venda</td> </tr> <tr> <td><i class="fas fa-globe"></i> <b>Aplicação:</b></td> <td>Mobile/Web</td> </tr> <tr> <td><i class="fas fa-hashtag"></i> <b>Identificador:</b></td> <td> DTSFAPD-2035</td> </tr> </table> </span> </div> </div> <br> <h2 class="custom-heading"> <i class="fa-solid fa-eye"></i>    VISÃO GERAL </h2> <p class="justificado"> A melhoria na clonagem de pedidos no TOTVS CRM SFA agora permite que usuários clonem não apenas as quantidades originais ou faturadas, mas também as quantidades pendentes nos pedidos, considerando apenas as quantidades de produtos que ainda não foram faturadas. Esta opção é crucial para gerenciar eficientemente pedidos que estão parcialmente completos, onde algumas quantidades podem já ter sido entregues ou faturadas, enquanto outras ainda estão pendentes. </p> <br> <h2 class="custom-heading"> <i class="fa-solid fa-rocket"></i>    OBJETIVO </h2> <p class="justificado"> Esta funcionalidade visa facilitar a gestão eficiente de pedidos que estão em andamento, otimizando o fluxo de trabalho ao permitir a clonagem das quantidades pendentes e reduzindo a necessidade de ajustes manuais em pedidos subsequentes. </p> <!-- ... (seu conteúdo existente) ... --> </section> <section id="section2" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-star"></i>  DETALHES FUNCIONAIS</h2> <br> <ol start="1"> <li> <strong>Flexibilidade na Clonagem:</strong><br> <p>Capacidade de escolher especificamente entre quantidades originais, pendentes ou faturadas para clonagem, utilizando um menu interativo na interface de clonagem.</p> </li> </ol> <img src="https://totvscrm.com/wp-content/uploads/2024/08/MOCKUP-TDN-RELEASE-COMPONENTES14-SFA-1.png" alt="Visualização Android" title="Visualização Android" style="width: 80%; height: auto; max-width: 80%; display: block;"> </li> </ol> </section> <section id="section3" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>  COMO USAR?</h2> <ol> <li> <p><strong>Clonagem de Pedidos:</strong></p> <ul> <li style="list-style-type: disc;">Navegue até a listagem de pedidos;</li> <li style="list-style-type: disc;">Localize o pedido que deseja clonar e clique no ícone de clonagem associado a esse pedido;</li> <li style="list-style-type: disc;">Na seção de clonagem, encontre e selecione o campo "Aproveitar quantidades pelo campo". Isso ativará uma lista com as opções disponíveis;</li> <li style="list-style-type: disc;">Das opções disponíveis, escolha "Quantidade Pendente". Esta seleção assegura que apenas as quantidades do pedido que ainda não foram faturadas sejam consideradas para a clonagem;</li> <li style="list-style-type: disc;">Após selecionar "Quantidade Pendente", prossiga com a clonagem. O sistema clonará apenas as quantidades pendentes do pedido, garantindo que as quantidades clonadas sejam precisas e relevantes ao estado atual do pedido;</li> </ul> </li> </ol> <p> <video autoplay loop muted style="width: 100%; height: auto; max-width: 100%; display: block;"> <source src="https://totvscrm.com/wp-content/uploads/2024/08/Vid-20240804-124207.mp4" type="video/mp4"> </video> </p> <br> </section> <section id="section4" style="margin-top: 40px;"> <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i>  EXEMPLO PRÁTICO</h2> <p> <br> <b>Desafio Antigo:</b> <p> Antes da introdução desta funcionalidade, os usuários enfrentavam desafios significativos ao tentar clonar pedidos que não estavam completamente finalizados. A clonagem de um pedido incluía todas as quantidades, independente de seu estado de faturamento, resultando em uma gestão complicada de inventários e necessidades de revisão manual para ajustar as quantidades que já haviam sido entregues ou faturadas. Isso consumia tempo e aumentava o risco de erros, como a duplicação de itens já processados. </p> <br> <b>Solução Atualizada:</b> <p>Com a melhoria, os usuários agora podem clonar pedidos selecionando especificamente as "Quantidades Pendentes". Esta opção permite a replicação apenas dos itens que ainda necessitam ser processados, evitando a inclusão de itens já faturados. O sistema oferece três opções claras na interface de clonagem: Quantidades Faturadas, Originais e Pendentes, proporcionando flexibilidade e precisão.</p> <br> </p> </section> </div> </div> </div> <!-- Tab 30 fim --> <div id="tab2" class="col s12"> <div class="tab-content"> <div style="background-color: #f4f5f7; padding: 10px; margin-left: 50px; margin-right: 50px;"> <section id="section1" style="margin-top: 40px;"> <!-- Primeira coluna do conteúdo da guia 2 --> <div class="container"><h2 class="custom-heading"><i class="fa-solid fa-gear"></i>  DETALHES TÉCNICOS</h2> <h2>SQL Code Snippets</h2> <pre> <code class="sql"> SELECT pp.quantidadependente AS quantidade FROM pedidoproduto pp WHERE pp.quantidadependente > 0 </code> <code class="sql"> SELECT pp.quantidade AS quantidade FROM pedidoproduto pp WHERE pp.quantidade > 0 </code> <code class="sql"> SELECT pp.quantidadefaturada AS quantidade FROM pedidoproduto pp WHERE pp.quantidadefaturada > 0 </code></pre> </div> </div> </div> </div> </section> <!-- Second Card --> <div id="tab3" class="col s12"> <div class="tab-content"> <div style="background-color: #f4f5f7; padding: 20px; margin-left: 50px; margin-right: 50px;"> <!-- Primeira coluna do conteúdo da guia 2 --> <div class="container"> <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">question_answer</i>Existem restrições ou limitações para clonar quantidades pendentes em pedidos com múltiplos itens? </div> <div class="collapsible-body"><span> Não há restrições específicas para clonar pedidos com múltiplos itens; cada item no pedido pode ser clonado com base na quantidade pendente. No entanto, é importante verificar se todos os itens ainda estão disponíveis ou se houve alterações no estoque que possam afetar a clonagem. </span></div> </li> <!-- Adicione mais perguntas e respostas aqui conforme necessário --> <li> <div class="collapsible-header"><i class="material-icons">question_answer</i> Como a clonagem de quantidades pendentes afeta os descontos e promoções aplicados no pedido original? </div> <div class="collapsible-body"><span>Ao clonar um pedido, os descontos e promoções aplicados originalmente não são automaticamente replicados para as quantidades pendentes no novo pedido. É necessário revisar e aplicar manualmente quaisquer descontos ou condições promocionais no pedido clonado conforme a política atual. </span></div> </li> <!-- Adicione mais perguntas e respostas aqui conforme necessário --> <li> <div class="collapsible-header"><i class="material-icons">question_answer</i> É possível reverter uma clonagem se houver um erro ou se as quantidades estiverem incorretas? </div> <div class="collapsible-body"><span>Uma vez confirmada, a clonagem de um pedido não pode ser revertida automaticamente pelo sistema. Se ocorrer um erro ou as quantidades estiverem incorretas, será necessário cancelar ou ajustar manualmente o pedido clonado no sistema. </span></div> </li> </ul> </div> </div> <!-- Primeira coluna do conteúdo da guia 2 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> // Inicialização das tabs document.addEventListener("DOMContentLoaded", function () { var tabs = document.querySelectorAll(".tabs"); M.Tabs.init(tabs); }); </script> <script> const items = document.querySelectorAll("#indice li"); items.forEach(item => { item.addEventListener('click', (e) => { const targetId = e.target.getAttribute('data-target'); const targetElement = document.getElementById(targetId); window.scrollTo({ top: targetElement.offsetTop - 10, behavior: "smooth" }); }); }); </script> <script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> <script> hljs.highlightAll(); function copyCode() { navigator.clipboard.writeText(document.querySelector('code').innerText) .then(() => { alert('Código copiado com sucesso!'); }) .catch(err => { console.error('Erro ao copiar código: ', err); }); } </script> <script src="scripts.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.collapsible'); var instances = M.Collapsible.init(elems); }); </script> <!-- ... (conteudo video) ... --> <script src="https://www.youtube.com/iframe_api"></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '315', width: '560', videoId: 'FvsuBOvyyro', playerVars: { start: 1238, // 20:38 em segundos end: 1356 // 22:36 em segundos } }); } </script> |