Primeiro commit fluig

This commit is contained in:
2025-08-26 14:12:50 -03:00
commit 8b7a079235
726 changed files with 319231 additions and 0 deletions
@@ -0,0 +1,28 @@
function displayFields(form, customHTML) {
var activity = getValue('WKNumState');
var userId = getValue('WKUser');
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
form.setValue("WKNumProces", getValue('WKNumProces'));
form.setValue("activity", activity);
form.setValue("formMode", form.getFormMode());
var c1 = DatasetFactory.createConstraint("colleagueId", userId, userId, ConstraintType.MUST);
var filter = new Array(c1);
var fields = new Array("colleagueName");
var retorno = DatasetFactory.getDataset("colleague", fields, filter, null);
//requester
if (activity == 0) {
form.setValue("requesterName", retorno.getValue(0, "colleagueName"));
form.setValue("requesterMail", retorno.getValue(0, "mail"));
form.setValue("requesterId", userId);
} else {
form.setValue("currentUserName", retorno.getValue(0, "colleagueName"));
form.setValue("currentUsermail", retorno.getValue(0, "mail"));
form.setValue("currentUserId", userId);
}
}
@@ -0,0 +1,24 @@
function validateForm(form){
function validateForm(form){
var msg ="";
if(form.getValue("nomeGestorArea") == ""){
msg += "Campo Nome do Gestor não foi preenchido"
}
if(form.getValue("tipoOcorrencia") == ""){
msg += "Campo Tipo Ocorrencia não foi preenchido"
}
if(form.getValue("detalheSolicitacao") == ""){
msg += "Campo Detalhamento da situação da situação não foi preenchido"
}
if (msg!="") {
throw msg;
}
}
}
@@ -0,0 +1,848 @@
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="/style-guide/css/fluig-style-guide.min.css"
/>
<script src="/resources/js/jquery/jquery.js"></script>
<script src="/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/resources/js/mustache/mustache-min.js"></script>
<script src="/style-guide/js/fluig-style-guide.min.js"></script>
<script type="text/javascript" src="/webdesk/vcXMLRPC.js"></script>
<link
href="/webdesk/customresources?cid=4&resourceName=temaFormulario/0.css"
type="text/css"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="/style-guide/css/fluig-style-guide-ratingstars.min.css"
/>
<script src="/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>
<style>
h6 {
color: #afb0b3 !important;
font-weight: normal !important;
}
h2 {
color: #008ac4 !important;
display: flex !important;
flex-direction: row !important;
}
h2:after {
content: "" !important;
flex: 1 1 !important;
border-bottom: 2px solid #008ac4 !important;
margin: auto !important;
}
.flaticon-account-box {
color: #008ac4 !important;
}
#rcorners {
height: 110px;
line-height: 110px;
color: white;
border-radius: 0px 0px 50px 50px;
background: rgb(0, 138, 192);
background: linear-gradient(
90deg,
rgba(0, 138, 192, 1) 0%,
rgba(2, 166, 189, 1) 50%,
rgba(1, 192, 181, 1) 100%
);
text-align: center !important;
}
.change-weight {
font-weight: 400 !important;
}
textarea {
resize: vertical;
}
.consegueResolverMotivo .textoAuxiliar {
width: 100%;
color: #8c8d8f;
font-size: 12px;
margin-left: 1.5em;
font-weight: 400;
}
.ratingStars {
display: flex;
align-items: center;
height: 50px;
}
.ratingStars .minha-avaliacao {
margin: 0 20px;
color: #f0ad4e;
}
</style>
<script>
//show the activity and then block the fields
function showAndBlock(activity) {
for (var i = 0, l = activity.length; i < l; i++) {
$(".activity-" + activity[i]).show();
//remove buttons
$(".hideButton").hide();
//use an each to block everything inside the class activity-X
$(".activity-" + activity[i] + " :input").each(function () {
$(this).attr("readonly", "readonly");
$(this).on("mousedown", function (e) {
this.blur();
window.focus();
});
if ($(this).is(":checkbox")) {
$(this).attr("disabled", true);
} else if ($(this).is(":radio")) {
$(this).on("click", function () {
return false;
});
}
});
}
}
function getCurrentDate() {
var newDate = new Date();
var h = newDate.getHours();
if (h < 10) {
h = "0" + h;
}
var m = newDate.getMinutes();
if (m < 10) {
m = "0" + m;
}
var hour = h + ":" + m; // + ":" + s;
var day = newDate.getDate();
if (day < 10) {
day = "0" + day;
}
var month = newDate.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
newDate = day + "/" + month + "/" + newDate.getFullYear();
var currentDate = [newDate, hour];
return currentDate;
}
var beforeSendValidate = function (numState, nextState) {
// return true;
if (numState == 0 || numState == 1) {
if ($("#tipoOcorrencia").val() == "") {
throw "'Tipo da ocorrência' é obrigatório.";
} else if ($("#tituloOcorrencia").val() == "") {
throw "'Título da ocorrência' é obrigatório.";
} else if ($("#detalheSolicitacao").val() == "") {
throw "'Detalhamento da situação' é obrigatório.";
}
} else if (numState == 2) {
if (
$("input[name='consegueResolver']:checked").val() == "" ||
$("input[name='consegueResolver']:checked").val() == undefined
) {
throw "'Consegue resolver?' é obrigatório.";
} else if (
$("input[name='consegueResolver']:checked").val() == "nao"
) {
if (
$("input[name='possuiInconsistencia']:checked").val() == "" ||
$("input[name='possuiInconsistencia']:checked").val() == undefined
) {
throw "'Qual o motivo?' é obrigatório.";
}
}
if ($("#consideracoesTecnicas").val() == "") {
throw "'Considerações' é obrigatório.";
}
} else if (numState == 6) {
if ($("#detalheSolicitacao").val() == "") {
throw "'Detalhamento da situação' é obrigatório.";
}
} else if (numState == 11) {
if (
$("input[name='situacaoResolvida']:checked").val() == "" ||
$("input[name='situacaoResolvida']:checked").val() == undefined
) {
throw "'Situação resolvida?' é obrigatório.";
} else if (
$("input[name='situacaoResolvida']:checked").val() == "nao"
) {
if ($("#consideracoes").val() == "") {
throw "'Considerações' é obrigatório.";
}
}
}
};
function setSelectedZoomItem(selectedItem) {
if (selectedItem.inputName == "nomeGestorArea") {
$("#emailGestorArea").val(selectedItem.emailGestor);
}
}
function removedZoomItem(removedItem) {
console.log("removedItem", removedItem);
if (removedItem.inputName == "nomeGestorArea") {
$("#emailGestorArea").val("");
}
}
</script>
</head>
<body>
<div class="fluig-style-guide" style="background-color: white">
<form>
<div style="display: none">
<input type="text" id="WKNumProces" name="WKNumProces" />
<input type="text" id="activity" name="activity" />
<input type="text" id="formMode" name="formMode" />
<!-- requester -->
<input type="text" id="requesterMail" name="requesterMail" />
<input type="text" id="requesterId" name="requesterId" />
<!-- current user -->
<input type="text" id="currentUserName" name="currentUserName" />
<input type="text" id="currentUsermail" name="currentUsermail" />
<input type="text" id="currentUserId" name="currentUserId" />
</div>
<h1 id="rcorners">Abertura de chamado</h1>
<div class="container activity-all">
<div class="activity activity-0 activity-1 activity-6">
<div>
<br />
<h2>
<i class="flaticon flaticon-account-box" aria-hidden="true"></i>
&nbsp;Dados gerais &nbsp;
</h2>
<h6>
Estes são os dados referentes aos responsáveis pela abertura e
pela solicitação do atual processo.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="requesterName"> Usuário de abertura </label>
<input
type="text"
name="requesterName"
id="requesterName"
class="form-control"
readonly
data-protection="Usuário de abertura"
data-protection-anonymizable
data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataAbertura"> Data </label>
<input
type="text"
name="dataAbertura"
id="dataAbertura"
class="form-control"
readonly
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="userSolicitante"> Usuário solicitante </label>
<input
type="text"
class="form-control"
name="userSolicitante"
id="userSolicitante"
placeholder="Insira o nome completo do solicitante. Ex.: João da Silva"
data-protection="Usuário solicitante"
data-protection-anonymizable
data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
<div class="form-group col-md-6 col-xs-12">
<label for="emailSolicitante">
E-mail do solicitante
</label>
<input
type="email"
name="emailSolicitante"
id="emailSolicitante"
class="form-control"
placeholder="Insira o e-mail do solicitante. Ex.: Joaodasilva@email.com.br"
data-protection="E-mail do solicitante"
data-protection-anonymizable
data-protection-sensitive
data-protection-mail
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="nomeGestorArea"> Gestor da área </label>
<input
type="zoom"
class="form-control"
name="nomeGestorArea"
id="nomeGestorArea"
placeholder="Pesquise o nome do gestor"
data-zoom="{
'displayKey':'gestorCentroCusto',
'datasetId':'ds_centroCusto',
'fields':[
{
'field':'gestorCentroCusto',
'label':'Nome',
'standard':'true',
'search':'true'
},
{
'field':'emailGestor',
'label':'E-mail',
'search':'true'
}
]
}"
data-protection="Gestor da área"
data-protection-anonymizable
data-protection-sensitive
data-protection-other
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
<div class="form-group col-md-6 col-xs-6">
<label for="emailGestorArea"> E-mail do gestor </label>
<input
type="text"
name="emailGestorArea"
id="emailGestorArea"
class="form-control"
readonly
data-protection="E-mail do gestor"
data-protection-anonymizable
data-protection-sensitive
data-protection-mail
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="estabelecimento">
Estabelecimento/Filial
</label>
<span class="required text-danger"><strong> * </strong></span>
<input type="zoom" class="form-control requiredInput" name="estabelecimento" id="estabelecimento"
data-zoom="{
'displayKey':'estabelecimento',
'datasetId':'dsFiliais',
'placeholder': 'Pesquisar nome do estabelecimento ou filial.',
'fields':[
{
'field':'estabelecimento',
'label':'Filial',
'standard':'true',
'search':'true'
}
]
}" />
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
<div class="form-group col-md-6 col-xs-6">
<label for="complemento"> Complemento </label>
<input
type="text"
name="complemento"
id="complemento"
class="form-control"
placeholder="Prédio, Bloco, Andar, Mesa"
/>
</div>
</div>
</div>
</div>
<div>
<br />
<h2>
<i class="flaticon flaticon-settings" aria-hidden="true"></i>
&nbsp;Dados Técnicos &nbsp;
</h2>
<h6>Insira abaixo os itens necessários para o solicitante.</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="tipoOcorrencia"> Tipo da Ocorrência </label>
<span class="required text-danger"
><strong> * </strong></span
>
<input
type="zoom"
class="form-control"
name="tipoOcorrencia"
id="tipoOcorrencia"
data-zoom="{
'displayKey':'nomeOcorrencia',
'datasetId':'ds_Ocorrencias',
'fields':[
{
'field':'nomeOcorrencia',
'label':'Tipo',
'standard':'true',
'search':'true'
}
]
}"
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="tituloOcorrencia"> Título da ocorrência </label>
<span class="text-danger"><strong>*</strong></span>
<input
type="text"
name="tituloOcorrencia"
id="tituloOcorrencia"
class="form-control"
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="detalheSolicitacao"
>Detalhamento da situação</label
>
<span class="text-danger"><strong>*</strong></span>
<textarea
class="form-control"
name="detalheSolicitacao"
id="detalheSolicitacao"
></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-2">
<div>
<br />
<h2>
<i
class="flaticon flaticon-check-circle"
aria-hidden="true"
></i>
&nbsp;Análise&nbsp;
</h2>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="analistaTecnico"> Analista </label>
<input
type="text"
name="analistaTecnico"
id="analistaTecnico"
class="form-control"
readonly
data-protection="Analista"
data-protection-anonymizable
data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataAnaliseTecnica"> Data </label>
<input
type="text"
name="dataAnaliseTecnica"
id="dataAnaliseTecnica"
class="form-control"
readonly
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Consegue resolver?</label>
<span class="text-danger"><strong>*</strong></span
><br />
<div class="radio-inline">
<label>
<input
name="consegueResolver"
id="consegueResolverSim"
value="sim"
type="radio"
/>
<span class="change-weight">Sim</span>
</label>
</div>
<div class="radio-inline">
<label>
<input
name="consegueResolver"
id="consegueResolverNao"
value="nao"
type="radio"
/>
<span class="change-weight">Não</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row consegueResolverMotivo">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Qual o motivo?</label>
<span class="text-danger"><strong>*</strong></span
><br />
<div class="">
<label>
<input
name="possuiInconsistencia"
id="possuiInconsistenciaNao"
value="nao"
type="radio"
/>
<span class="change-weight"
>A atual solicitação <b>carece de informações</b>, o
que limita o entendimento da real necessidade do
usuário</span
>
<p class="textoAuxiliar">
Esta opção retorna a atual solicitação ao usuário
solicitante, a fim de que este atualize o formulário
com as informações faltantes.
</p>
</label>
</div>
<div class="">
<label>
<input
name="possuiInconsistencia"
id="possuiInconsistenciaSim"
value="sim"
type="radio"
/>
<span class="change-weight"
>A atual solicitação <b>possui inconsistências</b> que
impedem sua movimentação</span
>
<p class="textoAuxiliar">
Esta opção encerra automaticamente a atual
solicitação.
</p>
</label>
</div>
<div class="">
<label>
<input
name="possuiInconsistencia"
id="precisaSuprimentos"
value="suprimentos"
type="radio"
/>
<span class="change-weight"
>A atual solicitação <b>carece de suprimentos</b>, o
que limita o atendimento da necessidade do
usuário</span
>
<p class="textoAuxiliar">
Esta opção envia a atual solicitação ao <b>Setor de Compras</b>, a fim de que este realize as devidas aquisições.
Ao indicar esta opção, será necessário informar os itens que precisará serem comprados.
</p>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="consideracoesTecnicas">Considerações</label>
<span class="text-danger"><strong>*</strong></span>
<textarea
class="form-control"
name="consideracoesTecnicas"
id="consideracoesTecnicas"
placeholder="Descreva a justificativa para a sua análise"
></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-11">
<div>
<br />
<h2>
<i
class="flaticon flaticon-check-circle"
aria-hidden="true"
></i>
&nbsp;Validação do serviço &nbsp;
</h2>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userValidacao"> Usuário de abertura </label>
<input
type="text"
name="userValidacao"
id="userValidacao"
class="form-control"
readonly
data-protection="Usuário de abertura"
data-protection-anonymizable
data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
/>
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataUserValidacao"> Data </label>
<input
type="text"
name="dataUserValidacao"
id="dataUserValidacao"
class="form-control"
readonly
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Situação resolvida?</label>
<span class="text-danger"><strong>*</strong></span
><br />
<div class="radio-inline">
<label>
<input
name="situacaoResolvida"
id="situacaoResolvidaSim"
value="sim"
type="radio"
/>
<span class="change-weight">Sim</span>
</label>
</div>
<div class="radio-inline">
<label>
<input
name="situacaoResolvida"
id="situacaoResolvidaNao"
value="nao"
type="radio"
/>
<span class="change-weight">Não</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row ratingAction">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Como você avalia o atendimento?</label>
<div class="ratingStars">
<span>Péssimo</span>
<div class="minha-avaliacao"></div>
<span>Excelente</span>
</div>
<input type="hidden" id="ratingValue" name="ratingValue" />
</div>
</div>
</div>
</div>
<div class="row explainAction">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="consideracoes">Considerações</label>
<span class="text-danger"><strong>*</strong></span>
<textarea
class="form-control"
name="consideracoes"
id="consideracoes"
placeholder="Descreva a justificativa para a sua avaliação"
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
<script>
var ratingStars;
var servicoNaoValidado =
$("input[name=situacaoResolvida]:checked").val() == "nao";
$(document).ready(function () {
if ($("#formMode").val() == "VIEW") {
showAndBlock([0, 2, 11]);
$(".ratingAction").hide();
if ($("input[name=situacaoResolvida]:checked").val() == "sim") {
$(".ratingAction").show();
}
let ratingValue;
if ($("#ratingValue").val() == "" || $("#ratingValue").val() == 0) {
ratingValue = 0;
} else {
ratingValue = $("#ratingValue").val();
}
let html = "";
for (let i = 0; i < 5; i++) {
if (i < ratingValue) {
html +=
'<i class="flaticon flaticon-star-active icon-md" aria-hidden="true"></i>';
} else {
html +=
'<i class="flaticon flaticon-star icon-md" aria-hidden="true"></i>';
}
}
console.log(html);
$(".minha-avaliacao").html(html);
} else {
//show the right fields
var activity = $("#activity").val();
var requestDate = getCurrentDate();
$(".activity").hide();
$(".activity-" + activity).show();
if (activity == 0) {
//primeira atividade
$("#dataAbertura").val(requestDate[0] + " - " + requestDate[1]);
} else if (activity == 2) {
if (servicoNaoValidado) {
showAndBlock([0, 11]);
} else {
showAndBlock([0]);
$("#analistaTecnico").val($("#currentUserName").val());
$("#dataAnaliseTecnica").val(
requestDate[0] + " - " + requestDate[1]
);
}
} else if (activity == 11) {
showAndBlock([0, 2]);
let ratingValue;
if ($("#ratingValue").val() == "" || $("#ratingValue").val() == 0) {
ratingValue = 0;
} else {
ratingValue = $("#ratingValue").val();
}
ratingStars = FLUIGC.stars(".minha-avaliacao", {
stars: 5,
value: ratingValue,
sizeClass: "icon-md",
});
ratingStars.on("click", (obj) => {
let countCurrentRating = 0;
$(".fluigicon-star").each(() => {
countCurrentRating++;
});
$("#ratingValue").val(countCurrentRating);
});
$("#userValidacao").val($("#currentUserName").val());
$("#dataUserValidacao").val(requestDate[0] + " - " + requestDate[1]);
} else if (activity == 6) {
showAndBlock([1, 2]);
$("#detalheSolicitacao").attr("readonly", false);
}
$("input[name=consegueResolver]").on("change", function () {
$(".consegueResolverMotivo").hide();
if ($(`input[name=${$(this).attr("name")}]:checked`).val() == "nao")
$(".consegueResolverMotivo").show();
});
$("input[name=consegueResolver]").trigger("change");
$("input[name=situacaoResolvida]").on("change", function () {
$(".explainAction, .ratingAction").hide();
if ($("input[name=situacaoResolvida]:checked").val() == "nao") {
$(".explainAction").show();
} else if (
$("input[name=situacaoResolvida]:checked").val() == "sim"
) {
$(".ratingAction").show();
}
});
$("input[name=situacaoResolvida]").trigger("change");
}
});
</script>
</html>
@@ -0,0 +1,27 @@
function displayFields(form, customHTML) {
var activity = getValue('WKNumState');
var userId = getValue('WKUser');
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
form.setValue("WKNumProces", getValue('WKNumProces'));
form.setValue("activity", activity);
form.setValue("formMode", form.getFormMode());
var c1 = DatasetFactory.createConstraint("colleagueId", userId, userId, ConstraintType.MUST);
var filter = new Array(c1);
var fields = new Array("colleagueName");
var retorno = DatasetFactory.getDataset("colleague", fields, filter, null);
//requester
if (activity == 0) {
form.setValue("requesterName", retorno.getValue(0, "colleagueName"));
form.setValue("requesterMail", retorno.getValue(0, "mail"));
form.setValue("requesterId", userId);
} else {
form.setValue("currentUserName", retorno.getValue(0, "colleagueName"));
form.setValue("currentUsermail", retorno.getValue(0, "mail"));
form.setValue("currentUserId", userId);
}
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,897 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide.min.css" />
<script src="/resources/js/jquery/jquery.js"></script>
<script src="/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/resources/js/mustache/mustache-min.js"></script>
<script src="/style-guide/js/fluig-style-guide.min.js"></script>
<script type="text/javascript" src="/webdesk/vcXMLRPC.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
h6 {
color: #afb0b3 !important;
font-weight: normal !important;
}
h2 {
color: #008ac4 !important;
display: flex !important;
flex-direction: row !important;
}
h2:after {
content: "" !important;
flex: 1 1 !important;
border-bottom: 2px solid #008ac4 !important;
margin: auto !important;
}
.flaticon {
color: #008ac4 !important;
}
#rcorners {
height: 110px;
line-height: 110px;
color: white;
border-radius: 0px 0px 50px 50px;
background: rgb(0, 138, 192);
background: linear-gradient(90deg,
rgba(0, 138, 192, 1) 0%,
rgba(2, 166, 189, 1) 50%,
rgba(1, 192, 181, 1) 100%);
text-align: center !important;
}
.change-weight {
font-weight: 400 !important;
}
.asteristicWarning {
color: #000000 !important;
margin-top: 50px !important;
}
textarea {
resize: vertical;
}
.errorValidate .requiredInput,
.errorValidate .select2 {
border: 2px solid #cc3d3d !important;
}
.text-error {
font-size: 10px;
margin: 0;
display: none;
}
.errorValidate .text-error {
display: block;
}
input.select2-search__field::placeholder {
color: #afb0b3;
}
</style>
</head>
<body>
<div class="fluig-style-guide" style="background-color: white">
<form>
<div style="display: none">
<input type="text" id="WKNumProces" name="WKNumProces" />
<input type="text" id="activity" name="activity" />
<input type="text" id="formMode" name="formMode" />
<!-- requester -->
<input type="text" id="requesterMail" name="requesterMail" />
<input type="text" id="requesterId" name="requesterId" />
<!-- current user -->
<input type="text" id="currentUserName" name="currentUserName" />
<input type="text" id="currentUsermail" name="currentUsermail" />
<input type="text" id="currentUserId" name="currentUserId" />
<input type="text" id="gestor_cc" name="gestor_cc" />
</div>
<h1 id="rcorners">Solicitação de compra</h1>
<div class="container activity-all">
<div class="activity activity-0 activity-1">
<div>
<br />
<h2>
<i class="flaticon flaticon-account-box" aria-hidden="true"></i>
&nbsp;Dados gerais &nbsp;
</h2>
<h6>
Dados referentes aos responsáveis pela abertura e pela
solicitação do atual processo.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="requesterName"> Usuário de abertura </label>
<input type="text" name="requesterName" id="requesterName" class="form-control"
data-protection="Usuário de abertura" data-protection-anonymizable data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataAbertura"> Data </label>
<input type="text" name="dataAbertura" id="dataAbertura" class="form-control" readonly />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="userSolicitante"> Usuário solicitante </label>
<input placeholder="Inserir nome solicitante." type="text" class="form-control" name="userSolicitante"
id="userSolicitante" data-protection="Usuário solicitante" data-protection-anonymizable
data-protection-sensitive data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
<div class="form-group col-md-6 col-xs-12">
<label for="emailSolicitante">
E-mail do solicitante
</label>
<input placeholder="Inserir e-mail do solicitante. Ex.: Joaodasilva@email.com.br" type="text"
name="emailSolicitante" id="emailSolicitante" class="form-control"
data-protection="E-mail do solicitante" data-protection-anonymizable data-protection-sensitive
data-protection-mail
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="estabelecimento">
Estabelecimento/Filial
</label>
<span class="required text-danger"><strong> * </strong></span>
<input type="zoom" class="form-control requiredInput" name="estabelecimento" id="estabelecimento"
data-zoom="{
'displayKey':'DESCRICAO',
'datasetId':'dsSysCompany',
'placeholder': 'Pesquisar por nome do estabelecimento.',
'fields':[
{
'field':'CODIGO',
'label':'Filial',
'standard':'true',
'search':'true'
},
{
'field':'DESCRICAO',
'label':'estabelecimento',
'search':'true'
},
{
'field':'BPCS',
'label':'bpcs',
'search':'true'
}
]
}" />
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
<div class="form-group col-md-6 col-xs-6">
<label for="centroCusto"> Centro de Custo </label>
<input type="zoom" class="form-control" name="centroCusto" id="centroCusto" data-zoom="{
'displayKey':'codigoCentroCusto',
'datasetId':'ds_centroCusto',
'placeholder': 'Pesquisar número ou nome do centro de custo.',
'fields':[
{
'field':'codigoCentroCusto',
'label':'Código',
'standard':'true',
'search':'true'
},
{
'field':'centroCusto',
'label':'Centro de custo',
'search':'true'
},
{
'field': 'gestorCentroCusto',
'label': 'Gestor',
'visible': 'false'
},
{
'field': 'emailGestor',
'label': 'Email do gestor',
'visible': 'false'
},
{
'field': 'idGestor',
'label': 'Id do gestor',
'visible': 'false'
}
]
}" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="gestorNome">
Gestor aprovador do centro de custo
</label>
<input type="text" placeholder="Nome do gestor aprovador do centro de custo" class="form-control"
name="gestorNome" id="gestorNome" data-protection="Gestor aprovador do centro de custo"
data-protection-anonymizable data-protection-sensitive data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-6 col-xs-6">
<label for="gestorEmail"> E-mail do gestor </label>
<input type="text" placeholder="E-mail do gestor aprovador do centro de custo" name="gestorEmail"
id="gestorEmail" class="form-control" data-protection="E-mail do gestor"
data-protection-anonymizable data-protection-sensitive data-protection-mail
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-6">
<label for="cnpj"> CNPJ da filial </label>
<span class="required text-danger"><strong> * </strong></span>
<input type="text" name="cnpj" id="cnpj" class="form-control requiredInput" readonly/>
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
<div class="form-group col-md-6 col-xs-6" style="visibility: hidden;">
<label for="protheus">Protheus</label>
<span class="required text-danger"><strong> * </strong></span>
<input type="text" name="protheus" id="protheus" class="form-control requiredInput" readonly/>
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
</div>
</div>
</div>
<div>
<br />
<h2>
<i class="flaticon flaticon-product" aria-hidden="true"></i>
&nbsp;Itens &nbsp;
</h2>
<h6>
Clique no botao Selecionar Produtos para confirmar o produto para compra ser efetuada.
</h6>
<br />
</div>
<div class="row">
<div class="form-group col-md-12 col-xs-12">
<button type="button" class="btn btn-primary" onclick="consultarProdutos()">Selecionar Produtos</button>
<button type="button" class="btn btn-primary" onclick="cadastrarProduto()">Cadastrar Produtos</button>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12 col-xs-12">
<table tablename="tabelaItens" class="table" id="tabelaItens" noaddbutton="true"
nodeletebutton="true">
<thead>
<tr class="tableHeadRow">
<th class="tableColumn">#</th>
<th class="tableColumn">Código do Item</th>
<th class="tableColumn">Quantidade</th>
<th class="tableColumn">Descrição do Item</th>
</tr>
</thead>
<tbody>
<tr class="tableBodyRow">
<td style="width: 10%">
<div class="form-input">
<span><strong class="tabela_itens_id"> </strong></span>
</div>
</td>
<td style="width: 40%">
<div class="form-input">
<input type="text" placeholder="Selecione o produto no botão acima" class="form-control requiredInput"
name="descricao" id="descricao" readonly/>
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
</td>
<td style="width: 5%">
<div class="form-input">
<input type="text" placeholder="Inserir quantidade" class="form-control requiredInput"
name="quantidadeItem" id="quantidadeItem" />
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
</td>
<td style="width: 40%">
<div class="form-input">
<input type="text" class="form-control" name="codigoItem" id="codigoItem" readonly />
</div>
</td>
<td class="hideButton" style="width: 70px">
<button onClick="remove_row(this)" class="fluigicon fluigicon-trash fluigicon-md btn"
style="position: initial; background: white"></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div>
<br />
<h2>
<i class="flaticon flaticon-message-question" aria-hidden="true"></i>
&nbsp;Justificativa &nbsp;
</h2>
<h6>
Motivos para a compra dos itens e as possíveis informações
complementares.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12 col-xs-12">
<label for="justificativa">
Qual o motivo da compra?
</label>
<span class="text-danger"><strong>*</strong></span>
<textarea placeholder="Descreva o motivo para a solicitação de compra"
class="form-control requiredInput" rows="3" id="justificativa" name="justificativa"></textarea>
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="activity activity-4">
<div>
<br />
<h2>
<i class="flaticon flaticon-check-circle" aria-hidden="true"></i>
&nbsp;Validação do centro de custo &nbsp;
</h2>
<h6>
Informações complementares sobre a validação do centro de custo
da solicitação.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userValidacaoGestor">
Gestor aprovador do centro de custo
</label>
<input type="text" name="userValidacaoGestor" id="userValidacaoGestor" class="form-control"
data-protection="Gestor aprovador do centro de custo" data-protection-anonymizable
data-protection-sensitive data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataValidacaoGestor"> Data </label>
<input type="text" name="dataValidacaoGestor" id="dataValidacaoGestor" class="form-control"
readonly />
</div>
</div>
</div>
</div>
<div class="row justificativa-activity-4">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="justificativaDecisaoGestor">Justificativa</label>
<textarea placeholder="Descreva a justificativa para a validação do centro de custo."
class="form-control" name="justificativaDecisaoGestor" id="justificativaDecisaoGestor"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-6">
<div>
<br />
<h2>
<i class="flaticon flaticon-tests-central" aria-hidden="true"></i>
&nbsp;Cotação de produtos &nbsp;
</h2>
<h6>
Dados referentes a análise da solicitação feita.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userValidacaoCompras">
Usuário responsável pela cotação
</label>
<input type="text" name="userValidacaoCompras" id="userValidacaoCompras" class="form-control"
data-protection="Usuário responsável pela análise da solicitação" data-protection-anonymizable
data-protection-sensitive data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataValidacaoCompras"> Data </label>
<input type="text" name="dataValidacaoCompras" id="dataValidacaoCompras" class="form-control"
readonly />
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12 col-xs-12">
<label for="numCotacoes">Cotações por produto:</label>
<input type="number" id="numCotacoes" name="cotacaouser" placeholder="Número de cotações" min="1">
<button id="gerarTabela" class="btn btn-primary btn-sm"
onclick="gerarTabelaCotacaoComNumeracao('tabelaCotacao', 'tabelaItens')">Gerar Tabela</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="col-md-12">
<table class="table" tablename="tabelaCotacao" id="tabelaCotacao" noaddbutton="true"
nodeletebutton="true">
<thead>
<tr>
<th style="width: 5%;">#</th>
<th style="width: 20%;">Item de compra</th>
<th style="width: 10%;">Quantidade</th>
<th style="width: 20%;">Fornecedor</th>
<th style="width: 10%;">Preço</th>
<th style="width: 15%;">Data de entrega</th>
<th style="width: 20%;">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fs-v-align-top fs-text-center">
<!-- Número do item -->
<div class="fs-font-bold fs-md-margin-bottom count" id="numCotacao"></div>
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Item de compra -->
<input type="text" class="form-control" name="itemCompra" id="itemCompra" readonly />
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Quantidade -->
<input type="number" class="form-control" name="quantidade" id="quantidade" min="0" />
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Fornecedor -->
<input type="text" class="form-control" name="fornecedor" id="fornecedor" />
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Preço -->
<div class="input-container">
<i class="fa-solid fa-money-bill"></i>
<input type="text" class="form-control" name="preco" id="preco" />
</div>
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Data de entrega -->
<input type="date" class="form-control" name="dataEntrega" id="dataEntrega" />
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Email -->
<input type="email" class="form-control" name="email" id="email" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12">
<div class="row">
<br />
<h2>
<i class="flaticon flaticon-aim" aria-hidden="true"></i>
&nbsp;Sugestão do Analista &nbsp;
</h2>
<h6>
Análise do Analista sobre a cotação realizada.
</h6>
<br />
</div>
</div>
<div class="row justificativa-activity-6">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="justificativaDecisaoCompras">Detalhes</label>
<textarea placeholder="Insira suas considerações sobre o pedido de compras" class="form-control"
name="justificativaDecisaoCompras" id="justificativaDecisaoCompras"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="col-md-12">
<table class="table" tablename="tabelaCotacaoIndica" id="tabelaCotacaoIndica" noaddbutton="true"
nodeletebutton="true">
<thead>
<tr>
<th style="width: 10%;">Item de compra</th>
<th style="width: 10%;">Quantidade</th>
<th style="width: 10%;">Preço</th>
<th style="width: 15%;">Data de entrega</th>
<th style="width: 15%;">Fornecedor</th>
<th style="width: 15%;">Pagamento</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fs-v-align-top fs-text-center">
<!-- Item de compra -->
<input type="text" class="form-control" name="itemCompraIndica" id="itemCompraIndica"
readonly />
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Quantidade -->
<input type="number" class="form-control" name="quantidadeIndica" id="quantidadeIndica"
readonly />
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Preço -->
<div class="input-container">
<i class="fa-solid fa-money-bill"></i>
<input type="text" class="form-control" name="precoIndica" id="precoIndica" />
</div>
</td>
<td class="fs-v-align-top fs-text-center">
<!-- Data de entrega -->
<input type="date" class="form-control" name="dataEntregaIndica"
id="dataEntregaIndica" />
</td>
<td class="fs-v-align-top fs-text-center">
<input type="zoom" class="form-control requiredInput" name="fornecedorIndica"
id="fornecedorIndica" data-zoom="{
'displayKey':'codigo',
'datasetId':'ds_fornecedor',
'maximumSelectionLength':'1',
'placeholder':'Fornecedor',
'fields':[
{
'field':'codigo',
'label':' Codigo do fornecedor',
'standard':'true',
'search': 'true'
},
{
'field':'nome',
'label':'Nome do fornecedor',
'standard':'true',
'search': 'true'
}
]
}" />
</td>
<!-- Prazo de pagamento -->
<td class="fs-v-align-top fs-text-center">
<input type="zoom" class="form-control requiredInput" name="condPagamentoIndica"
id="condPagamentoIndica" data-zoom="{
'displayKey':'codigo',
'datasetId':'ds_condPag',
'maximumSelectionLength':'1',
'placeholder':'Prazo',
'fields':[
{
'field':'codigo',
'label':' Codigo do prazo',
'standard':'true',
'search': 'true'
},
{
'field':'descricao',
'label':'descricao do codigo',
'standard':'true',
'search': 'true'
}
]
}" />
</td>
</tr>
</tbody>
<!-- Linha para exibir o valor total -->
</table>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="form-group">
<label> <strong>Valor Total da Cotação</strong></label>
<input type="number" name="valorTotalsemformat" id="valorTotalsemformat" readonly />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-57">
<div>
<br />
<h2>
<i class="flaticon flaticon-edit-square" aria-hidden="true"></i>
&nbsp;Gestor aprovador da cotação &nbsp;
</h2>
<h6>
Considerações sobre a cotação realizada pelo setor de compras.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userCotacaoGestor">
Gestor responsável pela cotação
</label>
<input type="text" name="userCotacaoGestor" id="userCotacaoGestor" class="form-control"
data-protection="Usuário responsável pela cotacao" data-protection-anonymizable
data-protection-sensitive data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataAprovCompras"> Data </label>
<input type="text" name="dataAprovCompras" id="dataAprovCompras" class="form-control" readonly />
</div>
</div>
</div>
</div>
<div class="row justificativa-activity-57">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12 col-xs-12">
<label for="consideracoesCotacao"> Considerações </label>
<textarea placeholder="Insira suas considerações sobre o pedido de compras" class="form-control"
rows="3" id="consideracoesCotacao" name="consideracoesCotacao"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-31">
<div>
<br />
<h2>
<i class="flaticon flaticon-edit-square" aria-hidden="true"></i>
&nbsp;Considerações de compras &nbsp;
</h2>
<h6>
Considerações sobre os itens da solicitação, realizadas pela
pessoa responsável pela compra.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userRealizacaoCompras">
Usuário responsável pela compra
</label>
<input type="text" name="userRealizacaoCompras" id="userRealizacaoCompras" class="form-control"
data-protection="Usuário responsável pela compra" data-protection-anonymizable
data-protection-sensitive data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataRealizacaoCompras"> Data </label>
<input type="text" name="dataRealizacaoCompras" id="dataRealizacaoCompras" class="form-control"
readonly />
</div>
</div>
</div>
</div>
<div class="row justificativa-activity-31">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12 col-xs-12">
<label for="consideracoesCompras"> Considerações </label>
<textarea placeholder="Insira suas considerações sobre o pedido de compras" class="form-control"
rows="3" id="consideracoesCompras" name="consideracoesCompras"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<label class="control-label">Anexe o pedido de compra</label>
<div class="componentAnexo">
<input type="hidden" id="fdAnexo_pedido" class="descAnexo" name="fdAnexo_pedido" value="Anexo Pedido" />
<input type="text" id="fnAnexo_pedido" name="fnAnexo_pedido" class="form-control inputAnexo"
placeholder="Selecione um arquivo" readonly />
<div style="display: flex" class="icones">
<button type="button" style="margin-left: 3px;" class="btnUpFile btn btn-success btn-sm excluir"
data-acao="upload" onclick="anexo(event)" title="Selecionar">
<i class="fluigicon fluigicon-file-upload icon-sm"></i>
</button>
<button style="display: none; margin-left: 3px;" type="button"
class="btnViewerFile btn btn-info btn-sm" data-acao="viewer" onclick="anexo(event)"
title="Visualizar" disabled>
<i class="fluigicon fluigicon-eye-open icon-sm"></i>
</button>
<button style="display: none; margin-left: 3px;" type="button"
class="btnDownloadFile btn btn-info btn-sm" data-acao="download" onclick="anexo(event)"
title="Download" disabled>
<i class="fluigicon fluigicon-download icon-sm"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-18">
<div>
<br />
<h2>
<i class="flaticon flaticon-check-circle" aria-hidden="true"></i>
&nbsp;Validação dos itens &nbsp;
</h2>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userValidacaoItens"> Solicitante </label>
<input type="text" name="userValidacaoItens" id="userValidacaoItens" class="form-control"
data-protection="Solicitante" data-protection-anonymizable data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo"
readonly />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataValidacaoItens"> Data </label>
<input type="text" name="dataValidacaoItens" id="dataValidacaoItens" class="form-control" readonly />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Houve algum problema com a compra?</label>
<span class="text-danger"><strong>*</strong></span><br />
<div>
<label>
<input name="validacaoItens" id="validacaoItensEntregue" value="entregue" type="radio" />
<span class="change-weight">Não houve problema</span>
</label>
</div>
<div>
<label>
<input name="validacaoItens" id="validacaoItensNaoEntregue" value="naoEntregue" type="radio" />
<span class="change-weight">Pedido não entregue</span>
</label>
</div>
<div>
<label>
<input name="validacaoItens" id="validacaoItensIncorreto" value="incorreto" type="radio" />
<span class="change-weight">Entregue com inconsistência (qualidade, quantidade,
embalagem)</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row justificativaDecisaoItens">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="justificativaDecisaoItens">Justificativa</label>
<span class="text-danger"><strong>*</strong></span>
<textarea class="form-control requiredInput"
placeholder="Insira a justificativa sobre a validação dos itens" name="justificativaDecisaoItens"
id="justificativaDecisaoItens"></textarea>
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-24">
<div>
<br />
<h2>
<i class="flaticon flaticon-document-check" aria-hidden="true"></i>
&nbsp;Validar problema: considerações de compras &nbsp;
</h2>
<h6>Dados referentes às possíveis implicações desta compra.</h6>
<br />
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="justificativaValidaProblema">Quais as suas considerações?</label>
<span class="text-danger"><strong>*</strong></span>
<textarea placeholder="Insira as considerções desta compra." class="form-control"
name="justificativaValidaProblema" id="justificativaValidaProblema"></textarea>
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
</div>
</div>
<h6 class="asteristicWarning">
Todos os campos com * são de preenchimento obrigatório.
</h6>
</div>
</form>
</div>
</body>
</html>
@@ -0,0 +1,28 @@
function displayFields(form, customHTML) {
var activity = getValue('WKNumState');
var userId = getValue('WKUser');
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
form.setValue("WKNumProces", getValue('WKNumProces'));
form.setValue("activity", activity);
form.setValue("formMode", form.getFormMode());
var c1 = DatasetFactory.createConstraint("colleagueId", userId, userId, ConstraintType.MUST);
var filter = new Array(c1);
var fields = new Array("colleagueName");
var retorno = DatasetFactory.getDataset("colleague", fields, filter, null);
//requester
if (activity == 0) {
form.setValue("requesterName", retorno.getValue(0, "colleagueName"));
form.setValue("requesterMail", retorno.getValue(0, "mail"));
form.setValue("requesterId", userId);
} else {
form.setValue("currentUserName", retorno.getValue(0, "colleagueName"));
form.setValue("currentUsermail", retorno.getValue(0, "mail"));
form.setValue("currentUserId", userId);
}
}
@@ -0,0 +1,24 @@
function validateForm(form){
function validateForm(form){
var msg ="";
if(form.getValue("nomeGestorArea") == ""){
msg += "Campo Nome do Gestor não foi preenchido"
}
if(form.getValue("tipoOcorrencia") == ""){
msg += "Campo Tipo Ocorrencia não foi preenchido"
}
if(form.getValue("detalheSolicitacao") == ""){
msg += "Campo Detalhamento da situação da situação não foi preenchido"
}
if (msg!="") {
throw msg;
}
}
}
@@ -0,0 +1,687 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide.min.css" />
<script src="/resources/js/jquery/jquery.js"></script>
<script src="/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/resources/js/mustache/mustache-min.js"></script>
<script src="/style-guide/js/fluig-style-guide.min.js"></script>
<script type="text/javascript" src="/webdesk/vcXMLRPC.js"></script>
<link href="/webdesk/customresources?cid=4&resourceName=temaFormulario/0.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/style-guide/css/fluig-style-guide-ratingstars.min.css" />
<script src="/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>
<style>
h6 {
color: #afb0b3 !important;
font-weight: normal !important;
}
h2 {
color: #008ac4 !important;
display: flex !important;
flex-direction: row !important;
}
h2:after {
content: "" !important;
flex: 1 1 !important;
border-bottom: 2px solid #008ac4 !important;
margin: auto !important;
}
.flaticon-account-box {
color: #008ac4 !important;
}
#rcorners {
height: 110px;
line-height: 110px;
color: white;
border-radius: 0px 0px 50px 50px;
background: rgb(0, 138, 192);
background: linear-gradient(90deg,
rgba(0, 138, 192, 1) 0%,
rgba(2, 166, 189, 1) 50%,
rgba(1, 192, 181, 1) 100%);
text-align: center !important;
}
.change-weight {
font-weight: 400 !important;
}
textarea {
resize: vertical;
}
.consegueResolverMotivo .textoAuxiliar {
width: 100%;
color: #8c8d8f;
font-size: 12px;
margin-left: 1.5em;
font-weight: 400;
}
.ratingStars {
display: flex;
align-items: center;
height: 50px;
}
.ratingStars .minha-avaliacao {
margin: 0 20px;
color: #f0ad4e;
}
</style>
<script>
//show the activity and then block the fields
function showAndBlock(activity) {
for (var i = 0, l = activity.length; i < l; i++) {
$(".activity-" + activity[i]).show();
//remove buttons
$(".hideButton").hide();
//use an each to block everything inside the class activity-X
$(".activity-" + activity[i] + " :input").each(function () {
$(this).attr("readonly", "readonly");
$(this).on("mousedown", function (e) {
this.blur();
window.focus();
});
if ($(this).is(":checkbox")) {
$(this).attr("disabled", true);
} else if ($(this).is(":radio")) {
$(this).on("click", function () {
return false;
});
}
});
}
}
function getCurrentDate() {
var newDate = new Date();
var h = newDate.getHours();
if (h < 10) {
h = "0" + h;
}
var m = newDate.getMinutes();
if (m < 10) {
m = "0" + m;
}
var hour = h + ":" + m; // + ":" + s;
var day = newDate.getDate();
if (day < 10) {
day = "0" + day;
}
var month = newDate.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
newDate = day + "/" + month + "/" + newDate.getFullYear();
var currentDate = [newDate, hour];
return currentDate;
}
var beforeSendValidate = function (numState, nextState) {
// return true;
if (numState == 0 || numState == 1) {
if ($("#tipoOcorrencia").val() == "") {
throw "'Tipo da ocorrência' é obrigatório.";
} else if ($("#tituloOcorrencia").val() == "") {
throw "'Título da ocorrência' é obrigatório.";
} else if ($("#detalheSolicitacao").val() == "") {
throw "'Detalhamento da situação' é obrigatório.";
}
} else if (numState == 2) {
if (
$("input[name='consegueResolver']:checked").val() == "" ||
$("input[name='consegueResolver']:checked").val() == undefined
) {
throw "'Consegue resolver?' é obrigatório.";
} else if (
$("input[name='consegueResolver']:checked").val() == "nao"
) {
if (
$("input[name='possuiInconsistencia']:checked").val() == "" ||
$("input[name='possuiInconsistencia']:checked").val() == undefined
) {
throw "'Qual o motivo?' é obrigatório.";
}
}
if ($("#consideracoesTecnicas").val() == "") {
throw "'Considerações' é obrigatório.";
}
} else if (numState == 6) {
if ($("#detalheSolicitacao").val() == "") {
throw "'Detalhamento da situação' é obrigatório.";
}
} else if (numState == 11) {
if (
$("input[name='situacaoResolvida']:checked").val() == "" ||
$("input[name='situacaoResolvida']:checked").val() == undefined
) {
throw "'Situação resolvida?' é obrigatório.";
} else if (
$("input[name='situacaoResolvida']:checked").val() == "nao"
) {
if ($("#consideracoes").val() == "") {
throw "'Considerações' é obrigatório.";
}
}
}
};
function setSelectedZoomItem(selectedItem) {
if (selectedItem.inputName == "nomeGestorArea") {
$("#emailGestorArea").val(selectedItem.mail);
}
}
function removedZoomItem(removedItem) {
console.log("removedItem", removedItem);
if (removedItem.inputName == "nomeGestorArea") {
$("#emailGestorArea").val("");
}
}
</script>
</head>
<body>
<div class="fluig-style-guide" style="background-color: white">
<form>
<div style="display: none">
<input type="text" id="WKNumProces" name="WKNumProces" />
<input type="text" id="activity" name="activity" />
<input type="text" id="formMode" name="formMode" />
<!-- requester -->
<input type="text" id="requesterMail" name="requesterMail" />
<input type="text" id="requesterId" name="requesterId" />
<!-- current user -->
<input type="text" id="currentUserName" name="currentUserName" />
<input type="text" id="currentUsermail" name="currentUsermail" />
<input type="text" id="currentUserId" name="currentUserId" />
</div>
<h1 id="rcorners">Abertura de chamado</h1>
<div class="container activity-all">
<div class="activity activity-0 activity-1 activity-6">
<div>
<br />
<h2>
<i class="flaticon flaticon-account-box" aria-hidden="true"></i>
&nbsp;Dados gerais &nbsp;
</h2>
<h6>
Estes são os dados referentes aos responsáveis pela abertura e
pela solicitação do atual processo.
</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="requesterName"> Usuário de abertura </label>
<input type="text" name="requesterName" id="requesterName" class="form-control" readonly
data-protection="Usuário de abertura" data-protection-anonymizable data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataAbertura"> Data </label>
<input type="text" name="dataAbertura" id="dataAbertura" class="form-control" readonly />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="userSolicitante"> Usuário solicitante </label>
<input type="text" class="form-control" name="userSolicitante" id="userSolicitante"
placeholder="Insira o nome completo do solicitante. Ex.: João da Silva"
data-protection="Usuário solicitante" data-protection-anonymizable data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
<div class="form-group col-md-6 col-xs-12">
<label for="emailSolicitante">
E-mail do solicitante
</label>
<input type="email" name="emailSolicitante" id="emailSolicitante" class="form-control"
placeholder="Insira o e-mail do solicitante. Ex.: Joaodasilva@email.com.br"
data-protection="E-mail do solicitante" data-protection-anonymizable data-protection-sensitive
data-protection-mail
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="nomeGestorArea"> Gestor da área </label>
<input type="zoom" class="form-control" name="nomeGestorArea" id="nomeGestorArea"
placeholder="Pesquise o nome do gestor" data-zoom="{
'displayKey':'colleagueName',
'datasetId':'colleague',
'fields':[
{
'field':'colleagueName',
'label':'Nome',
'standard':'true',
'search':'true'
},
{
'field':'mail',
'label':'E-mail',
'search':'true'
}
]
}" data-protection="Gestor da área" data-protection-anonymizable data-protection-sensitive
data-protection-other
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
<div class="form-group col-md-6 col-xs-6">
<label for="emailGestorArea"> E-mail do gestor </label>
<input type="text" name="emailGestorArea" id="emailGestorArea" class="form-control" readonly
data-protection="E-mail do gestor" data-protection-anonymizable data-protection-sensitive
data-protection-mail
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="estabelecimento">
Estabelecimento/Filial
</label>
<span class="required text-danger"><strong> * </strong></span>
<input type="zoom" class="form-control requiredInput" name="estabelecimento" id="estabelecimento"
data-zoom="{
'displayKey':'estabelecimento',
'datasetId':'dsFiliais',
'placeholder': 'Pesquisar nome do estabelecimento ou filial.',
'fields':[
{
'field':'estabelecimento',
'label':'Estabelecimento',
'standard':'true',
'search':'true'
}
]
}" />
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
<div class="form-group col-md-6 col-xs-6">
<label for="complemento"> Complemento </label>
<input type="text" name="complemento" id="complemento" class="form-control"
placeholder="Prédio, Bloco, Andar, Mesa" />
</div>
</div>
</div>
</div>
<div>
<br />
<h2>
<i class="flaticon flaticon-settings" aria-hidden="true"></i>
&nbsp;Dados Técnicos &nbsp;
</h2>
<h6>Insira abaixo os itens necessários para o solicitante.</h6>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="tipoOcorrencia"> Tipo da Ocorrência </label>
<span class="required text-danger"><strong> * </strong></span>
<input type="zoom" class="form-control" name="tipoOcorrencia" id="tipoOcorrencia" data-zoom="{
'displayKey':'nomeOcorrenciaManutencao',
'datasetId':'ds_manutencao',
'fields':[
{
'field':'nomeOcorrenciaManutencao',
'label':'Tipo',
'standard':'true',
'search':'true'
}
]
}" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6 col-xs-12">
<label for="tituloOcorrencia"> Título da ocorrência </label>
<span class="text-danger"><strong>*</strong></span>
<input type="text" name="tituloOcorrencia" id="tituloOcorrencia" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="detalheSolicitacao">Detalhamento da situação</label>
<span class="text-danger"><strong>*</strong></span>
<textarea class="form-control" name="detalheSolicitacao" id="detalheSolicitacao"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-2">
<div>
<br />
<h2>
<i class="flaticon flaticon-check-circle" aria-hidden="true"></i>
&nbsp;Análise&nbsp;
</h2>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="analistaTecnico"> Analista </label>
<input type="text" name="analistaTecnico" id="analistaTecnico" class="form-control" readonly
data-protection="Analista" data-protection-anonymizable data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataAnaliseTecnica"> Data </label>
<input type="text" name="dataAnaliseTecnica" id="dataAnaliseTecnica" class="form-control" readonly />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Consegue resolver?</label>
<span class="text-danger"><strong>*</strong></span><br />
<div class="radio-inline">
<label>
<input name="consegueResolver" id="consegueResolverSim" value="sim" type="radio" />
<span class="change-weight">Sim</span>
</label>
</div>
<div class="radio-inline">
<label>
<input name="consegueResolver" id="consegueResolverNao" value="nao" type="radio" />
<span class="change-weight">Não</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row consegueResolverMotivo">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Qual o motivo?</label>
<span class="text-danger"><strong>*</strong></span><br />
<div class="">
<label>
<input name="possuiInconsistencia" id="possuiInconsistenciaNao" value="nao" type="radio" />
<span class="change-weight">A atual solicitação <b>carece de informações</b>, o
que limita o entendimento da real necessidade do
usuário</span>
<p class="textoAuxiliar">
Esta opção retorna a atual solicitação ao usuário
solicitante, a fim de que este atualize o formulário
com as informações faltantes.
</p>
</label>
</div>
<div class="">
<label>
<input name="possuiInconsistencia" id="possuiInconsistenciaSim" value="sim" type="radio" />
<span class="change-weight">A atual solicitação <b>possui inconsistências</b> que
impedem sua movimentação</span>
<p class="textoAuxiliar">
Esta opção encerra automaticamente a atual
solicitação.
</p>
</label>
</div>
<div class="">
<label>
<input name="possuiInconsistencia" id="precisaSuprimentos" value="suprimentos" type="radio" />
<span class="change-weight">A atual solicitação <b>carece de suprimentos</b>, o
que limita o atendimento da necessidade do
usuário</span>
<p class="textoAuxiliar">
Esta opção envia a atual solicitação ao <b>Setor de Compras</b>, a fim de que este realize as
devidas aquisições.
Ao indicar esta opção, será necessário informar os itens que precisará serem comprados.
</p>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="consideracoesTecnicas">Considerações</label>
<span class="text-danger"><strong>*</strong></span>
<textarea class="form-control" name="consideracoesTecnicas" id="consideracoesTecnicas"
placeholder="Descreva a justificativa para a sua análise"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="activity activity-11">
<div>
<br />
<h2>
<i class="flaticon flaticon-check-circle" aria-hidden="true"></i>
&nbsp;Validação do serviço &nbsp;
</h2>
<br />
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-10 col-xs-6">
<label for="userValidacao"> Usuário de abertura </label>
<input type="text" name="userValidacao" id="userValidacao" class="form-control" readonly
data-protection="Usuário de abertura" data-protection-anonymizable data-protection-sensitive
data-protection-name
data-protection-class-legitimate-interests="Dado coletado para o funcionamento do processo" />
</div>
<div class="form-group col-md-2 col-xs-6">
<label for="dataUserValidacao"> Data </label>
<input type="text" name="dataUserValidacao" id="dataUserValidacao" class="form-control" readonly />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Situação resolvida?</label>
<span class="text-danger"><strong>*</strong></span><br />
<div class="radio-inline">
<label>
<input name="situacaoResolvida" id="situacaoResolvidaSim" value="sim" type="radio" />
<span class="change-weight">Sim</span>
</label>
</div>
<div class="radio-inline">
<label>
<input name="situacaoResolvida" id="situacaoResolvidaNao" value="nao" type="radio" />
<span class="change-weight">Não</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row ratingAction">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label>Como você avalia o atendimento?</label>
<div class="ratingStars">
<span>Péssimo</span>
<div class="minha-avaliacao"></div>
<span>Excelente</span>
</div>
<input type="hidden" id="ratingValue" name="ratingValue" />
</div>
</div>
</div>
</div>
<div class="row explainAction">
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-12">
<label for="consideracoes">Considerações</label>
<span class="text-danger"><strong>*</strong></span>
<textarea class="form-control" name="consideracoes" id="consideracoes"
placeholder="Descreva a justificativa para a sua avaliação"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
<script>
var ratingStars;
var servicoNaoValidado =
$("input[name=situacaoResolvida]:checked").val() == "nao";
$(document).ready(function () {
if ($("#formMode").val() == "VIEW") {
showAndBlock([0, 2, 11]);
$(".ratingAction").hide();
if ($("input[name=situacaoResolvida]:checked").val() == "sim") {
$(".ratingAction").show();
}
let ratingValue;
if ($("#ratingValue").val() == "" || $("#ratingValue").val() == 0) {
ratingValue = 0;
} else {
ratingValue = $("#ratingValue").val();
}
let html = "";
for (let i = 0; i < 5; i++) {
if (i < ratingValue) {
html +=
'<i class="flaticon flaticon-star-active icon-md" aria-hidden="true"></i>';
} else {
html +=
'<i class="flaticon flaticon-star icon-md" aria-hidden="true"></i>';
}
}
console.log(html);
$(".minha-avaliacao").html(html);
} else {
//show the right fields
var activity = $("#activity").val();
var requestDate = getCurrentDate();
$(".activity").hide();
$(".activity-" + activity).show();
if (activity == 0) {
//primeira atividade
$("#dataAbertura").val(requestDate[0] + " - " + requestDate[1]);
} else if (activity == 2) {
if (servicoNaoValidado) {
showAndBlock([0, 11]);
} else {
showAndBlock([0]);
$("#analistaTecnico").val($("#currentUserName").val());
$("#dataAnaliseTecnica").val(
requestDate[0] + " - " + requestDate[1]
);
}
} else if (activity == 11) {
showAndBlock([0, 2]);
let ratingValue;
if ($("#ratingValue").val() == "" || $("#ratingValue").val() == 0) {
ratingValue = 0;
} else {
ratingValue = $("#ratingValue").val();
}
ratingStars = FLUIGC.stars(".minha-avaliacao", {
stars: 5,
value: ratingValue,
sizeClass: "icon-md",
});
ratingStars.on("click", (obj) => {
let countCurrentRating = 0;
$(".fluigicon-star").each(() => {
countCurrentRating++;
});
$("#ratingValue").val(countCurrentRating);
});
$("#userValidacao").val($("#currentUserName").val());
$("#dataUserValidacao").val(requestDate[0] + " - " + requestDate[1]);
} else if (activity == 6) {
showAndBlock([1, 2]);
$("#detalheSolicitacao").attr("readonly", false);
}
$("input[name=consegueResolver]").on("change", function () {
$(".consegueResolverMotivo").hide();
if ($(`input[name=${$(this).attr("name")}]:checked`).val() == "nao")
$(".consegueResolverMotivo").show();
});
$("input[name=consegueResolver]").trigger("change");
$("input[name=situacaoResolvida]").on("change", function () {
$(".explainAction, .ratingAction").hide();
if ($("input[name=situacaoResolvida]:checked").val() == "nao") {
$(".explainAction").show();
} else if (
$("input[name=situacaoResolvida]:checked").val() == "sim"
) {
$(".ratingAction").show();
}
});
$("input[name=situacaoResolvida]").trigger("change");
}
});
</script>
</html>
Binary file not shown.
@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Criar Solicitação de Compras</title>
<!-- Fluig SG + deps -->
<link rel="stylesheet" href="/style-guide/css/fluig-style-guide.min.css">
<link rel="stylesheet" href="/style-guide/css/fluig-style-guide-filter.min.css"> <!-- ADICIONE -->
<script src="/portal/resources/js/jquery/jquery.js"></script>
<script src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/style-guide/js/fluig-style-guide.min.js"></script>
<script src="/style-guide/js/fluig-style-guide-filter.min.js"></script> <!-- ADICIONE -->
<!-- seu JS/CSS -->
<link rel="stylesheet" href="form.css">
<script src="compras.js"></script>
</head>
<body>
<div class="fluig-style-guide">
<form name="form" role="form">
<div class="fs-display-block">
<!-- PAINEL: Dados da solicitação -->
<div class="panel panel-info">
<div class="panel-heading"><strong>Dados da Solicitação</strong></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<label>Empresa</label>
<span class="required text-danger"><strong> * </strong></span>
<input type="zoom" class="form-control requiredInput" name="estabelecimento" id="estabelecimento"
data-zoom="{
'displayKey':'LOJA',
'datasetId':'dsSysCompany',
'placeholder': 'Pesquisar por nome do estabelecimento.',
'fields':[
{
'field':'BPCS',
'label':'Filial',
'standard':'true',
'search':'true'
},
{
'field':'DESCRICAO',
'label':'estabelecimento',
'search':'true'
}
]
}" />
<p class="text-danger text-error">
Preenchimento obrigatório.
</p>
</div>
<div class="col-sm-2">
<label>Filial Entrega</label>
<input type="text" name="filialDesc" id="filialDesc" class="form-control zoom"
placeholder="Selecione..." readonly>
</div>
<div class="col-sm-4">
<label>Tipo de Solicitação <span class="text-danger">*</span></label>
<select name="tipoSolicitacao" id="tipoSolicitacao" class="form-control" required>
<option value="">Selecione</option>
<option>Material</option>
<option>Serviço</option>
</select>
</div>
</div>
<div class="row m-t-15">
<div class="col-sm-6">
<label>Produto/Serviço <span class="text-danger">*</span></label>
<div class="input-group">
<input type="hidden" name="produtoCod" id="produtoCod">
<input type="text" name="produtoDesc" id="produtoDesc" class="form-control zoom" data-zoom="produto"
placeholder="Buscar..." readonly required>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnBuscaProd">
<span class="fluigicon fluigicon-search"></span>
</button>
<button class="btn btn-danger" type="button" id="btnLimpaProd">
<span class="fluigicon fluigicon-trash"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-2">
<label>Último Preço</label>
<input type="text" name="ultimoPreco" id="ultimoPreco" class="form-control text-right" value="0,00"
readonly>
</div>
<div class="col-sm-2">
<label>Quantidade <span class="text-danger">*</span></label>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="qtdMenos"></button>
</span>
<input type="number" min="0" step="1" name="quantidade" id="quantidade"
class="form-control text-center" value="0" required>
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="qtdMais">+</button>
</span>
</div>
</div>
<div class="col-sm-2">
<label>Data da Necessidade <span class="text-danger">*</span></label>
<input type="text" name="dataNec" id="dataNec" class="form-control" placeholder="dd/mm/aaaa" required>
</div>
</div>
<div class="row m-t-10">
<div class="col-sm-6">
<label>Centro de Custo <span class="text-danger">*</span></label>
<input type="zoom" name="ccDesc" id="ccDesc" class="form-control" data-zoom="{
'displayKey':'centroCusto',
'datasetId':'ds_centroCusto',
'placeholder': 'Pesquisar número ou nome do centro de custo.',
'fields':[
{
'field':'codigoCentroCusto',
'label':'Código',
'standard':'true',
'search':'true'
},
{
'field':'centroCusto',
'label':'Centro de custo',
'search':'true'
},
{
'field': 'gestorCentroCusto',
'label': 'Gestor',
'visible': 'false'
},
{
'field': 'emailGestor',
'label': 'Email do gestor',
'visible': 'false'
},
{
'field': 'idGestor',
'label': 'Id do gestor',
'visible': 'false'
}
]
}" />
</div>
<div class="col-sm-3">
<label>Compra Emergencial?</label>
<select name="emergencial" id="emergencial" class="form-control">
<option>Não</option>
<option>Sim</option>
</select>
</div>
<div class="col-sm-3">
<label>Total</label>
<input type="text" name="total" id="total" class="form-control text-right" value="R$ 0,00" readonly>
</div>
</div> <!-- aqui sim fecha corretamente a row -->
<div class="row m-t-20">
<div class="col-sm-12">
<button type="button" class="btn btn-success" id="btnAddAnexo">
<span class="fluigicon fluigicon-upload"></span> Adicionar Anexo
</button>
</div>
<div class="col-sm-12">
<label>Observação do Item</label>
<textarea name="obs" id="obs" class="form-control" rows="2"></textarea>
</div>
</div>
<div class="text-center m-t-15">
<button type="button" id="btnAddItem" class="btn btn-primary">
<span class="fluigicon fluigicon-add"></span> Adicionar Item
</button>
</div>
</div>
</div>
<!-- PAINEL: Itens -->
<div class="panel panel-default">
<div class="panel-heading"><strong>Itens</strong></div>
<div class="panel-body">
<table id="tbItens" tablename="tbItens" class="table table-bordered">
<thead>
<tr>
<th>Produto</th>
<th>Centro de Custo</th>
<th>Qtd</th>
<th>Preço Ref.</th>
<th>Total</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<!-- LINHA MODELO (detail=true) -->
<tr class="tableRow" detail="true">
<td>
<input type="hidden" name="CodProd" class="form-control">
<input type="text" name="DescProd" class="form-control" readonly>
</td>
<td>
<input type="hidden" name="Codcc" class="form-control">
<input type="text" name="Desccc" class="form-control" readonly>
</td>
<td><input type="number" name="qtd" class="form-control text-right" min="0" step="1" value="0"></td>
<td><input type="text" name="Refpreco" class="form-control text-right" value="0,00"></td>
<td><input type="text" name="totalProd" class="form-control text-right" value="R$ 0,00" readonly></td>
<td class="text-center">
<button type="button" class="btn btn-link" onclick="fnWdkRemoveChild(this)">
<span class="fluigicon fluigicon-trash"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
+203
View File
@@ -0,0 +1,203 @@
// ======== DATASETS (troque aqui se o id for diferente) ========
const DS_EMPRESAS = 'dsSyscompany';
const DS_FILIAIS = 'dsFiliais'; // se o seu for outro, troque aqui
const DS_CC = 'ds_centroCusto';
const DS_PRODUTOS = 'ProdutoTI'; // se o id for "ProdutosTI", troque aqui
// ======== MAPEAMENTO DE CAMPOS (ajuste se seus datasets usam nomes diferentes) ========
// Empresas / Filiais / Centro de Custo
const EMP_FIELDS = { code: 'codigo', desc: 'descricao' };
const FIL_FIELDS = { code: 'codigo', desc: 'descricao' };
const CC_FIELDS = { code: 'codigo', desc: 'descricao' };
// Produtos (inclui alternativas típicas do Protheus)
const PROD_FIELDS = {
code: ['codigo','B1_COD','CODIGO'],
desc: ['descricao','B1_DESC','DESCRICAO'],
um: ['um','B1_UM','UM'],
lastPrice: ['ultimoPreco','ULTIMO_PRECO','ULT_PRECO','ULTIMOPRECO']
};
// ======== INIT ========
$(document).ready(function () {
FLUIGC.calendar('#dataNec');
// qty/preço
$('#precoRef').on('blur', recalcTotal);
$('#quantidade').on('input', recalcTotal);
$('#qtdMais').on('click', () => stepQtd(1));
$('#qtdMenos').on('click', () => stepQtd(-1));
// produto
$('#btnBuscaProd').on('click', openZoomProduto);
$('#btnLimpaProd').on('click', () => {
$('#produtoCod,#produtoDesc').val('');
$('#ultimoPreco').val('0,00');
recalcTotal();
});
// zooms
bindZoom($('#empresaDesc'), DS_EMPRESAS, EMP_FIELDS, 'empresaCodigo','empresaDesc');
bindZoom($('#filialDesc'), DS_FILIAIS, FIL_FIELDS, 'filialCodigo','filialDesc');
bindZoom($('#ccDesc'), DS_CC, CC_FIELDS, 'ccCod','ccDesc');
// itens
$('#btnAddItem').on('click', addItem);
});
// ======== HELPERS ========
function stepQtd(n){
const $q = $('#quantidade');
let v = parseInt($q.val()||'0',10)+n;
if (v < 0) v = 0;
$q.val(v);
recalcTotal();
}
function parseMoneyBR(s){
if(!s) return 0;
s = (''+s).replace(/[^\d,,-]/g,'').replace(/\./g,'').replace(',', '.');
const v = Number(s);
return isNaN(v) ? 0 : v;
}
function formatMoneyBR(v){
return v.toLocaleString('pt-BR',{style:'currency',currency:'BRL'});
}
function recalcTotal(){
const qtd = parseFloat($('#quantidade').val()||'0');
const preco = parseMoneyBR($('#precoRef').val());
const tot = (qtd * preco) || 0;
$('#total').val(formatMoneyBR(tot));
}
// Compat: usa filtermodal OU filterModal, dependendo da versão do SG
function openFilterModalCompat(opts){
var fn = (FLUIGC && (FLUIGC.filtermodal || FLUIGC.filterModal));
if (!fn) {
FLUIGC.toast({
title: 'Erro: ',
message: 'Plugin de filtro (filtermodal) não está carregado. Verifique os includes do Style Guide.',
type: 'danger'
});
return { onSelected: function(){} };
}
return fn(opts);
}
// pega a primeira chave existente no item
function pick(obj, keys){
if (!Array.isArray(keys)) return obj[keys];
for (const k of keys) if (obj[k] !== undefined && obj[k] !== null) return obj[k];
return '';
}
function firstKey(keys){ return Array.isArray(keys) ? keys[0] : keys; }
// ======== ZOOMS GENÉRICOS (empresa, filial, centro de custo) ========
function bindZoom($input, datasetId, fieldsMap, hiddenIdFld, displayFld){
const codeK = fieldsMap.code, descK = fieldsMap.desc;
$input.on('click', function(){
openFilterModalCompat({
title: 'Selecionar',
size: 'large',
filterFields: codeK + ', ' + descK,
source: {
url: '/api/public/ecm/dataset/search',
contentType: 'application/json',
root: 'content',
limit: 50,
pattern: '',
param: { datasetId: datasetId }
},
columns: [
{ title: 'Código', data: codeK },
{ title: 'Descrição', data: descK }
],
onSelected: function(data){
$('#'+hiddenIdFld).val(data[codeK]);
$('#'+displayFld).val(data[codeK] + ' - ' + data[descK]);
}
});
});
}
// ======== ZOOM DE PRODUTO ========
function openZoomProduto(){
openFilterModalCompat({
title: 'Buscar Produto/Serviço',
size: 'large',
filterFields: firstKey(PROD_FIELDS.code) + ', ' + firstKey(PROD_FIELDS.desc),
source: {
url: '/api/public/ecm/dataset/search',
contentType: 'application/json',
root: 'content',
limit: 50,
param:{ datasetId: DS_PRODUTOS }
},
columns: [
{ title: 'Código', data: firstKey(PROD_FIELDS.code) },
{ title: 'Descrição', data: firstKey(PROD_FIELDS.desc) },
{ title: 'UM', data: firstKey(PROD_FIELDS.um) },
{ title: 'Último Preço', data: firstKey(PROD_FIELDS.lastPrice) }
],
onSelected: function(item){
const cod = pick(item, PROD_FIELDS.code);
const desc = pick(item, PROD_FIELDS.desc);
const ult = pick(item, PROD_FIELDS.lastPrice);
$('#produtoCod').val(cod);
$('#produtoDesc').val(cod + ' - ' + desc);
$('#ultimoPreco').val(ult || '0,00');
recalcTotal();
}
});
}
// ======== ITENS (tabela filha) ========
function addItem(){
if(!$('#produtoCod').val()){
FLUIGC.toast({title:'Atenção: ', message:'Selecione um produto.', type:'warning'}); return;
}
if(!$('#ccCod').val()){
FLUIGC.toast({title:'Atenção: ', message:'Selecione o centro de custo.', type:'warning'}); return;
}
const qtd = parseFloat($('#quantidade').val()||'0');
if(qtd <= 0){
FLUIGC.toast({title:'Atenção: ', message:'Quantidade deve ser > 0.', type:'warning'}); return;
}
const row = wdkAddChild('tbItens');
$('#produtoCod___'+row).val($('#produtoCod').val());
$('#produtoDesc___'+row).val($('#produtoDesc').val());
$('#ccCod___'+row).val($('#ccCod').val());
$('#ccDesc___'+row).val($('#ccDesc').val());
$('#qtd___'+row).val(qtd);
$('#precoRef___'+row).val($('#precoRef').val());
$('#total___'+row).val($('#total').val());
}
// ======== VALIDAÇÃO (se usar o hook validateForm) ========
function validateForm(form){
var msgs = [];
function req(id, label){ if(!form.getValue(id)) msgs.push('Preencha "'+label+'".'); }
req('tipoSolicitacao','Tipo de Solicitação');
req('produtoCod','Produto/Serviço');
req('quantidade','Quantidade');
req('dataNec','Data da Necessidade');
req('ccCod','Centro de Custo');
if(msgs.length){ throw msgs.join('\n'); }
}
function setSelectedZoomItem(selectedItem) {
var name_item = selectedItem.inputId;
var ehItem = name_item.indexOf("___") >= 0;
var indice = "";
if (ehItem){
var valores = name_item.split("___");
name_item = valores[0];
indice = valores[1];
}
if (name_item == "estabelecimento")
{ $("#filialDesc").val(selectedItem["CODIGO"]); }
}
@@ -0,0 +1,3 @@
.m-t-10 { margin-top: 10px; }
.m-t-15 { margin-top: 15px; }
.text-right { text-align: right; }