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", width: 50, sortable: true },
            { title: "入库单号", field: "instockno", 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) {
                $('#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);
   }

//------------系统管理-->入库单管理结束---------------//