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>
}
黄山市民网：https://www.huangshanshimin.com/
