abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之十(三十六)

時間  2020-02-05
標籤 abp core easyui+efcore easyui efcore 實現 倉儲 管理 系統 webapi 結合 增刪 之十 三十六 简体版
原文   原文鏈接

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

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

 

    在上面文章abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之九(三十五) 的學習以後，咱們已經實現了在控制器中實現查詢功能，今天咱們來經過ABP自動幫助咱們生成的WebAPI接口，來實現查詢功能。前端

 

十七、 WebAPI接口查詢java

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

<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="reload" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:100px; height:30px; ">刷新</a>

        </div>

        <div id="dg-button">
            <form name="searchform" method="post" action="" id="searchform">

                <label for="OrgName">組織名稱：</label>
                <input name="OrgName" id="OrgName" class="easyui-validatebox" data-options="width:200" />
                <label for="OrgCode">組織代碼：</label>

                <input name="OrgCode" id="OrgCode" class="easyui-validatebox" data-options="width:150" />
                <label for="CustomCode">海關代碼：</label>
                <input name="CustomCode" id="CustomCode" class="easyui-validatebox" data-options="width:100" />

                <input name="SkipCount" type="hidden" value="1" />
                <input name="MaxResultCount" type="hidden" value="1000" />
                <a href="#" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">查詢</a>
            </form>

        </div>
        <!--panel-->
        <div data-options="region:'center',split:false" style="height:500px;">
            <!--表格-->
            <table id="dgOrg"></table>
        </div>
    </div>
</div>

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

public class PagedOrgResultRequestDto : PagedResultRequestDto
    {

        public string Keyword { get; set; }
        public string OrgName { get; set; }
        public string OrgCode { get; set; }
        public string CustomCode { get; set; }

    }
}

 

 

 

     3. 在Visual Studio 2017的「解決方案資源管理器」中，找到領域層「ABP.TPLMS.Web.Mvc」項目中的wwwroot目錄下的view-resources\Orgs文件夾下，找到Index.js文件，把 $("#dgOrg").treegrid方法 中的URL屬性改成abp.appPath + "api/services/app/org/GetAll"。代碼以下。json

function initable() {
    $("#dgOrg").treegrid({
     url: abp.appPath + "api/services/app/org/GetAll", method:"GET",
        title: "組織管理",
        pagination: false,
        toolbar: "#dg-button",
        fit: true,
        fitColumns: false,
        loadMsg: "正在加載組織信息...",
        nowarp: false,
        border: false,

        idField: "Id",
        sortName: "Id",
        sortOrder: "asc",
        treeField: "Name",

        frozenColumns: [[//凍結列
            {
                field: "chk", checkbox: true, align: "left", width: 50
            }           

        ]],

        columns: [[
            { title: "編號", field: "Id", width: 50, sortable: true },
            { title: "組織名稱", field: "Name", width: 200, sortable: true },
            { title: "代碼", field: "BizCode", width: 100, sortable: true },
            { title: "海關代碼", field: "CustomCode", width: 100, sortable: true },
            { title: "狀態", field: "Status", width: 80, sortable: false }, 
            { title: "類型", field: "Type", width: 80, sortable: false },
            { title: "父節點", field: "ParentName", width: 120, sortable: false },

            { title: '建立時間', field: 'CreationTime', width: 130, align: 'center' }
        ]]
    });
}
     4.在Index.js文件添加一個查詢方法Search，代碼以下。 
function Search() {
    var _$form = $('form[name=searchform]');
    var params = _$form.serializeFormToObject();
    $('#dgOrg').treegrid({ queryParams: params });

}

 

 

 

     5.在Visual Studio 2017的「解決方案資源管理器」中，右鍵單擊「ABP.TPLMS.Application」項目的 「Orgs」文件夾中，找到OrgAppService.cs文件。重寫CreateFilteredQuery方法。代碼以下。關於GetParentOrgs方法，在這裏要說明一點，這個方法的具體做用是找到咱們查詢到的組織信息的全部上級組織。這個方法經過遞歸算法來查找條件當前查詢條件的組織信息中的第一條的全部上級組織信息。這個方法暫時還有缺陷，能夠自行修正。api

   

