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

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

在上一篇文章中我們已經通過easyui構建了一個簡單的前端頁面，在今天我們來實現前端頁面的中的各功能程式碼。

十、添加出庫單的增刪改指令碼

1. 在Visual Studio 2017的“解決方案資源管理器”中，找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot目錄下的view-resources\outstock目錄中的找到Index.js檔案。

2. 在Index.js檔案中，我們編寫出庫單的相應指令碼程式碼。程式碼如下：

//-----------------------系統管理-->出庫單管理------------------------------//

var editIndex = undefined;

var mainIndex = undefined;

//重新整理資料

function initable() {

    $("#dgOutSO").datagrid({

        url: "/OutStock/List",

        //url:"api/services/app/instock/GetAllInStockOrders",

        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: "No", width: 100, sortable: true },            
            {title: "狀態", field: "Status", width: 50            },
            { title: '出庫日期', field: 'ReceiveTime', width: 100, align: 'center' },
            { title: "車牌號", field: "VehicleNo", width: 100, sortable: false },
            { title: '客戶', field: 'CustomerName', width: 120, align: 'center' },
            { title: '收貨人', field: 'Consignee', width: 120, align: 'center' },

            { title: "淨重", field: "Nwt", width: 100, sortable: true },
            { title: "毛重", field: "Gwt", width: 100, sortable: true },
         

            { title: '稽核人',field: 'Checker', width: 120, align: 'center' },
            { title: '件數', field: 'PackageQty', width: 100, align: 'center' },

            { title: '建立時間', field: 'CreationTime', width: 100, align: 'center' }
        ]]

    });

}

//顯示入庫單明細資料
function ShowCargo() {
    abp.log.warn('入庫貨物資訊列表日誌...'); 

    $("#dgCargo").datagrid({

        url: "/InStock/LoadInodLocs",

        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: "Loc", width: 80, 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 () {
        //
        $('#dgOutSO').datagrid('reload');
 

    });}


//修改點選按鈕事件
function updOutSOInfo() {    

    $("#edit").click(function () {
       

        //判斷選擇的中
        var row = $("#dgOutSO").datagrid('getSelected');        
        if (row) {

          
            $.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,

                    });    

                    //先繫結                    

                    showOutO(row);
                    defaultTab();
                    ShowDetail(row.No);
                }
                
            });

            SetEnabled(row.Status);
        } else {

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

    });

    

}

//刪除模組
function deleteOutSO() {

    $("#del").click(function () {
        var rows = $("#dgOutSO").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("/OutStock/Delete", { "ids": codes.join(',') }, function (data) {

                        if (data == "OK") {
                            $.messager.alert("提示", "刪除成功！");
                            $("#dgOutSO").datagrid("clearChecked");
                            $("#dgOutSO").datagrid("clearSelections");
                            $("#dgOutSO").datagrid("load", {});
                        }                       

                        else if (data == "NO") {
                            $.messager.alert("提示", "刪除失敗！");
                            return;
                        }

                    });

                }
            });
        }
    })

}
//清空文字框

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() {
    // url: abp.appPath + "api/services/app/org/GetAllOrgs",
    $.get(abp.appPath + "api/services/app/OutStockOrder/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 searchFunc() {
  //  var obj = $("#searchform").serializeArray();

  //  $("#dgPOD").datagrid({ queryParams: form2Json("searchform") });
    var jsonStr = '{"cargoName":"' + $("#cargoName").val() + '"}';

    var queryParams = JSON.parse(jsonStr);
    $("#dgPOD").datagrid({ queryParams: queryParams });
   // $("#dgPOD").datagrid('reload');
} //擴充套件方法

//點選清空按鈕出發事件

function clearSearch() {
    $("#dgPOD").datagrid("load", {}); //重新載入資料，無填寫資料，向後臺傳遞值則為空

    $("#searchForm").find("input").val(""); //找到form表單下的所有input標籤並清空
}

function SetEnabled(status) {
    //var status = $("#StatusUpdate").val()

    if (status == "提交") {
        $("#btnSave").prop('disabled', true);
    }
    else {
        $("#btnSave").removeAttr("disabled");
    }
}

function defaultTab() {
    //預設顯示第一個tab
    $('#box').tabs('select', "出庫單");

}

//彈出 創建出庫單的的對話方塊

function showOutOdDialog() {

    $("#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("");
            });

       

        //    SetEnabled("新建");     

 

    });


    $("#btnSave").click(function () {     

        //儲存

        var id = $("#IDUpdate").val();
        if (id == "" || id == undefined) {

            //驗證

            $.messager.confirm('確認', '您確認要儲存嗎？', function (r) {

                if (r) {                   

                    var postData = GetOutO();                   

                    if (postData.No == "" || postData.Shipper == "" || postData.ShipperCode=="" 
|| postData.Consignee=="") {
                        $.messager.alert('提示', ' 請填寫相關必填項！', 'warning');
                        return;

                    }

                   

                    $.post("/OutStock/Add", postData, function (data) {

                        if (data == "OK") {

                           // $("#divAddUpdDO").dialog("close");

                            $.messager.alert("提示", "儲存成功！");
                            initable();

                            collapseRows();
                        }

                        else if (data == "NO") {

                            $.messager.alert("提示", "儲存失敗！");

                            return;

                        }

                    });
                }
            })

        }

        else {

            saveDetail();
            initable();
            collapseRows();

        }
    });

 } 

