编辑角色树形状态。

src/main/webapp/resources/js/vendor/controllers/forstore/vendor_account_management_ctrl.js

@@ -517,6 +517,15 @@ define(['app/app'], function(app) {
                 data[0].$active = true;
             }
             $scope.resources = data;
+			// if ($scope.role) {
+			// 	angular.forEach($scope.role.resourceItems,function (item) {
+			// 		angular.forEach($scope.resources, function (roleItem) {
+			// 			if (item.id == roleItem.id) {
+			// 				roleItem.$active = true;
+			// 			}
+			// 		})
+			// 	})
+			// }
             $timeout(function () {
                 angular.forEach($scope.resources, function (resource) {
                     var c = 0;
@@ -527,28 +536,68 @@ define(['app/app'], function(app) {
                 });
             }, 100);
         });
+
         $scope.onItemClick = function (resource) {
-            $scope.resourceItems = resource.items;
-            angular.forEach($scope.resources, function (r) {
-                r.$active = false;
-            });
-            resource.$active = true;
+			if (resource.items.length>0) {
+				$scope.resourceItems = resource.items;
+			} else {
+				$scope.resourceItems = [];
+				if (!resource.activeLevel) {
+					resource.activeLevel = true;
+				} else {
+					resource.activeLevel = false;
+				}
+			}
+			setNoActive($scope.resources);
+			resource.$active = true;
         };
+        var setNoActive = function (obj) {
+			angular.forEach(obj, function (r) {
+				r.$active = false;
+				if (r.children) {
+					setNoActive(r.children);
+				}
+			});
+		}
+
         var getChecked = function () {
             var items = [];
             angular.forEach($scope.resources, function (resource) {
-                angular.forEach(resource.items, function (item) {
-                    item.$checked && (items.push(item));
-                });
+				pushCheckedResource(resource, items);
             });
-            $scope.role.resourceItems = items;
+			if ($scope.role) {
+				$scope.role.resourceItems = items;
+			}
         };
+        var pushCheckedResource = function (resource, items) {
+			if (resource.items.length > 0) {
+				angular.forEach(resource.items, function (item) {
+					item.$checked && (items.push(item));
+				});
+			}else {
+				angular.forEach(resource.children, function (item) {
+					pushCheckedResource(item, items);
+				})
+			}
+		}
         $scope.onResourceChange = function (resource) {
-            angular.forEach(resource.items, function (item) {
-                item.$checked = resource.$checked;
-            });
+			levelResourceChecked(resource);
             getChecked();
         };
+        var levelResourceChecked = function (resource) {
+			if (resource.items.length>0) {
+				angular.forEach(resource.items, function (item) {
+					item.$checked = resource.$checked;
+				});
+			} else {
+				angular.forEach(resource.children, function (item) {
+					item.$checked = resource.$checked;
+					levelResourceChecked(item);
+				});
+			}
+
+		}
+
         $scope.onItemChange = function () {
             angular.forEach($scope.resources, function (resource) {
                 if (resource.$active) {

src/main/webapp/resources/view/vendor/modal/role_detail.html

@@ -220,26 +220,26 @@
 		display: table-cell;
 	}
 
-	.choose-inline>.item>ul {
+	.choose-inline> .item >ul.left-list {
 		height: 260px;
 		overflow-x: hidden;
 		overflow-y: scroll;
 	}
 
-	.choose-inline>.item>ul>li {
+	.choose-inline> .item >ul >li {
 		line-height: 30px;
 		padding-left: 5px;
 	}
 
-	.choose-inline>.item>ul>li:hover {
+	/*.choose-inline>.item>ul>li:hover {
 		background: #f1f1f1;
-	}
+	}*/
 
-	.choose-inline>.item>ul>li.active {
+	.choose-inline>.item .list-item.active {
 		background: #d3e3fd;
 	}
 
-	.choose-inline>.item>ul>li:hover {
+	.choose-inline>.item .list-item:hover {
 		background: #d3e3fd;
 		cursor: pointer;
 	}
@@ -255,12 +255,18 @@
 	.choose-inline>.item .caret {
 		float: left;
 		margin-top: 9px;
-		margin-right: 8px;
+		margin-right: 5px;
 		border-left: 5px solid #c7c7c6;
 		border-right: none;
 		border-top: 5px solid transparent;
 		border-bottom: 5px solid transparent;
 	}
+	.choose-inline>.item .caret.active {
+		border-left: 5px solid transparent;
+		border-right: 5px solid transparent;
+		border-top: 5px solid #ff8522;
+		margin-top: 12px;
+	}
 
 	.role-resources input[type="checkbox"] {
 		margin-right: 5px;
@@ -331,6 +337,12 @@
 	.roleForm .modal-body input[type="text"] {
 		border-radius: 0;
 	}
+	.role-tree-level2 >li >div {
+		padding-left: 10px;
+	}
+	.role-tree-level3 >li >div{
+		padding-left: 20px;
+	}
 </style>
 
 <div class="modal-header">
@@ -367,18 +379,46 @@
 			<div>
 				<div class="choose-inline">
 					<div class="item">
-						<ul class="list-unstyled">
-							<li ng-repeat="resource in resources"
-								ng-class="{active: resource.$active}"
-								ng-click="onItemClick(resource)">
-								<label class="role-check-box" ng-class="{active:resource.$checked}">
-									<input id="check_{{resource.id}}" type="checkbox"
-										   ng-model="resource.$checked"
-										   ng-change="onResourceChange(resource)"/>
-								</label>
-								<a>{{::resource.name}}
-									<span class="caret"></span>
-								</a>
+						<ul class="list-unstyled left-list">
+							<li ng-repeat="resource in resources">
+								<div ng-click="onItemClick(resource)"  class="list-item" ng-class="{'active':resource.$active}">
+									<label class="role-check-box" ng-class="{active:resource.$checked}">
+										<input id="check_{{resource.id}}" type="checkbox"
+											   ng-model="resource.$checked"
+											   ng-change="onResourceChange(resource)"/>
+									</label>
+									<a>{{::resource.name}}
+										<span class="caret" ng-class="{'active':resource.activeLevel}"></span>
+									</a>
+								</div>
+								<ul class="role-tree-level2" ng-if="resource.activeLevel">
+									<li ng-repeat="resourceLevel2 in resource.children">
+										<div ng-click="onItemClick(resourceLevel2)" class="list-item" ng-class="{'active':resourceLevel2.$active}">
+											<label class="role-check-box" ng-class="{active:resourceLevel2.$checked}">
+												<input id="check_{{resourceLevel2.id}}" type="checkbox"
+													   ng-model="resourceLevel2.$checked"
+													   ng-change="onResourceChange(resourceLevel2)"/>
+											</label>
+											<a>{{::resourceLevel2.name}}
+												<span class="caret" ng-class="{'active':resourceLevel2.activeLevel}"></span>
+											</a>
+										</div>
+										<ul class="role-tree-level3" ng-if="resourceLevel2.activeLevel">
+											<li ng-repeat="resourceLevel3 in resourceLevel2.children" >
+												<div ng-click="onItemClick(resourceLevel3)" class="list-item" ng-class="{'active':resourceLevel3.$active}">
+													<label class="role-check-box" ng-class="{active:resourceLevel3.$checked}">
+														<input id="check_{{resourceLevel3.id}}" type="checkbox"
+															   ng-model="resourceLevel3.$checked"
+															   ng-change="onResourceChange(resourceLevel3)"/>
+													</label>
+													<a>{{::resourceLevel3.name}}
+														<span class="caret"></span>
+													</a>
+												</div>
+											</li>
+										</ul>
+									</li>
+								</ul>
 							</li>
 						</ul>
 					</div>