abp(net core)+easyui+efcore實現倉儲管理系統——出庫管理之五(五十四)

時間  2020-12-07
標籤 javascript html 前端 java app 框架 post 測試 url 欄目 JavaScript 简体版
原文   原文鏈接

abp(net core)+easyui+efcore實現倉儲管理系統目錄

abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八) javascript

 
 

    在上一篇文章中咱們已經實現了控制器的代碼，在今天咱們來實現前端頁面的代碼。html

9、使用EasyUI建立出庫單管理頁面前端

1. 在Visual Studio 2017的「解決方案資源管理器」中，右鍵單擊在領域層「ABP.TPLMS.Web.Mvc」項目中的Views目錄。 選擇「添加」 > 「新建文件夾」。並重命名爲「OutStock」。java

2. 在Visual Studio 2017的「解決方案資源管理器」中，鼠標右鍵單擊「OutStock」文件夾，而後選擇「添加」 > 「新建項…」。 在「添加新項-ABP.TPLMS.Web.Mvc」對話框中，選擇「Razor視圖」，並將名稱命名爲Index.cshmtl。app

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文件中，編寫以下代碼： post

@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文件中，咱們寫入以下代碼。ui

//-----------------------系統管理-->出庫單管理------------------------------// 

//刷新數據

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運行應用程序。登陸以後，點擊「[出庫管理]」菜單，咱們能夠看到出庫單管理列表頁面。以下圖。url

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程