abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理三 (二十一)

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实现仓储管理系统——多语言（十）

abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十一)

 abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十二)

 abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十三)

abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十四)

 abp(net core)+easyui+efcore实现仓储管理系统——使用 webapi实现curd (十五)

abp(net core)+easyui+efcore实现仓储管理系统——菜单-上 (十六)

 abp(net core)+easyui+efcore实现仓储管理系统——菜单-下(十七) 

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

abp(net core)+easyui+efcore实现仓储管理系统——easyui之货物管理一 (十九)

 abp(net core)+easyui+efcore实现仓储管理系统——easyui之货物管理二 (二十)

 

        通过上一篇文章(abp(net core)+easyui+efcore实现仓储管理系统——easyui之货物管理二 (二十))中，我们已经实现货物信息管理功能所需要的服务类与控制器类，页面呈现。在这一篇文章中我们来实现货物信息管理所需要的前端功能，主要是通过javascript来实现。

 

十、创建脚本文件

1. 在visual studio 2017的“解决方案资源管理器”中，找到领域层“abp.tplms.web.mvc”项目中的wwwroot目录下的view-resources目录。使用鼠标右键单击此目录，在弹出菜单中选择“添加” > “新建文件夹”。并重命名为“cargo”。

2. 在visual studio 2017的“解决方案资源管理器”中，鼠标右键单击“cargo”文件夹，然后选择“添加” > “新建项…”。 在“添加新项-abp.tplms.web.mvc”对话框中，选择“javascript文件”，并将名称命名为cargomgr.js。如下图。

 

3. 在cargomgr.js文件中，我们写入货物信息管理的前端功能脚本，具体代码如下。

//------------------------系统功能-->货物信息--------------------------------//
//刷新数据
function initable() {
    $("#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: "货物代码", 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 },
            { field: 'createtime', title: '创建时间', width: 100, align: 'center' }
        ]]
    }); 
}
function reloaded() {   //reload
    $("#reload").click(function () {
        $('#dgcargo').datagrid('reload');
    });}

 //修改点击按钮事件
function updcargoinfo() {  
    $("#edit").click(function () {
        var row = $("#dgcargo").datagrid('getselected');      

        if (row) {
            $.messager.confirm('编辑', '您想要编辑吗？', function (r) {
                if (r) {
                    showcargo(row);
                     //打开对话框编辑
                    $("#divaddupdcargo").dialog({
                        closed: false,
                        title: "修改货物信息",
                        modal: true,
                        width: 700,
                        height: 450,
                        collapsible: true,
                        minimizable: true,
                        maximizable: true,
                        resizable: true,
                    });                     
                }              
            });

        } else {
            $.messager.alert('提示', ' 请选择要编辑的行！', 'warning');
        }
    });
   }

//删除
function deletecargo() {
    $("#del").click(function () {
        var rows = $("#dgcargo").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("/cargo/delete", { "ids": codes.join(',') }, function (data) {
                        if (data == "ok") {
                            $.messager.alert("提示", "删除成功！");
                            $("#dgcargo").datagrid("clearchecked");
                            $("#dgcargo").datagrid("clearselections");
                            $("#dgcargo").datagrid("load", {});
                        }                       
                        else if (data == "no") {
                            $.messager.alert("提示", "删除失败！");
                            return;
                        }
                    });
                }
            });
        }
    })
}

//清空文本框
function clearall() {
    $("#idupdate").val("");
    $("#updcargocode").val("");
    $("#createtimeupdate").val(getnowformatdate());   

    $("#unitupdate").val("");
    $("#cargonameupdate").val("");
}

//获取当前时间，格式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;
}

//弹出 添加货物信息的对话框
function showcargodialog() {   
    $("#add").click(function () {
        clearall(); 

        $("#divaddupdcargo").dialog({
            closed: false,
            title: "添加货物信息",
            modal: true,
            width: 700,
            height: 450,
            collapsible: true,
            minimizable: true,
            maximizable: true,
            resizable: true
        });
    });

    $("#btnsave").click(function () {
        //  alert('1');
        //启用
        //保存
        var id = $("#idupdate").val();
        if (id == "" || id == undefined) {
            //验证
            $.messager.confirm('确认', '您确认要保存吗？', function (r) {
                if (r) {
                    var postdata = getcargo();
                    if (postdata == null || postdata == undefined || postdata.supplierid == "" 
                    || postdata.cargocode == ""|| postdata.cargoname == ""|| postdata.unit== "") {
                        $.messager.alert('提示', ' 请填写相关必填项！', 'warning');
                        return;
                    }                  
                    $.post("/cargo/add", postdata, function (data) {
                       // alert(data);
                        var obj = json.parse(data);
                        if (obj.result == "ok") {
                            $("#idupdate").val(obj.id)
                            $("#divaddupdcargo").dialog("close");
                            $.messager.alert("提示", "保存成功！");
                            initable();
                        }
                        else if (obj.result == "no") {
                            $.messager.alert("提示", "保存失败！");
                            return;
                        }
                    });
                }
            })
        }
        else {
            savedetail();
        }
    });
} 

