abp(net core)+easyui+efcore實現倉儲管理系統目錄

abp(net core)+easyui+efcore實現倉儲管理系統——ABP總體介紹(一） abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二) abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三)  abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四) abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務（五） abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之控制器（六） abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之列表檢視（七） abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之增刪改檢視（八） abp(net core)+easyui+efcore實現倉儲管理系統——展現層實現增刪改查之選單與測試（九） abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十一) abp(net core)+easyui+efcore實現倉儲管理系統——選單-上 (十六)

abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八)

abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理一 (十九) abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之一(二十七) abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之三(二十九)

abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之八(三十四)

abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之十(三十六) abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之一(三十七) abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之二(三十八) abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之三儲存過程(三十九) abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之四(四十) abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之五(四十一)    

    在上一篇abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之五(四十一) 文章中實現了入庫管理的列表頁面，並實現了控制器的程式碼。在今天我們學習如何在前端實現新增入庫單資訊介面。

十、入庫單新增功能

1. 在Visual Studio 2017的“解決方案資源管理器”中，左鍵單擊在展現層的“ABP.TPLMS.Web.MVC”專案中的Views目錄。找到InStock\Index.cshmtl檔案。在此檔案中新增檢視程式碼。程式碼如下。

 

 <!---------------------------匯入貨物資訊彈出窗體------------------------------------------->
    <div id="divImportCargo" class="easyui-dialog" closed="true" style="top:10px;"
 data-options="buttons: '#dlg-buttons-cgo'">   
                <!--panel-->
                <div data-options="region:'center',split:false" style="height:460px;">
                    <!--表格-->
                    <table id="dgCargo"></table>
                </div> 
    </div>

    <div id="dlg-buttons-cgo">
        <input type="submit" id="btnImportCargo" value="匯入" class="btn btn-primary" />        
        <input type="submit" id="btnCancleCargo" value="取消" class="btn btn-info" />
    </div>
    <!---------------------------新增修改入庫單資訊------------------------------------------->
    <div id="divAddUpdINO" class="easyui-dialog" closed="true" style="top:10px;" 
data-options="buttons: '#dlg-buttons'">
        <div id="box">
            <div title="入庫單">
                <table>
                    <tr>
                        <td><input type="hidden" name="ID" id="IDUpdate" /></td>
                    </tr>
                    <tr>
                        <td>入庫單號：</td>
                        <td><input type="text" id="UpdNO" name="UNO" class="form-control input-sm" /></td>
                        <td>預計送貨日期：</td>
                        <td>
                            <input type="text" id="PreDeliveryTimeUpdate" name="UPreDeliveryTime" 
class="form-control input-sm" />

                        </td>
                        <td> 狀態：</td>
                        <td><input type="text" id="StatusUpdate" name="UStatus" 
class="form-control input-sm" value="0" /></td>

                    </tr>
                    <tr>
                        <td> 發貨人：</td>
                        <td><input type="text" id="OwnerCodeUpdate" name="UOwnerCode" 
class="form-control input-sm" /></td>

                        <td colspan="2">
                            <input type="text" id="OwnerNameUpdate" name="UOwnerName" 
class="form-control input-sm" />

                        </td>
                        <td>社會信用程式碼：</td>
                        <td>
                            <input type="text" id="ConsignerSccdUpdate" name="UConsignerSccd" 
class="form-control input-sm" />
                        </td>
                    </tr>
                    <tr>
                        <td> 收貨人：</td>
                        <td><input type="text" id="CustomerCodeUpdate" name="UCustomerCode" 
class="form-control input-sm" /></td>
                        <td colspan="2">
                            <input type="text" id="CustomerNameUpdate" name="UCustomerName" 
class="form-control input-sm" />

                        </td>
                        <td>社會信用程式碼：</td>
                        <td>
                            <input type="text" id="ConsigneeSccdUpdate" name="UConsigneeSccd" 
class="form-control input-sm" />
                        </td>
                    </tr>
                    <tr>
                        <td> 經營企業：</td>
                        <td><input type="text" id="BizpoEtpsNoUpdate" name="UBizpoEtpsNo" 
class="form-control input-sm" /></td>
                        <td colspan="2">
                            <input type="text" id="BizpoEtpsNameUpdate" name="UBizpoEtpsName" 
class="form-control input-sm" />
                        </td>
                        <td>社會信用程式碼：</td>
                        <td>
                            <input type="text" id="BizpoEtpsSccdUpdate" name="UBizpoEtpsSccd" 