//新增明細


function ShowDetail(no) {
    var lastIndex;

    $("#dgOutOD").datagrid({
        url: "/OutStock/GetDetail?no=" + no,

        title: "出庫單明細",

        pagination: false,      

        fit: true,

        fitColumns: false,

        loadMsg: "正在加載出庫單明細資訊...",

        toolbar: [

            { text: '新增明細', iconCls: 'icon-add', handler: function () { ShowCargoInfo(); } },
            { text: '刪除', iconCls: 'icon-remove', handler: function () 
{ deviceInfoDeleteClick(); } },
            '-'        ],

        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: "OutStockNo", 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) {
                $('#dgOutOD').datagrid('endEdit', lastIndex);
                editrow(index);

            }
            lastIndex = index;
            mainIndex = index;
        },
        
        onBeginEdit: function (rowIndex, rowData) {  
            setEditing(rowIndex);

        }

    });

}

//計算報價小計
function setEditing(rowIndex) {

    var editors = $('#dgOutOD').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) {

    $('#dgOutOD').datagrid('selectRow', index)

        .datagrid('beginEdit', index);

}

function endEdit() {
    var rows = $('#dgOutOD').datagrid('getRows');

    if (rows==undefined) {
        return;

    }

    for (var i = 0; i < rows.length; i++) {
        $('#dgOutOD').datagrid('endEdit', i);

    }

}

//設定出庫單明細資料

function setGridDetail(effectRow) {

    if ($('#dgOutOD').datagrid('getChanges').length) {
        var inserted = $('#dgOutOD').datagrid('getChanges', "inserted");
        var deleted = $('#dgOutOD').datagrid('getChanges', "deleted");
        var updated = $('#dgOutOD').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);

        }

     }

    return effectRow;

}

function endEditSub(ddv) {    
    if (mainIndex != undefined) {
        var rows = ddv.datagrid('getRows');
        if (rows!=undefined) {
            for (var i = 0; i < rows.length; i++) {
                ddv.datagrid('endEdit', i);

            }  
        }
    }

}

function saveDetail() {
    endEdit();

    $.messager.confirm('確認', '您確認要修改嗎？', function (r) {

        var effectRow = new Object();

        var postData = GetOutO();

        if (postData.Id) {
            effectRow["postdata"] = JSON.stringify(postData);
        }
        effectRow = setGridDetail(effectRow);

        $.post("/OutStock/Update", effectRow, function (data) {

           //  alert(data);

            if (data.success) {

                $.messager.alert("提示", data.result);

                $('#dgOutOD').datagrid('acceptChanges');

                // $("#divAddUpdPO").dialog("close");                       // initable();               
            }
            else {
                $.messager.alert("提示", data.result);
                return;
            }
        }, "JSON")
            ;
        })    

}

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

        $("#divAddUpdINO").dialog("close");   

        $('#dgOutSO').datagrid('reload');

    });

    $("#btnCancleDO").click(function () {
        $("#divImportDO").dialog("close");
        $('#dgOutSO').datagrid('reload');

    });

    $("#btnImportDO").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("/OutStock/ImportInStockOrder", postData, function (data) {
                        if (data == "OK") {
                            $.messager.alert("提示", "儲存貨物資訊成功！");
                            ShowDetail(obj_No);
                        }
                        else if (data == "NO") {
                            $.messager.alert("提示", "儲存貨物資訊失敗！");
                            return;
                        }

                    });
                }
            })
        }
    });

    $("#btnSubmit").click(function () {

        //儲存
        var id = $("#IDUpdate").val();
        if (id == "" || id == undefined) {
            $.messager.alert("提示", "出庫單沒有儲存，請先儲存！");
            return;
        }

            //驗證

            $.messager.confirm('確認', '您確認要提交出庫單嗎？', function (r) {

                if (r) {

                    var postData = {
                        "Id": id 

                    };

                    $.post("/OutStock/Submit", postData, function (data) {

                        if (data == "OK") {
                            $.messager.alert("提示", "出庫單已經提交成功！");                           

                            $("#StatusUpdate").val("提交");

                            SetEnabled("提交");
                        }
                        else if (data == "NO") {
                            $.messager.alert("提示", "出庫單提交失敗！");
                            return;
                        }
                    });

                }

            })

    });

}

 

