Após a conclusão da página de listagem e dos controladores relacionados à gestão de entradas, o próximo passo consiste no desenvolvimento da interface frontal para a criação de novos pedidos de entrada. Esta etapa foca na construção dos formulários de cadastro e na lógica de interação com o usuário através do framwork EasyUI.

Configuração da Visão (View)

No projeto de apresentação ABP.TPLMS.Web.MVC, localize o arquivo Views/InStock/Index.cshtml. Neste arquivo, serão inseridos dois componentes princpiais de diálogo: um para a seleção de mercadorias e outro para o preenchimento dos dados do pedido de entrada.

O código abaixo define as estrutursa dos diálogos, incluindo campos para identificação do pedido, datas, partes envolvidas (remetente, destinatário, empresa) e detalhes operacionais como pesos e volumes.

<!-- Diálogo para Seleção de Mercadorias -->
<div id="dlgImportacao" class="easyui-dialog" closed="true" style="top:10px;" 
     data-options="buttons: '#btnsImportacao'">   
    <div data-options="region:'center',split:false" style="height:460px;">
        <table id="gridMercadorias"></table>
    </div> 
</div>

<div id="btnsImportacao">
    <input type="button" id="btnConfirmarImportacao" value="Importar" class="btn btn-primary" />        
    <input type="button" id="btnCancelarImportacao" value="Cancelar" class="btn btn-info" />
</div>

<!-- Diálogo para Cadastro/Edição do Pedido -->
<div id="dlgPedidoEntrada" class="easyui-dialog" closed="true" style="top:10px;" 
     data-options="buttons: '#btnsAcao'">
    <div id="containerTabs">
        <div title="Dados do Pedido">
            <table>
                <tr>
                    <td><input type="hidden" name="ID" id="hidIdPedido" /></td>
                </tr>
                <tr>
                    <td>Número do Pedido:</td>
                    <td><input type="text" id="txtNumeroPedido" name="UNO" class="form-control input-sm" /></td>
                    <td>Previsão de Entrega:</td>
                    <td>
                        <input type="text" id="txtDataPrevista" name="UPreDeliveryTime" class="form-control input-sm" />
                    </td>
                    <td>Status:</td>
                    <td><input type="text" id="txtStatus" name="UStatus" class="form-control input-sm" value="0" /></td>
                </tr>
                <tr>
                    <td>Remetente:</td>
                    <td><input type="text" id="txtCodRemetente" name="UOwnerCode" class="form-control input-sm" /></td>
                    <td colspan="2">
                        <input type="text" id="txtNomeRemetente" name="UOwnerName" class="form-control input-sm" />
                    </td>
                    <td>CNPJ/ID:</td>
                    <td>
                        <input type="text" id="txtCnpjRemetente" name="UConsignerSccd" class="form-control input-sm" />
                    </td>
                </tr>
                <tr>
                    <td>Destinatário:</td>
                    <td><input type="text" id="txtCodDestinatario" name="UCustomerCode" class="form-control input-sm" /></td>
                    <td colspan="2">
                        <input type="text" id="txtNomeDestinatario" name="UCustomerName" class="form-control input-sm" />
                    </td>
                    <td>CNPJ/ID:</td>
                    <td>
                        <input type="text" id="txtCnpjDestinatario" name="UConsigneeSccd" class="form-control input-sm" />
                    </td>
                </tr>
                <tr>
                    <td>Empresa Operadora:</td>
                    <td><input type="text" id="txtCodEmpresa" name="UBizpoEtpsNo" class="form-control input-sm" /></td>
                    <td colspan="2">
                        <input type="text" id="txtNomeEmpresa" name="UBizpoEtpsName" class="form-control input-sm" />
                    </td>
                    <td>CNPJ/ID:</td>
                    <td>
                        <input type="text" id="txtCnpjEmpresa" name="UBizpoEtpsSccd" class="form-control input-sm" />
                    </td>
                </tr>
                <tr>
                    <td>Conferente:</td>
                    <td> <input type="text" id="txtResponsavel" name="UReceiver" class="form-control input-sm" /></td>
                    <td>Início Recebimento:</td>
                    <td>
                        <input type="text" id="txtHoraInicio" name="UReceiveTime" class="form-control input-sm" />
                    </td>
                    <td>Fim Recebimento:</td>
                    <td>
                        <input type="text" id="txtHoraFim" name="UERcvTime" class="form-control input-sm" />
                    </td>
                </tr>
                <tr>
                    <td>Peso Líquido:</td>
                    <td> <input type="text" id="txtPesoLiq" name="UNwt" class="form-control input-sm" value="0" /></td>
                    <td>Peso Bruto:</td>
                    <td>
                        <input type="text" id="txtPesoBruto" name="UGwt" class="form-control input-sm" value="0" />
                    </td>
                     <td>Quantidade Volumes:</td>
                    <td>
                        <input type="text" id="txtQtdVolumes" name="UPackageQty" class="form-control input-sm" value="0" />
                    </td>                      
                </tr>
                <tr>
                    <td>Código Armazém:</td>
                    <td>
                        <input type="text" id="txtCodArmazem" name="UWarehouseNo" class="form-control input-sm" />
                    </td>
                     <td>Tipo Armazém:</td>
                    <td>
                        <input type="text" id="txtTipoArmazem" name="UWarehouseType" class="form-control input-sm" />
                    </td>
                    <td>Data Conferência:</td>
                    <td>
                        <input type="text" id="txtDataConferencia" name="UCheckTime" class="form-control input-sm" />
                    </td>
                </tr>
                <tr>
                    <td>Inspetor:</td>
                    <td>
                        <input type="text" id="txtInspetor" name="UChecker" class="form-control input-sm" />
                    </td>
                    <td>Operador:</td>
                    <td>
                        <input type="text" id="txtOperador" name="UOper" class="form-control input-sm" />
                    </td>
                    <td>Criação:</td>
                    <td>
                        <input type="text" id="txtDataCriacao" name="UCreationTime" class="form-control input-sm" />
                    </td>
                </tr>
                <tr>
                    <td>Observações:</td>
                    <td colspan="5"><input type="text" id="txtObs" name="URemark" class="form-control input-sm" /></td>
                </tr>
            </table>
        </div>
        <div title="Itens do Pedido">
            <div data-options="region:'center',split:false" style="height:400px;">
                <table id="gridDetalhesPedido"></table>
            </div>
        </div>        
    </div>
