Categories
Uncategorized

Cargo abp (net core) + easyui + efcore implement Warehouse Management System –EasyUI management of three (21)

abp (net core) + easyui + efcore implement warehouse management system directory

abp (net core) + easyui + efcore implement warehouse management system –ABP general introduction (a)

abp (net core) + easyui + efcore implement Warehouse Management System – Solutions Introduction (b)

abp (net core) + easyui + efcore implement warehouse management system – the domain layer created entity (c)

abp (net core) + easyui + efcore implement warehouse management system – Define and implement storage (IV)

abp (net core) + easyui + efcore implement Warehouse Management System – Create application services (five)

abp (net core) + easyui + efcore implemented warehouse management system – to achieve the presentation layer of the CRUD controller (vi)

abp (net core) + easyui + efcore implement Warehouse Management System – the presentation layer to achieve CRUD the list view (seven)

abp (net core) + easyui + efcore implement Warehouse Management System – the presentation layer to achieve the CRUD CRUD view (eight)

abp (net core) + easyui + efcore implement Warehouse Management System – the presentation layer to achieve CRUD and test the menu (IX)

abp (net core) + easyui + efcore implement Warehouse Management System – Multilingual (X)

abp (net core) + easyui + efcore implemented Warehouse Management System – WEBAPI implemented CURD (XI)

abp (net core) + easyui + efcore implement Warehouse Management System – WEBAPI achieve CURD (XII)

abp (net core) + easyui + efcore implement Warehouse Management System – WEBAPI achieve CURD (XIII)

abp (net core) + easyui + efcore implement Warehouse Management System – WEBAPI achieve CURD (xiv)

abp (net core) + easyui + efcore implement Warehouse Management System – WEBAPI achieve CURD (XV)

abp (net core) + easyui + efcore implement Warehouse Management System – menu – on (XVI)

abp (net core) + easyui + efcore implement Warehouse Management System – menu – under (17)

abp (net core) + easyui + efcore implement warehouse management system –EasyUI front page frame (XVIII)

Cargo abp (net core) + easyui + efcore implement Warehouse Management System –EasyUI of a management (XIX)

abp (net core) + easyui + efcore implement warehouse management system –EasyUI of goods Management 2 (XX)

 

By the previous article (abp (net core) + easyui + efcore and cargo management warehouse management system –EasyUI bis (XX)), we have achieved with the controller type cargo service information management needs, page rendering. In this article we implement front-end functionality cargo information management needs, mainly achieved through javascript.

 

Ten, create a script file

1. In Visual Studio 2017’s “Solution Explorer”, find the view-resources directory under the domain layer “ABP.TPLMS.Web.Mvc” project wwwroot directory. Right-click the directory in the pop-up menu, select “Add”> “New Folder.” And rename it to “Cargo”.

2. In Visual Studio 2017’s “Solution Explorer”, the right-click “Cargo” folder and select “Add”> “New Item ….” In the “Add New Item -ABP.TPLMS.Web.Mvc” dialog box, select “javascript file,” Then name cargomgr.js. As shown below.

 

3. In the cargomgr.js file, we write the front-end feature script for cargo information management, with the following code.

//

— System Functions —> Cargo Information —//

//

Refresh Data

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: [[//

Freeze Columns

{ 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'); });} //

Modify button click event

function updCargoInfo() { $("#edit").click(function () { var row = $("#dgCargo").datagrid('getSelected'); if (row) { $.messager.confirm('编辑', '您想要编辑吗?', function (r) { if (r) { showCargo(row); //

Open the dialog to edit the

$("#divAddUpdCargo").dialog({ closed: false, title: "修改货物信息", modal: true, width: 700, height: 450, collapsible: true, minimizable: true, maximizable: true, resizable: true, }); } }); } else { $.messager.alert('提示', ' 请选择要编辑的行!', 'warning'); } }); } //

Delete

function deleteCargo() { $("#del").click(function () { var rows = $("#dgCargo").datagrid("getSelections"); if (rows.length > 0) { $.messager.confirm("提示", "确定要删除吗?", function (res) { if (res) { var codes = []; //

It's not important.

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; } }); } }); } }) } //

Clear the text box

function clearAll() { $("#IDUpdate").val(""); $("#UpdCargoCode").val(""); $("#CreateTimeUpdate").val(getNowFormatDate()); $("#UnitUpdate").val(""); $("#CargoNameUpdate").val(""); } //

Get the current time in the format 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; } //

Pop-up dialog box to add cargo information

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'); //

Enable

//

save

var id = $("#IDUpdate").val(); if (id == "" || id == undefined) { //

verification

$.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 ( "prompt", "modified successfully!");                     $ ( "# DivAddUpdCargo") dialog ( "close").;                     initable ();                 }                 else {                     $ .Messager.alert ( "prompt", "modification failed!");                     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 ().;     // calculate the volume    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 ();     }); } // ------------------------ system functions -> Cargo Information ---------------- end ------------ //

 

4. In Visual Studio 2017’s “Solution Explorer”, find the file Index.cshtml “ABP.TPLMS.Web.Mvc” Cargo directory under the project Views directory. Double-click to open the file, write the following code at the top of the file, a reference script. See the specific location of an article before.

@section scripts
    {
    
    
}

 

 

 

Leave a Reply