zoukankan      html  css  js  c++  java
  • abp(net core)+easyui+efcore实现仓储管理系统——入库管理之六(四十二)

    abp(net core)+easyui+efcore实现仓储管理系统目录

    abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

    abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之八(三十四)

     
     

        在上一篇abp(net core)+easyui+efcore实现仓储管理系统——入库管理之五(四十一) 文章中实现了入库管理的列表页面,并实现了控制器的代码。在今天我们学习如何在前端实现新增入库单信息界面。

    入库单新增功能

    1. 在Visual Studio 2017的“解决方案资源管理器”中,左键单击在展现层的“ABP.TPLMS.Web.MVC”项目中的Views目录。找到InStockIndex.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”项目中的wwwrootview-resourcesInStock目录。

        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",  50 }
    
            ]],
            columns: [[
            { title: "编号", field: "Id",  50, sortable: true },
            { title: "供应商", field: "SupplierId",  80, sortable: true },
            { title: "HSCode", field: "HSCode",  100, sortable: true },
           { title: "货物代码", field: "CargoCode",  100, sortable: true },
           { title: "货物名称", field: "CargoName",  80, sortable: false },
           { title: "规格型号", field: "Spcf",  100, sortable: false },
          { title: "产销国", field: "Country",  80, sortable: false },
           { title: "计量单位", field: "Unit",  100, sortable: false },
           { title: "包装", field: "Package",  100, sortable: false },
           { title: "单价", field: "Price",  100, sortable: false },
          { title: "币制", field: "Curr",  80, sortable: false },
           { title: "长宽高", field: "Length",  100, sortable: false, formatter: function (value, row, index) {
          return row.Length + '*' + row.Width + '*' + row.Height;
                    }
                },
                { title: "体积", field: "Vol",  80, sortable: false },
            { title: "备注", field: "Remark",  80, sortable: false },
                { title: '创建时间', field: 'CreationTime',  100, align: 'center' }
            ]]       
        });
        abp.log.warn('3货物信息列表日志...');
    }
    
    function ShowCargoInfo() {  
        $("#divImportCargo").dialog({
                closed: false,
                title: "选择货物信息",
                modal: true,
                 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,
                             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",  50, sortable: true },
                { title: "入库单号", field: "InStockNo",  100, sortable: true },
                { title: "HSCode", field: "HSCode",  80, sortable: false },
                { title: "货物代码", field: "CargoCode",  100, sortable: true },
                { title: "货物名称", field: "CargoName",  160, sortable: false },
                { title: "规格型号", field: "Spcf",  80, sortable: false },
                { title: "数量", field: "Qty",  100, align: 'center', editor: {
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 4
                        }
                    }
                },
                { title: "长", field: "Length",  70, align: 'center', editor: {
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 2
                        }
                    }
                },
                {title: "宽", field: "Width",  70, align: 'center', editor: {
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 2
                        }
                    }
                },
                {  title: "高", field: "Height",  70, align: 'center', editor: {
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 2
                        }
                    }
                },
                { title: "产销国", field: "Country",  70, align: 'center' },
                {title: "单价", field: "Price",  100, align: 'center', editor: {
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 2
                        }
                    }
                },        
                {  title: "总价", field: "TotalAmt",  100, align: 'center', editor: {
    
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 2
                        }
                    }
                },
    
                { title: "包装", field: "Package",  70, align: 'center' },
                { title: "计量单位", field: "Unit",  70, align: 'center' },
                { title: "总体积", field: "Vol",  70, align: 'center', editor: {
                        type: 'numberbox', options: {
                            required: true, min: 0, precision: 4
                        }
                    }
                },
                { title: "品牌", field: "Brand",  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); } //------------系统管理-->入库单管理结束---------------//

     

  • 相关阅读:
    【vue知识点】2)vue登录认证
    【vue知识点】1)vue生命周期
    【VSC】.txt文件打开乱码
    【VSC】git+github/码云+VSCode
    【vsCode】我安装了哪些扩展插件
    【VCS】种草VSCode
    【vue】父子组件间通信----传函数
    最大子列和
    jedisLock—redis分布式锁实现
    基础的重要性(程序员之路)
  • 原文地址:https://www.cnblogs.com/chillsrc/p/12592265.html
Copyright © 2011-2022 走看看