当前位置: 移动技术网 > IT编程>开发语言>.net > abp(net core)+easyui+efcore实现仓储管理系统——入库管理之六(四十二)

abp(net core)+easyui+efcore实现仓储管理系统——入库管理之六(四十二)

2020年03月30日  | 移动技术网IT编程  | 我要评论

暹马灵异录,北京大学生兼职,程序猿段子

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目录。找到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); } //------------系统管理-->入库单管理结束---------------//

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网