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

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來實現。

 

10、建立腳本文件

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>
}