</div>

<div id="btnsAcao">
    <input type="button" id="btnGravar" value="Salvar" class="btn btn-primary" />
    <input type="button" id="btnEnviar" value="Submeter" class="btn btn-primary" />
    <input type="button" id="btnFechar" value="Cancelar" class="btn btn-info" />
</div>

Lógica JavaScript no Frontend

No diretório wwwroot/view-resources/InStock, edite o arquivo Index.js. A lógica deve cobrir a inicialização dos grids, manipulação dos diálogos, cálculos automáticos de volumes e valores totais, e o envio dos dados para a API.

// Configuração do Grid de Mercadorias
function CarregarListaMercadorias() {
    $("#gridMercadorias").datagrid({
        url: "/Cargo/List",
        title: "Gerenciamento de Mercadorias",
        pagination: true,
        pageSize: 10,
        pageList: [10, 20, 30],
        fit: true,
        fitColumns: false,
        loadMsg: "Carregando dados...",
        border: false,
        idField: "Id",
        sortName: "Id",
        sortOrder: "asc",
        frozenColumns: [[
            { field: "ck", checkbox: true, align: "left", width: 50 }
        ]],
        columns: [[
            { title: "ID", field: "Id", width: 50, sortable: true },
            { title: "Fornecedor", field: "SupplierId", width: 80, sortable: true },
            { title: "HSCode", field: "HSCode", width: 100, sortable: true },
            { title: "Código", field: "CargoCode", width: 100, sortable: true },
            { title: "Descrição", field: "CargoName", width: 80, sortable: false },
            { title: "Especificação", field: "Spcf", width: 100, sortable: false },
            { title: "Origem", field: "Country", width: 80, sortable: false },
            { title: "Unidade", field: "Unit", width: 100, sortable: false },
            { title: "Empacotamento", field: "Package", width: 100, sortable: false },
            { title: "Valor Unit.", field: "Price", width: 100, sortable: false },
            { title: "Moeda", field: "Curr", width: 80, sortable: false },
            { title: "Dimensões", field: "Length", width: 100, sortable: false, formatter: function (value, row) {
                return row.Length + 'x' + row.Width + 'x' + row.Height;
            }},
            { title: "Volume", field: "Vol", width: 80, sortable: false },
            { title: 'Data Criação', field: 'CreationTime', width: 100, align: 'center' }
        ]]       
    });
}