protected override IQueryable<Org> CreateFilteredQuery(PagedOrgResultRequestDto input)
        {
            var qry= base.CreateFilteredQuery(input)
                .Where(t=>t.Name.Contains(input.OrgName))
                .Where(t => t.BizCode.Contains(input.OrgCode))
                .Where(t => t.CustomCode.Contains(input.CustomCode));

            List<Org> list = qry.ToList<Org>(); 

            var qry1 = base.CreateFilteredQuery(input);
            List<Org> listParent = new List<Org>();
            GetParentOrgs(listParent, list[0].ParentId, qry1);
            return qry.Union<Org>(listParent);

        }

        private void GetParentOrgs(List<Org> orgs, int ParentId, IQueryable<Org> listOrgs)
        {

            List<Org> lstOrgs = listOrgs.Where(x => x.Id == ParentId).ToList();

            if (lstOrgs == null || lstOrgs .Count <= 0)
            {
                return;
            }
            else
            {
                for (int i = 0; i < lstOrgs.Count; i++)
                {

                    var org= lstOrgs[i];
                    if (!orgs.Contains(org))
                    {
                        orgs.Add(org);
                    }                    
                    GetParentOrgs(orgs, dr.ParentId, listOrgs);
                }
            }
        }

 

    6.在Visual Studio 2017中按F5運行應用程序。promise

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

    8.在主界面的菜單中，選擇「Business->組織管理」菜單項，瀏覽器中呈現一個貨物信息列表與四個按鈕。以下圖。服務器

 

      9. 咱們發現沒有顯示數據，那麼數據是否已經獲取呢，咱們在瀏覽器中按F12,而後再次點擊「組織管理」菜單，獲得下圖。發現數據已經獲取。

 

      10. 從上圖中能夠看出這個返回的結果是通過ABP包裝後的結果。ABP把它包裝成一個MvcAjaxResponse對象，而這個包裝過的結果卻不是TreeGrid所須要的json格式字符串。咱們先解釋一下這些屬性：

     success：一個布爾值（true或false），指示操做的是否成功，若是爲true，abp.ajax解板promise並調用done處理程序，若是爲false（若是有方法調用中拋出異常），它調用fail處理程序，並使用abp.message.error函數顯示error信息。

    result：返回控制器裏操做的結果，若是success爲true時服務器發送一個返回值後，它纔可用。

    error：若是success爲false，這個屬性包含一個錯誤明細信息的對象。

    targetUrl：提供一個URL給服務端，在有須要的時候，把客戶端定向到這個URL。

    unAuthorizedRequest：服務端給客戶端一個通知：這個操做未被認證或用戶未被認證。若是爲true，abp.ajax從新載入當前頁面。

    _abp：一個特殊的標誌，表示響應是ABP包裝的，你不須要使用它，abp.ajax會處理它。

 

     11.知道了問題所在，在Visual Studio 2017的「解決方案資源管理器」中，右鍵單擊「ABP.TPLMS.Application」項目的 「Orgs」文件夾中，找到OrgAppService.cs文件。重寫GetAll方法，並加上DontWrapResult特性，讓ABP不要進行包裝。代碼以下。    

   [DontWrapResult]
        public override Task<PagedResultDto<OrgDto>> GetAll(PagedOrgResultRequestDto input)
        {
            return base.GetAll(input);
        }

 

     12. 重複上面的第六、七、8步。獲得以下圖結果，返回的JSON數據，仍是沒法讓treeGrid顯示記錄。

 

      13.咱們發現TreeGrid能接受的JSON數據與WebAPI接口返回的JSON數據。仍是有不同的地方，WebpAPI接口返回的總數是totalCount，而不是「total」，接口返回的數據集合是items，而不是「rows」。

