-
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>
}
出处：https://www.cnblogs.com/chillsrc/p/11642618.html
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀（爬取学校通知公告）
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求：requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量？
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析：SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL，这些神奇的特性你知道吗？
openGauss内核分析：执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案！
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式