Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

CONTEÚDO
Âncora
início
início

  1. Visão Geral                                                                     clique no conteúdo para acesso rápido à informação desejada ↓
  2. API x Pontos UPC Relacionados
  3. JSON de metadata
  4. Especificidades de Customização
    1. Tela - Listagem de Embarques
    2. Tela - Novo/Editar Embarques
      1. Step de Cabeçalho
      2. Step de Pedidos
      3. Step de Alocações
      4. Embarque Finalizado
    3. Tela - Resumo/Detalhe do Embarque
  5. Observações Gerais

01. Visão Geral 
Âncora
1
1

Este documento tem como objetivo descrever o que poderá ser customizado na tela HTML do programa Processo de Embarques item de menu Embarque (html-mft.xxxxxxxxx), aqui será descrito quais componentes e elementos podem ser customizados.

Aviso
titleImportante

Esse documento somente cita itens de customização que diferem da customização padrão de uma tela HTML utilizando PO-UI, ou seja, somente as especificidades de customização do programa HTML em questão. As customizações nativas dos componentes dinâmicos do PO-UI podem ser verificadas aqui e não serão abordadas nesse documento.

02. API x Pontos UPC Relacionados 
Âncora
2
2

Segue a lista de APIs e Pontos de UPC responsáveis pelo processamento da interface dinâmica e dos dados do programa.
Para maiores detalhes de como cadastrar uma UPC para essa API podem ser visualizados aqui.

  • API REST: eqp/api/v1/shipping.p, eqp/api/v1/shippingOrder.p, eqp/api/v1/shippingAllocation.p

  • URL base para embarques: https://<servidor>:<porta>/api/eqp/v1/shipping

  • URL base para aba de pedidos: https://<servidor>:<porta>/api/eqp/v1/shippingOrder
  • URL base para aba de alocaçõeshttps://<servidor>:<porta>/api/eqp/v1/shippingAllocation

...

Bloco de código
titleExemplo de Payload (Embarque)
linenumberstrue
collapsetrue
{
    "cargoType": "",
    "natOperacao": "",
    "shippingCompany": "",
    "freteGfeTabGener": null,
    "availableToAddOrders": true,
    "numExpShipping": "",
    "salesChannel": 0,
    "estabShipping": "1",
    "allowBeforeWMS": false,
    "moduloEx": null,
    "licensePlate": "",
    "route": "",
    "dateShipping": "2024-07-18",
    "driver": "eu",
    "integWMS": null,
    "sitFatur": 1,
    "negativeBalanceLot": "",
    "state": "  ",
    "identShipping": "13",
    "externalDeposit": "",
    "codShipping": 2022031588890066,
    "sitShipping": 3
}

03. JSON de metadata
Âncora
3
3

É possível retornar o metadata das telas para fazer a analise da estrutura do JSON, executando as requests abaixo (depois de logado no produto Datasul):

Tipo

Método (API)

Endpoint (API)

Observações

Listagem

GET

URL_Base/metadata/?type=list


Inclusão

GET

URL_Base/metadata/?type=new


Edição

GET

URL_Base/metadata/<código do embarque>?type=edit

Utiliza o código do estabelecimento como path param.

Copia

GET

URL_Base/metadata/<código do embarque>?type=copy

Utiliza o código do estabelecimento como path param.

Detalhes

GET

URL_Base/metadata/<código do embarque>?type=detail

Utiliza o código do estabelecimento como path param.

04. Especificidades de Customização
Âncora
4
4

a) Tela - Listagem de Embarques

Âncora
4a
4a

...

CampoDescrição
title

Título da página, aqui é apresentando o titulo recebido do metadata mais o numero do embarque que esta sendo apresentado.


Expandir
titleExemplo

"title": "Resumo Embarque"

breadcrumb

Gera uma estrutura de navegação que apresenta a localização da URL atual, exibindo as antecessoras conforme é realizado a navegação na aplicação, é possível remover ou adicionar mais itens na lista. Na tela de resumo/detalhe por padrão vai aparecer dois itens, a pagina atual "Resumo Embarque" que não pode ser clicado e a tela de "Lista de Embarques" que ao clicar leva para a rota enviada no link, conforme exemplo abaixo.


Expandir
titleExemplo

"breadcrumb": {
        "items": [
            {
                "link": "\/shippingProcess\/shipping",
                "label": "Lista de Embarques"
            },
            {
                "link": "\/shippingProcess\/shipping",
                "label": "Resumo Embarque"
            }
        ]
}

