abp(net core)+easyui+efcore實現倉儲管理系統目錄
abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八)
在上一篇文章中我們已經實現了控制器的程式碼，在今天我們來實現前端頁面的程式碼。
九、使用EasyUI建立出庫單管理頁面
1. 在Visual Studio 2017的“解決方案資源管理器”中，右鍵單擊在領域層“ABP.TPLMS.Web.Mvc”專案中的Views目錄。 選擇“新增” > “新建資料夾”。並重新命名為“OutStock”。
2. 在Visual Studio 2017的“解決方案資源管理器”中，滑鼠右鍵單擊“OutStock”資料夾，然後選擇“新增” > “新建項…”。 在“新增新項-ABP.TPLMS.Web.Mvc”對話方塊中，選擇“Razor檢視”，並將名稱命名為Index.cshmtl。
3.在Startup目錄中找到PageNames.cs檔案，在這個檔案中新增OutStock定義。程式碼如下。
namespace ABP.TPLMS.Web.Startup
{
public class PageNames
{
public const string Home = "Home";
public const string About = "About";
public const string Tenants = "Tenants";
public const string Users = "Users";
public const string Roles = "Roles";
public const string Module = "Module";
public const string Supplier = "Supplier";
public const string Cargo = "Cargo";
public const string Org = "Organization";
public const string InStock = "InStockOrder";
public const string OutStock = "OutStockOrder";
}
}
4. 在我們剛才建立的Index.cshmtl檔案中，編寫如下程式碼：
@using ABP.TPLMS.Web.Startu
@{
ViewData["Title"] = PageNames.OutStock;
}
@section scripts{
<script src="~/view-resources/Views/OutStock/Index.js" asp-append-version="true"></script>
<script src="~/lib/easyui-1.8/datagrid-detailview.js" asp-append-version="true"></script>
<script type="text/javascript">
$(function () {
initable();
init();
reloaded();
updOutSOInfo();
showOutOdDialog();
deleteOutSO();
$('#box').tabs({
width: 780, //選項卡容器寬度
height: 465, //選項卡容器高度
onSelect: function (title, index) {
var rcv = $("#RcvUpdate").val();
}
});
});
</script>
}
<div data-options="region:'center'" style="overflow: hidden;">
<div id="containter" style="width: 1000px; height: auto; margin: 0px auto;">
<!--toolbar-->
<div style="margin-bottom:1px;font-weight:bold;">
<a href="#" id="add" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
style="width:100px; height:30px; ">建立</a>
<a href="#" id="del" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"
style="width:100px; height:30px; ">刪除</a>
<a href="#" id="edit" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"
style="width:100px; height:30px; ">修改</a>
<a href="#" id="submits" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"
style="width:100px; height:30px; ">提交</a>
<a href="#" id="reload" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
style="width:100px; height:30px; ">重新整理</a>
</div>
<!--panel-->
<div data-options="region:'center',split:false" style="height:500px;">
<!--表格-->
<table id="dgOutSO"></table>
</div>
</div>
</div>
<!---------------------------匯入貨物資訊彈出窗體------------------------------------------->
<div id="divImportCargo" class="easyui-dialog" closed="true" style="top:10px;" data-options="buttons: '#dlg-buttons-po'">
<!--panel-->
<div data-options="region:'center',split:false" style="height:460px;">
<!--表格-->
<table id="dgCargo"></table>
</div>
</div>
<div id="dlg-buttons-po">
<input type="submit" id="btnImportDO" value="匯入" class="btn btn-primary" />
<input type="submit" id="btnCancleDO" value="取消" class="btn btn-info" />
</div>
<!---------------------------新增修改出庫單資訊------------------------------------------->
<div id="divAddUpdINO" class="easyui-dialog" closed="true" style="top:10px;" data-options="buttons: '#dlg-buttons'">
<div id="box">
<div title="出庫單">
<table>
<tr>
<td><input type="hidden" name="ID" id="IDUpdate" /></td>
</tr>
<tr>
<td>出庫單號：</td>
<td><input type="text" id="UpdNO" name="UNO" class="form-control input-sm" /></td>
<td>預計出庫日期：</td>
<td>
<input type="text" id="PreOutStockTimeUpd" name="UPreOutStockTime" class="form-control input-sm" />
</td>
<td> 狀態：</td>
<td><input type="text" id="StatusUpdate" name="UStatus" class="form-control input-sm" value="0" /></td>
</tr>
<tr>
<td> 發貨人：</td>
<td><input type="text" id="ShipperCodeUpdate" name="UShipperCode" class="form-control input-sm" /></td>
<td colspan="2">
<input type="text" id="ShipperUpdate" name="UShipper" class="form-control input-sm" />
</td>
<td>社會信用程式碼：</td>
<td>
<input type="text" id="ShipperSCCDUpdate" name="UShipperSCCD" class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 收貨人：</td>
<td><input type="text" id="ConsigneeCodeUpdate" name="UConsigneeCode" class="form-control input-sm" /></td>
<td colspan="2">
<input type="text" id="ConsigneeUpdate" name="UConsignee" class="form-control input-sm" />
</td>
<td>社會信用程式碼：</td>
<td>
<input type="text" id="ConsigneeSccdUpdate" name="UConsigneeSccd" class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 通知人：</td>
<td><input type="text" id="NotifyCodeUpdate" name="UNotifyCode" class="form-control input-sm" /></td>
<td colspan="2">
<input type="text" id="NotifyUpdate" name="UNotify" class="form-control input-sm" />
</td>
<td>社會信用程式碼：</td>
<td>
<input type="text" id="NotifySCCDUpdate" name="UNotifySCCD" class="form-control input-sm" />
</td>
</tr>
<tr>
<td>理貨員：</td>
<td> <input type="text" id="TallyClerkUpdate" name="UTallyClerk" class="form-control input-sm" /></td>
<td>理貨開始時間：</td>
<td>
<input type="text" id="TallyTimeUpdate" name="UTallyTime" class="form-control input-sm" />
</td>
<td>理貨結束時間：</td>
<td>
<input type="text" id="ETallyTimeUpdate" name="UETallyTime" class="form-control input-sm" />
</td>
</tr>
<tr>
<td>淨重：</td>
<td> <input type="text" id="NwtUpdate" name="UNwt" class="form-control input-sm" value="0" /></td>
<td>毛重：</td>
<td>
<input type="text" id="GwtUpdate" name="UGwt" class="form-control input-sm" value="0" />
</td>
<td>件數：</td>
<td>
<input type="text" id="PackageQtyUpdate" name="UPackageQty" class="form-control input-sm" value="0" />
</td>
</tr>
<tr>
<td>倉庫號：</td>
<td>
<input type="text" id="WarehouseNoUpdate" name="UWarehouseNo" class="form-control input-sm" />
</td>
<td>車牌號：</td>
<td>
<input type="text" id="VehicleNoUpdate" name="UVehicleNo" class="form-control input-sm" />
</td>
<td>核查時間：</td>
<td>
<input type="text" id="CheckTimeUpdate" name="UCheckTime" class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 核查員：</td>
<td>
<input type="text" id="CheckerUpdate" name="UChecker" class="form-control input-sm" />
</td>
<td>操作員：</td>
<td>
<input type="text" id="OperUpdate" name="UOper" class="form-control input-sm" />
</td>
<td>建立時間：</td>
<td>
<input type="text" id="CreationTimeUpdate" name="UCreationTime" class="form-control input-sm" />
</td>
</tr>
<tr>
<td> 備註：</td>
<td colspan="5"><input type="text" id="RemarkUpdate" name="URemark" class="form-control input-sm" /></td>
</tr>
</table>
</div>
<div title="出庫單明細">
<!--panel-->
<div data-options="region:'center',split:false" style="height:400px;">
<!--表格-->
<table id="dgOutOD"></table>
</div>
</div>
</div>
</div>
<div id="dlg-buttons">
<input type="submit" id="btnSave" value="儲存" class="btn btn-primary" />
<input type="submit" id="btnSubmit" value="提交" class="btn btn-primary" />
<input type="submit" id="btnCancle" value="取消" class="btn btn-info" />
</div>
4. 在Visual Studio 2017的“解決方案資源管理器”中，找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot目錄下的view-resources目錄。使用滑鼠右鍵單擊此目錄，在彈出選單中選擇“新增” > “新建資料夾”。並重新命名為“OutStock”。
5. 在Visual Studio 2017的“解決方案資源管理器”中，滑鼠右鍵單擊“OutStock”資料夾，然後選擇“新增” > “新建項…”。 在“新增新項-ABP.TPLMS.Web.Mvc”對話方塊中，選擇“javascript檔案”，並將名稱命名為Index.js。
6. 在Index.js檔案中，我們寫入如下程式碼。
//-----------------------系統管理-->出庫單管理------------------------------//
//重新整理資料
function initable() {
$("#dgOutSO").datagrid({
url: "/OutStock/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: "No", width: 100, sortable: true },
{title: "狀態", field: "Status", width: 50 },
{ title: '到貨日期', field: 'ReceiveTime', width: 100, align: 'center' },
{ title: "貨主", field: "OwnerCode", width: 150, sortable: true },
{ title: "預計到貨時間", field: "PreDeliveryTime", width: 150, sortable: false },
{ title: '客戶', field: 'CustomerName', width: 60, align: 'center' },
{ title: '收貨人',field: 'Oper', width: 100, align: 'center' },
{ title: '稽核人',field: 'Checker', width: 120, align: 'center' },
{ title: '件數', field: 'PackageNum', width: 120, align: 'center' },
{ title: '建立時間', field: 'CreationTime', width: 100, align: 'center' }
]]
});
}
function reloaded() { //reload
$("#reload").click(function () {
//
$('#dgOutSO').datagrid('reload');
});}
7. 在Visual Studio 2017中按F5執行應用程式。登入之後，點選“[出庫管理]”選單，我們可以看到出庫單管理列表頁面。如下圖。