function endEditing(ddv) {

    var changes = ddv.datagrid('getChanges');

    if (editIndex == undefined) { return true }
    if (ddv.datagrid('validateRow', editIndex)) {

        //驗證前一行
        //返回編輯器，結束編輯 
        ddv.datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;

    } else { return false; }

}

 

function collapseRows() {

    var rows = $('#dgOutOD').datagrid('getRows');

    $.each(rows, function (i, k) {
        //獲取當前所有展開的子網格

        var expander = $('#dgOutOD').datagrid('getExpander', i);

        if (expander.length && expander.hasClass('datagrid-row-collapse')) {

            if (k.id != row.id) {

                //摺疊上一次展開的子網格
                $('#dgOutOD').datagrid('collapseRow', i);

            }

        }

    });

}

 

function GetOutO() {

    var postData = {

        //"Id": $("#IDUpdate").val(),

        "No": $("#UpdNO").val(),
        "CustomerName": $("#CustomerNameUpdate").val(),
        "DeliveryNo": "",
        "TallyTime": $("#TallyTimeUpdate").val(),
        "CustomerCode": $("#CustomerCodeUpdate").val(),
        "Consignee": $("#ConsigneeUpdate").val(),
        "VehicleNo": $("#VehicleNoUpdate").val(),
       "ConsigneeCode": $("#ConsigneeCodeUpdate").val(),
       
        "CreationTime": $("#CreationTimeUpdate").val(),
        "ConsigneeSCCD": $("#ConsigneeSccdUpdate").val(),

        "Shipper": $("#ShipperUpdate").val(),
        "ShipperCode": $("#ShipperCodeUpdate").val(),
        "Oper": $("#OperUpdate").val(),

        "ShipperSCCD": $("#ShipperSCCDUpdate").val(),

        "Nwt": $("#NwtUpdate").val(),
        "Remark": $("#RemarkUpdate").val(),
        "Notify": $("#NotifyUpdate").val(),      

        "Status": $("#StatusUpdate").val(),
        "Gwt": $("#GwtUpdate").val(),

        "NotifyCode": $("#NotifyCodeUpdate").val(),
        "PackageQty": $("#PackageQtyUpdate").val(),

        "NotifySCCD": "",
        "WarehouseNo": $("#WarehouseNoUpdate").val(),

        "PreOutStockTime": $("#PreOutStockTimeUpd").val(),
        "Checker": "",
        "CheckTime": "",

        "LastUpdateTime": "",
        "LastOper": "",
        "TallyClerk": $("#TallyClerkUpdate").val()

    };
    var id = $("#IDUpdate").val();

    if (!(id=="" || id==undefined)) {
        postData.Id = id;

    }
    return postData;
}

function showOutO(row) {
     
    $("#IDUpdate").val(row.Id);
    $("#UpdNO").val(row.No);

    $("#PreOutStockTimeUpd").val(row.PreOutStockTime);
    $("#ShipperCodeUpdate").val(row.ShipperCode);

    $("#PackageQtyUpdate").val(row.PackageQty);
    $("#ShipperUpdate").val(row.Shipper);

    $("#ConsigneeSccdUpdate").val(row.ConsigneeSCCD);
    $("#ConsigneeUpdate").val(row.Consignee);

    $("#ConsigneeCodeUpdate").val(row.ConsigneeCode);
    $("#NotifyCodeUpdate").val(row.NotifyCode);

    $("#NotifyUpdate").val(row.Notify);
    $("#NotifySCCDUpdate").val(row.NotifySCCD); 

    $("#CreationTimeUpdate").val(row.CreationTime);
    $("#CheckTimeUpdate").val(row.CheckTime);

    $("#TallyTimeUpdate").val(row.TallyTime);
    $("#WarehouseNoUpdate").val(row.WarehouseNo);

    $("#OperUpdate").val(row.Oper);

    

    $("#NwtUpdate").val(row.Nwt);
    $("#RemarkUpdate").val(row.Remark);
    $("#TallyClerkUpdate").val(row.TallyClerk);

    $("#StatusUpdate").val(row.Status);    
    $("#GwtUpdate").val(row.Gwt);
    $("#CheckerUpdate").val(row.Checker);


}

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