编辑角色分页

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

@@ -590,10 +590,29 @@ define(['app/app'], function(app) {
     }]);
 
 	app.register.controller('UserRoleEditCtrl', ['$scope', '$modalInstance', '$timeout', 'AccountResource', 'toaster', 'user', 'BaseService','AccountRole','User', function ($scope, $modalInstance, $timeout, AccountResource, toaster, user, BaseService, AccountRole, User) {
+
+		$scope.pages = [];
+
+		$scope.params = {
+			page : 1,
+			count : 6,
+			totalPage: 1,
+			currentPage: 1
+		};
+
+		var loadCurrentRoles = function () {
+			var start = ($scope.params.page -1) * $scope.params.count;
+			var end = $scope.params.page * $scope.params.count;
+			$scope.currentRoles = $scope.rolesData.slice(start, end);
+		};
+
 		var init = function () {
 			$scope.user = angular.copy(user);
 			AccountRole.query({},function (data) {
 				$scope.rolesData = data;
+				loadCurrentRoles();
+				$scope.params.totalPage = Math.ceil($scope.rolesData.length/6);
+				$scope.acculatePages(1, $scope.params.totalPage);
 				angular.forEach($scope.rolesData, function (item) {
 					item.checked = false;
 					angular.forEach($scope.user.roles, function (userItem) {
@@ -605,8 +624,8 @@ define(['app/app'], function(app) {
 			});
 		}
 		init();
-        $scope.checked = [];
 
+		$scope.checked = [];
 		//勾选角色
 		$scope.checkRole = function (role) {
 			role.checked = !role.checked;
@@ -641,19 +660,187 @@ define(['app/app'], function(app) {
             }
         };
 
+        // //初始化分页数据
+		// var initPages = function () {
+		// 	$scope.totalPages = Math.ceil = ($scope.rolesData.length/6);
+		// }
+		//初始化页数信息
+		$scope.initPages = function (totalElementPages) {
+			var pageNum = [];
+			if(totalElementPages == 1) {
+				return ;
+			}else if(totalElementPages < 10) {
+				for(var i = 0; i < totalElementPages + 2; i++) {
+					pageNum.push(i);
+				}
+			}else {
+				pageNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+			}
+			angular.forEach(pageNum, function (number) {
+				var page = {active : true, type : 'page', number : number};
+				if(number == 0) {
+					page.type = 'prev';
+				}else if(number == 1) {
+					page.type = 'first';
+				}else if(number == pageNum.length - 2) {
+					page.type = 'last';
+					page.number = totalElementPages;
+				}else if(number == pageNum.length - 1){
+					page.type = 'next';
+				}
+				$scope.pages.push(page);
+			});
+		};
 
-		$scope.pages = [];
-		$scope.pageParams = {
-			page: 1,
-			total: 10,
-			count: 6
+		//当前页在后端计算方式
+		$scope.endSegment = function (currentPage, totalElementPages) {
+			if (totalElementPages > 8) {
+				angular.forEach($scope.pages, function (page) {
+					switch (page.number) {
+						case 2:
+							page.active = false;
+							page.type = 'more';
+							break;
+						case 10:
+							if(currentPage == totalElementPages) {
+								page.active = false;
+							}
+							break;
+						case 0:
+						case 1:
+							break;
+						default:
+							if(page.number != totalElementPages) {
+								page.number = totalElementPages - 9 + page.number;
+							}
+							page.current = (currentPage == page.number);
+							break;
+					}
+				});
+			}
 		};
 
-        //初始化分页数据
-		var initPages = function () {
-			$scope.totalPages = Math.ceil = ($scope.rolesData.length/6);
-		}
+		//当前页在中间计算方式
+		$scope.middleSegment = function (currentPage) {
+			angular.forEach($scope.pages, function (page) {
+				switch (page.number) {
+					case 2:
+					case 8:
+						page.type ='more';
+						page.active = false;
+						break;
+					case 3:
+						page.number = currentPage - 2;
+						break;
+					case 4:
+						page.number = currentPage - 1;
+						break;
+					case 5:
+						page.number = currentPage;
+						page.current = true;
+						break;
+					case 6:
+						page.number = currentPage + 1;
+						break;
+					case 7:
+						page.number = currentPage + 2;
+						break;
+				}
+			});
+		};
+
+		//当前页在前段的计算方式
+		$scope.frontSegment = function (currentPage, totalElementPages) {
+			if (totalElementPages > 8) {
+				angular.forEach($scope.pages, function (page) {
+					switch (page.number) {
+						case 8:
+							page.type = 'more';
+							page.active = false;
+							break;
+						case 0:
+							if(currentPage == 1) {
+								page.active = false;
+							}
+						default : {
+							page.current = (currentPage == page.number);
+						}
+					}
+				});
+			}
+		};
+
+		//输入框监听Enter事件
+		$scope.listenEnter = function () {
+			if(event.keyCode == 13) {
+				$scope.setPage("page", $scope.params.currentPage);
+			}
+		};
+		$scope.setPage = function(type, number) {
+			if(type != 'prev' &&  type != 'page' && type != 'next' && type != 'last' && type != 'first') {
+				return ;
+			};
+			var page = -1;
+			switch (type) {
+				case "page":
+					if(number < 1) {
+						page = 1;
+					}else if(number > $scope.params.totalPage) {
+						page = $scope.params.totalPage;
+					}else {
+						page = number;
+					};
+					break;
+				case "prev":
+					if($scope.params.page <= 1) {
+						page = 1;
+					}else {
+						page =$scope.params.page - 1;
+					};
+					break;
+				case "next":
+					if($scope.params.page >= $scope.params.totalPage) {
+						page = $scope.params.totalPage;
+					}else {
+						page =$scope.params.page + 1;
+					}
+					break;
+				case "first":
+					page = 1;
+					break;
+				case "last":
+					page = $scope.params.totalPage;
+					break;
+			}
+			if(page == $scope.params.page || page < 1 || page > $scope.params.totalPage) {
+				$scope.params.currentPage = $scope.params.page;
+				return ;
+			}
+			$scope.params.page = page;
+			$scope.params.currentPage = page;
+			loadData();
+		};
 
+		//计算页数的方式。
+		$scope.acculatePages = function(currentPage, totalElementPages) {
+			$scope.pages = [];
+			if(totalElementPages < 1)  {
+				return ;
+			}
+			//初始化页面数据
+			$scope.initPages(totalElementPages);
+			if(currentPage < 6) {//当期页小于6
+				$scope.frontSegment(currentPage, totalElementPages);
+			}else if(currentPage > totalElementPages - 5) { //当期页在后面
+				$scope.endSegment(currentPage, totalElementPages);
+			}else { //当期页在中间
+				$scope.middleSegment(currentPage);
+			}
+		};
 
+		var loadData = function() {
+			loadCurrentRoles();
+			$scope.acculatePages($scope.params.page, $scope.params.totalPage);
+		};
 	}]);
 });

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

@@ -109,9 +109,14 @@
     .user-role-manage ul.pagination.ng-table-pagination > li > a > span {
         height: 17px;
         line-height: 17px;
+        color: #666;
     }
-
-    .user-role-manage div.ng-table-pager  input.page-number {
+    .user-role-manage .ng-table-pager {
+        background: #f4f4f4;
+        margin: 0!important;
+        padding-right: 29px;
+    }
+    .user-role-manage .ng-table-pager  input.page-number {
         vertical-align: inherit;
         display: inline-block;
         width: 37px;
@@ -130,11 +135,9 @@
         transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     }
 
-    .user-role-manage div.ng-table-pager a.page-a {
+    .user-role-manage .ng-table-pager a.page-a {
         color: #fff;
         cursor: pointer;
-        background-color: #4574E8;
-        border-color: #4574E8;
         padding: 5.55px 6px;
         font-size: 12px;
         border-top-right-radius: 4px;
@@ -143,7 +146,7 @@
         height: 31px;
     }
 
-    .user-role-manage div.ng-table-pager div.page-go-block {
+    .user-role-manage .ng-table-pager .page-go-block {
         float: right;
         font-size: 0px;
         height: 31px;
@@ -153,16 +156,24 @@
     .user-role-manage .ng-table-pager .ng-table-pagination{
         text-align: center;
         max-width: 460px;
+        margin: 0;
     }
     .user-role-manage .ng-table-pager .ng-table-pagination a{
-        color: #4574E8 !important;
-        height: 31px;
+        height: 26px;
         line-height: 13px;
     }
     .pagination li.active a span{
-        background-color: #4574E8;
         color: white !important;
     }
+    .ng-table-pager .ng-table-pagination li.active a {
+        background: none!important;
+    }
+    .ng-table-pager .ng-table-pagination li a {
+        background: none!important;
+    }
+    .ng-table-pager .ng-table-pagination li.active a span {
+        color: #5078cb!important;
+    }
 </style>
 
 <div class="user-role-manage">
@@ -173,7 +184,7 @@
         </button>
     </div>
     <div class="default-role-area">
-        <div class="{{'default-role-box bgcolor-'+((($index+1)%7)+1)}}" ng-repeat="role in rolesData track by $index" ng-click="checkRole(role)">
+        <div class="{{'default-role-box bgcolor-'+((($index+1)%7)+1)}}" ng-repeat="role in currentRoles track by $index" ng-click="checkRole(role)">
             <p title="{{role.desc}}">{{role.desc}}</p>
             <span title="{{role.duty}}">{{role.duty}}</span>
             <img ng-src="static/img/vendor/images/{{role.checked?'check-active':'check'}}.jpg" alt="" >
@@ -181,7 +192,7 @@
     </div>
     <div class="ng-cloak ng-table-pager text-center">
         <ul class="pagination ng-table-pagination">
-            <li ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type">
+            <li ng-class="{'disabled': !page.active && !page.current, 'active': params.page == page.number}" ng-repeat="page in pages" ng-switch="page.type">
                 <a ng-switch-when="prev" ng-click="setPage(page.type, -1)">&laquo;</a>
                 <a ng-switch-when="first" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>
                 <a ng-switch-when="page" ng-click="setPage(page.type, page.number)"><span ng-bind="page.number"></span></a>