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實現倉儲管理系統——多語言（十）

abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十一)

 abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十二)

 abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十三)

abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十四)

 abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十五)

abp(net core)+easyui+efcore實現倉儲管理系統——選單-上 (十六)

 abp(net core)+easyui+efcore實現倉儲管理系統——選單-下(十七) 

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

abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理一 (十九)

 abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理二 (二十)

        通過上一篇文章(abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理二 (二十))中，我們已經實現貨物資訊管理功能所需要的服務類與控制器類，頁面呈現。在這一篇文章中我們來實現貨物資訊管理所需要的前端功能，主要是通過javascript來實現。

十、建立指令碼檔案

1. 在Visual Studio 2017的“解決方案資源管理器”中，找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot目錄下的view-resources目錄。使用滑鼠右鍵單擊此目錄，在彈出選單中選擇“新增” > “新建資料夾”。並重命名為“Cargo”。

2. 在Visual Studio 2017的“解決方案資源管理器”中，滑鼠右鍵單擊“Cargo”資料夾，然後選擇“新增” > “新建項…”。 在“新增新項-ABP.TPLMS.Web.Mvc”對話方塊中，選擇“javascript檔案”，並將名稱命名為cargomgr.js。如下圖。

3. 在cargomgr.js檔案中，我們寫入貨物資訊管理的前端功能指令碼，具體程式碼如下。

//------------------------系統功能-->貨物資訊--------------------------------//
//重新整理資料
function initable() {
    $("#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: "貨物程式碼", 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 },
            { field: 'CreateTime', title: '建立時間', width: 100, align: 'center' }
        ]]
    }); 
}
function reloaded() {   //reload
    $("#reload").click(function () {
        $('#dgCargo').datagrid('reload');
    });}

 //修改點選按鈕事件
function updCargoInfo() {  
    $("#edit").click(function () {
        var row = $("#dgCargo").datagrid('getSelected');      

        if (row) {
            $.messager.confirm('編輯', '您想要編輯嗎？', function (r) {
                if (r) {
                    showCargo(row);
                     //開啟對話方塊編輯
                    $("#divAddUpdCargo").dialog({
                        closed: false,
                        title: "修改貨物資訊",
                        modal: true,
                        width: 700,
                        height: 450,
                        collapsible: true,
                        minimizable: true,
                        maximizable: true,
                        resizable: true,
                    });                     
                }              
            });

        } else {
            $.messager.alert('提示', ' 請選擇要編輯的行！', 'warning');
        }
    });
   }

//刪除
function deleteCargo() {
    $("#del").click(function () {
        var rows = $("#dgCargo").datagrid("getSelections");
        if (rows.length > 0) {
            $.messager.confirm("提示", "確定要刪除嗎?", function (res) {
               if (res) {
                    var codes = []; //重要不是{}
                    for (var i = 0; i < rows.length; i++) {
                        codes.push(rows[i].Id);
                    }
                    $.post("/Cargo/Delete", { "ids": codes.join(',') }, function (data) {
                        if (data == "OK") {
                            $.messager.alert("提示", "刪除成功！");
                            $("#dgCargo").datagrid("clearChecked");
                            $("#dgCargo").datagrid("clearSelections");
                            $("#dgCargo").datagrid("load", {});
                        }                       
                        else if (data == "NO") {
                            $.messager.alert("提示", "刪除失敗！");
                            return;
                        }
                    });
                }
            });
        }
    })
}

//清空文字框
function clearAll() {
    $("#IDUpdate").val("");
    $("#UpdCargoCode").val("");
    $("#CreateTimeUpdate").val(getNowFormatDate());   

    $("#UnitUpdate").val("");
    $("#CargoNameUpdate").val("");
}

//獲取當前時間，格式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;
}

//彈出 新增貨物資訊的對話方塊
function showCargoDialog() {   
    $("#add").click(function () {
        clearAll(); 

        $("#divAddUpdCargo").dialog({
            closed: false,
            title: "新增貨物資訊",
            modal: true,
            width: 700,
            height: 450,
            collapsible: true,
            minimizable: true,
            maximizable: true,
            resizable: true
        });
    });

    $("#btnSave").click(function () {
        //  alert('1');
        //啟用
        //儲存
        var id = $("#IDUpdate").val();
        if (id == "" || id == undefined) {
            //驗證
            $.messager.confirm('確認', '您確認要儲存嗎？', function (r) {
                if (r) {
                    var postData = GetCargo();
                    if (postData == null || postData == undefined || postData.SupplierId == "" 
                    || postData.CargoCode == ""|| postData.CargoName == ""|| postData.Unit== "") {
                        $.messager.alert('提示', ' 請填寫相關必填項！', 'warning');
                        return;
                    }                  
                    $.post("/Cargo/Add", postData, function (data) {
                       // alert(data);
                        var obj = JSON.parse(data);
                        if (obj.result == "OK") {
                            $("#IDUpdate").val(obj.Id)
                            $("#divAddUpdCargo").dialog("close");
                            $.messager.alert("提示", "儲存成功！");
                            initable();
                        }
                        else if (obj.result == "NO") {
                            $.messager.alert("提示", "儲存失敗！");
                            return;
                        }
                    });
                }
            })
        }
        else {
            saveDetail();
        }
    });
} 