class="form-control input-sm" />
                        </td>
                    </tr>
                    <tr>
                        <td>理貨員：</td>
                        <td> <input type="text" id="ReceiverUpdate" name="UReceiver" 
class="form-control input-sm" /></td>
                        <td>收貨開始時間：</td>
                        <td>
                            <input type="text" id="ReceiveTimeUpdate" name="UReceiveTime" 
class="form-control input-sm" />

                        </td>
                        <td>收貨結束時間：</td>
                        <td>
                            <input type="text" id="ERcvTimeUpdate" name="UERcvTime" 
class="form-control input-sm" />
                        </td>
                    </tr>
                    <tr>
                        <td>淨重：</td>
                        <td> <input type="text" id="NwtUpdate" name="UNwt" class="form-control input-sm" 
value="0" /></td>
                        <td>毛重：</td>
                        <td>
                            <input type="text" id="GwtUpdate" name="UGwt" class="form-control input-sm" 
value="0" />

                        </td>
                         <td>件數：</td>
                        <td>

                            <input type="text" id="PackageQtyUpdate" name="UPackageQty" 
class="form-control input-sm" value="0" />
                        </td>                      
                    </tr>
                    <tr>
                        <td>倉庫號：</td>
                        <td>
                            <input type="text" id="WarehouseNoUpdate" name="UWarehouseNo"
 class="form-control input-sm" />
                        </td>

                         <td>倉庫型別：</td>
                        <td>
                            <input type="text" id="WarehouseTypeUpdate" name="UWarehouseType" 
class="form-control input-sm" />
                        </td>
                        <td>核查時間：</td>
                        <td>
                            <input type="text" id="CheckTimeUpdate" name="UCheckTime" 
class="form-control input-sm" />
                        </td>
                    </tr>
                    <tr>
                        <td> 核查員：</td>
                        <td>
                            <input type="text" id="CheckerUpdate" name="UChecker"
 class="form-control input-sm" />
                        </td>
                        <td>操作員：</td>
                        <td>

                            <input type="text" id="OperUpdate" name="UOper" class="form-control input-sm" />
                        </td>
                        <td>建立時間：</td>
                        <td>
                            <input type="text" id="CreationTimeUpdate" name="UCreationTime"
 class="form-control input-sm" />
                        </td>
                    </tr>
                    <tr>
                        <td> 備註：</td>
                        <td colspan="5"><input type="text" id="RemarkUpdate" name="URemark" 
class="form-control input-sm" /></td>

                    </tr>
                </table>
            </div>
            <div title="入庫單明細">
                <!--panel-->
                <div data-options="region:'center',split:false" style="height:400px;">
                    <!--表格-->
                    <table id="dgINOD"></table>
                </div>
            </div>        
        </div>
    </div>

    <div id="dlg-buttons">
        <input type="submit" id="btnSave" value="儲存" class="btn btn-primary" />
        <input type="submit" id="btnSubmit" value="提交" class="btn btn-primary" />
        <input type="submit" id="btnCancle" value="取消" class="btn btn-info" />
    </div>

 

 

    2. 在Visual Studio 2017的“解決方案資源管理器”中，找到表示層“ABP.TPLMS.Web.Mvc”專案中的wwwroot\view-resources\InStock目錄。

    3. 在InStock目錄中找到Index.js檔案。新增新增入庫單的程式碼。程式碼如下。