WebAPI接口返回的JSON數據：

 

{"totalCount":13,"items":[
{"name":"虹橋火車站店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":true,"iconName":"",
"status":1,"type":1,"bizCode":"SHHQHCZ","customCode":"2011","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",
"createId":0,"sortNo":0,"_parentId":7,"id":15},
{"name":"迪斯尼店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":false,"iconName":"",
"status":1,"type":1,"bizCode":"SHDSN","customCode":"1","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",
"createId":0,"sortNo":0,"_parentId":7,"id":14},
{"name":"上海陸家嘴店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":true,"iconName":"",
"status":1,"type":1,"bizCode":"SHLJZ","customCode":"2010","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",
"createId":0,"sortNo":0,"_parentId":7,"id":13}]}
 其餘略

 

 

Treegird能接受的JSON數據：

 

{"total":13,"rows":[
{"name":"虹橋火車站店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":true,"iconName":"",
"status":1,"type":1,"bizCode":"SHHQHCZ","customCode":"2011","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",
"createId":0,"sortNo":0,"_parentId":7,"id":15},
{"name":"迪斯尼店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":false,
"iconName":"","status":1,"type":1,"bizCode":"SHDSN","customCode":"1","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",
"createId":0,"sortNo":0,"_parentId":7,"id":14},
{"name":"上海陸家嘴店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":true,"iconName":"",
"status":1,"type":1,"bizCode":"SHLJZ","customCode":"2010","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",
"createId":0,"sortNo":0,"_parentId":7,"id":13}]} 
 其餘略

 

      14.如今咱們知道了兩種的不一樣，咱們來建立一個咱們須要的類。在Visual Studio 2017的「解決方案資源管理器」中，右鍵單擊「ABP.TPLMS.Application」項目的 「Orgs\Dto」文件夾中，在彈出菜單中「添加->類」。 

 

     15.建立一個新的類「PagedOrgResultDto」。這個類的代碼以下。

namespace ABP.TPLMS.Orgs.Dto

{

    public class PagedOrgResultDto<T>
    {

        public int Total
        {
            get;
            set;
        }
        public IReadOnlyList<T> Rows
        { get; set; }

    }
}
      16.在Visual Studio 2017的「解決方案資源管理器」中，左鍵單擊「ABP.TPLMS.Application」項目的 「Orgs」文件夾中，找到OrgAppService.cs文件。添加一個新的方法GetAllOrgs方法，並加上DontWrapResult特性，讓ABP不要進行包裝。代碼以下。        
    [DontWrapResult]
        public  PagedOrgResultDto<OrgDto> GetAllOrgs(PagedOrgResultRequestDto input)
        {

            PagedOrgResultDto<OrgDto> orgs = new PagedOrgResultDto<OrgDto>();
                    var allOrgs=GetAll(input);
            orgs.Rows = allOrgs.Result.Items;
            orgs.Total = allOrgs.Result.TotalCount;
            return orgs;
        }

 

      17. 在Visual Studio 2017的「解決方案資源管理器」中，找到領域層「ABP.TPLMS.Web.Mvc」項目中的wwwroot目錄下的view-resources\Orgs文件夾下，找到Index.js文件，把 $("#dgOrg").treegrid方法 中的URL屬性改成abp.appPath + "api/services/app/org/GetAllOrgs"。

     18. 重複上面的第六、七、8步，並在瀏覽器中按F12,打開調試器。獲得以下圖結果，仍是沒法讓treeGrid顯示記錄，雖說已經返回的符合treeGrid須要的JSON數據。仔細看下圖，咱們發現total是13，而實際的記錄卻只有10條。 

 

     19. 在Visual Studio 2017的「解決方案資源管理器」中，左鍵單擊「ABP.TPLMS.Application」項目的 「Orgs」文件夾中，找到OrgAppService.cs文件。在GetAllOrgs方法中設置斷點，而後在頁面上點擊「刷新」按鈕，咱們發現其中有個屬性MaxResultCount的值爲10。以下圖。

 

     20. 在Visual Studio 2017的「解決方案資源管理器」中，修改GetAllOrgs方法中的代碼。代碼以下。     

 [DontWrapResult]
        public  PagedOrgResultDto<OrgDto> GetAllOrgs(PagedOrgResultRequestDto input)
        {

            PagedOrgResultDto<OrgDto> orgs = new PagedOrgResultDto<OrgDto>();
            input.MaxResultCount = 1000;//這裏能夠修改成根據傳遞參數來決定數量

            var allOrgs=GetAll(input);
            orgs.Rows = allOrgs.Result.Items;
            orgs.Total = allOrgs.Result.TotalCount;
            return orgs;
        }

 

      21. 重複上面的第六、七、8步。獲得以下圖結果，返回的JSON數據，仍是沒法讓treeGrid顯示記錄。

 

    22.咱們發現TreeGrid能接受的JSON數據與WebAPI接口返回的JSON數據。仍是有不同的地方，WebpAPI接口返回的JSON數據是首字母小寫，此處，全部屬性都是小駱峯式命名，即便它們在服務端是大駱峯式命名。

