abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之八(三十四)
abp(net core)+easyui+efcore實現倉儲管理系統目錄
abp(net core)+easyui+efcore實現倉儲管理系統——ABP總體介紹(一) abp(net core)+easyui+efcore實現倉儲管理系統——解決方案介紹(二) abp(net core)+easyui+efcore實現倉儲管理系統——領域層建立實體(三) abp(net core)+easyui+efcore實現倉儲管理系統——定義倉儲並實現 (四)abp(net core)+easyui+efcore實現倉儲管理系統——建立應用服務(五)
abp(net core)+easyui+efcore實現倉儲管理系統——EasyUI前端頁面框架 (十八)
在上面文章abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之七(三十三) 的學習之後,我們知道了ABP自動幫助我們生成了WebAPI介面,接下我們通過修改指令碼檔案中的新增、更新與刪除功能的指令碼,通過這些WebAPI介面實現增刪改功能,而不是通過Controller來實現。
十四、修改新增、更新與刪除指令碼
1. 在Visual Studio 2017的“解決方案資源管理器”中,找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot目錄下的view-resources\orgs目錄中的找到Index.js檔案。
2. 在Index.js檔案中,我們寫入完整的指令碼程式碼。程式碼如下:
//------------------------組織管理-->組織資訊---------------------------------// //重新整理資料 function initable() { $("#dgOrg").treegrid({ url: "/Orgs/List", title: "組織管理", pagination: false, 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' } ]] }); } function reloaded() { //reload $("#reload").click(function () { $('#dgOrg').treegrid('reload'); }); } //修改點選按鈕事件 function updOrgInfo() { $("#edit").click(function () { BindTree(); //判斷選擇的中 var row = $("#dgOrg").treegrid('getSelected'); if (row) { $.messager.confirm('編輯', '您想要編輯嗎?', function (r) { if (r) { //先繫結 showOrg(row); //開啟對話方塊編輯 $("#divAddUpdOrg").dialog({ closed: false, title: "修改組織資訊", modal: true, width: 600, height: 450, collapsible: true, minimizable: true, maximizable: true, resizable: true, }); } }); } else { $.messager.alert('提示', ' 請選擇要編輯的行!', 'warning'); } }); } //刪除 function deleteOrg() { $("#del").click(function () { var rows = $("#dgOrg").datagrid("getSelections"); if (rows.length > 0) { $.messager.confirm("提示", "確定要刪除嗎?", function (res) { if (res) { var codes = []; //重要不是{} for (var i = 0; i < rows.length; i++) { codes.push(rows[i].Id); _orgService.delete({ id: rows[i].Id }).done(function () { $.messager.alert("提示", "刪除成功!"); $("#dgOrg").datagrid("clearChecked"); $("#dgOrg").datagrid("clearSelections"); $('#dgOrg').treegrid('reload'); }); } } }); } }) } //清空文字框 function clearAll() { $("#IDUpdate").val(""); $("#UpdBizCode").val(""); $("#NameUpdate").val(""); $("#UpdCustomCode").val(""); $(':input[name]', this).each(function () { $(this).val(""); }); } var _orgService = abp.services.app.org; var _$modal = $("#divAddUpdOrg").parent(); var _$form = _$modal.find('form'); //彈出 新增對話方塊 function showOrgDialog() { $("#add").click(function () { clearAll(); BindTree(); $("#divAddUpdOrg").dialog({ closed: false, title: "新增組織資訊", modal: true, width: 600, height: 450, collapsible: true, minimizable: true, maximizable: true, resizable: true }); }); $("#btnSave").click(function () { //儲存 if (!_$form.valid()) { return; } var id = $("#IDUpdate").val(); if (id == "" || id == undefined || id=="0") { //驗證 $.messager.confirm('確認', '您確認要儲存嗎?', function (r) { if (r) { $("#IDUpdate").val("0"); var postData = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js if (postData == null || postData == undefined || postData.Name == "" || postData.BizCode == "") { $.messager.alert('提示', ' 請填寫相關必填項!', 'warning'); return; } abp.ui.setBusy(_$modal); _orgService.create(postData).done(function () { $.messager.alert("提示", "儲存成功!"); $("#IDUpdate").val(""); _$modal.modal('hide'); $("#divAddUpdOrg").dialog("close"); initable(); //reload page to see new user! }).always(function () { abp.ui.clearBusy(_$modal); }); }3. 在Visual Studio 2017的“解決方案資源管理器”中,找到“ABP.TPLMS.Web.Mvc”專案中的Views目錄下的Org目錄中的Index.cshtml檔案。雙擊開啟此檔案,在檔案的頂部寫入以下程式碼,引用指令碼。
}) } else { saveDetail(); } }); } function saveDetail() { if (!_$form.valid()) { return; } $.messager.confirm('確認', '您確認要修改嗎?', function (r) { var postData = _$form.serializeFormToObject(); if (postData==null || postData==undefined || postData.BizCode == "" || postData.Name == "") { $.messager.alert('提示', ' 請填寫相關必填項!', 'warning'); return; } abp.ui.setBusy(_$modal); _orgService.update(postData).done(function () { $.messager.alert("提示", "修改成功!"); _$modal.modal('hide'); $("#divAddUpdOrg").dialog("close"); initable(); //reload page to see new user! }).always(function () { abp.ui.clearBusy(_$modal); }); }) } function showOrg(row) { $("#IDUpdate").val(row.Id); $("#NameUpdate").val(row.Name); $("#UpdBizCode").val(row.BizCode); $("#UpdType").val(row.Type); $("#UpdCustomCode").val(row.CustomCode); $("#UpdIsAutoExpand").val(row.IsAutoExpand); $("#UpdIsLeaf").val(row.IsLeaf); $("#UpdStatus").val(row.Status); $("#UpdHotKey").val(row.HotKey); $("#UpdIconName").val(row.IconName); $("#RemarkUpdate").val(row.Remark); $("#AddTree").combotree('setValue', row.ParentId); $("#AddTree").combotree('setText', row.ParentName); $('#UpdParentName').val(row.ParentName); } function BindTree() { $('#AddTree').combotree({ url: '/Orgs/GetJsonTree', valueField: 'Id', textField: 'Name', multiple: false, editable: false, method: 'get', panelHeight: 'auto', checkbox: false, //required: true, //全部摺疊 onLoadSuccess: function (node, data) { $('#AddTree').combotree('tree').tree("expandAll"); //collapseAll }, onSelect: function (node) { $('#UpdParentName').val(node.text); } }); } //------------------------系統管理-->組織資訊結束------------------------------//
@section scripts { <script src="~/view-resources/Views/orgs/Index.js" asp-append-version="true"></script> <script type="text/javascript"> $(function () { initable(); reloaded(); updOrgInfo(); showOrgDialog(); deleteOrg(); }); </script> }
十五、測試修改與刪除組織部門資訊
1.在Visual Studio 2017的解決方案資源管理器中,按F5執行應用程式。
2.在瀏覽器中的位址列中輸入“http://localhost:5000/”,然後輸入管理員使用者名稱進行登入。
3.在主介面的選單中,選擇“Business->組織管理”選單項,瀏覽器中呈現一個組織資訊列表與四個按鈕。
4.然後在組織資訊列表中選中一條貨物資訊,然後使用滑鼠點選“修改”按鈕,對組織資訊進行修改。如下圖。
5.對於貨物資訊進行修改完成之後,點選“儲存”按鈕,彈出一個“您確認要修改嗎?”對話方塊。點選對話方塊中的“確定”按鈕。如下圖。
6.如果修改成功,會有一個“修改成功”的提示資訊,同時更新組織資訊列表。如下圖。
7.在組織資訊列表中選中一條貨物資訊,然後使用滑鼠點選“刪除”按鈕。會彈出一個“您確認要刪除嗎?”對話方塊。點選對話方塊中的“確定”按鈕。如下圖。
8.如果刪除成功,會有一個“刪除成功!”的提示資訊,同時更新組織資訊列表。如下圖。