//--------------系統管理-->入庫單管理-------------------------//
//顯示貨物資訊資料
function ShowCargo() {
    abp.log.warn('貨物資訊列表日誌...');
    $("#dgCargo").datagrid({
        url: "/Cargo/List",
        title: "貨物管理管理",
        pagination: true,
        pageSize: 10,
        pageList: [10, 20, 30],
        fit: true,
        fitColumns: false,
        loadMsg: "正在載入貨物資訊...",
        nowarp: false,
        border: false,
        idField: "Id",
        sortName: "Id",
        sortOrder: "asc",
        frozenColumns: [[//凍結列
            { field: "ck", checkbox: true, align: "left", width: 50 }

        ]],
        columns: [[
   　　　　 { title: "編號", field: "Id", width: 50, sortable: true },
   　　　　 { title: "供應商", field: "SupplierId", width: 80, sortable: true },
    　　　 { title: "HSCode", field: "HSCode", width: 100, sortable: true },
   　　　　{ title: "貨物程式碼", field: "CargoCode", width: 100, sortable: true },
  　　　　 { title: "貨物名稱", field: "CargoName", width: 80, sortable: false },
 　　　　  { title: "規格型號", field: "Spcf", width: 100, sortable: false },
 　　　　 { title: "產銷國", field: "Country", width: 80, sortable: false },
  　　　  { title: "計量單位", field: "Unit", width: 100, sortable: false },
   　　　 { title: "包裝", field: "Package", width: 100, sortable: false },
     　　{ title: "單價", field: "Price", width: 100, sortable: false },
    　　{ title: "幣制", field: "Curr", width: 80, sortable: false },
     　　{ title: "長寬高", field: "Length", width: 100, sortable: false, formatter: function (value, row, index) {
      return row.Length + '*' + row.Width + '*' + row.Height;
                }
            },
            { title: "體積", field: "Vol", width: 80, sortable: false },
　　　　    { title: "備註", field: "Remark", width: 80, sortable: false },
            { title: '建立時間', field: 'CreationTime', width: 100, align: 'center' }
        ]]       
    });
    abp.log.warn('3貨物資訊列表日誌...');
}

function ShowCargoInfo() {  
    $("#divImportCargo").dialog({
            closed: false,
            title: "選擇貨物資訊",
            modal: true,
            width: 820,
            height: 550,
            collapsible: true,
            minimizable: true,
            maximizable: true,
            resizable: true
        });

       ShowCargo();
       $("#dgCargo").datagrid("clearChecked");
       $("#dgCargo").datagrid("clearSelections");
}

function reloaded() {   //reload
    $("#reload").click(function () {
            $('#dgINSO').datagrid('reload');
    });}

//清空文字框

function clearAll() {
    $("#divAddUpdINO input").each(function () {
            $(this).val("");
        });
//預設值
    $("#PreDeliveryTimeUpdate").val(getNowFormatDate());    
    $("#StatusUpdate").val("0");
    $("#NwtUpdate").val("0");
    $("#GwtUpdate").val("0");
    $("#PackageQtyUpdate").val("0");    

}

function GetNo() {
      $.get(abp.appPath + "api/services/app/InStockOrder/GetNo", function (data) {
    //     alert(data);
      //  var obj = JSON.parse(data);
        $("#UpdNO").val(data);
        //$("#IDUpdate").val(obj.Id);
    });

}

//獲取當前時間，格式YYYY-MM-DD
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }

    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
}

//將表單資料轉為json
function form2Json(id) {
    var arr = $("#" + id).serializeArray()
    var jsonStr = ""; 

    jsonStr += '{';
    for (var i = 0; i < arr.length; i++) {
        jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
    }

    jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
    jsonStr += '}'
    var json = JSON.parse(jsonStr)
    return json
}
 
function defaultTab() {
    //預設顯示第一個tab
    $('#box').tabs('select', "入庫單");  
}

//彈出 匯入送貨單的的對話方塊
function showInSODialog() {
    $("#add").click(function () {      

            $.messager.confirm('編輯', '您想要建立入庫單嗎？', function (r) {
                if (r) {
                    //開啟對話方塊編輯
                    $("#divAddUpdINO").dialog({
                        closed: false,
                        title: "新增入庫單",
                        modal: true,
                        width: 820,
                        height: 550,
                        collapsible: true,
                        minimizable: true,
                        maximizable: true,
                        resizable: true,
                    });                   

                }
                defaultTab();
                GetNo();
                clearAll();
                ShowDetail("");
            });      

    });

    $("#btnSave").click(function () {
       //儲存
        var id = $("#IDUpdate").val();
        if (id == "" || id == undefined) {
            //驗證
            $.messager.confirm('確認', '您確認要儲存嗎？', function (r) {
                if (r) {
                    var postData = GetINO();
               if (postData.No == "" || postData.CustomerCode == "" || postData.CustomerName=="" || postData.OwnerName=="") {
                        $.messager.alert('提示', ' 請填寫相關必填項！', 'warning');
                        return;
                    } 
                    $.post("/InStock/Add", postData, function (data) {
                        if (data == "OK") {
                            $.messager.alert("提示", "儲存成功！");
                            initable();
                        }
                        else if (data == "NO") {
                            $.messager.alert("提示", "儲存失敗！");
                            return;
                        }
                    });
                }
            })
        }
        else {
            saveDetail();
        }
});
}

