abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之六(四十二)

来源:https://www.cnblogs.com/chillsrc/archive/2020/03/29/12592265.html
-Advertisement-
Play Games

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


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", widt

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • public static <T> T map2Object(Map<String, Object> map, Class<T> clazz) { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); if (map ...
  • A - Coffee 題意:給你一個字元串,要你判斷是否滿足一下條件,全部滿足則輸出“Yes”,否則輸出“No”。 (1)字元串的第3個字母等於字元串的第4個字母 (2)字元串的第5個字母等於字元串的第6個字母 (3)字元串的長度為6,且全部為小寫字母 題解:簽到題,易解 代碼: #include< ...
  • 一、背景 一方面,有時必須從幾個類中派生出一個子類,繼承它們所有的屬性和方法。但是,Java不支持多重繼承。有了介面,就可以得到多重繼承的效果。 另一方面,有時必須從幾個類中抽取出一些共同的行為特征,而它們之間又沒有is-a的關係,僅僅是具有相同的行為特征而已。 二、圖示 三、介面的使用 1.介面: ...
  • 隨著繼承層次中一個個新子類的定義,類變得越來越具體,而父類則更一般,更通用。類的設計應該保證父類和子類能夠共用特征。有時將一個父類設計得非常抽象,以至於它沒有具體的實例,這樣的類叫做抽象類。 舉例: public class test { public static void main(String ...
  • 發現按照教程操作破解Eplan,破解一直不成功。主要原因是MultiKey64在win10上運行不成功。可以通過設備管理看到是否有下圖的驅動 需要關閉win10的簽名認證,這個鏈接就是關閉的方法https://jingyan.baidu.com/article/624e74594dbc8d34e8b ...
  • 你需要瞭解的 HTTP Status Code Intro 現在前後端分離的開發模式越來越流行,後端負責開發對應的 API,前端只需要 關註前端頁面的數據展示和前端邏輯即可。 對於前後端分離這種開發模式,我個人還是比較喜歡的,因為這樣可以讓更專業的人做更專業的事情,後端專註於做 API 的開發設計, ...
  • 在ASP.NET MVC中有四種過濾器類型 Action 1、在ASP.NET MVC項目中,新建文件夾Filter,然後新建類MyCustormFilter,繼承自ActionFilterAttribute類,我們來看下ActionFilterAttribute類有如下四個方法,從命名我應該就可以 ...
  • 面向對象 面向對象是一個抽象的概念,其本質就是對事物以抽象的方式建立對應的模型。 簡單來講,比如我有一隻鋼筆,那麼我就可以通過分析,可以得到 這隻鋼筆的材第是塑料,品牌是個雜牌 ,裡面裝的墨是黑色的,可以用。這時候就能建立一個鋼筆的模型,它在這裡應該有這些屬性: 圖是一個不正確的UML類圖,但是可以 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...