function savedetail() {
    $.messager.confirm('确认', '您确认要修改吗？', function (r) {
               var postdata = getcargo();
            if (postdata==null || postdata==undefined || postdata.supplierid == ""
              || postdata.cargocode == "") {
                $.messager.alert('提示', ' 请填写相关必填项！', 'warning');
                return;
            }
            $.post("/cargo/update", postdata, function (data) {
               // alert(data);
 var obj = json.parse(data);

                        if (obj.result == "ok") {

               if (data=="ok") {
                    $.messager.alert("提示", "修改成功！");                
                    $("#divaddupdcargo").dialog("close");                  
                    initable();
                }
                else {
                    $.messager.alert("提示",  "修改失败！");
                    return;
                }           

            });     

        })  
}

function getcargo() {   
    var postdata = {
        "id": $("#idupdate").val(),
        "cargoname": $("#cargonameupdate").val(),
        "cargocode": $("#updcargocode").val(),
        "creationtime": $("#createtimeupdate").val(),
        "supplierid": $("#supplieridupdate").val(),
        "brand": $("#brandupdate").val(),
        "country": $("#countryupdate").val(),
        "curr": $("#currupdate").val(),
        "grosswt": $("#grosswtupdate").val(),
        "height": $("#heightupdate").val(),
        "hscode": $("#hscodeupdate").val(),
        "length": $("#lengthupdate").val(),
        "maxnum": $("#maxnumupdate").val(),

        "minnum": $("#minnumupdate").val(),
        "netwt": $("#netwtupdate").val(),
        "package": $("#packageupdate").val(),
        "price": $("#priceupdate").val(),
        "remark": $("#remarkupdate").val(),
        "spcf": $("#spcfupdate").val(),
        "unit": $("#unitupdate").val(),
        "updatetime": $("#createtimeupdate").val(),

        "vol": $("#volupdate").val(),
        "width": $("#widthupdate").val(),
        "updoper": $("#supplieridupdate").val()
    };
    return postdata;

} 

function showcargo(row) { 

    $("#idupdate").val(row.id);
    $("#cargonameupdate").val(row.cargoname);
    $("#updcargocode").val(row.cargocode);
    $("#createtimeupdate").val(row.updatetime);
    $("#brandupdate").val(row.brand);
    $("#countryupdate").val(row.country);
    $("#currupdate").val(row.curr);
    $("#grosswtupdate").val(row.grosswt);
    $("#heightupdate").val(row.height);
    $("#hscodeupdate").val(row.hscode);
    $("#lengthupdate").val(row.length);
    $("#maxnumupdate").val(row.maxnum);
     $("#minnumupdate").val(row.minnum);
    $("#netwtupdate").val(row.netwt);
    $("#packageupdate").val(row.package);
     $("#priceupdate").val(row.price);
    $("#remarkupdate").val(row.remark);
    $("#spcfupdate").val(row.spcf);
    $("#unitupdate").val(row.unit);
    $("#voleupdate").val(row.vol);
    $("#widthupdate").val(row.width);
}

function calcsumvol(){    
    var vol = 0;
    var len = $("#lengthupdate").val();
    var height = $("#heightupdate").val();
    var width = $("#widthupdate").val();

    //计算体积
   var l = parsefloat(len);
    var h = parsefloat(height);
    var w = parsefloat(width);
    vol = ((l * h * w)/(100*100*100)).tofixed(3);  

    $("#volupdate").val(vol);
}

function init() {
    $("#lengthupdate").blur(function () {
        calcsumvol();
    });
    $("#heightupdate").blur(function () {
        calcsumvol();
    });
    $("#widthupdate").blur(function () {
        calcsumvol();
    });
}

//------------------------系统功能-->货物信息结束----------------------------//

 

4. 在visual studio 2017的“解决方案资源管理器”中，找到“abp.tplms.web.mvc”项目中的views目录下的cargo目录中的index.cshtml文件。双击打开此文件，在文件的顶部写入以下代码，引用脚本。具体位置参见前一篇文章。

@section scripts
    {
    <script src="~/view-resources/views/cargo/cargomgr.js" asp-append-version="true"></script>
    <script type="text/javascript">
        $(function () {
            initable();
            init();
            reloaded();
            updcargoinfo();
            showcargodialog();
            deletecargo();
        });
    </script>
}