//顯示明細
function ShowDetail(no) {
    var lastIndex;
    $("#dgINOD").datagrid({
        url: "/InStock/GetDetail?no=" + no,
        title: "入庫單明細",
        pagination: false,      
        fit: true,
        fitColumns: false,
        loadMsg: "正在載入入庫單明細資訊...",
        toolbar: "#dg-detail-button",
        nowarp: false,
        border: false,
        idField: "Id",
        sortName: "Id",
        sortOrder: "asc",
        singleSelect: true,
        iconCls: 'icon-edit',      
        columns: [[
            { title: "編號", field: "SeqNo", width: 50, sortable: true },
            { title: "入庫單號", field: "InStockNo", width: 100, sortable: true },
            { title: "HSCode", field: "HSCode", width: 80, sortable: false },
            { title: "貨物程式碼", field: "CargoCode", width: 100, sortable: true },
            { title: "貨物名稱", field: "CargoName", width: 160, sortable: false },
            { title: "規格型號", field: "Spcf", width: 80, sortable: false },
            { title: "數量", field: "Qty", width: 100, align: 'center', editor: {
                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 4
                    }
                }
            },
            { title: "長", field: "Length", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 2
                    }
                }
            },
            {title: "寬", field: "Width", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 2
                    }
                }
            },
            {  title: "高", field: "Height", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 2
                    }
                }
            },
            { title: "產銷國", field: "Country", width: 70, align: 'center' },
            {title: "單價", field: "Price", width: 100, align: 'center', editor: {
                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 2
                    }
                }
            },        
            {  title: "總價", field: "TotalAmt", width: 100, align: 'center', editor: {

                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 2
                    }
                }
            },

            { title: "包裝", field: "Package", width: 70, align: 'center' },
            { title: "計量單位", field: "Unit", width: 70, align: 'center' },
            { title: "總體積", field: "Vol", width: 70, align: 'center', editor: {
                    type: 'numberbox', options: {
                        required: true, min: 0, precision: 4
                    }
                }
            },
            { title: "品牌", field: "Brand", width: 70, align: 'center' }
        ]],
        onClickRow: function (index, rowData) {
            if (lastIndex != index) {
                $('#dgINOD').datagrid('endEdit', lastIndex);               
                editrow(index);  
            }
            lastIndex = index;   
        },    
        onBeginEdit: function (rowIndex, rowData) {
              setEditing(rowIndex);
        }
    });
}

//計算報價小計
function setEditing(rowIndex) {
    var editors = $('#dgINOD').datagrid('getEditors', rowIndex);
    var priceEditor = editors[4];
    var qtyEditor = editors[0];
    var lengthEditor = editors[1];
    var widthEditor = editors[2];
    var heightEditor = editors[3];
    var totalVolEditor = editors[6];
    var totalAmtEditor = editors[5];
    priceEditor.target.numberbox({
        onChange: function () { calculate();}
    });

    qtyEditor.target.numberbox({
        onChange: function () {
            calculate();
            calculateVol();
        }
    });

    lengthEditor.target.numberbox({
        onChange: function () { calculateVol(); }
    });

    widthEditor.target.numberbox({
        onChange: function () { calculateVol(); }
    });

    heightEditor.target.numberbox({
        onChange: function () { calculateVol(); }
    });

    function calculate() {
        var cost = (priceEditor.target.val()) * (qtyEditor.target.val());
        console.log(cost);
        totalAmtEditor.target.numberbox("setValue", cost);
    }

    function calculateVol() {
        var vol = (lengthEditor.target.val() / 100.0) * (widthEditor.target.val() / 100.0) * (heightEditor.target.val() / 100.0)*
 (qtyEditor.target.val());
        console.log(vol);
        totalVolEditor.target.numberbox("setValue", vol);
    }

}

function editrow(index) {
    $('#dgINOD').datagrid('selectRow', index)
        .datagrid('beginEdit', index);
}

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

function saveDetail() { 
   endEdit();
    $.messager.confirm('確認', '您確認要修改嗎？', function (r) {
        var effectRow = new Object();
        var postData = GetINO();
        if (postData.Id) {
            effectRow["postdata"] = JSON.stringify(postData);
        }
        if ($('#dgINOD').datagrid('getChanges').length) {
       var inserted = $('#dgINOD').datagrid('getChanges', "inserted");
        var deleted = $('#dgINOD').datagrid('getChanges', "deleted");
       var updated = $('#dgINOD').datagrid('getChanges', "updated");     

            if (inserted.length) {
                effectRow["inserted"] = JSON.stringify(inserted);
            }
            if (deleted.length) {
                effectRow["deleted"] = JSON.stringify(deleted);
            }
            if (updated.length) {
                effectRow["updated"] = JSON.stringify(updated);
            }   
        }
        $.post("/InStock/Update", effectRow, function (data) {
           //  alert(data);
            if (data.success) {
                $.messager.alert("提示", data.result);
                $('#dgINOD').datagrid('acceptChanges');
              }
            else {
                $.messager.alert("提示", data.result);
                return;
            }
        }, "JSON")
            ;       
        })    
}