function ExibirSelecaoMercadorias() {  
    $("#dlgImportacao").dialog({
        closed: false,
        title: "Selecionar Itens",
        modal: true,
        width: 820,
        height: 550,
        collapsible: true,
        minimizable: true,
        maximizable: true,
        resizable: true
    });
    CarregarListaMercadorias();
    $("#gridMercadorias").datagrid("clearChecked");
    $("#gridMercadorias").datagrid("clearSelections");
}

function AtualizarGridPrincipal() {
    $("#btnRecarregar").click(function () {
        $('#gridPedidosEntrada').datagrid('reload');
    });
}

function LimparFormulario() {
    $("#dlgPedidoEntrada input").each(function () {
        $(this).val("");
    });
    $("#txtDataPrevista").val(ObterDataAtual());    
    $("#txtStatus").val("0");
    $("#txtPesoLiq").val("0");
    $("#txtPesoBruto").val("0");
    $("#txtQtdVolumes").val("0");    
}

function SolicitarNumeroPedido() {
    $.get(abp.appPath + "api/services/app/InStockOrder/GetNo", function (data) {
        $("#txtNumeroPedido").val(data);
    });
}

function ObterDataAtual() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    
    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    
    return year + '-' + month + '-' + day;
}

function SerializarFormulario(id) {
    var arr = $("#" + id).serializeArray();
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        obj[arr[i].name] = arr[i].value;
    }
    return obj;
}
 
function SelecionarAbaPadrao() {
    $('#containerTabs').tabs('select', "Dados do Pedido");  
}

function AbrirDialogoCriacao() {
    $("#btnNovo").click(function () {      
        $.messager.confirm('Edição', 'Deseja criar um novo pedido de entrada?', function (r) {
            if (r) {
                $("#dlgPedidoEntrada").dialog({
                    closed: false,
                    title: "Novo Pedido",
                    modal: true,
                    width: 820,
                    height: 550,
                    collapsible: true,
                    minimizable: true,
                    maximizable: true,
                    resizable: true,
                });                   
            }
            SelecionarAbaPadrao();
            SolicitarNumeroPedido();
            LimparFormulario();
            CarregarDetalhes("");
        });      
    });

    $("#btnGravar").click(function () {
        var id = $("#hidIdPedido").val();
        if (id == "" || id == undefined) {
            $.messager.confirm('Confirmar', 'Deseja salvar os dados?', function (r) {
                if (r) {
                    var dados = ColetarDadosPedido();
                    if (dados.No == "" || dados.CustomerCode == "" || dados.CustomerName == "" || dados.OwnerName == "") {
                        $.messager.alert('Aviso', 'Preencha os campos obrigatórios!', 'warning');
                        return;
                    } 
                    $.post("/InStock/Add", dados, function (res) {
                        if (res == "OK") {
                            $.messager.alert("Aviso", "Salvo com sucesso!");
                            InicializarTabela();
                        } else {
                            $.messager.alert("Aviso", "Erro ao salvar!");
                        }
                    });
                }
            });
        } else {
            GravarDetalhes();
        }
    });
}

