<rt-form id="{{vm.form.name}}" name="{{vm.form.name}}" rt-auto-height="vm.form.autoHeight" class="edit_form" novalidate>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row">
                <div class="col-sm-2">
                    <button class="btn btn-link" type="button" id="btnClose" ng-click="vm.form.hide()">
                            <i class="fa fa-sign-out"></i> 关闭
                        </button>
                </div>
                <!-- div[.col-sm-2] -->
                <div class="col-sm-10">
                    <div class="pull-right">
                        <rt-button id="btnSave" rt-style="link" rt-title="保存" rt-icon="floppy-o" ng-click="buttonSaveClick()">
                        </rt-button>
                    </div>
                </div>
                <!-- div[.col-sm-10] -->
            </div>
        </div>
        <!-- div[.row] -->
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#A1{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Web菜单</a>
                </li>
                <li>
                    <a href="#A2{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Mobile菜单</a>
                </li>
                <li>
                    <a href="#A3{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Web报表菜单</a>
                </li>
                <li>
                    <a href="#A4{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Mobile报表菜单</a>
                </li>
                <li>
                    <a href="#A7{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Web办公菜单</a>
                </li>
                <li>
                    <a href="#A5{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Mobile办公菜单</a>
                </li>
                <li>
                    <a href="#A8{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Web仪表板菜单</a>
                </li>
                <li>
                    <a href="#A6{{vm.form.Id}}" onclick="return false;" data-toggle="tab">Mobile仪表板菜单</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="A1{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">

                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in webTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!webTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                    <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                        <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                               ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                               ng-disabled="!webTreeModel.CanEdit" />
                                                                        {{secondLevel.TblMdlIdName}}
                                                                    </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                    </div>


                </div>
                <div class="tab-pane" id="A2{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in mobileTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!mobileTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                        <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                            <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                   ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                   ng-disabled="!mobileTreeModel.CanEdit" />
                                                                            {{secondLevel.TblMdlIdName}}
                                                                        </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>


                <div class="tab-pane" id="A3{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in reportTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!reportTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                                <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                                    <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                           ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                           ng-disabled="!reportTreeModel.CanEdit"/>
                                                                                    {{secondLevel.TblMdlIdName}}
                                                                                </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="A4{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in mobilereportTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!mobilereportTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                                    <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                                        <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                               ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                               ng-disabled="!mobilereportTreeModel.CanEdit" />
                                                                                        {{secondLevel.TblMdlIdName}}
                                                                                    </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="A7{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in weboaTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!weboaTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                                        <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                                            <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                                   ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                                   ng-disabled="!weboaTreeModel.CanEdit" />
                                                                                            {{secondLevel.TblMdlIdName}}
                                                                                        </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="A5{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in mobileoaTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!mobileoaTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                                        <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                                            <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                                   ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                                   ng-disabled="!mobileoaTreeModel.CanEdit" />
                                                                                            {{secondLevel.TblMdlIdName}}
                                                                                        </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="A8{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in webdashboardTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!webdashboardTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                                            <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                                                <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                                       ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                                       ng-disabled="!webdashboardTreeModel.CanEdit" />
                                                                                                {{secondLevel.TblMdlIdName}}
                                                                                            </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="A6{{vm.form.Id}}">
                    <style>
                        .tree li {
                            cursor: pointer;
                        }

                        .tree ul {
                            list-style: none;
                        }
                    </style>
                    <div class="panel panel-default" ng-style="moduleStyle()">
                        <div class="tree">
                            <ul>
                                <li ng-repeat="firstLevel in mobiledashboardTreeModel.RoleAllSystemMenuModelList" ng-class="{closed:firstLevel.IsClosed}">
                                    <div>
                                        <input type="checkbox" ng-model="firstLevel.HasPrivilege" ng-change="firstLevelChanged(firstLevel)" ng-disabled="!mobiledashboardTreeModel.CanEdit"
                                        />
                                        <span ng-click="firstLevel.IsClosed=!firstLevel.IsClosed">
                                                                                            <span class="glyphicon" ng-class="firstLevel.IsClosed?'glyphicon-plus':'glyphicon-minus'"></span>                                        {{firstLevel.TblMdlIdName}}
                                        </span>
                                    </div>
                                    <ul ng-class="{hidden: firstLevel.IsClosed}">
                                        <li ng-repeat="secondLevel in firstLevel.Children" ng-class="{IsClosed:secondLevel.IsClosed}">
                                            <label>
                                                                                                <input type="checkbox" ng-model="secondLevel.HasPrivilege"
                                                                                                       ng-change="secondLevelChanged(secondLevel, firstLevel)"
                                                                                                       ng-disabled="!mobiledashboardTreeModel.CanEdit" />
                                                                                                {{secondLevel.TblMdlIdName}}
                                                                                            </label>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- div[#1, .tab-pane] -->
        </div>
        <!-- div[.tab-content] -->
    </div>
    </div>
</rt-form>