header

Campos que serão exibidos na segunda aba do resumo/detalhe do embarque, é feito uma concatenação com o "headerOptional" para exibir em um po-dynamic-view, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada.


Expandir
titleExemplo

"header": [
        {
            "gridColumns": 4,
            "property": "codShipping",
            "disabled": true,
            "label": "Embarque",
            "type": "number",
            "key": true,
            "required": true,
            "order": 1,
            "mask": "9999999999999999"
        },
        {
            "gridColumns": 4,
            "property": "dateShipping",
            "disabled": true,
            "label": "Data de Embarque",
            "type": "date",
            "required": true,
            "order": 2
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/cdp\/v1\/establishmentsPublic",
            "columns": [
                {
                    "property": "code",
                    "label": "Código",
                    "type": "string"
                },
                {
                    "property": "name",
                    "label": "Nome",
                    "type": "string"
                }
            ],
            "fieldLabel": "name",
            "property": "estabShipping",
            "format": [
                "code",
                "name"
            ],
            "disabled": true,
            "label": "Estabelecimento",
            "fieldValue": "code",
            "required": true,
            "order": 3
        },
        {
            "gridColumns": 4,
            "property": "identShipping",
            "disabled": true,
            "optional": true,
            "label": "Preparador",
            "type": "string",
            "maxLength": 12,
            "order": 4
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/eqp\/v1\/shippingCompany",
            "columns": [
                {
                    "visible": true,
                    "property": "shortName",
                    "width": "25%",
                    "label": "Nome Abreviado",
                    "type": "number"
                },
                {
                    "visible": true,
                    "property": "name",
                    "width": "35%",
                    "label": "Nome",
                    "type": "string"
                },
                {
                    "property": "cgc",
                    "width": "25%",
                    "label": "CPF\/CNPJ",
                    "type": "string"
                },
                {
                    "property": "state",
                    "width": "15%",
                    "label": "Estado",
                    "type": "string"
                }
            ],
            "fieldLabel": "name",
            "property": "shippingCompany",
            "format": [
                "shortName",
                "name"
            ],
            "disabled": true,
            "optional": true,
            "label": "Transportador",
            "fieldValue": "shortName",
            "order": 5
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/eqp\/v1\/cargoType",
            "columns": [
                {
                    "property": "code",
                    "label": "Tipo de Embarque",
                    "type": "string"
                },
                {
                    "property": "type",
                    "label": "Descrição",
                    "type": "string"
                },
                {
                    "property": "loadWeight",
                    "width": "20%",
                    "label": "Peso (KG)",
                    "type": "number"
                },
                {
                    "property": "loadVolume",
                    "width": "20%",
                    "label": "Volume",
                    "type": "number"
                }
            ],
            "fieldLabel": "type",
            "property": "cargoType",
            "format": [
                "code",
                "type"
            ],
            "disabled": true,
            "optional": true,
            "label": "Tipo do Embarque",
            "fieldValue": "code",
            "order": 6
        }
]

headerOptional

Campos que serão exibidos na segunda aba do resumo/detalhe do embarque, é feito uma concatenação com o "header" para exibir em um po-dynamic-view, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada.


Expandir
titleExemplo