function CarregarDetalhes(no) {
    var ultimoIndice;
    $("#gridDetalhesPedido").datagrid({
        url: "/InStock/GetDetail?no=" + no,
        title: "Itens do Pedido",
        pagination: false,      
        fit: true,
        fitColumns: false,
        loadMsg: "Carregando itens...",
        toolbar: "#dg-detail-button",
        border: false,
        idField: "Id",
        sortName: "Id",
        sortOrder: "asc",
        singleSelect: true,
        iconCls: 'icon-edit',      
        columns: [[
            { title: "Seq", field: "SeqNo", width: 50, sortable: true },
            { title: "Pedido", field: "InStockNo", width: 100, sortable: true },
            { title: "HSCode", field: "HSCode", width: 80, sortable: false },
            { title: "Código", field: "CargoCode", width: 100, sortable: true },
            { title: "Nome", field: "CargoName", width: 160, sortable: false },
            { title: "Espec.", field: "Spcf", width: 80, sortable: false },
            { title: "Qtd", field: "Qty", width: 100, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 4 }
                }
            },
            { title: "Comp.", field: "Length", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 2 }
                }
            },
            { title: "Larg.", field: "Width", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 2 }
                }
            },
            { title: "Alt.", field: "Height", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 2 }
                }
            },
            { title: "Origem", field: "Country", width: 70, align: 'center' },
            { title: "Preço", field: "Price", width: 100, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 2 }
                }
            },        
            { title: "Total", field: "TotalAmt", width: 100, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 2 }
                }
            },
            { title: "Pacote", field: "Package", width: 70, align: 'center' },
            { title: "Unid.", field: "Unit", width: 70, align: 'center' },
            { title: "Vol. Total", field: "Vol", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: { required: true, min: 0, precision: 4 }
                }
            },
            { title: "Marca", field: "Brand", width: 70, align: 'center' }
        ]],
        onClickRow: function (index, rowData) {
            if (ultimoIndice != index) {
                $('#gridDetalhesPedido').datagrid('endEdit', ultimoIndice);               
                EditarLinha(index);  
            }
            ultimoIndice = index;   
        },    
        onBeginEdit: function (rowIndex, rowData) {
            ConfigurarEdicao(rowIndex);
        }
    });
}

function ConfigurarEdicao(rowIndex) {
    var editors = $('#gridDetalhesPedido').datagrid('getEditors', rowIndex);
    var edPreco = editors[4];
    var edQtd = editors[0];
    var edComp = editors[1];
    var edLarg = editors[2];
    var edAlt = editors[3];
    var edVol = editors[6];
    var edTotal = editors[5];

    edPreco.target.numberbox({ onChange: function () { CalcularValores(); } });
    edQtd.target.numberbox({ onChange: function () { CalcularValores(); CalcularVolume(); } });
    edComp.target.numberbox({ onChange: function () { CalcularVolume(); } });
    edLarg.target.numberbox({ onChange: function () { CalcularVolume(); } });
    edAlt.target.numberbox({ onChange: function () { CalcularVolume(); } });

    function CalcularValores() {
        var custo = (edPreco.target.val()) * (edQtd.target.val());
        edTotal.target.numberbox("setValue", custo);
    }

    function CalcularVolume() {
        var vol = (edComp.target.val() / 100.0) * (edLarg.target.val() / 100.0) * (edAlt.target.val() / 100.0) * (edQtd.target.val());
        edVol.target.numberbox("setValue", vol);
    }
}

function EditarLinha(index) {
    $('#gridDetalhesPedido').datagrid('selectRow', index).datagrid('beginEdit', index);
}

function FinalizarEdicao() {
    var rows = $('#gridDetalhesPedido').datagrid('getRows');
    if (rows === undefined) return;
    for (var i = 0; i < rows.length; i++) {
        $('#gridDetalhesPedido').datagrid('endEdit', i);
    }
}

function GravarDetalhes() { 
   FinalizarEdicao();
    $.messager.confirm('Confirmar', 'Deseja atualizar?', function (r) {
        var efeito = new Object();
        var dados = ColetarDadosPedido();
        if (dados.Id) {
            efeito["postdata"] = JSON.stringify(dados);
        }
        if ($('#gridDetalhesPedido').datagrid('getChanges').length) {
            var inseridos = $('#gridDetalhesPedido').datagrid('getChanges', "inserted");
            var removidos = $('#gridDetalhesPedido').datagrid('getChanges', "deleted");
            var alterados = $('#gridDetalhesPedido').datagrid('getChanges', "updated");     

            if (inseridos.length) efeito["inserted"] = JSON.stringify(inseridos);
            if (removidos.length) efeito["deleted"] = JSON.stringify(removidos);
            if (alterados.length) efeito["updated"] = JSON.stringify(alterados);
        }
        $.post("/InStock/Update", efeito, function (data) {
            if (data.success) {
                $.messager.alert("Aviso", data.result);
                $('#gridDetalhesPedido').datagrid('acceptChanges');
            } else {
                $.messager.alert("Aviso", data.result);
            }
        }, "JSON");       
    });    
}