WebAPI接口返回的JSON數據：

 

{"total":13,"rows":
[{"name":"虹橋火車站店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":true,"iconName":"",

"status":1,"type":1,"bizCode":"SHHQHCZ","customCode":"2011","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",

"createId":0,"sortNo":0,"_parentId":7,"id":15},
{"name":"迪斯尼店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":false,"iconName":"",

"status":1,"type":1,"bizCode":"SHDSN","customCode":"1","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",

"createId":0,"sortNo":0,"_parentId":7,"id":14},
{"name":"上海陸家嘴店","hotKey":"","parentId":7,"parentName":"上海公司","isLeaf":true,"isAutoExpand":true,"iconName":"",

"status":1,"type":1,"bizCode":"SHLJZ","customCode":"2010","creationTime":"0001-01-01T00:00:00","updateTime":"0001-01-01T00:00:00",

"createId":0,"sortNo":0,"_parentId":7,"id":13}]}  
其餘略

 

      23.咱們再來查看Index.js文件中的javascipt代碼，指定字段名稱的地方是首字母大小。 在Visual Studio 2017的「解決方案資源管理器」中，找到領域層「ABP.TPLMS.Web.Mvc」項目中的wwwroot目錄下的view-resources\Orgs文件夾下，找到Index.js文件，修改initable函數。以下。

function initable() {
    $("#dgOrg").treegrid({
       url: abp.appPath + "api/services/app/org/GetAllOrgs",
       method:"GET",
        title: "組織管理",
        pagination: false,
        toolbar: "#dg-button",
        fit: true,
        fitColumns: false,
        loadMsg: "正在加載組織信息...",
        nowarp: false,
        border: false,
       idField: "id", sortName: "id", sortOrder: "asc",
        treeField: "name",
        frozenColumns: [[//凍結列
            {
                field: "chk", checkbox: true, align: "left", width: 50
            }           

        ]],

        columns: [[
           { title: "編號", field: "id", width: 50, sortable: true }, { title: "組織名稱", field: "name", width: 200, sortable: true }, { title: "代碼", field: "bizCode", width: 100, sortable: true }, { title: "海關代碼", field: "customCode", width: 100, sortable: true }, { title: "狀態", field: "status", width: 80, sortable: false }, { title: "類型", field: "type", width: 80, sortable: false }, { title: "父節點", field: "parentName", width: 120, sortable: false }, { title: '建立時間', field: 'creationTime', width: 130, align: 'center' }
        ]]
    });
}
    24. 重複上面的第六、七、8步，咱們終於獲得了查詢數據並顯示在頁面中了，如下圖所示。

    25.在「組織代碼」中輸入「SH」，而後點擊「查詢」按鈕。以下圖。至此經過WebAPI接口進行查詢功能完成。

 

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