"headerOptional": [
        {
            "gridColumns": 4,
            "property": "driver",
            "disabled": true,
            "optional": true,
            "label": "Motorista",
            "type": "string",
            "order": 7
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/eqp\/v1\/licensePlate",
            "columns": [
                {
                    "property": "codPlaca",
                    "label": "Placa",
                    "type": "string"
                },
                {
                    "property": "ordPeso",
                    "label": "Ordem Pessagem",
                    "type": "number"
                }
            ],
            "fieldLabel": "ordPeso",
            "property": "licensePlate",
            "format": [
                "codPlaca"
            ],
            "disabled": true,
            "optional": true,
            "label": "Placa",
            "fieldValue": "codPlaca",
            "order": 8
        },
        {
            "gridColumns": 4,
            "property": "state",
            "options": [
                {
                    "label": "Nenhum",
                    "value": ""
                },
                {
                    "label": "SE - Sergipe",
                    "value": "SE"
                },
                {
                    "label": "SP - São Paulo",
                    "value": "SP"
                },
                {
                    "label": "TO - Tocantins",
                    "value": "TO"
                }
            ],
            "disabled": true,
            "optional": true,
            "label": "Estado",
            "type": "label",
            "order": 9
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/eqp\/v1\/route",
            "columns": [
                {
                    "property": "codRoute",
                    "label": "Rota",
                    "type": "string"
                },
                {
                    "property": "codDescription",
                    "label": "Descrição",
                    "type": "string"
                }
            ],
            "fieldLabel": "codDescription",
            "property": "route",
            "format": [
                "codRoute",
                "codDescription"
            ],
            "disabled": true,
            "optional": true,
            "label": "Rota",
            "fieldValue": "codRoute",
            "order": 10
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/eqp\/v1\/externalDeposit",
            "columns": [
                {
                    "property": "code",
                    "label": "Código",
                    "type": "string"
                },
                {
                    "property": "name",
                    "label": "Descrição",
                    "type": "string"
                },
                {
                    "property": "balanceAv",
                    "width": "10%",
                    "label": "Saldo Disp",
                    "type": "boolean"
                },
                {
                    "property": "type",
                    "width": "10%",
                    "label": "Tipo",
                    "type": "string"
                },
                {
                    "property": "recipient",
                    "width": "15%",
                    "label": "Destinatário",
                    "type": "string"
                }
            ],
            "fieldLabel": "name",
            "property": "externalDeposit",
            "format": [
                "code",
                "name"
            ],
            "disabled": true,
            "optional": true,
            "label": "Depósito Externo",
            "type": "string",
            "fieldValue": "code",
            "order": 11
        },
        {
            "gridColumns": 4,
            "columns": [
                {
                    "property": "code",
                    "label": "Código",
                    "type": "string"
                },
                {
                    "property": "description",
                    "label": "Descrição",
                    "type": "string"
                },
                {
                    "property": "actv",
                    "width": "10%",
                    "label": "Ativo",
                    "type": "boolean"
                },
                {
                    "property": "descriptionType",
                    "width": "10%",
                    "label": "Tipo",
                    "type": "string"
                },
                {
                    "property": "cfopCode",
                    "width": "10%",
                    "label": "CFOP",
                    "type": "string"
                }
            ],
            "format": [
                "code",
                "description"
            ],
            "optional": true,
            "label": "Natureza operação",
            "type": "string",
            "fieldValue": "code",
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/cdp\/v1\/transactionTypesPublic",
            "fieldLabel": "description",
            "property": "natOperacao",
            "disabled": true,
            "maxLength": 6,
            "order": 12
        },
        {
            "gridColumns": 4,
            "searchService": "\/dts\/datasul-rest\/resources\/prg\/eqp\/v1\/salesChannel",
            "columns": [
                {
                    "property": "code",
                    "label": "Código",
                    "type": "number"
                },
                {
                    "property": "description",
                    "label": "Descrição",
                    "type": "string"
                }
            ],
            "fieldLabel": "description",
            "property": "salesChannel",
            "format": [
                "code",
                "description"
            ],
            "disabled": true,
            "optional": true,
            "label": "Canal de Vendas",
            "type": "string",
            "fieldValue": "code",
            "order": 13
        },
        {
            "gridColumns": 4,
            "property": "negativeBalanceLot",
            "disabled": true,
            "optional": true,
            "label": "Lote Saldo Negativo",
            "type": "string",
            "order": 14
        },
        {
            "gridColumns": 12,
            "booleanTrue": "Sim",
            "property": "allowBeforeWMS",
            "booleanFalse": "Não",
            "disabled": true,
            "optional": true,
            "label": "Permite Cálculo da nota fiscal antes do retorno do WMS",
            "type": "boolean",
            "order": 15
        }
]

columnsResume

Coluna da tabela principal da aba de "Resumo", pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada.


Expandir
titleExemplo