function InicializarEventos() {
    $("#txtDataPrevista").val(ObterDataAtual());

    $("#btnFechar").click(function () {       
        $("#dlgPedidoEntrada").dialog("close");   
        $('#gridPedidosEntrada').datagrid('reload');
    });

    $("#btnCancelarImportacao").click(function () {
        $("#dlgImportacao").dialog("close");
        $('#gridPedidosEntrada').datagrid('reload');
    });

    $("#btnConfirmarImportacao").click(function () {
        var linhas = $('#gridMercadorias').datagrid('getSelections');
        if (linhas.length > 0) {
            $.messager.confirm('Confirmar', 'Importar itens selecionados?', function (r) {
                if (r) {
                    var numPedido = $("#txtNumeroPedido").val();
                    var ids = [];
                    for (var i = 0; i < linhas.length; i++) {
                        ids.push(linhas[i].Id);
                    }

                    var payload = {
                        "Ids": ids.join(','),
                        "No": numPedido
                    };

                    $.post("/InStock/ImportCargo", payload, function (data) {
                        if (data == "OK") {
                            $.messager.alert("Aviso", "Itens importados!");
                            CarregarDetalhes(numPedido);
                        } else {
                            $.messager.alert("Aviso", "Erro na importação!");
                        }
                    });
                }
            });
        }
    });
}

function ColetarDadosPedido() {
    var payload = {
        "No": $("#txtNumeroPedido").val(),
        "DeliveryNo": "",
        "PreDeliveryTime": $("#txtDataPrevista").val(),
        "CustomerCode": $("#txtCodDestinatario").val(),
        "OwnerName": $("#txtNomeRemetente").val(),
        "OwnerCode": $("#txtCodRemetente").val(),
        "CustomerName": $("#txtNomeDestinatario").val(),
        "CheckTime": $("#txtDataConferencia").val(),
        "WarehouseType": $("#txtTipoArmazem").val(),
        "WarehouseNo": $("#txtCodArmazem").val(),
        "Oper": $("#txtOperador").val(),
        "Receiver": $("#txtResponsavel").val(),
        "Nwt": $("#txtPesoLiq").val(),
        "Remark": $("#txtObs").val(),
        "ReceiveTime": $("#txtHoraInicio").val(),     
        "Status": $("#txtStatus").val(),
        "Gwt": $("#txtPesoBruto").val(),
        "Checker": $("#txtInspetor").val(),
        "PackageQty": $("#txtQtdVolumes").val(),
        "LastUpdateTime": "",
        "LastOper": ""
    };

    var id = $("#hidIdPedido").val();
    if (id && id !== "") {
        payload.Id = id;
    }
    return payload;
}

function PreencherFormulario(row) {     
    $("#hidIdPedido").val(row.Id);
    $("#txtNumeroPedido").val(row.No);
    $("#txtDataPrevista").val(row.PreDeliveryTime);
    $("#txtCodDestinatario").val(row.CustomerCode);    
    $("#txtNomeDestinatario").val(row.CustomerName);
    $("#txtCodRemetente").val(row.OwnerCode);
    $("#txtNomeRemetente").val(row.OwnerName);
    $("#txtDataConferencia").val(row.CheckTime);
    $("#txtTipoArmazem").val(row.WarehouseType);
    $("#txtCodArmazem").val(row.WarehouseNo);
    $("#txtOperador").val(row.Oper);
    $("#txtResponsavel").val(row.Receiver);
    $("#txtPesoLiq").val(row.Nwt);
    $("#txtObs").val(row.Remark);
    $("#txtHoraInicio").val(row.ReceiveTime);
    $("#txtStatus").val(row.Status);   
    $("#txtPesoBruto").val(row.Gwt);
    $("#txtInspetor").val(row.Checker);
}