日志

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

 来源    2019-10-09    1  

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>
}

相关文章
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理二 (二十)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十二)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理一 (十九)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务(五)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器(六)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十三)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十四)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十五)
日志core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+e ...
abp(net core)+easyui+efcore实现仓储管理系统——菜单-上 (十六)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore实现仓储管理系统——菜单-下(十七)
日志abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
abp(net core)+easyui+efcore
日志abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器(六) abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net ...
[Abp 源码分析]七、仓储与 Entity Framework Core
日志0.简介 Abp 框架在其内部实现了仓储模式,并且支持 EF Core 与 Dapper 来进行数据库连接与管理,你可以很方便地通过注入通用仓储来操作你的数据,而不需要你自己来为每一个实体定义单独的仓 ...
Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现
日志0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
.net – 使用带有Identity for Core的EFCore
问答在过去的几天里,我一直在与Entity框架Core结合使用Identity系统.在揭示我的问题之前,这里有一些信息: >实体框架Core不支持延迟加载,这意味着我通过说明要包含哪些项目来使用预先 ...
asp.net core + layui.js 搭建仓储系统
日志先放几张网站图片: 第一步先从layui 网站https://www.layui.com/doc/ 下载相关文件,复制到项目 wwwroot 目录下:   然后在 _Layout.cshtml 中引用 ...