"columnsResume": [
    {
        "allowColumnsManager": true,
        "property": "codResume",
        "label": "Resumo",
        "type": "number",
        "key": true,
        "order": 17
    },
    {
        "allowColumnsManager": true,
        "property": "client",
        "label": "Cliente",
        "type": "string",
        "order": 18
    },
    {
        "allowColumnsManager": true,
        "property": "representative",
        "label": "Representante",
        "type": "string",
        "order": 19
    },
    {
        "allowColumnsManager": true,
        "property": "grossWeight",
        "label": "Peso bruto",
        "type": "number",
        "order": 20
    },
    {
        "allowColumnsManager": true,
        "property": "netWeight",
        "label": "Peso líquido",
        "type": "number",
        "order": 21
    },
    {
        "allowColumnsManager": true,
        "property": "volume",
        "label": "Volume",
        "type": "number",
        "order": 22
    },
    {
        "allowColumnsManager": true,
        "property": "paymentCondition",
        "label": "Cond Pgto",
        "type": "number",
        "order": 23
    },
    {
        "allowColumnsManager": true,
        "property": "natOperacao",
        "label": "Nat Operação",
        "type": "string",
        "order": 24
    },
    {
        "gridColumns": 6,
        "optionsMulti": true,
        "property": "sitFatur",
        "options": [
            {
                "label": "Sim",
                "value": 1
            },
            {
                "label": "Não",
                "value": 2
            }
        ],
        "label": "Liberado fat?",
        "type": "label",
        "order": 25,
        "labels": [
            {
                "color": "color-10",
                "tooltip": null,
                "label": "Sim",
                "value": 1
            },
            {
                "color": "color-07",
                "tooltip": "Embarque/Resumo em uso ou com problemas",
                "label": "Não",
                "value": 2
            }
        ]
    },
    {
        "allowColumnsManager": true,
        "optionsMulti": true,
        "property": "sitShipping",
        "options": [
            {
                "label": "Aberto",
                "value": 1
            },
            {
                "label": "Alocado",
                "value": 2
            },
            {
                "label": "Calculado",
                "value": 3
            },
            {
                "label": "Confirmado",
                "value": 4
            }
        ],
        "label": "Situação",
        "type": "label",
        "order": 26,
        "labels": [
            {
                "color": "color-05",
                "tooltip": "Nenhum Pedido/Item alocado ao Resumo",
                "label": "Aberto",
                "value": 1
            },
            {
                "color": "color-10",
                "tooltip": "Resumo Alocado",
                "label": "Alocado",
                "value": 2
            },
            {
                "color": "color-08",
                "tooltip": "Resumo Calculado",
                "label": "Calculado",
                "value": 3
            },
            {
                "color": "color-03",
                "tooltip": "Resumo atualizado no Estoque",
                "label": "Confirmado",
                "value": 4
            }
        ]
    }
]

columnsItens

Expansão da tabela principal, onde mostra os itens vinculados ao resumo, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada.

Obs: nessa tabela o gerenciador de colunas é escondido, então mesmo que enviado a propriedade "allowColumnsManager" como true ela é desconsiderada.


Expandir
titleExemplo

"columnsItens": [
        {
            "property": "sequence",
            "width": "5%",
            "disabled": true,
            "label": "Seq",
            "type": "number",
            "order": 28
        },
        {
            "property": "codItem",
            "width": "10%",
            "disabled": true,
            "label": "Item",
            "type": "string",
            "key": true,
            "order": 29
        },
        {
            "property": "deliNumber",
            "width": "5%",
            "disabled": true,
            "label": "Entrega",
            "type": "number",
            "order": 30
        },
        {
            "property": "deliDate",
            "width": "15%",
            "disabled": true,
            "label": "Dt Entrega",
            "type": "date",
            "order": 31
        },
        {
            "property": "pedClient",
            "width": "10%",
            "disabled": true,
            "label": "Pedido cliente",
            "type": "string",
            "order": 32
        },
        {
            "property": "client",
            "width": "15%",
            "disabled": true,
            "label": "Cliente",
            "type": "string",
            "order": 33
        },
        {
            "property": "qtAllocated",
            "format": "1.4-4",
            "width": "10%",
            "disabled": true,
            "label": "Qtde alocada",
            "type": "number",
            "order": 34
        },
        {
            "property": "sitWMS",
            "width": "20%",
            "disabled": true,
            "label": "Situação WMS",
            "type": "string",
            "order": 35
        }
]

viewItens

Campos apresentados na expansão da tabela de itens, pode ser incluído novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada.


Expandir
titleExemplo

"viewItens": [
        {
            "gridColumns": 3,
            "property": "reference",
            "label": "Referência",
            "type": "string",
            "order": 36
        },
        {
            "gridColumns": 3,
            "property": "un",
            "label": "UM",
            "type": "string",
            "order": 37
        },
        {
            "gridColumns": 6,
            "property": "itemDescription",
            "label": "Descrição",
            "type": "string",
            "order": 38
        }
]

columnsPackaging

Expansão da tabela principal, onde mostra as embalagens vinculados ao resumo, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada.

Obs: nessa tabela o gerenciador de colunas é escondido, então mesmo que enviado a propriedade "allowColumnsManager" como true ela é desconsiderada.


Expandir
titleExemplo

