pdm2.html
Atualizado em
28/11/2024 11h03
pdm2 (2).html
— 26 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">
<!-- Google Tag Manager -->
<script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-WGZPDK4DH1&l=dataLayer&cx=c"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-NHZSKTD"></script>
<script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NHZSKTD');
</script>
<!-- End Google Tag Manager -->
<!--FAVICON-->
<link rel="shortcut icon" href="./assets/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>
<!--COMPONENTES-->
<script src="./componentes/br-cabecalho/br-cabecalho.js"></script> <!--CABEÇALHO-->
<script src="./componentes/br-rodape/br-rodape.js"></script> <!--RODAPE-->
<script src="./componentes/br-textarea/br-textarea.js"></script> <!--TEXTAREA-->
<script src="./componentes/br-select/br-select.js"></script> <!--SELECT-->
<script src="./componentes/br-input/br-input.js"></script> <!--INPUT-->
<script src="./componentes/br-datepicker/br-datepicker.js"></script> <!--DATEPICKER-->
<script src="./componentes/br-modal-simples/br-modal-simples.js"></script> <!--CUSTOM MODAL-->
<script src="./componentes/br-checkbox/br-checkbox.js"></script> <!--CHECKBOX-->
<script src="./componentes/br-radio-horizontal/br-radio-horizontal.js"></script> <!--RADIO HORIZONTAL-->
<!--UTILS-->
<script src="./bibliotecas/utils.js"></script>
<!--MUNICIPIOS POR UF-->
<script src="./municipios_por_uf.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>
#custom-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow: auto;
}
#impressao-impedida {
display: none;
}
@media print{
body>*:not(#impressao-impedida) {
display: none;
}
#impressao-impedida {
display: block !important;
font-size: 2em;
}
}
body {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Standard */
}
</style>
<title>Pedido de destinação de mercadorias</title>
<script>
const hoje = new Date();
const dia = String(hoje.getDate()).padStart(2, '0');
const mes = String(hoje.getMonth() + 1).padStart(2, '0');
const ano = hoje.getFullYear();
let dataOficioMaxima = `${dia}/${mes}/${ano}`;
let dataAberturaCnpjMaxima = `${dia}/${mes}/${ano - 3}`;
// Após o carregamento da página, define o atributo maxDate
document.addEventListener("DOMContentLoaded", function() {
const datepickerOficio = document.getElementById('id-data-do-oficio');
const datepickerAberturaCnpj = document.getElementById('id-data-abertura-cnpj');
// Definir dinamicamente o atributo maxDate no componente
if (datepickerOficio) {
datepickerOficio.setAttribute('maxDate', dataOficioMaxima);
}
if (datepickerAberturaCnpj) {
datepickerAberturaCnpj.setAttribute('maxDate', dataAberturaCnpjMaxima);
}
});
var ufSelected;
function getOpcoesUf(){
return [
"AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS",
"MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC",
"SP", "SE", "TO"
]
}
function getOpcoesTipoMercadoria(){
return [
"Bazar", "Escritório", "Partes/Peças de Veículos",
"Brinquedos", "Hospitalar", "Veículos",
"Armas e Munições", "Químico", "Vestuário",
"Eletrônicos", "Informática", "Outros"
]
}
function getOpcoesUnidade(){
return ["unidade", "kg", "par", "garrafa", "litro", "metro"];
}
function getOpcoesMunicipios(){
const municipios = municipiosPorUF[ufSelected] || [];
const opcoes = municipios.map(municipioObj => municipioObj.Municipio)
return opcoes
}
function getMunicipios(){
ufSelected = getSelectedValue('id-uf');
let container = document.querySelector('#id-container-municipios');
container.innerHTML = '';
let selectMunicipios = document.createElement('br-select-component');
selectMunicipios.setAttribute('label', 'Município de destino das mercadorias:');
selectMunicipios.setAttribute('eName', 'municipio_de_destino');
selectMunicipios.setAttribute('required', 'required');
selectMunicipios.setAttribute('opcoes', 'getOpcoesMunicipios');
container.appendChild(selectMunicipios);
}
function mostrarAdicionais(){
let radioSociedadeCivil = document.querySelector('#id-sociedade-civil');
let dataAberturaCnpj = document.querySelector('#id-div-abertura-cnpj');
let secaoProjeto = document.querySelector('#id-projeto-social');
let estadosRegiao3 = ['CE', 'MA', 'PI', 'PE', 'PB', 'AL', 'RN'];
let estadoSelecionado = getSelectedValue('id-uf-solicitante');
// recupera o componente para inserir ou retirar o required para função validarCamposRequiredNaSecao()
const datepickerAberturaCnpj = document.getElementById('id-data-abertura-cnpj');
if (radioSociedadeCivil.checked) {
datepickerAberturaCnpj.setAttribute('required', 'required')
dataAberturaCnpj.classList.remove('d-none');
if (!estadoSelecionado){
modalComponente.showModal(
'Atenção',
'Conforme inciso II do Art. 76 da Portaria RFB 200/2022, é vedada a destinação de mercadorias para OSC com menos de 3 (três) anos de existência',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
}
} else {
datepickerAberturaCnpj.removeAttribute('required')
dataAberturaCnpj.classList.add('d-none');
}
if (radioSociedadeCivil.checked && estadosRegiao3.includes(estadoSelecionado)){
secaoProjeto.classList.add('toPdf');
secaoProjeto.classList.remove('d-none');
} else {
secaoProjeto.classList.remove('toPdf');
secaoProjeto.classList.add('d-none');
}
}
</script>
</head>
<body>
<!--CABECALHO-->
<section id="id-cabecalho">
<br-cabecalho-component titulo="Pedido de destinação de mercadorias" subtitulo="Formulário exclusivo para juntada no e-cac por meio do Requerimentos Web"></br-cabecalho-component>
</section>
<!--SECAO SOLICITANTE-->
<section id="id-solicitante" class="mb-5 toPdf container-fluid" name="sobre_o_solicitante">
<div class="mb-3">
<h4>Sobre o solicitante</h4>
</div>
<div class="row flex-column mb-5">
<div class="col-4 mb-4">
<br-radio-horizontal-component inputId="id-orgao-publico" eName="solicitante" label="Órgão Público" onclick="mostrarAdicionais" required></br-radio-horizontal-component>
<br-radio-horizontal-component inputId="id-sociedade-civil" eName="solicitante" label="Organização da Sociedade Civil" onclick="mostrarAdicionais" required></br-radio-horizontal-component>
</div>
<div class="col-8 d-flex p-0">
<div class="col-4">
<br-select-component inputId="id-uf-solicitante" label="Estado:" eName="estado_solicitante" opcoes="getOpcoesUf" onchangeFunc="mostrarAdicionais" required="required"></br-select-component>
</div>
<div id="id-div-abertura-cnpj" class="col-4 d-none">
<br-datepicker-component id="id-data-abertura-cnpj" label="Data de abertura do CNPJ:" eName="data_abertura_cnpj"></br-datepicker-component>
</div>
</div>
</div>
</section>
<!--SECAO DETALHAMENTO DO PEDIDO-->
<section class="mb-5 toPdf container-fluid" id="id-pedido" name="detalhamento_do_pedido">
<div class="mb-3">
<h4>Dados básicos da solicitação</h4>
</div>
<!--NUMERO E DATA DO OFICIO-->
<div class="row mb-5">
<!--NUMERO DO OFICIO-->
<div class="col-6">
<br-input-component inputId="id-nr-oficio" eName="nr_do_oficio_pedido" label="Nr. do Ofício/Pedido" placeholder="Digite a identificação do pedido!" maxlength="45" required></br-input>
</div>
<!--DATA DO OFICIO-->
<div class="col-6">
<br-datepicker-component id="id-data-do-oficio" eName="data_do_oficio" label="Data do Ofício" required></br-datepicker-component>
</div>
</div>
<!--UNIDADE E MUNICIPIO DE DESTINO DAS MERCADORIAS-->
<div class="row mb-5">
<!--UNIDADE DE DESTINO-->
<div class="col-4">
<br-input-component eName="unidade_setor_de_destino_das_mercadorias" label="Unidade/Setor de destino das mercadorias <span class='text-blue-50'>(Opcional)</span>" maxlength="255"></br-input>
</div>
<!--UF DE DESTINO-->
<div class="col-4">
<br-select-component inputId="id-uf" label="Estado de destino das mercadorias:" eName="estado_de_destino" opcoes="getOpcoesUf" required="required" onchangeFunc="getMunicipios"></br-select-component>
</div>
<!--MUNICIPIO DE DESTINO-->
<div id="id-container-municipios" class="col-4">
<br-select-component id="municipios" label="Município de destino das mercadorias:" eName="municipio_de_destino" required="required" opcoes=""></br-select-component>
</div>
</div>
<!--DADOS DE CONTATO-->
<div>
<div class="mb-3 label">Dados de contato da pessoa de contato para tratar a respeito desse pedido:</div>
<div class="row mb-5">
<!--TELEFONE-->
<div class="col-4">
<br-input-component inputId="id-telefone" eName="telefone" label="Telefone:" maxlength="11" onblur="handleTelefoneValidation" required></br-input>
</div>
<!--EMAIL-->
<div class="col-4">
<br-input-component inputId="id-email" eName="email" label="Email:" onblur="handleEmailValidation" maxlength="'255" required></br-input>
</div>
<!--NOME-->
<div class="col-4">
<br-input-component inputId="id-nome" eName="nome" label="Nome:" maxlength="255" required></br-input>
</div>
</div>
</div>
<!--JUSTIFICATIVA-->
<div class="row mb-5">
<!--TEXTAREA-->
<div class="col-12">
<br-textarea-component eName="justiticativa_do_pedido_e_finalidade_de_sua_utilizacao"
label="Justiticativa do pedido e finalidade de sua utilização:" maxlength="1000" rows="10" required></br-textarea-component>
</div>
</div>
</section>
<!--SECAO DETALHAMENTO DO PROJETO SOCIAL-->
<section id="id-projeto-social" class="mb-5 container-fluid d-none" name="detalhamento_do_projeto_social">
<div class="mb-3"></div>
<h4>Detalhamento do Projeto Social</h4>
</div>
<div class="row flex-column mb-5">
<!--NOME DO PROJETO-->
<div class="col-4 mb-4">
<br-input-component inputId="id-nome-projeto" eName="nome_do_projeto" label="Nome do Projeto:" required></br-input-component>
</div>
<!--OBJETIVO DO PROJETO-->
<div class="col-4 mb-4">
<br-textarea-component eName="objetivo_do_projeto" label="Objetivo do Projeto:" maxlength="255" rows="10" required></br-textarea-component>
</div>
<!--RESULTADOS ESPERADOS-->
<div class="col-4 mb-4">
<br-textarea-component eName="resultados_esperados" label="Resultados esperados:" maxlength="255" rows="10" required></br-textarea-component>
</div>
<!--VALOR DO PROJETO-->
<div class="col-4 mb-4">
<br-input-component inputId="id-valor-do-projeto" eName="valor_do_projeto" label="Valor do Projeto (R$):" onblur="handleValorValidation" placeholder="somente números" required></br-input-component>
</div>
</div>
</section>
<!--SECAO DETALHAMENTO MERCADORIAS-->
<section class="mb-5 toPdf" id="id-mercadorias" name="detalhamento_das_mercadorias">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="mb-5">
<h4>Detalhamento das Mercadorias Solicitadas</h4>
</div>
<div class="br-table">
<table id="id-tb-mercadorias" class="mb-5" name="detalhamento_das_mercadorias_solicitadas" required>
<thead>
<tr>
<th class="text-up-01 p-1 col-2">Tipo</th>
<th class="text-up-01 p-1 col-3">Descrição/Modelo</th>
<th class="text-up-01 p-1 col-2">Marca (opcional)</th>
<th class="text-up-01 p-1 col-1">Unidade (opcional)</th>
<th class="text-up-01 p-1 col-1">Qtde (opcional)</th>
<th class="text-up-01 p-1 col-2">Observação (opcional)</th>
<th class="text-up-01 p-1 col-1 acoes">Ações</th>
</tr>
</thead>
<tbody id="id-bd-mercadorias"></tbody>
</table>
<!--BOTOES LIMPAR E INCLUIR MERCADORIA-->
<div id="btn-add-mercadorias" class="botao">
<button onclick="excluirTodasLinhasTabela(tbMercadorias)" class="br-button mr-3">Limpar</button>
<button onclick="incluirMercadorias()" class="br-button secondary mr-3">Incluir Mercadoria</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!--SECAO BOTAO GERAR DOCUMENTO-->
<section class="mb-5" id="id-gerar-documento">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="text-center my-3">
<button onclick="gerarDocumento()" class="br-button primary">Gerar Documento</button>
</div>
</div>
</div>
</div>
</section>
<!-- MENSAGEM PADRÃO DE IMPRESSÃO -->
<section id="impressao-impedida">
<div class="text-center">Utilize o botão Gerar Documento</div>
</section>
<!--MODAL SIMPLES-->
<section id="id-modal-simples">
<br-modal-simples-component></br-modal-simples-component>
</section>
<!--RODAPE-->
<section id="id-rodape">
<br-rodape></br-rodape>
</section>
<!--JAVASCRIPT-->
<script>
////////// VARIÁVEIS //////////
let tbMercadorias = document.querySelector('#id-tb-mercadorias');
let bdMercadorias = document.querySelector('#id-bd-mercadorias');
let modalComponente = document.querySelector('br-modal-simples-component');
// LIDA COM VALIDAÇÃO DE TELEFONE
function handleTelefoneValidation(e){
const isValid = validarTelefone(e);
// Se o retorno for falso, exibe o modal
if (!isValid) {
if (modalComponente) {
modalComponente.showModal(
'Atenção',
'Número de telefone inválido. O telefone deve conter 10 ou 11 dígitos numéricos.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
}
}
}
// LIDA COM VALIDAÇÃO DE EMAIL
function handleEmailValidation(e){
const isValid = validarEmail(e);
// Se o retorno for falso, exibe o modal
if (!isValid) {
if (modalComponente) {
modalComponente.showModal(
'Atenção',
'E-mail inválido. Por favor, insira um e-mail válido.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
}
}
}
// LIDA COM VALIDAÇÃO DE EMAIL
function handleQtdadeValidation(e){
const isValid = validarInteiroPositivo(e);
// Se o retorno for falso, exibe o modal
if (!isValid) {
if (modalComponente) {
modalComponente.showModal(
'Atenção',
'Valor inválido! Deve ser numérico e maior que 0.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
}
}
}
// LIDA COM VALIDAÇÃO DE VALOR
function handleValorValidation(e){
const isValid = validarValor(e);
// Se o retorno for falso, exibe o modal
if (!isValid) {
if (modalComponente) {
modalComponente.showModal(
'Atenção',
'Valor inválido. Deve ser numérico e maior que R$ 0,00.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
}
}
}
// ADICIONA LINHA NA TABELA MERCADORIAS
function incluirMercadorias() {
// valida seção id-solicitante
if(!validarCamposRequiredNaSecao('id-solicitante')){
modalComponente.showModal(
'Atenção',
'Existem campos obrigatórios não preenchidos.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
return
}
// valida seção id-pedido
if(!validarCamposRequiredNaSecao('id-pedido')){
modalComponente.showModal(
'Atenção',
'Existem campos obrigatórios não preenchidos.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
return
}
// valida seção id-projeto-social conforme selecionado
let secaoProjeto = document.querySelector('#id-projeto-social');
if (!secaoProjeto.classList.contains('d-none')){
if (!validarCamposRequiredNaSecao('id-projeto-social')){
modalComponente.showModal(
'Atenção',
'Existem campos obrigatórios não preenchidos.',
null,
'Entendi',
null,
modalComponente.closeModal.bind(modalComponente)
)
return
}
}
var novaLinha = bdMercadorias.insertRow(-1);
for (var i = 0; i < 7; i++) {
var novaCelula = novaLinha.insertCell(i);
novaCelula.classList.add('p-2');
// TIPO MERCADORIA (select)
if (i == 0) {
let tipoMercadoria = document.createElement('br-select-component');
tipoMercadoria.setAttribute('opcoes', 'getOpcoesTipoMercadoria');
tipoMercadoria.setAttribute('eName', 'tipo_de_mercadoria');
tipoMercadoria.setAttribute('required', 'required');
novaCelula.appendChild(tipoMercadoria);
}
// DESCRIÇÃO/MODELO (textarea)
if (i == 1) {
let descricao = document.createElement('br-textarea-component');
descricao.setAttribute('eName', 'descricao_modelo');
descricao.setAttribute('placeholder', 'máximo 50 caracteres');
descricao.setAttribute('maxlength', '50');
descricao.setAttribute('required', 'required');
novaCelula.appendChild(descricao);
}
// MARCA (input)
if (i == 2) {
let marca = document.createElement('br-input-component');
marca.setAttribute('eName', 'marca');
marca.setAttribute('placeholder', 'máximo 15 caracteres');
marca.setAttribute('maxlength', '15');
novaCelula.appendChild(marca);
}
// UNIDADE (select)
if (i == 3) {
let unidade = document.createElement('br-select-component');
unidade.setAttribute('opcoes', 'getOpcoesUnidade');
unidade.setAttribute('eName', 'unidade');
// unidade.setAttribute('required', 'required');
novaCelula.appendChild(unidade);
}
// QUANTIDADE (input)
if (i == 4) {
let qtd = document.createElement('br-input-component');
qtd.setAttribute('eName', 'quantidade');
// qtd.setAttribute('placeholder', '5 dígitos');
qtd.setAttribute('maxlength', '9');
qtd.setAttribute('onchange', 'handleQtdadeValidation');
// qtd.setAttribute('required', 'required');
novaCelula.appendChild(qtd);
}
// OBSERVAÇÃO (textarea)
if (i == 5) {
let observacao = document.createElement('br-textarea-component');
observacao.setAttribute('eName', 'observacao');
observacao.setAttribute('placeholder', 'máximo 50 caracteres');
observacao.setAttribute('maxlength', '50');
novaCelula.appendChild(observacao);
}
// AÇÕES
if (i == 6){
novaCelula.classList.add('acoes');
let btnExcluir = document.createElement('button');
let iconeLixeira = document.createElement('i');
btnExcluir.classList.add('br-button');
iconeLixeira.classList.add('fa', 'fa-trash-alt');
btnExcluir.appendChild(iconeLixeira);
novaCelula.appendChild(btnExcluir);
btnExcluir.addEventListener('click', function () {
excluirLinha(this);
});
}
}
}
// Desabilitar atalhos de teclado comuns para impressão
desabilitarAtalhosImpressao()
</script>
</body>
</html>