bp(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實現倉儲管理系統——展現層實現增刪改查之控制器（六） 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實現倉儲管理系統——使用 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之貨物管理八(二十六)  abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之一(二十七) abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之二(二十八) abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之三(二十九)    

       在上一篇文章abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之三(二十九) 中實現了組織管理的列表頁面。在今天我們學習如何新增組織部門資訊。

九、新增組織部門資訊

1. 在Visual Studio 2017的“解決方案資源管理器”中，左鍵單擊在展現層的“ABP.TPLMS.Web.MVC”專案中的Views目錄。找到Index.cshmtl檔案。在此檔案中新增檢視程式碼。程式碼如下。

<div id="divAddUpdOrg" class="easyui-dialog" closed="true" data-options="buttons: '#dlg-buttons'">
    <form name="OrgEditForm" role="form" novalidate class="form-validation">
        <table>
            <tr>
                <td><input type="hidden" name="Id" id="IDUpdate" /></td>
            </tr>
            <tr>
                <td>組織名稱：</td>
                <td>
                    <input type="text" id="NameUpdate" name="Name" 
class="form-control input-sm" />

                </td>
            </tr>
            <tr>
                <td> 組織程式碼：</td>
                <td><input type="text" id="UpdBizCode" name="BizCode" 
class="form-control input-sm" /></td>

            </tr>
            <tr>
                <td>型別：</td>
                <td>
                    <input type="text" id="UpdType" name="Type" 
class="form-control input-sm" />
                </td>
            </tr>
            <tr>
                <td> 關區程式碼：</td>

                <td><input type="text" id="UpdCustomCode" name="CustomCode" 
class="form-control input-sm" /></td>

            </tr>
            <tr>
                <td>自動展開：</td>
                <td>
                   <input type="checkbox" id="UpdIsAutoExpand" name="IsAutoExpand"
 class="form-control input-sm" />      
                </td>
            </tr>

            <tr>
                <td>子級：</td>
                <td>
                  <input type="checkbox" id="UpdIsLeaf" name="IsLeaf" 
class="form-control input-sm" />
                </td>
            </tr>
            <tr>
                <td>狀態：</td>
                <td>
                    <input type="text" id="UpdStatus" name="Status" 
class="form-control input-sm" />
                </td>
            </tr>
            <tr>

                <td>上級組織：</td>
                <td>
           <select id="AddTree" name="ParentName" class="easyui-combotree" ></select>
                </td>
            </tr>
            <tr>

                <td>熱鍵：</td>
                <td>
                    <input id="UpdHotKey" name="HotKey" class="form-control input-sm" />

                </td>
            </tr>
            <tr>
                <td>圖示：</td>
                <td>

                    <input id="UpdIconName" name="IconName" class="form-control input-sm" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="UpdParentId" name="ParentId" type="hidden" />
                </td>
            </tr>

            <tr>
                <td>備註：</td>
                <td>
                    <input type="text" id="RemarkUpdate" name="URemark" 
class="form-control input-sm" />

                </td>
            </tr>
        </table>
    </form>
</div>
 

<div id="dlg-buttons">
    <input type="submit" id="btnSave" value="儲存" class="btn btn-primary" />
    <input type="submit" id="btnCancle" value="取消" class="btn btn-info" />
</div>

2. 在Visual Studio 2017的“解決方案資源管理器”中，找到領域層“ABP.TPLMS.Web.Mvc”專案中的wwwroot\view-resources\Orgs目錄。

3. 在Orgs目錄中找到Index.js檔案。新增新增組織資訊與載入樹的程式碼。程式碼如下。

 

//清空文字框

function clearAll() {
    $("#IDUpdate").val("");
    $("#UpdBizCode").val("");
    $(':disabled[name]', this).each(function () {
            $(this).val("");
        });
}

var _orgService = abp.services.app.org;
var _$modal = $('#divAddUpdOrg');
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 () {
        //  alert('1');
        //啟用       
        //儲存
        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 () {                                                               
                        $("#IDUpdate").val("");
                        _$modal.modal('hide');
                        $("#divAddUpdOrg").dialog("close");
                        initable(); //reload page to see new user!
                    }).always(function () {
                        abp.ui.clearBusy(_$modal);
                        });
                  }
            })
        }
        else {
            saveDetail();
        }
    });

}

 

function saveDetail() { 

    $.messager.confirm('確認', '您確認要修改嗎？', function (r) {            

            var postData = GetOrg();
            if (postData==null || postData==undefined || postData.BizCode == "" 
|| postData.Name == "") {
                $.messager.alert('提示', ' 請填寫相關必填項！', 'warning');
                return;
            }          

            $.post("/Orgs/Update", postData, function (data) {
               // alert(data);
                if (data=="OK") {
                    $.messager.alert("提示", "修改成功！");                
                    $("#divAddUpdOrg").dialog("close");               
                    initable();                }

                else {
                    $.messager.alert("提示", data.msg);
                    return;
                }           

            });   
        })   
}

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) {
            $('#UpdParentId').val(node.id);
           // alert(node.id);
        }
    });

}