abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理八(二十六)

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

abp(net core)+easyui+efcore實現倉儲管理系統——ABP整體介紹(一)html

abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二)前端

abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三)json

 abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)瀏覽器

abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務(五)框架

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之控制器(六)ide

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之列表視圖(七)工具

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之增刪改視圖(八)post

abp(net core)+easyui+efcore實現倉儲管理系統——展示層實現增刪改查之菜單與測試(九)測試

abp(net core)+easyui+efcore實現倉儲管理系統——多語言(十)ui

abp(net core)+easyui+efcore實現倉儲管理系統——使用 WEBAPI實現CURD (十一)

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前端頁面框架 (十八) abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI之貨物管理七(二十五) 爲止,咱們已經經過EasyUI完成了貨物信息管理的增刪改功能基本實現。如今咱們來完成查詢功能。

十7、查詢貨物信息

      1. 在Visual Studio 2017的「解決方案資源管理器」中,右鍵單擊在領域層「ABP.TPLMS.Web.Mvc」項目中的Views\Cargo目錄。 找到Index.cshmtl文件,添加一個查詢條件相關代碼。以下圖。

 

具體代碼以下:

<div id="dg-button">
      <form name="searchform" method="post" action="" id="searchform">
             <label for="Name">貨物名稱:</label>
             <input  name="Name" id="Name" class="easyui-validatebox" data-options="width:200" />
              <label for="Code">貨物代碼:</label>
              <input name="Code" id="Code" class="easyui-validatebox" data-options="width:150" />
               <label for="HsCode">商品編碼:</label>
               <input name="HsCode" id="HsCode" class="easyui-validatebox" data-options="width:100" />
              <a href="#" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">查詢</a>
          </form>
        </div>

 

       2.在Visual Studio 2017的「解決方案資源管理器」中,右鍵單擊「ABP.TPLMS.Application」項目的 「Cargos」文件夾中,找到Paged CargoResultRequestDto.cs文件,添加查詢條件屬性。代碼以下。

public class PagedCargoResultRequestDto : PagedResultRequestDto
    {
        public string Keyword { get; set; }
        public string CargoName { get; set; }
        public string CargoCode { get; set; }
        public string HsCode { get; set; }
    }
}

 

      3. 在Visual Studio 2017的「解決方案資源管理器」中,右鍵單擊在領域層「ABP.TPLMS.Web.Mvc」項目中的Controller目錄。找到「CargoController.cs」文件。以下圖。

 

具體代碼以下:

[DontWrapResult]
        [HttpPost]
        public string List()
        {
            var page = Request.Form["page"].ToString();
            var size = Request.Form["rows"].ToString();
            int pageIndex = page == null ? 1 : int.Parse(page);
            int pageSize = size == null ? 20 : int.Parse(size);

            PagedCargoResultRequestDto paged = new PagedCargoResultRequestDto();
            paged.MaxResultCount = pageSize;
            paged.SkipCount = ((pageIndex-1)<0?0: pageIndex - 1) * pageSize;
            paged.CargoName = Request.Form["Name"].ToString();
            paged.CargoCode = Request.Form["Code"].ToString();
            paged.HsCode = Request.Form["HsCode"].ToString(); 

            var userList = _cargoAppService.GetAll(paged).GetAwaiter().GetResult().Items;
            int total = _cargoAppService.GetAll(paged).GetAwaiter().GetResult().TotalCount; //1000;
            var json = JsonEasyUI(userList,total);
            return json;
        }
      4. 在Visual Studio 2017的「解決方案資源管理器」中,找到領域層「ABP.TPLMS.Web.Mvc」項目中的wwwroot目錄下的view-resources\Cargo文件夾下,找到cargomgr.js文件,在工具欄(toolbar)中添加查詢條件。以下圖畫框處。

 

     5.在cargomgr.js文件添加一個查詢方法Search,代碼以下。

function Search() {
    var _$form = $('form[name=searchform]');
    var params = _$form.serializeFormToObject();
    $('#dgCargo').datagrid({ queryParams:params});
}
     6.在Visual Studio 2017中按F5運行應用程序。

     7.在瀏覽器中的地址欄中輸入「http://localhost:5000/」,而後輸入管理員用戶名進行登陸。

     8.在主界面的菜單中,選擇「Business->貨物管理」菜單項,瀏覽器中呈現一個帶查詢條件的貨物信息列表與四個按鈕。以下圖。

      9.在「貨物代碼」查詢條件中輸入「A」,而後點擊「查詢」按鈕,然而查詢結果沒有變化。以下圖。

     10. 在「商品編碼」查詢條件中輸入「8548900010」,而後點擊「查詢」按鈕,然而查詢結果沒有變化。以下圖。

      11.經過上面的兩次測試,發現查詢沒有起到做用。輸入查詢條件,仍是查詢出了全部記錄。接下來咱們來把查詢條件添加到查詢方法中。在Visual Studio 2017的「解決方案資源管理器」中,右鍵單擊「ABP.TPLMS.Application」項目的 「Cargos」文件夾中,找到CargoAppService.cs文件。重寫CreateFilteredQuery方法。代碼以下。

protected override IQueryable<Cargo> CreateFilteredQuery(PagedCargoResultRequestDto input)
        {

            return base.CreateFilteredQuery(input)
                 .Where(t => t.CargoName.Contains(input.CargoName))
                 .Where(t => t.CargoCode.Contains(input.CargoCode))
                 .Where(t => t.HSCode.Contains(input.HsCode))
                 ;
        }
     12. 重複上面的第六、七、8步。而後在「貨物代碼」查詢條件中輸入「a」,而後點擊「查詢」按鈕,然而查詢出全部貨物代碼中有「a」的貨物信息。以下圖。

     13.在「商品編碼」查詢條件中輸入「1100120000」,而後點擊「查詢」按鈕,然而查詢出全部「商品編碼」中有「1100120000」的貨物信息。以下圖。

      14.在「商品名稱」查詢條件中輸入「觸摸屏」,而後點擊「查詢」按鈕,然而查詢出全部「商品名稱」中有「觸摸屏」的貨物信息。以下圖。

       15.在「商品名稱」查詢條件中輸入「觸摸屏」,而後點擊「查詢」按鈕,然而查詢出全部「商品名稱」中有「觸摸屏」的貨物信息,而後點擊翻頁。以下圖。

 

       至此,經過EasyUI進行增刪改查的功能已經所有實現。

相關文章
相關標籤/搜索