<div class="role-manage" style="height:100%;">
<div class="menu-header">
<div class="menu-title" translate="roleTitle"></div>
<div class="menu-log">
<a class="btn btn-not-important" href="javascript:void(0)" ng-click="showOperateLogPop()"> <i class="material-icons">description</i><span translate="log"></span></a>
</div>
</div>
<div class="content-container" style="height:100%;">
<div class="left-container" id="left-container" style="height: calc(100% - 73px)!important">
<div class="role-list-container" style="height:100%;">
<div class="search-container">
<input class="search-input" type="text" value="" placeholder="{{'Search' | translate}}" ng-model="searchText" /><span class="glyphicon glyphicon-search input-group-addon search-icon"></span>
</div>
<div class="search-btn-container">
<button ng-disabled="!hasAddPermission" class="btn btn-in-panel-big" ng-click="newRole()"><i class="material-icons button-icons">add_circle_outline</i> {{'createRole' | translate}}</button>
</div>
<div style="margin-top: 6px;">
<span style="font-weight:bold;margin-left: 10px;">角色列表</span>
<div style="float:right; margin-right: 7px; z-index:1000; position:relative;">
<span ng-if="hasEditPermission" ng-click="addRoleCategory()">
<i class="material-icons button-icons" style="margin-right: 0px;">add_circle_outline</i> {{'addRoleCategory' | translate}}
</span>
<div class="import-date-pickers" style="line-height:80px;width:523px;top:25px;" ng-show="isShow">
<form class="form-horizontal" name="addRoleCategoryForm">
<!--角色分类名称-->
<div class="search-container" style="width: 250px;float:left;margin-top:23px;">
<input class="search-input" name="roleCategoryName" type="text" value="" placeholder="{{'inputRoleCategoryTitle' | translate}}" ng-model="newRoleCategory" required maxlength="50" />
<span style="color:red" ng-show="addRoleCategoryForm.roleCategoryName.$dirty && addRoleCategoryForm.roleCategoryName.$error.required" translate="Require"></span>
</div>
<div style="float:left;margin-left:20px;">
<button type="button" class="btn btn-primary"
ng-click="createRoleCategory()" translate="Confirm"
ng-disabled="addRoleCategoryForm.roleCategoryName.$invalid"></button>
<button type="button" class="btn btn-third" data-dismiss="modal" ng-click="cancelRoleCategoryPanel()" translate="Cancel"></button>
</div>
</form>
</div>
</div>
</div>
<div class="clear"></div>
<div class="role-tree-container" style="height: calc(100% - 113px)!important">
<script type="text/ng-template" id="role_tree_node_template">
<div class="control"
ng-class="{'tree-item-select':role.id===selectedRole.id && !(role.subRoles && role.subRoles.length>0),'role-category':role.subRoles && role.subRoles.length>0}"
ng-if="searchText === '' || role.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1"
style="padding-left:45px;border-radius:5px;">
<div ng-if="role.isRoleCategory" class="expander" style="line-height:20px;" ng-class="{true:'',false:''}[role.id===selectedRole.id && !role.isRoleCategory]">
<i class="fa fa-plus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: !collapsed}"></i>
<i class="fa fa-minus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: collapsed}"></i>
</div>
<!--角色分类名称-->
<div ng-if="role.isRoleCategory || role.id == '00000000-0000-0000-0000-000000000000'"
ng-click="selectRole(role);"
class="root-node"
ng-mouseover="openRolePanel = true"
ng-mouseleave="openRolePanel = false"
title="{{::role.name}}" style="width:95%; padding-right:0px; height:17px;">
<div style="float:left; width:85%; white-space:nowrap" inline-edit="role.name"
inline-edit-validation="validateOnServer(newValue,role)"
inline-edit-btn-save="Save"
inline-edit-btn-cancel="Cancel"
inline-edit-delete="deleteRoleCategoryName(role)"
has-edit-permission="hasEditPermission"></div>
</div>
<!--具体角色-->
<span ng-if="!role.isRoleCategory && role.id != '00000000-0000-0000-0000-000000000000'"
title="{{::role.name}}"
ng-bind-template="{{role.name}}"
ng-click="selectRole(role);"
style="white-space: pre;"
class="sub-node" ng-class="{true:'tree-item-select',false:''}[role.id===selectedRole.id]">
</span>
</div>
<ol ui-tree-nodes="" ng-model="role.subRoles" ng-class="{hidden:collapsed}">
<li ng-repeat="role in role.subRoles" ui-tree-node ng-include="'role_tree_node_template'">
</li>
</ol>
</script>
<perfect-scrollbar class="scroller"
wheel-propagation="true"
wheel-speed="1"
min-scrollbar-length="20"
style="position: relative;height: 100%">
<div class="role-tree">
<div ui-tree id="tree-root" data-drag-enabled="false" style="margin-left: -29px;margin-top: 12px;">
<ol ui-tree-nodes ng-model="roleList">
<li ng-repeat="role in roleList" ui-tree-node ng-include="'role_tree_node_template'">
</li>
</ol>
</div>
</div>
</perfect-scrollbar>
</div>
</div>
</div>
<div class="right-container" id="right-container" style="height: calc(100% - 73px);">
<div class="align-right" style="margin-top:5px;">
<export-button style="float: right; margin-right: 0px; margin-top: 7px"><export-button>
</div>
<div class="no-data-container" ng-if="roleList==null||roleList.length===0">
<div class="no-data-icon-container">
<div class="no-data-icons">
<i class="material-icons no-data-icon">supervisor_account</i>
</div>
</div>
<div class="no-data-desc">
<span translate="NoRoleDisplay"></span>
</div>
</div>
<div class="actionPanel col-md-12" ng-if="isSelected">
<form class="form-horizontal" name="editRoleForm">
<!--处于角色编辑状态下的UI-->
<div class="row desc" ng-switch="isEdit">
<!--角色名称-->
<div for="RoleName" class="col-sm-12 col-md-12 control-label" translate="roleName" ng-switch-when="true" ng-if="isEdit"></div>
<div class="col-sm-12 col-md-12" style="word-wrap: break-word;margin-top:2px;">
<span ng-switch-when="false" class="role-name">
{{selectedRole.name}}
</span>
<span ng-switch-when="true">
<input style="width: 95%;" class="form-control" id="EditRoleName" maxlength="50" ng-model="roleUpdatedModel.editRoleName" name="roleName" required role-name-unique />
</span>
<span style="color:red" ng-show="editRoleForm.roleName.$error.required" translate="Require"></span>
<p ng-show="editRoleForm.roleName.$error.roleNameUnique && (editRoleForm.roleName.$dirty || editRoleForm.$submitted)" class="has-error label">角色已存在,请重新输入</p>
</div>
<!--角色描述-->
<div ng-switch-when="true" translate="roleDesc" class="col-sm-12 col-md-12 control-label" style="margin-top:8px;"></div>
<div class="col-sm-12 col-md-12" style="word-wrap: break-word;margin-top:8px;">
<label ng-switch-when="false" translate="roleDesc"
class="col-sm-2 col-md-2 control-label"
style="margin-top:-5px;margin-left: -18px; font-weight: normal;" ng-if="false"></label>
<div style="display:inline-block;padding:0px 6px 0px 0px;" class="col-sm-12">
<span ng-switch-when="false">
{{'roleDesc'|translate}}{{selectedRole.description}}
</span>
</div>
<span ng-switch-when="true">
<textarea style="width: 95%;" class="form-control"
id="EditDescription"
ng-model="roleUpdatedModel.editDescription"
maxlength="200"></textarea>
</span>
</div>
</div>
<!--保存取消按钮组-->
<div class="row" style="margin-top:15px; margin-left:0px;">
<div ng-switch="isEdit">
<div ng-switch-when="false">
<button class="btn btn-primary" style="margin-left:0px;" ng-click="editRole()" ng-disabled="!hasEditPermission">
<i class="fa fa-pencil-square-o icon-user-modify" aria-hidden="true"></i>
<span class="str-modify" translate="Edit"></span>
</button>
<button class="btn btn-not-important" ng-click="deleteRoleConfirm()" ng-disabled="!hasEditPermission">
<i class="fa fa-trash" aria-hidden="true" ng-click="removeUser(item)"></i>
<span class="str-modify" translate="Delete"></span>
</button>
</div>
<div ng-switch-when="true" style="margin-left: -10px;">
<button class="btn btn-primary" ng-disabled="editRoleForm.roleName.$invalid" ng-click="saveRole()">
<i class="fa fa-floppy-o" aria-hidden="true" ng-disabled="editRoleForm.roleName.$invalid"></i>
<span class="str-modify" translate="Save"></span>
</button>
<button class="btn btn-not-important" ng-click="cancelSave()">
<i class="fa fa-times" aria-hidden="true"></i>
<span class="str-modify" translate="Cancel" ng-disabled="editRoleForm.roleName.$invalid"></span>
</button>
</div>
</div>
</div>
</form>
<hr />
<script type="text/ng-template" id="tree_multi_node_template">
<div ng-if="item.subMenus && item.subMenus.length > 0" class="expander-container">
<i class="fa fa-plus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: !collapsed}"></i>
<i class="fa fa-minus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: collapsed}"></i>
</div>
<div ui-tree-handle>
<input type="checkbox" ng-disabled="!isEdit" ng-model="item.isChecked" ng-click="toggleItemSub(item)">
<div class="tree-menu-item" ng-class="{active:selectedItem == item}" ng-bind-template="{{item.name}}" ng-click="selectMenu(menu)"></div>
</div>
<ul ui-tree-nodes="" ng-model="item.subMenus" ng-class="{hidden: collapsed}">
<li ng-repeat="item in item.subMenus" ui-tree-node ng-include="'tree_multi_node_template'">
</li>
</ul>
</script>
<div class="col-sm-5 col-md-5">
<!--角色权限-->
<div class="row tree-header"><span translate="rolePermissionTitle"></span></div>
<!-- 加载中 -->
<div class="content-padding" ng-show="loadingMenu">
<div class="loading-pic">
<img alt="loading" src="../../../../app-resources/images/load-indicator.gif" />
</div>
</div>
<div ng-switch="isEdit">
<div ng-show="!isEdit" style="height:420px;">
<!--显示角色有权限的列表-->
<perfect-scrollbar class="scroller"
wheel-propagation="true"
wheel-speed="1"
min-scrollbar-length="20"
style="position: relative;margin-top:15px;">
<div class="dx-viewport grid-container">
<div id="GridContainerPermission" dx-tree-view="permissionTreeViewOptions" style="width: 92%;">
</div>
</div>
</perfect-scrollbar>
</div>
<div ng-show="isEdit" style="height:420px;">
<!--编辑状态下，全部的权限列表-->
<perfect-scrollbar class="scroller"
wheel-propagation="true"
wheel-speed="1"
min-scrollbar-length="20"
style="position: relative;margin-top:15px;">
<div dx-text-box="searchOptions"></div>
<div class="dx-viewport grid-container">
<div id="GridContainerPermission" dx-tree-view="allPermissionTreeViewOptions" style="width: 92%;">
</div>
</div>
</perfect-scrollbar>
</div>
</div>
</div>
<div class="col-sm-1 col-md-1"></div>
<div class="col-sm-5 col-md-5">
<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1" ng-click="gotoPage1()">
{{'relatedPermissionUsersTitle' | translate}}
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2" ng-click="gotoPage2()">
{{'ExtraUser' | translate}}
</md-nav-item>
</md-nav-bar>
<div class="ext-content">
<div ng-show="currentNavItem==='page1'">
<div style="display: inline-block; margin-top: 5px;"><button ng-disabled="!hasEditPermission" class=" btn btn-in-grid" ng-click="addUser()"><i class="material-icons middle">add_circle_outline</i><span> {{'AddUser' | translate }}</span></button></div>
<div class="dx-viewport grid-container grid-body">
<div id="leftUserGridContainer" dx-data-grid="leftUserdatagridOptions"></div>
</div>
</div>
<div ng-show="currentNavItem==='page2'">
<!--额外添加此角色的用户-->
<div class="dx-viewport grid-container grid-body">
<div id="rightUserGridContainer" dx-data-grid="rightUserdatagridOptions"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="addRolePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" style="width:550px;height:200px;" role="document">
<div class="modal-content">
<form class="form-horizontal" name="newRoleForm">
<div class="modal-header">
<div class="modal-title"><span translate="createRole"></span></div>
</div>
<div class="modal-body">
<!--角色名称-->
<div class="form-group">
<label for="RoleName" class="col-sm-3 control-label" translate="roleName"></label>
<div class="col-sm-11" style="width:61.67%">
<input class="form-control" id="roleName"
ng-model="newRoleModel.Name" name="roleName" required style="width:320px;" maxlength="50" />
</div>
<div style="margin-top:7px;">
<span style="color:red" ng-show="newRoleForm.roleName.$invalid">
<span ng-show="newRoleForm.roleName.$error.required" translate="Require"></span>
</span>
<span style="color:red" ng-show="roleNameExist" translate="roleNameExist"></span>
</div>
</div>
<!--角色类别-->
<div class="form-group">
<label for="ServiceType" class="col-sm-3 control-label" translate="roleCategory"></label>
<div class="col-sm-11" style="width:61.67%">
<select name="service_id"
class="form-control"
style="width: 320px;"
ng-model="roleCategory"
ng-options="role.roleCategoryID as role.name for role in roleList"
required ng-change="fillServiceType()"></select>
</div>
<div style="margin-top:7px;">
<span style="color:red" ng-show="newRoleForm.service_id.$error.required" translate="Require"></span>
</div>
</div>
<!--角色描述-->
<div class="form-group">
<label for="Description" class="col-sm-3 control-label" translate="roleDescLabel"></label>
<div class="col-sm-6">
<textarea class="form-control" id="Description" ng-model="newRoleModel.Description" maxlength="200" style="width:320px;"></textarea>
</div>
</div>
<!--权限设置-->
<div class="form-group">
<label for="RolePrivilege" class="col-sm-3 control-label" translate="authoritySetting"></label>
<div class="col-sm-6">
<permission-selector is-dialog
selected-permission-codes="selectedPermissionCodes"
selected-permission-names="selectedPermissionNames"
name="createRoleMenu">
</permission-selector>
</div>
<div>
<span ng-show="notServiceSelected" translate="SelectServiceTypeFirst"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
ng-click="createRole()" translate="Confirm"
ng-disabled="newRoleForm.roleName.$invalid || newRoleForm.service_id.$invalid"></button>
<button type="button" class="btn btn-third" data-dismiss="modal" ng-click="cancelRole()" translate="Cancel"></button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="deleteConfirmPop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" style="width:610px;height:200px;" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" translate="ConfirmDelete"></div>
</div>
<div class="modal-body">
<div><i class="material-icons confirm-warning"></i> <i translate="roleDeleteConfirm"></i>"{{selectedRole.name}}"？</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="deleteRole()" translate="Confirm"></button>
<button type="button" class="btn btn-default" data-dismiss="modal" translate="Cancel"></button>
</div>
</div>
</div>
</div>
<operate-log is-show="isShowLog"></operate-log>
<add-exist-user-modal operate-type="addUserOperateType" is-update="addUserIsUpdate" selected-user-list="selectedUserList" selected-key-items="selectedKeyItems"></add-exist-user-modal>
</div>
</div>