function init() {
    $("#PreDeliveryTimeUpdate").val(getNowFormatDate());

    $("#btnCancle").click(function () {       
        $("#divAddUpdINO").dialog("close");   
        $('#dgINSO').datagrid('reload');
    });

    $("#btnCancleCargo").click(function () {
        $("#divImportCargo").dialog("close");
        $('#dgINSO').datagrid('reload');
    });

    $("#btnImportCargo").click(function () {
        //儲存
        var rows = $('#dgCargo').datagrid('getSelections');
        if (rows.length > 0) {
            //驗證
            $.messager.confirm('確認', '您確認要儲存所選擇的貨物資訊嗎？', function (r) {
                if (r) {
                    var obj_No = $("#UpdNO").val();
                    var ids = [];//重要不是{}
                    for (var i = 0; i < rows.length; i++) {
                        ids.push(rows[i].Id);
                    }

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

                    $.post("/InStock/ImportCargo", postData, function (data) {
                        if (data == "OK") {
                      $.messager.alert("提示", "儲存貨物資訊成功！");
                            ShowDetail(obj_No);
                        }

                        else if (data == "NO") {
                      $.messager.alert("提示", "儲存貨物資訊失敗！");
                            return;
                        }
                    });
                }
            })
        }
    });
}


function GetINO() {
    var postData = {
        "No": $("#UpdNO").val(),
        "DeliveryNo": "",
        "PreDeliveryTime": $("#PreDeliveryTimeUpdate").val(),
        "CustomerCode": $("#CustomerCodeUpdate").val(),
        "OwnerName": $("#OwnerNameUpdate").val(),
        "OwnerCode": $("#OwnerCodeUpdate").val(),
        "CustomerName": $("#CustomerNameUpdate").val(),
        "CheckTime": $("#CheckTimeUpdate").val(),
        "WarehouseType": $("#WarehouseTypeUpdate").val(),
        "WarehouseNo": $("#WarehouseNoUpdate").val(),
        "Oper": $("#OperUpdate").val(),
        "Receiver": $("#ReceiverUpdate").val(),
        "Nwt": $("#NwtUpdate").val(),
        "Remark": $("#RemarkUpdate").val(),
        "ReceiveTime": $("#ReceiveTimeUpdate").val(),     

        "Status": $("#StatusUpdate").val(),
        "Gwt": $("#GwtUpdate").val(),
        "Checker": $("#CheckerUpdate").val(),
        "PackageQty": $("PackageQtyUpdate").val(),
        "LastUpdateTime": "",
        "LastOper":""
    };

    var id = $("#IDUpdate").val();
    if (!(id=="" || id==undefined)) {
        postData.Id = id;
    }
    return postData;
}

 

function showINO(row) {     
    $("#IDUpdate").val(row.Id);
    $("#UpdNO").val(row.No);
    $("#PreDeliveryTimeUpdate").val(row.PreDeliveryTime);
    $("#CustomerCodeUpdate").val(row.CustomerCode);    
    $("#CustomerNameUpdate").val(row.CustomerName);
    $("#OwnerCodeUpdate").val(row.OwnerCode);
    $("#OwnerNameUpdate").val(row.OwnerName);
    $("#CheckTimeUpdate").val(row.CheckTime);
    $("#WarehouseTypeUpdate").val(row.WarehouseType);
    $("#WarehouseNoUpdate").val(row.WarehouseNo);
    $("#OperUpdate").val(row.Oper);
    $("#ReceiverUpdate").val(row.Receiver);
    $("#NwtUpdate").val(row.Nwt);
     $("#RemarkUpdate").val(row.Remark);
    $("#ReceiveTimeUpdate").val(row.ReceiveTime);
    $("#StatusUpdate").val(row.Status);   
    $("#GwtUpdate").val(row.Gwt);
    $("#CheckerUpdate").val(row.Checker);
   }

//------------系統管理-->入庫單管理結束---------------//