parcelamento-excepcional.html
Atualizado em
29/10/2025 11h00
parcelamento-excepcional.html
— 15 KB
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--FAVICON-->
<link rel="shortcut icon" href="./assets/img/favicon.ico">
<!-- Fonte Rawline-->
<link rel="stylesheet"
href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css" />
<!-- Fonte Raleway-->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap" />
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--CSS GOVBR-->
<link rel="stylesheet" href="./govbr/core.css" />
<!--JS GOVBR-->
<script src="./govbr/core.js"></script>
<!--UTILS-->
<script src="./assets/js/utils.js"></script>
<!--FUNCOES ESPECIFICAS DO NEGOCIO-->
<script src="./assets/js/parcelamento-excepcional.js"></script>
<!--HTML2CANVAS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--JSPDF-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"
integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.fix {
top: 0px !important;
}
</style>
<title>Autorregularização</title>
</head>
<!--TEMPLATE LINHA ORDINARIA DA TABELA DETALHAMENTO DOS CREDITOS TRIBUTARIOS-->
<template id="id-template-debito">
<tr>
<!-- NUMERO DO PROCESSO -->
<td class="text-center p-1">
<div class="br-input small">
<input class="text-center nroProcesso text-down-02 px-0" type="text" onchange="handleValidarProcesso(this)" name="nprocesso">
</div>
</td>
<!-- NUMERO DO PROCESSO PROCESSO JUDICIAL-->
<td class="text-center p-1">
<div class="br-input small">
<input class="text-center nroProcessoJud text-down-02 px-0" type="text" onchange="handleValidarProcessoJud(this)" name="nprocessojud">
</div>
</td>
<!-- CNPJ/CPF -->
<td class="text-center p-1">
<div class="br-input obrigatorio small">
<input class="text-center cpfcnpj text-down-02 px-0" type="text" onchange="handleValidarCPFCNPJ(this)" name="CNPJ/CPF">
</div>
</td>
<!-- CODIGO DE RECEITA -->
<td class="text-center p-1">
<div class="br-input obrigatorio small">
<input class="text-center codigo-receita text-down-02 px-0" type="text" maxlength="9" oninput="mascaraCodigoReceita(this)" name="Código de Receita">
</div>
</td>
<!-- PERIODO DE APURACAO (calendario) -->
<td class="text-center p-1">
<div class="br-datetimepicker obrigatorio" data-mode="single" data-type="text">
<div class="br-input has-icon small">
<label for="datepicker-input"></label>
<input id="datepicker-input" class="text periodo-apuracao text-down-02" type="text" data-input="data-input" name="Período Apuração"/>
<button class="br-button circle small" type="button" aria-label="Abrir Timepicker" data-toggle="data-toggle" id="datepicker-input-btn">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div>
</td>
<!-- VENCIMENTO DO TRIBUTO -->
<td class="text-center p-1">
<div class="br-datetimepicker obrigatorio" data-mode="single" data-type="text">
<div class="br-input has-icon small">
<label for="datepicker-input"></label>
<input id="datepicker-input" class="text vencimento-tributo text-down-02" type="text" data-input="data-input" name="Vencimento do Tributo"/>
<button class="br-button circle small" type="button" aria-label="Abrir Timepicker" data-toggle="data-toggle" id="datepicker-input-btn">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div>
</td>
<!--VALOR ORIGINAL DO CREDITO TRIBUTARIO -->
<td class="text-center p-1">
<div class="br-input obrigatorio small">
<input class="text-center original text-down-02 px-0" type="text" oninput="handleValidarValorNaoNegativo(this)" onchange="calcularValorDebitos(this)" name="Valor Original do Crédito Tributário">
</div>
</td>
<!--AÇÕES-->
<td class="text-center p-0 acoes">
<button class="br-button p-0" onclick="excluirLinha(this)">
<i class="fa fa-trash-alt text-down-01"></i>
</button>
</td>
</tr>
</template>
<!--TEMPLATE LINHA TOTAL GERAL DA TABELA DETALHAMENTO DOS CREDITOS TRIBUTARIOS-->
<template id="id-template-total-geral">
<tr>
<td class="text-center text-up-01 p-2"></td>
<td class="text-center text-up-01 p-2"></td>
<td class="text-center text-up-01 p-2"></td>
<td class="text-center text-up-01 p-2"></td>
<td class="text-center text-up-01 p-2"></td>
<td class="text-center text-up-01 p-2 text-right">Total R$</td>
<td class="text-center text-up-01 p-2">
<div class="br-input small">
<input class="text-center text-down-02 px-0" type="text" id="totalGeral" readonly name="Total de Créditos Tributários a Autorregularizar">
</div>
</td>
<td class="text-center text-up-01 p-2"></td>
</tr>
</template>
<body class="d-flex flex-column" style="background-color: #f8f8f8; min-height: 100vh;">
<!--PRINCIPAL-->
<main class="flex-grow-1">
<!--HEADER-->
<section id="id-cabecalho" class="pagina1">
<header class="br-header">
<div class="container-lg">
<!--TOP-->
<div class="header-top">
<div class="header-logo">
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374.7 134.9" style="enable-background:new 0 0 374.7 134.9;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #2864AE;
}
.st1 {
fill: #46AD44;
}
.st2 {
fill: #FABD10;
}
</style>
<path class="st0" d="M40.1,84.7c8.9,0,16-7.5,16-18.7c0-8.1-4.8-17.2-16-17.2c-9.3,0-14.2,8.2-14.2,18.1C25.9,78.3,32.6,84.7,40.1,84.7zM80.4,95.5c0,29.8-14.5,39.4-43.8,39.4c-12,0-21.9-2.5-27.7-4.6l1.3-19.8c7.7,3.8,14.1,6,24.5,6c14.5,0,22.3-6.8,22.3-21.1v-3.9h-0.3c-6,8.5-14.4,12.4-24.4,12.4C12.4,104,0,88.9,0,67.4c0-21.6,10.2-37.8,32.8-37.8c10.7,0,19.4,5.9,24.7,14.8h0.3V31.3h22.7L80.4,95.5L80.4,95.5z" />
<polygon class="st1" points="181.6,103.9 209.5,103.9 235.8,31.7 211.4,31.7 196.6,83.1 196.3,83.1 181.6,31.7 155.3,31.7 " />
<path class="st2" d="M139,67.8c0-10.8-4.7-20.4-16.2-20.4c-11.5,0-16.2,9.6-16.2,20.4c0,10.7,4.7,20.2,16.2,20.2C134.3,88,139,78.5,139,67.8z M80.8,67.8c0-24,18.1-37.8,42-37.8s42,13.9,42,37.8c0,23.8-18.1,37.7-42,37.7C99,105.5,80.8,91.6,80.8,67.8z" />
<path class="st0" d="M238.6,93.7c0,6.5-5.3,11.8-11.8,11.8c-6.5,0-11.8-5.3-11.8-11.8c0-6.5,5.3-11.8,11.8-11.8 C233.3,81.8,238.6,87.1,238.6,93.7z" />
<path class="st0" d="M281,49.2c-9.1,0-15.2,8-15.2,18.8c0,10.5,6.9,18.4,15.2,18.4c9.4,0,15.1-7.9,15.1-19.4C296.1,57.5,290.7,49.2,281,49.2z M240.9,0h25.1v41h0.3c6.4-8,14.8-10.9,24.8-10.9c20,0,30.9,19,30.9,36.4c0,21.3-11.5,39.1-33,39.1c-11.5,0-21.6-6.5-24.8-14.6h-0.3v12.9h-23L240.9,0L240.9,0z" />
<path class="st2" d="M373.4,51.7c-2.8-0.8-5.5-0.8-8.5-0.8c-11.6,0-18.1,8.4-18.1,22.6v30.5h-24.9V31.7h22.7V45h0.3c4.3-9.1,10.5-15,21.3-15c2.9,0,6,0.4,8.5,0.8L373.4,51.7z" />
</svg>
</div>
</div>
<!--BOTTOM-->
<div class="header-bottom">
<!--MENU-->
<div class="header-menu">
<!--TITULOS-->
<div class="header-info">
<div class="header-title">Discriminação de débitos</div>
<div class="header-subtitle"></div>
</div>
</div>
</div>
</div>
</header>
</section>
<!--SECAO DEBITOS A HABILITAR-->
<section id="id-debitos-habilitar" name="Seção Débitos a Habilitar" class="secao container-fluid mb-5 toPdf pagina1">
<h1 class="mt-5">Débitos</h1>
<div class="row">
<!--TABELA-->
<div class="col-12">
<div class="br-table" data-random="data-random">
<table class="obrigatorio">
<caption>Detalhamento dos Débitos a Habilitar</caption>
<thead>
<tr>
<th id="processoJud" class="text-center p-1">Número do Processo (se houver)</th>
<th id="processo" class="text-center p-1">Número do Processo Judicial (se houver)</th>
<th id="CPFCNPJ" class="text-center p-1">CPF/CNPJ do débito</th>
<th id="codigo-receita" class="text-center p-1">Código Receita ou Debcad</th>
<th id="periodo-apuracao" class="text-center p-1">Período Apuração</th>
<th id="vencimento-tributo" class="text-center p-1">Vencimento do Tributo</th>
<th id="valor-original" class="text-center p-1">Valor original do crédito tributário(R$)</th>
<th class="text-center p-0acoes">Ações</th>
</tr>
</thead>
<tbody id="tabelaDebitosBody"></tbody> <!-- A tabela será preenchida dinamicamente com JavaScript -->
</table>
</div>
</div>
<!--BOTOES INCLUIR NOVO DEBITO E CONFIRMAR TOTAL DE DEBITOS-->
<div class="col-12 my-5 text-center d-flex justify-content-around">
<div>
<button id="btnIncluirNovoDebito" onclick="incluirNovoDebito()" class="br-button secondary">Incluir novo débito</button>
</div>
</div>
</div>
</section>
<!--GERAR DOCUMENTO-->
<section id="id-btn-gerar-documento" class="container mb-5" name="gerar_documento">
<div class="row justify-content-between">
<div class="col text-center my-3">
<button onclick="gerarDocumento()" class="br-button primary">Gerar Documento</button>
</div>
</div>
</section>
</main>
<!-- MODAL -->
<div class="br-scrim-util foco" id="modal-scrim" data-scrim="true">
<div class="div br-modal medium" id="id-modal-generico" aria-modal="true" role="dialog"
aria-labelledby="modal-generico">
<!--HEADER-->
<div class="br-modal-header">
<div class="modal-title" id="id-modal-generico-titulo">Mensagem</div>
<button class="br-button close circle" type="button" data-dismiss="true" aria-label="Fechar">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<!--BODY-->
<div class="br-modal-body">
<p id="id-elemento-mensagem"></p>
</div>
<!--FOOTER-->
<div class="br-modal-footer justify-content-end">
<button id="id-entendi" class="br-button primary" type="button" data-dismiss="true">Entendi</button>
</div>
</div>
</div>
<!--FOOTER-->
<section id="id-rodape" class="mt-5xh">
<br-footer>
<footer role="contentinfo" aria-label="Footer" class="br-footer">
<div class="container">
<div class="logo text-sm-left">
<img alt="govbr" src="assets/img/logo_govbr_branco.png">
</div>
<section aria-label="Redes Sociais" class="d-sm-block secondary-info">
<div class="row align-items-end justify-content-between py-5">
<div role="list" class="col assigns text-right">
<span class="sr-only">Parceiros</span>
<a role="listitem" target="_blank" class="ml-4 partner"
href="https://www.gov.br/receitafederal/pt-br" aria-label="Receita Federal">
<img alt="receitafederal" src="assets/img/logo_rfb_branco.png">
</a>
<!-- <a role="listitem" target="_blank" class="ml-4 partner"
href="https://www.gov.br/empresas-e-negocios/pt-br/redesim"
aria-label="Empresas & Negócios">
<img alt="redesim" src="assets/img/logo_redesim_branco.svg">
</a> -->
<a role="listitem" target="_blank" class="ml-4 partner"
href="https://www.gov.br/acessoainformacao/pt-br" aria-label="Acesso à Informação">
<img alt="acessoainformacao" src="assets/img/logo_acesso_informacao.png">
</a>
</div>
</div>
</section>
</div>
<section aria-label="Informações Legais" class="container-fluid">
<span class="br-divider my-3"></span>
<div class="info">
<div class="text-down-01 text-medium pb-3">Versão 1.0.0 - Termo de uso e Política de Privacidade
</div>
</div>
</section>
</footer>
</br-footer>
</section>
</body>
</html>