function saveDetail() {
    $.messager.confirm('確認', '您確認要修改嗎？', function (r) {
               var postData = GetCargo();
            if (postData==null || postData==undefined || postData.SupplierId == ""
              || postData.CargoCode == "") {
                $.messager.alert('提示', ' 請填寫相關必填項！', 'warning');
                return;
            }
            $.post("/Cargo/Update", postData, function (data) {
               // alert(data);
 var obj = JSON.parse(data);

                        if (obj.result == "OK") {

               if (data=="OK") {
                    $.messager.alert("提示", "修改成功！");                
                    $("#divAddUpdCargo").dialog("close");                  
                    initable();
                }
                else {
                    $.messager.alert("提示",  "修改失敗！");
                    return;
                }           

            });     

        })  
}

function GetCargo() {   
    var postData = {
        "id": $("#IDUpdate").val(),
        "CargoName": $("#CargoNameUpdate").val(),
        "CargoCode": $("#UpdCargoCode").val(),
        "CreationTime": $("#CreateTimeUpdate").val(),
        "SupplierId": $("#SupplierIdUpdate").val(),
        "Brand": $("#BrandUpdate").val(),
        "Country": $("#CountryUpdate").val(),
        "Curr": $("#CurrUpdate").val(),
        "GrossWt": $("#GrossWtUpdate").val(),
        "Height": $("#HeightUpdate").val(),
        "HSCode": $("#HSCodeUpdate").val(),
        "Length": $("#LengthUpdate").val(),
        "MaxNum": $("#MaxNumUpdate").val(),

        "MinNum": $("#MinNumUpdate").val(),
        "NetWt": $("#NetWtUpdate").val(),
        "Package": $("#PackageUpdate").val(),
        "Price": $("#PriceUpdate").val(),
        "Remark": $("#RemarkUpdate").val(),
        "Spcf": $("#SpcfUpdate").val(),
        "Unit": $("#UnitUpdate").val(),
        "UpdateTime": $("#CreateTimeUpdate").val(),

        "Vol": $("#VolUpdate").val(),
        "Width": $("#WidthUpdate").val(),
        "UpdOper": $("#SupplierIdUpdate").val()
    };
    return postData;

} 

function showCargo(row) { 

    $("#IDUpdate").val(row.Id);
    $("#CargoNameUpdate").val(row.CargoName);
    $("#UpdCargoCode").val(row.CargoCode);
    $("#CreateTimeUpdate").val(row.UpdateTime);
    $("#BrandUpdate").val(row.Brand);
    $("#CountryUpdate").val(row.Country);
    $("#CurrUpdate").val(row.Curr);
    $("#GrossWtUpdate").val(row.GrossWt);
    $("#HeightUpdate").val(row.Height);
    $("#HSCodeUpdate").val(row.HSCode);
    $("#LengthUpdate").val(row.Length);
    $("#MaxNumUpdate").val(row.MaxNum);
     $("#MinNumUpdate").val(row.MinNum);
    $("#NetWtUpdate").val(row.NetWt);
    $("#PackageUpdate").val(row.Package);
     $("#PriceUpdate").val(row.Price);
    $("#RemarkUpdate").val(row.Remark);
    $("#SpcfUpdate").val(row.Spcf);
    $("#UnitUpdate").val(row.Unit);
    $("#VoleUpdate").val(row.Vol);
    $("#WidthUpdate").val(row.Width);
}

function calcSumVol(){    
    var vol = 0;
    var len = $("#LengthUpdate").val();
    var height = $("#HeightUpdate").val();
    var width = $("#WidthUpdate").val();

    //計算體積
   var l = parseFloat(len);
    var h = parseFloat(height);
    var w = parseFloat(width);
    vol = ((l * h * w)/(100*100*100)).toFixed(3);  

    $("#VolUpdate").val(vol);
}

function init() {
    $("#LengthUpdate").blur(function () {
        calcSumVol();
    });
    $("#HeightUpdate").blur(function () {
        calcSumVol();
    });
    $("#WidthUpdate").blur(function () {
        calcSumVol();
    });
}

//------------------------系統功能-->貨物資訊結束----------------------------//

4. 在Visual Studio 2017的“解決方案資源管理器”中，找到“ABP.TPLMS.Web.Mvc”專案中的Views目錄下的Cargo目錄中的Index.cshtml檔案。雙擊開啟此檔案，在檔案的頂部寫入以下程式碼，引用指令碼。具體位置參見前一篇文章。

@section scripts
    {
    <script src="~/view-resources/Views/Cargo/cargomgr.js" asp-append-version="true"></script>
    <script type="text/javascript">
        $(function () {
            initable();
            init();
            reloaded();
            updCargoInfo();
            showCargoDialog();
            deleteCargo();
        });
    </script>
}

&n