"columnsPackaging": [
        {
            "property": "codPackaging",
            "width": "15%",
            "disabled": true,
            "label": "Sigla",
            "type": "string",
            "key": true,
            "order": 24
        },
        {
            "property": "qtVolume",
            "width": "15%",
            "disabled": true,
            "label": "Qtde Volumes",
            "type": "number",
            "order": 25
        },
        {
            "property": "volumeBrand",
            "width": "30%",
            "disabled": true,
            "label": "Marca",
            "type": "string",
            "order": 26
        },
        {
            "property": "volumeDescription",
            "width": "40%",
            "disabled": true,
            "label": "Descrição",
            "type": "string",
            "order": 27
        }
]

modalColumnsDeposit

Tabela da modal de listagem de depósitos do item, onde mostra o item e quais depósitos estão vinculados a ele, pode ser incluído mais colunas ou excluído as padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-table, a interface PoTableColumn é implementada.


Expandir
titleExemplo

"modalColumnsDeposit": [
        {
            "allowColumnsManager": true,
            "property": "codItem",
            "width": "15%",
            "disabled": true,
            "label": "Item",
            "type": "string",
            "order": 48
        },
        {
            "allowColumnsManager": true,
            "property": "codDeposit",
            "width": "10%",
            "disabled": true,
            "label": "Depósito",
            "type": "string",
            "key": true,
            "order": 49
        },
        {
            "allowColumnsManager": true,
            "booleanTrue": "Sim",
            "property": "depWMS",
            "width": "10%",
            "booleanFalse": "Não",
            "disabled": true,
            "label": "Dep WMS",
            "type": "boolean",
            "order": 50
        },
        {
            "allowColumnsManager": true,
            "property": "localization",
            "width": "15%",
            "disabled": true,
            "label": "Localização",
            "type": "string",
            "order": 51
        },
        {
            "allowColumnsManager": true,
            "property": "batch",
            "width": "20%",
            "disabled": true,
            "label": "Lote\/Série",
            "type": "string",
            "order": 52
        },
        {
            "allowColumnsManager": true,
            "property": "qtAllocated",
            "format": "1.4-4",
            "width": "15%",
            "disabled": true,
            "label": "Qtde alocada",
            "type": "number",
            "order": 53
        },
        {
            "allowColumnsManager": true,
            "property": "batchShelfLife",
            "width": "15%",
            "disabled": true,
            "label": "Validade Lote",
            "type": "date",
            "order": 54
        }
]

modalDepositView

Campos que serão exibidos no cabeçalho da modal de informações do depósito do item, pode ser incluídos novos campos ou removido os padrões. Para mais informações sobre o que pode ser enviado consultar a documentação do po-dynamic-view, a interface PoDynamicViewField é implementada.


Expandir
titleExemplo

 "modalDepositView": [
        {
            "gridColumns": 4,
            "property": "pedClient",
            "label": "Pedido",
            "type": "string",
            "order": 39
        },
        {
            "gridColumns": 4,
            "property": "client",
            "label": "Cliente",
            "type": "string",
            "order": 40
        },
        {
            "gridColumns": 4,
            "property": "codItem",
            "label": "Item",
            "type": "string",
            "order": 41
        },
        {
            "gridColumns": 4,
            "property": "sequence",
            "label": "Sequência",
            "type": "number",
            "order": 42
        },
        {
            "gridColumns": 4,
            "property": "reference",
            "label": "Referência",
            "type": "string",
            "order": 43
        },
        {
            "gridColumns": 4,
            "property": "deliNumber",
            "label": "Nr Entrega",
            "type": "number",
            "order": 44
        },
        {
            "gridColumns": 4,
            "property": "deliDate",
            "label": "Data Entrega",
            "type": "date",
            "order": 45
        },
        {
            "gridColumns": 4,
            "property": "sitWMS",
            "label": "Situação WMS",
            "type": "string",
            "order": 46
        },
        {
            "gridColumns": 4,
            "property": "qtAllocated",
            "label": "Quantidade Alocada",
            "type": "number",
            "order": 47
        }
    ]

05. Observações Gerais 
Âncora
5
5

  • Todos os objetos que não foram citados, a principio, não podem ser customizados.
  • Caso deseja-se customizar algum componente além dos descritos nesse documento e no documento padrão de customização do PO-UI, favor abrir um ticket solicitando e justificando a necessidade de customização.
  • Clique aqui para baixar um fonte exemplo de UPC para esse programa.