abp(net core)+easyui+efcore实现仓储管理系统——出库管理之五(五十四)
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运行应用程序。登录之后，点击“[出库管理]”菜单，我们可以看到出库单管理列表页面。如下图。
abp(net core)+easyui+efcore实现仓储管理系统——出库管理之五(五十四)的更多相关文章
- 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实现仓储管理系统——出库管理之八(五十七)
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实现仓储管理系统——出库管理之一(四十九)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
随机推荐
- 094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 04 static关键字（续）
094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 温湿度传感器DHT11程序示例
DHT11概述 HT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器. 它应用专用的数字模块采集技术和温湿度传感技术,确保产品具有极高的可靠性与卓越的长期稳定性.传感器包括一个电阻式 ...
- Spring Cloud Config配置git私钥出错
重装了电脑之后,重新生成了ssh key文件id_rsa和id_rsa.pub文件. 然后在配置中心的配置了私钥之后启动项目,报错如下: Reason: Property 'spring.cloud. ...
- 《Java从入门到失业》第五章：继承与多态（5.8-5.10）：多态与Object类
5.8多态 上面我们了解了向上转型,即一个对象变量可以引用本类及子类的对象实例,这种现象称为多态(polymorphism).多态究竟有什么用呢?我们先学习一个知识点. 5.8.1方法重写 前面我们学 ...
- Js电子时钟
简单版电子时钟,需要以下几个步骤 1. 封装一个函数 返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式 效果展示 实现 ...
- centos8平台使用ethtool配置网卡
一,ethtool命令所属的包 [root@centos8 liuhongdi]# whereis ethtool ethtool: /usr/sbin/ethtool /usr/share/man/ ...
- phpstorm 使用xdebug
一.在phpstudy配置 开启xdebug的zend扩展,在php.ini 中添加下面的代码: [xdebug] zend_extension = "D:\phpstudy_pro\Ext ...
- 【事件中心 Azure Event Hub】在Linux环境中(Ubuntu)安装Logstash的简易步骤及配置连接到Event Hub
在文章([事件中心 Azure Event Hub]使用Logstash消费EventHub中的event时遇见的几种异常(TimeoutException, ReceiverDisconnected ...
- C# 获取页面get过来的数据
/// <summary> /// 获取get过来的数据 /// </summary> /// <param name="page"></ ...
- 技术债！ 怎样简洁高效的实现多个 Enum 自由转换
一:背景 1. 讲故事 前段时间和同事负责一个项目的两个业务模块,可能大家缺少沟通,导致本该定义一个 Enum 的地方结果我俩各自定义了一个,导致后面这两个 Enum 进行对接就烦了,为了方便理解,也 ...