# PROC005 Reformulação Tela Principal O.S.

<table border="1" id="bkmrk-%C2%A0-projeto%2Fsistema%3Age" style="border-collapse: collapse; width: 100.123%; height: 235px;"><tbody><tr style="border-style: solid;"><td rowspan="3" style="width: 26.6667%; height: 68px; border-color: black; border-top-style: hidden; border-left-style: hidden; border-bottom-style: hidden;">[![image-1763380874392.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/scaled-1680-/image-1763380874392.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/image-1763380874392.png)

</td><td style="width: 49.9999%; height: 10px; border-color: black; border-style: solid;"><span style="color: #000000;">**Projeto/Sistema:**</span>  
<span style="color: #000000;">O.S. - GerencieAqui</span></td><td class="align-center" style="width: 23.3333%; height: 10px; border-color: black; border-style: solid;"><span style="color: #000000;">**Versão do *Template:***</span>  
<span style="color: #000000;">1.2</span></td></tr><tr style="border-style: solid;"><td style="width: 49.9999%; height: 29px; border-color: black; border-style: solid;"><span style="color: #000000;">**Processo:**</span>  
PROC005 Reformulação Tela Principal O.S.</td><td class="align-center" style="width: 23.3333%; height: 29px; border-color: black; border-style: solid;"><span style="color: #000000;">**Versão do Documento:**</span>  
<span style="color: #000000;">1.0</span></td></tr><tr style="border-style: solid;"><td style="width: 49.9999%; height: 29px; border-color: black; border-style: solid;"><span style="color: #000000;">**Responsável(eis):** </span>  
<span style="color: #000000;">Luís Leite</span></td><td class="align-center" style="width: 23.3333%; height: 29px; border-color: black; border-style: solid;"><span style="color: #000000;">**Data:** </span>

<span style="color: #000000;">20/10/2025</span>

</td></tr></tbody></table>

##### <span style="color: #000000;">**1. Introdução**</span>

<span style="color: #000000;">**Este processo visa exemplificar a reformulação da tela principal da Ordem de Serviço**</span>

<table cellpadding="9" cellspacing="0" id="bkmrk-processo-envolvidos-"><tbody><tr valign="top"><td bgcolor="#acb9ca" style="border-style: solid; border-color: black; width: 27%;" width="27%"><span style="font-size: small; color: #000000;">**Processo**</span>

</td><td bgcolor="#acb9ca" style="border-style: solid; border-color: black; width: 19%;" width="19%"><span style="font-size: small; color: #000000;">**Envolvidos**</span>

</td><td bgcolor="#acb9ca" style="border-style: solid; border-color: black; width: 27%;" width="27%"><span style="font-size: small; color: #000000;">**Dados de Entrada**</span>

</td><td bgcolor="#acb9ca" style="border-style: solid; border-color: black; width: 27%;" width="27%"><span style="font-size: small; color: #000000;">**Dados de Saída**</span>

</td></tr><tr valign="top"><td style="width: 27%; border-style: solid; border-color: black;" width="27%">PROC005 Reformulação Tela Principal O.S.</td><td style="width: 19%; border-style: solid; border-color: black;" width="19%">-

</td><td style="width: 27%; border-style: solid; border-color: black;" width="27%">Nova ordem de serviço ou edição dos dados da ordem de serviço

</td><td style="width: 27%; border-style: solid; border-color: black;" width="27%">Ordem de Serviço salva ou alterada

</td></tr><tr valign="top"><td style="border-style: solid; border-color: black; width: 27%;" width="27%">PROC005.1 Reformulação Tela Principal O.S. - Detalhes

</td><td style="border-style: solid; border-color: black; width: 19%;" width="19%"><span style="font-size: small; color: #000000;">-</span>

</td><td style="border-style: solid; border-color: black; width: 27%;" width="27%">Nova ordem de serviço ou edição dos dados da ordem de serviço

</td><td style="border-style: solid; border-color: black; width: 27%;" width="27%"><span style="font-size: small; color: #000000;">Ordem de Serviço salva ou alterada</span>

</td></tr><tr><td style="border-style: solid; border-color: black; width: 27%;">PROC006 Reformulação Tela de Listagens da O.S. </td><td style="border-style: solid; border-color: black; width: 19%;"><span style="font-size: small; color: #000000;">-</span>

</td><td style="border-style: solid; border-color: black; width: 27%;">Filtros de período e etapas das O.Ss

</td><td style="border-style: solid; border-color: black; width: 27%;"><span style="font-size: small; color: #000000;">Listagem filtrada de ordens de serviço</span>

</td></tr><tr><td style="border-style: solid; border-color: black; width: 27%;">PROC007 OS Modo Visualização

</td><td style="border-style: solid; border-color: black; width: 19%;"><span style="font-size: small; color: #000000;">-</span>

</td><td style="border-style: solid; border-color: black; width: 27%;">-

</td><td style="border-style: solid; border-color: black; width: 27%;">-</td></tr></tbody></table>

#### <span style="color: #000000;">**Processos Relacionados** </span>

- - - - - -

<span style="color: #3366ff;">[PROC005.1 Reformulação Tela Principal O.S. - Detalhes](https://docs.softensistemas.com.br/books/reformulacao-os/page/proc0052-reformulacao-tela-principal-os-detalhes)</span>

<span style="color: #3366ff;">[PROC006 Reformulação Tela de Listagens da O.S.](https://docs.softensistemas.com.br/books/reformulacao-os/page/proc006-reformulacao-tela-de-listagens-da-os)</span>

<span style="color: #3366ff;">[PROC007 OS Modo Visualização](https://docs.softensistemas.com.br/books/reformulacao-os/page/proc007-os-modo-visualizacao)</span>

#### <span style="color: #000000;">**Especificação Funcional**</span>

- - - - - -

#### <span style="color: #000000;">**PROC001 Tela de Ordem de Serviço:**</span>

##### <span style="color: #000000;">***Protótipo de Tela:***</span>

[![image-1761139979959.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761139979959.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761139979959.png)

<span style="color: #000000;">*Imagem I - Tela Principal da OS*</span>

##### <span style="color: #000000;">***Regras de Interface Principais:***</span>

<span style="color: #000000;">***1.*** As etapas da O.S. serão separadas em *Accordions* que inicialmente serão renderizados "abertos".</span>

<span style="color: #000000;">***2.*** No topo da tela deve ser adicionado a data e hora de abertura da O.S.</span>

<span style="color: #000000;">***3. Botão Voltar:*** Ao clicar sobre o botão deve retornar a tela de listagem de Ordens de Serviço.</span>

<span style="color: #000000;">***4. Botão Próximo:*** Caso esteja na primeira aba "Cliente e Equipamento" a ação do botão deve direcionar para o preenchimento da próxima aba "Detalhes da OS". Estando na Aba "Detalhes da OS" o botão "Próximo" não deve ter mais efeito.</span>

<span style="color: #000000;">***5. Botão Salvar:*** A ação do botão deve fazer todas as validações de campos obrigatórios, caso algum campo não seja validado deve ser retornado em tela a mensagem de aviso. Deve ser retornado para cada campo não validado:</span>

<p class="callout danger"><span style="color: #000000;">O campo X é de preenchimento obrigatório!</span></p>

<span style="color: #000000;">**5.1** Caso passe por toda a validação para salvar, deve ser retornado para a tela de listagem de O.S. e retornar o aviso positivo em tela</span>

<p class="callout success"><span style="color: #000000;">Ordem de Serviço salva com sucesso.</span></p>

##### <span style="color: #000000;">***Regras de Negócio Principais:***</span>

<span style="color: #000000;">***1. Botão Salvar:*** A ação do botão deve fazer todas as validações de campos obrigatórios, caso seja uma nova Ordem de Serviço realiza o novo cadastro no banco de dados; caso se trate de uma edição, realiza a alteração do registro selecionado.</span>

#### <span style="color: #000000;">**1 Accordion Cliente:**</span>

##### <span style="color: #000000;">***Protótipo de Tela:***</span>

<span style="color: #000000;">[![image-1760970258222.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1760970258222.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1760970258222.png)</span>

*Imagem II - Accordion Cliente*

##### <span style="color: #000000;">***Descrição dos Campos:***</span>

<table border="1" cellpadding="7" cellspacing="0" id="bkmrk-campo-tipo-tamanho-o-0" style="width: 843px; height: 175px;"><tbody><tr style="height: 35px;" valign="top"><td bgcolor="#acb9ca" style="width: 168px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Campo**</span>

</td><td bgcolor="#acb9ca" style="width: 102px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tipo**</span>

</td><td bgcolor="#acb9ca" style="width: 88px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tamanho**</span>

</td><td bgcolor="#acb9ca" style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Obrig. ?**</span>

</td><td bgcolor="#acb9ca" style="width: 119px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Máscara**</span>

</td><td bgcolor="#acb9ca" style="width: 201px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Observações**</span>

</td></tr><tr style="height: 35px;"><td style="width: 168px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Cliente</span>

</td><td style="width: 102px; border-style: solid; border-color: black; height: 35px;">Texto

</td><td style="width: 88px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim</span>

</td><td style="width: 119px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 201px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Autocomplete</span>

</td></tr><tr style="height: 35px;"><td style="width: 168px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Telefone</span>

</td><td style="width: 102px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 88px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 119px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 201px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 35px;"><td style="width: 168px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">E-mail</span>

</td><td style="width: 102px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 88px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 119px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 201px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td></tr></tbody></table>

##### <span style="color: #000000;">***Regras de Interface:***</span>

<span style="color: #000000;">***2. Cliente\*:***</span>  
<span style="color: #000000;">Campo obrigatório de seleção (dropdown/autocomplete) para Cliente. Deve conter o *placeholder* "Selecione um cliente"  
</span>

<span style="color: #000000;">**2.1** **Botão adicionar cliente** </span>![image-1761834643855.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761834643855.png) :  
<span style="color: #000000;">A ação do botão deve abrir a *Dialog* existente do cadastro de clientes no módulo.</span>

<span style="color: #000000;">**2.2** Caso não seja localizado nenhum cliente na pesquisa, deve ser retornado o aviso em tela:</span>

<p class="callout warning"><span style="color: #000000;"><span class="ui-growl-title">Atenção  
Cliente X não encontrado</span></span></p>

<span style="color: #000000;">***3. Telefone:*** O Campo serve apenas para visualização, vai trazer em tela o telefone dos dados de contato do cliente quando for selecionado. Deve conter o *placeholder* "(11) 99999-9999"</span>

<span style="color: #000000;">**4. E-mail:**  
O Campo serve apenas para visualização, vai trazer em tela o E-mail dos dados de contato do cliente quando for selecionado. Deve conter o *placeholder* "cliente @cliente.com"</span>

#### <span style="color: #000000;">**2 Accordion Produtos e Serviços:**</span>

##### <span style="color: #000000;">***Protótipo de Tela:***</span>

[![image-1761140590070.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761140590070.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761140590070.png)

*Imagem III - Accordion dos produtos*

##### <span style="color: #000000;">***Descrição dos Campos:***</span>

<table border="1" cellpadding="7" cellspacing="0" id="bkmrk-campo-tipo-tamanho-o-1" style="width: 830px; height: 1108px;"><tbody><tr style="height: 35px;" valign="top"><td bgcolor="#acb9ca" style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Campo**</span>

</td><td bgcolor="#acb9ca" style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tipo**</span>

</td><td bgcolor="#acb9ca" style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tamanho**</span>

</td><td bgcolor="#acb9ca" style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Obrig. ?**</span>

</td><td bgcolor="#acb9ca" style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Máscara**</span>

</td><td bgcolor="#acb9ca" style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Observações**</span>

</td></tr><tr style="height: 35px;"><td colspan="6" style="width: 830px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Card adicionar Produto/Serviço</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Produto</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Campo Autocomplete.</span>

<span style="color: #000000;">Placeholder: "Adicione um Produto ou serviço"</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Quantidade</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Decimal</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">8</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">0,0</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Placeholder: "Quantidade do Produto"</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Valor Unitário</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Decimal</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">18</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">0,00</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Placeholder: 0,00</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Desconto</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Decimal</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">8</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">0,00</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Placeholder: 0,00</span>

</td></tr><tr><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">Grade</span>

</td><td style="width: 100px; border-style: solid; border-color: black;"><span style="color: #000000;">Select</span>

</td><td style="width: 85px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td></tr><tr><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">Lote</span>

</td><td style="width: 100px; border-style: solid; border-color: black;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black;"><span style="color: #000000;">Campo Autocomplete.</span>

</td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Adicionar Produto/Serviço</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Botão</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 29px;"><td class="align-center" colspan="6" style="width: 830px; border-style: solid; border-color: black; height: 29px;"><span style="color: #000000;">Listagem </span></td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Produtos/Serviço</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Código</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Quantidade</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Valor Unit.</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Desconto</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Subtotal</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr style="height: 168px;"><td style="width: 165px; border-style: solid; border-color: black; height: 168px;"><span style="color: #000000;">Ações</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 168px;"><span style="color: #000000;">Column Header</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 168px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 168px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 168px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 168px;"><span style="color: #000000;">A escolher entre </span>  
<span style="color: #000000;">"Editar"</span>

<span style="color: #000000;">[![image-1760730534944.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1760730534944.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1760730534944.png)</span>  
<span style="color: #000000;">e "Excluir"</span>  
<span style="color: #000000;">[![image-1760730563577.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1760730563577.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1760730563577.png)</span>

</td></tr><tr style="height: 35px;"><td colspan="6" style="width: 830px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Card Desconto</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Valor do Desconto</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Decimal</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">8</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Placeholder: "Valor do Desconto"</span>

</td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Porcentagem de Desconto</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Decimal</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">3</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Placeholder: "Porcentagem do Desconto"</span>

</td></tr><tr><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">Aplicar Desconto</span>

</td><td style="width: 100px; border-style: solid; border-color: black;"><span style="color: #000000;">Botão</span>

</td><td style="width: 85px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 35px;"><td colspan="6" style="border-style: solid; border-color: black; width: 830px; height: 35px;"><span style="color: #000000;">Card Resumo Financeiro</span>

</td></tr><tr style="height: 57px;"><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Produtos</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Serviços</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Descontos</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td></tr><tr style="height: 35px;"><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Total</span>

</td><td style="width: 100px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 115px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td></tr></tbody></table>

##### <span style="color: #000000;">***Regras de Interface:***</span>

<span style="color: #000000;">**1. Adicionar Produto/Serviço**</span>

<span style="color: #000000;">**1.1 Campo Produto:** Campo de seleção (dropdown/autocomplete) para Produto. Seguir comportamento atual para like com no mínimo 3 caracteres digitados no campo.</span>

<span style="color: #000000;">**1.2 Quantidade:** Deve conter o *placeholder* "Quantidade do Produto"</span>

<span style="color: #000000;">**1.3 Valor Unitário:** Deve conter o *placeholder* "0,00"</span>

<span style="color: #000000;">**1.4 Desconto:** Deve conter o *placeholder* "0,00"</span>

<span style="color: #000000;">**1.5 Grade:** Campo por padrão fica oculto, só deve ser renderizado quando o produto localizado possuir grade em seu cadastro.   
</span>

<span style="color: #000000;">**1.6 Lote:**  
Campo por padrão fica oculto, só deve ser renderizado quando o produto localizado possuir lote em seu cadastro.   
</span>

<span style="color: #000000;">**1.7 Botão “➕” "Adicionar Produto/Serviço":** Caso possa ser adicionado o produto, ele deve ser inserido na listagem. Do contrario deve ser exibido as seguintes validações de acordo com as regras de negócio.  
Produto não localizado ou quantidade zerada:</span>

<p class="callout danger"><span style="color: #000000;">Escolha um produto e informe a quantidade e preço unitário! </span></p>

<span style="color: #000000;">Cliente não vinculado na Ordem de Serviço:</span>

<p class="callout danger"><span style="color: #000000;">Informe o cliente.</span></p>

<span style="color: #000000;">***2.*** **Listagem de Produtos:**</span>

<span style="color: #000000;">**Produto/Serviço:** Exibe o nome do produto ou serviço inserido, permite ordenação ASC ou DESC.</span>  
<span style="color: #000000;">**Código:** Exibe o código de barras ou SKU do produto ou serviço, permite ordenação ASC ou DESC.</span>  
<span style="color: #000000;">**Quantidade:** Exibe a quantidade inserida do produto ou serviço, permite ordenação ASC ou DESC.</span>  
<span style="color: #000000;">**Valor Unitário:** Exibe o valor unitário inserido do produto ou serviço, permite ordenação ASC ou DESC.</span>  
<span style="color: #000000;">**Desconto:** Exibe o desconto inserido do produto ou serviço, permite ordenação ASC ou DESC.</span>  
<span style="color: #000000;">**Subtotal:** Exibe o subtotal do produto ou serviço, permite ordenação ASC ou DESC.</span>  
<span style="color: #000000;">**Ações (✎ editar / 🗑 excluir):**</span>

- - - - - <span style="color: #000000;"><span style="color: #000000;">**Editar [![image-1760730534944.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1760730534944.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1760730534944.png):** Libera as colunas de Quantidade, Valor Unitário e Desconto do produto/serviço para edição. Durante a edição da linha de registro, devem ser exibidos no lugar dos botões de edição e exclusão os botões de confirmação e cancelamento de alteração:</span></span>[![image-1762182115491.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/scaled-1680-/image-1762182115491.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/image-1762182115491.png)
                    
                    
                    - [![image-1762182163707.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/scaled-1680-/image-1762182163707.png):](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/image-1762182163707.png)Deve manter a alteração realizada no registro da listagem
                    - [![image-1762182200198.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/scaled-1680-/image-1762182200198.png):](https://docs.softensistemas.com.br/uploads/images/gallery/2025-11/image-1762182200198.png)Deve retornar ao estado anterior, cancelando a edição salva em memoria.
            - - <span style="color: #000000;">**Exclusão** [![image-1760730563577.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1760730563577.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1760730563577.png)**:** Deve abria a *dialog* com a validação "Tem certeza que deseja excluir este item?" Caso sim, remover o produto da listagem em tela, somente remover do banco de dados ao salvar a Ordem de Serviço.</span>

<span style="color: #000000;">**2.1. O rodapé da lista deve ter um totalizador do subtotal.**</span>

<span style="color: #000000;">**3. Card Desconto:** </span>

<span style="color: #000000;">**3.1 Desconto em Valor:** Deve conter o *placeholder* "Valor do Desconto".   
</span>**3.2 Desconto em Percentual:** <span style="color: #000000;">Deve conter o *placeholder* "Percentual de Desconto". </span>

**<span style="color: #000000;">4. Card Resumo Financeiro:</span>**

**<span style="color: #000000;">4.1 Produtos:</span>**<span style="color: #000000;">   
Label com o total de produtos inseridos na O.S. Deve ser sempre atualizado conforme mudança de itens inseridos.</span>**<span style="color: #000000;">  
4.2 Serviços:   
</span>**<span style="color: #000000;">Label com o total de produtos inseridos na O.S. Deve ser sempre atualizado conforme mudança de itens </span><span style="color: #000000;">inseridos.</span>**<span style="color: #000000;">  
4.3 Descontos:  
</span>**<span style="color: #000000;">Label com o total de descontos na O.S. (Tanto de Itens quanto do Card Descontos). Sempre atualizado conforme mudanças de valores na O.S.</span>**<span style="color: #000000;">  
</span><span style="color: #000000;">4.4 Total:   
</span>**<span style="color: #000000;">Label da soma de todos os valores da O.S. = (Produtos + Serviços) - Descontos</span>

##### <span style="color: #000000;">***Regras de Negócio:***</span>

<span style="color: #000000;">**1.** **Card adicionar Produto/Serviço:**</span>

<span style="color: #000000;">**1.7 Botão “➕” "Adicionar Produto/Serviço":**  
</span><span style="color: #000000;">Deve ser validado antes da inserção se o campo de quantidade é diferente de zero, caso esteja zerado inserir como 1 a quantidade do produto.  
Deve ser validado se existe um cliente vinculado a Ordem de Serviço, caso não exista, não deve ser permitida a inserção do item.</span>

<span style="color: #000000;">***2. Listagem de Itens:***</span>

<span style="color: #000000;">***2.1*** **Subtotal da Listagem:**  
O subtotal é calculado automaticamente - ***Subtotal = (Valor Unitário × Quantidade) - Desconto***</span>

<span style="color: #000000;">***2.2 Exclusão[![image-1760730563577.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1760730563577.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1760730563577.png):*** A exclusão só deve ocorrer ao salvar a O.S. finalizando ela. As alterações são mantidas em memória e caso o usuário feche a dialog, as alterações são descartadas. </span>

<span style="color: #000000;">***3. Card Desconto:*** Deve ser possível aplicar um desconto em valor e/ou percentual em cima do subtotal de produtos e/ou serviços lançados.</span>

#### <span style="color: #000000;">**3 Accordion Equipamento:**</span>

##### <span style="color: #000000;">***Protótipo de Tela:***</span>

[![image-1761930644746.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761930644746.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761930644746.png)

*Imagem IV - Accordion de equipamentos*

[![image-1761931328710.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761931328710.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761931328710.png)

*Imagem V - Tooltip do equipamento*

[![image-1761160197426.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761160197426.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761160197426.png)

<span style="color: #000000;">*Imagem VI - Anexo de equipamento* </span><span style="color: #ff0000;">*(ESSA TELA PRECISA SER FEITA NO FIGMA)*</span>

##### <span style="color: #000000;">***Descrição dos Campos:***</span>

<table border="1" cellpadding="7" cellspacing="0" id="bkmrk-campo-tipo-tamanho-o" style="width: 843px; height: 302px;"><tbody><tr style="height: 35px;" valign="top"><td bgcolor="#acb9ca" style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Campo**</span>

</td><td bgcolor="#acb9ca" style="width: 101.997px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tipo**</span>

</td><td bgcolor="#acb9ca" style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tamanho**</span>

</td><td bgcolor="#acb9ca" style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Obrig. ?**</span>

</td><td bgcolor="#acb9ca" style="width: 118.976px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Máscara**</span>

</td><td bgcolor="#acb9ca" style="width: 200.99px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Observações**</span>

</td></tr><tr style="height: 35px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Tipo de Equipamento\*</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim</span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">SelectBox</span>

</td></tr><tr><td style="width: 167.969px; border-style: solid; border-color: black;">[![image-1761931579222.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761931579222.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761931579222.png)

</td><td style="width: 101.997px; border-style: solid; border-color: black;"><span style="color: #000000;">Tooltip</span>

</td><td style="width: 87.9688px; border-style: solid; border-color: black;"><span style="color: #000000;"> </span>

</td><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;"> </span>

</td><td style="width: 118.976px; border-style: solid; border-color: black;"><span style="color: #000000;"> </span>

</td><td style="width: 200.99px; border-style: solid; border-color: black;"><span style="color: #000000;"> </span>

</td></tr><tr style="height: 35px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Equipamento\*</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">- </span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim</span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 35px;">AutoComplete

</td></tr><tr style="height: 35px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Adicionar Especificações</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 35px;">Link

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">- </span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Não </span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 35px;"></td></tr><tr style="height: 35px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Problema Relatado</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 35px;">Texto

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">244 </span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Sim </span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 35px;">Placeholder:  
Descreva o problema relatado pelo cliente

</td></tr><tr style="height: 35px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Laudo Técnico</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 35px;">Texto

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">244 </span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Não </span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 35px;">Placeholder:  
Descreva o diagnóstico e procedimentos realizados...

</td></tr><tr style="height: 35px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Anexo</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 35px;">Botão

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">- </span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;"> Não</span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 35px;"></td></tr><tr style="height: 57px;"><td style="width: 167.969px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Checklist de equipamento</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black; height: 57px;">-

</td><td style="width: 87.9688px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;"> -</span>

</td><td style="width: 165px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;"> Não</span>

</td><td style="width: 118.976px; border-style: solid; border-color: black; height: 57px;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr><td style="width: 167.969px; border-style: solid; border-color: black;"><span style="color: #000000;">Redefinir Checklist</span>

</td><td style="width: 101.997px; border-style: solid; border-color: black;">Botão

</td><td style="width: 87.9688px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 165px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 118.976px; border-style: solid; border-color: black;">-

</td><td style="width: 200.99px; border-style: solid; border-color: black;"></td></tr></tbody></table>

##### <span style="color: #000000;">***Regras de Interface:***</span>

<span style="color: #000000;">***1. Tipo de Equipamento\*:*** O evento do campo deve listar tipos de equipamentos registrados pelo usuário, deve conter o *Placeholer* "Selecione o tipo" detalhes em: [PROC001 - Cadastro de Tipo de Equipamento](https://docs.softensistemas.com.br/books/reformulacao-os/chapter/cadastro-equipamento)</span>

<span style="color: #000000;">**2. O tooltip [![image-1761931579222.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761931579222.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761931579222.png)deve listar a seguinte informação:**   
"O tipo de equipamento será utilizado para a personalização da sua OS. Cadastre um tipo de equipamento, como um veiculo e um campo chave, como placa. Nos campos adicionais, inclua informações como ano, modelo e chassi."</span>

<span style="color: #000000;">**3. Equipamento:**  
Campo de nome ou identificação do equipamento. *AutoComplete*. Deve conter o *Placeholder*: "Ex: Macbook Air M2"</span>

**<span style="color: #000000;">4. Adicionar Especificações:  
</span>**<span style="color: #000000;">Abre a *Dialog* do **PROC005.1 - ADICIONAR ESPECIFICAÇÕES**</span>

<span style="color: #000000;">**5. Problema Relatado:** Deve haver um *Label* no rodapé do campo contabilizando a quantidade de caracteres restantes.  
Deve conter o *Placeholder* "Descreva o problema relatado pelo cliente"</span>

<span style="color: #000000;">**6. Laudo Técnico:** Deve haver um *Label* no rodapé do campo contabilizando a quantidade de caracteres restantes.  
Deve conter o *Placeholder* "Descreva o diagnóstico e procedimentos realizados..."  
</span>

**<span style="color: #000000;">7. Anexos de Conferência:  
</span>**<span style="color: #000000;">Ao clicar deve ser chamado o gerenciador de arquivos do computador, para a seleção do arquivo.  
Linha com 3 anexos renderizados. Deve ser gerada outra linha com o restante.  
O anexo deve ser renderizado em tela caso permitida mais uma nova inserção ou se permitido o tamanho do arquivo, caso contrario deve ser retornado a mensagem:</span>

<p class="callout danger"><span style="color: #000000;">Não foi possível inserir anexo, confira a quantidade anexada e o tamanho do arquivo!</span></p>

**<span style="color: #000000;">7.1 Ao ser adicionado um anexo, deve ser renderizado em tela o arquivo carregado.</span>**

**<span style="color: #000000;">7.2 Ações com anexos:</span>**

- - - - **<span style="color: #000000;">Visualizar: </span>**<span style="color: #000000;">Deve ser possível abrir a visualização do arquivo anexado.</span>
            - **<span style="color: #000000;">Exclusão: </span>**<span style="color: #000000;">Deve permitir a remoção do anexo.</span>**<span style="color: #000000;">  
                </span>**
            - **<span style="color: #000000;">Download: </span>**<span style="color: #000000;">Deve permitir o download do arquivo.</span>

**<span style="color: #000000;">7. Listagem Estado do Equipamento:  
</span>**<span style="color: #000000;">O Checklist deve ser renderizado com base no que for cadastrado do tipo de equipamento, mais detalhes [Aqui ](https://docs.softensistemas.com.br/books/reformulacao-os/page/1-cadastro-de-tipo-de-equipamento-revisao)</span>[PROC001 - Cadastro de Tipo de Equipamento](https://docs.softensistemas.com.br/books/reformulacao-os/page/proc001-cadastro-de-tipo-de-equipamento-revisao)

##### <span style="color: #000000;">***Regras de Negócio:***</span>

<span style="color: #000000;">**1. Anexos de Conferência:** Deve ser validado até 10 arquivos anexados dentro de uma Ordem de Serviço e se não ultrapassam o tamanho de 5MB.</span>

#### <span style="color: #000000;">**PROC005.1 - Adicionar Especificações.**</span>

##### <span style="color: #000000;">***Protótipo de Tela:***</span>

[![image-1761161916617.png](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/scaled-1680-/image-1761161916617.png)](https://docs.softensistemas.com.br/uploads/images/gallery/2025-10/image-1761161916617.png)

##### <span style="color: #000000;">***Descrição dos Campos:***</span>

<table border="1" cellpadding="7" cellspacing="0" id="bkmrk-campo-tipo-tamanho-o-2" style="height: 232px;"><tbody><tr style="height: 35px;" valign="top"><td bgcolor="#acb9ca" style="width: 160.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Campo**</span>

</td><td bgcolor="#acb9ca" style="width: 98.1875px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tipo**</span>

</td><td bgcolor="#acb9ca" style="width: 85.0156px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Tamanho**</span>

</td><td bgcolor="#acb9ca" style="width: 158.047px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Obrig. ?**</span>

</td><td bgcolor="#acb9ca" style="width: 114.469px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Máscara**</span>

</td><td bgcolor="#acb9ca" style="width: 192.266px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">**Observações**</span>

</td></tr><tr style="height: 35px;"><td style="width: 160.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Marca/Modelo</span>

</td><td style="width: 98.1875px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85.0156px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 158.047px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 114.469px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 192.266px; border-style: solid; border-color: black; height: 35px;"></td></tr><tr style="height: 35px;"><td style="width: 160.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Número de Série</span>

</td><td style="width: 98.1875px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85.0156px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">- </span>

</td><td style="width: 158.047px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 114.469px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 192.266px; border-style: solid; border-color: black; height: 35px;"></td></tr><tr style="height: 57px;"><td style="width: 160.969px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Recorrência do Equipamento</span>

</td><td style="width: 98.1875px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">Texto</span>

</td><td style="width: 85.0156px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;">-</span>

</td><td style="width: 158.047px; border-style: solid; border-color: black; height: 57px;"><span style="color: #000000;"> -</span>

</td><td style="width: 114.469px; border-style: solid; border-color: black; height: 57px;">-

</td><td style="width: 192.266px; border-style: solid; border-color: black; height: 57px;"></td></tr><tr style="height: 35px;"><td style="width: 160.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Última Garantia</span>

</td><td class="align-center" style="width: 98.1875px; border-style: solid; border-color: black; height: 35px;">Data</td><td style="width: 85.0156px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">-</span>

</td><td style="width: 158.047px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;"> -</span>

</td><td style="width: 114.469px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 192.266px; border-style: solid; border-color: black; height: 35px;"></td></tr><tr style="height: 35px;"><td style="width: 160.969px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;">Campos A - Z</span>

</td><td class="align-center" style="width: 98.1875px; border-style: solid; border-color: black; height: 35px;">Texto</td><td style="width: 85.0156px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;"> -</span>

</td><td style="width: 158.047px; border-style: solid; border-color: black; height: 35px;"><span style="color: #000000;"> -</span>

</td><td style="width: 114.469px; border-style: solid; border-color: black; height: 35px;">-

</td><td style="width: 192.266px; border-style: solid; border-color: black; height: 35px;"></td></tr><tr><td style="width: 160.969px; border-style: solid; border-color: black;"><span style="color: #000000;">Fechar</span>

</td><td class="align-center" style="width: 98.1875px; border-style: solid; border-color: black;">Botão</td><td style="width: 85.0156px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 158.047px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 114.469px; border-style: solid; border-color: black;">-

</td><td style="width: 192.266px; border-style: solid; border-color: black;"></td></tr><tr><td style="width: 160.969px; border-style: solid; border-color: black;"><span style="color: #000000;">Salvar</span>

</td><td class="align-center" style="width: 98.1875px; border-style: solid; border-color: black;">Botão</td><td style="width: 85.0156px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 158.047px; border-style: solid; border-color: black;"><span style="color: #000000;">-</span>

</td><td style="width: 114.469px; border-style: solid; border-color: black;">-

</td><td style="width: 192.266px; border-style: solid; border-color: black;"></td></tr></tbody></table>

##### <span style="color: #000000;">***Regras de Interface:***</span>

<span style="color: #000000;">***1. Marca/Modelo:*** Campo faz referencia ao campo "marca/modelo" atuais, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.</span>

<span style="color: #000000;">***2 Número de Série:*** Campo faz referencia ao campo "Número de Série" atual, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.</span>

<span style="color: #000000;">***3 Recorrência do Equipamento:*** Campo faz referencia ao campo "Recorrência do Equipamento" atual, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.</span>

<span style="color: #000000;">***4 Última Garantia:*** Campo faz referencia ao campo "Última Garantia" atual, só deve ser gerado nas O.S. anteriores as modificações em tela, para o usuário não perder o registro.</span>

***<span style="color: #000000;">5 Campos A - Z:  
</span>***<span style="color: #000000;">Campos renderizado com base nas informações personalizadas do tipo de equipamento, mais informações [Aqui ](https://docs.softensistemas.com.br/books/reformulacao-os/page/1-cadastro-de-tipo-de-equipamento-revisao)[PROC001 - Cadastro de Tipo de Equipamento](https://docs.softensistemas.com.br/books/reformulacao-os/page/proc001-cadastro-de-tipo-de-equipamento-revisao). Também deve ser renderizado o campo chave do produto como um dos campos A - Z, considerar como o primeiro campo devido a ser o único obrigatório.</span>

##### <span style="color: #000000;">***Regras de Negócio:***</span>

<span style="color: #000000;">***1.*** Os campos **\[Marca/Modelo ; Número de Série ; Recorrência do Equipamento ; Última Garantia \]** são referente as Ordens de Serviço antigas, somente devendo ser mostrado no novo layout caso possuam conteúdo no campos referentes na base de dados.</span>

<span style="color: #000000;">**2. Fechar:**  
Deve encerrar a tela sem salvar quaisquer informações.</span>

<span style="color: #000000;">**3.** **Salvar:**  
Deve salvar as informações na base de dados. Caso sejam novas informações, deve ser salvo um novo registro na base de dados. Caso as informações já estejam salvas, devem ser atualizadas na base de dados.</span>

##### <span style="color: #000000;">***Questões Técnicas Gerais:***</span>

<span style="color: #000000;">**1. Geral:** As tabelas relacionadas a Ordem de Serviço na base de dados são:  
</span>

- - <span style="color: #000000;">**ordermservico**</span>
    - <span style="color: #000000;">**ordemservicoitem**</span>

<span style="color: #000000;">**2.** **Produto e Serviço:**  
Deve ser criado uma coluna na base de dados para armazenar o percentual do desconto do produto inserido:</span>

```SQL
ALTER TABLE ordemservicoADD COLUMN descontoPorcento DECIMAL(19,2)
```

<span style="color: #000000;">**3. Equipamento:**  
Deve ser criada uma tabela intermediaria para armazenar o Path do arquivo anexado dentro do servidor:</span>

```SQL
CREATE TABLE orderservicoanexo
(
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  ordemId BIGINT NOT NULL,
  pathAnexo TEXT,
  FOREIGN KEY (ordemId) REFERENCES ordemservico(id)
);

```

<span style="color: #000000;">**4.** Campos referentes aos campos antigos de especificações do equipamento:</span>

```SQL
SELECT marcaModelo, serie, dataGarantia FROM ordemservico
```

<span style="color: #000000;">**4.1** Os campos adicionais de equipamento a serem renderizados se encontram em tipoequipamento.campochave e tipoequipamento.adicionais. Ambos devem ser renderizados em tela.</span>

<span style="color: #000000;">**5.** Referencia para salvamento dos dados novos renderizados (Campos A-Z):</span>

```SQL
INSERT INTO gerencieaqui.equipamento (adicionais) VALUES ('[{"nome": "Número de Série","valor": "123456"}]');
```

**<span style="color: #000000;">5. Referencia para salvamento dos dados da checklist:</span>**

```SQL
INSERT INTO gerencieaqui.ordemservico (checklist) VALUES ('[{ "etapa": "Veio fonte?" }]');
```

**7.** Segue o esquema de cores padrão a ser utilizado nos componentes:

<span style="color: #000000;">**GerencieAqui**:   
Títulos dos *Accordions*: #626262  
*Label* dos campos: #044572</span>  
<span style="color: #000000;">Botões principais: #044572</span>  
<span style="color: #000000;">Tooltip: #242424  
</span><span style="color: #000000;">Botão editar da listagem: #1974FC</span>  
<span style="color: #000000;">Botão exclusão da listagem: #DB102B</span>  
<span style="color: #000000;">Título da *dialog*: #242424</span>  
<span style="color: #000000;">Placeholders: #50505080 (50%)</span>  
<span style="color: #000000;">Label das abas: #626262  
Label aba selecionada: #009997  
</span><span style="color: #000000;">Inputs e textos nos grids: #000000</span>

<div id="bkmrk-aplicativoempresaria"><svg class="svg-icon" data-icon="link" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg><div><span style="color: #000000;">**AplicativoEmpresarial**:   
Títulos dos *Accordions*: #626262  
*Label* dos campos: #621FA4</span>  
<span style="color: #000000;">Botões principais: #621FA4</span>  
<span style="color: #000000;">Tooltip: #242424  
</span><span style="color: #000000;">Botão editar da listagem: #1974FC</span>  
<span style="color: #000000;">Botão exclusão da listagem: #DB102B</span>  
<span style="color: #000000;">Título da *dialog*: #242424</span>  
<span style="color: #000000;">Placeholders: #50505080 (50%)</span>  
<span style="color: #000000;">Label das abas: #626262  
Label aba selecionada: #009997  
</span><span style="color: #000000;">Inputs e textos nos grids: #000000</span></div></div>