新增/编辑角色模态框

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

@@ -269,6 +269,22 @@ define(['app/app'], function(app) {
 			modalInstance.result.then(function(){
 			}, function(){
 			});
+
+		};
+		$scope.editRole = function (role) {
+			var modalInstance = $modal.open({
+				animation: true,
+				templateUrl: $rootScope.rootPath + '/static/view/vendor/modal/role_detail.html',
+				controller: 'RoleEditCtrl',
+				resolve: {
+					role: function () {
+						return role;
+					}
+				}
+			});
+			// modalInstance.result.then(function (added) {
+			// 	added && (getData());
+			// });
 		};
     }]);
 
@@ -397,5 +413,17 @@ define(['app/app'], function(app) {
 		$scope.cancel = function () {
 			$modalInstance.close();
 		};
+
+	}]);
+
+	app.register.controller('RoleEditCtrl', ['$scope', '$modalInstance', '$timeout', 'toaster','role', 'BaseService', function ($scope, $modalInstance, $timeout, toaster,role, BaseService) {
+		BaseService.scrollBackToTop();
+		$scope.role = role;
+		$scope.master = angular.copy($scope.role);
+		var isNew = role == null;
+		$scope.cancel = function () {
+			$modalInstance.close(false);
+		};
+
 	}]);
 });

src/main/webapp/resources/view/vendor/forstore/vendor_account_management.html

@@ -281,26 +281,26 @@
         border-radius: 2px;
         text-align: center;
     }
-    .auth-info-area .role-info .role-tag-area .bgcolor-1 {
-        background: #ff8050;
+    .user_right .bgcolor-1 {
+        background: #ff8050!important;
     }
-    .auth-info-area .role-info .role-tag-area .bgcolor-2 {
-        background: #01d9ce;
+    .user_right .bgcolor-2 {
+        background: #01d9ce!important;
     }
-    .auth-info-area .role-info .role-tag-area .bgcolor-3 {
-        background: #f7b73c;
+    .user_right .bgcolor-3 {
+        background: #f7b73c!important;
     }
-    .auth-info-area .role-info .role-tag-area .bgcolor-4 {
-        background: #89aefa;
+    .user_right .bgcolor-4 {
+        background: #89aefa!important;
     }
-    .auth-info-area .role-info .role-tag-area .bgcolor-5 {
-        background: #ff6769;
+    .user_right .bgcolor-5 {
+        background: #ff6769!important;
     }
-    .auth-info-area .role-info .role-tag-area  .bgcolor-6 {
-        background: #64bfe9;
+    .user_right  .bgcolor-6 {
+        background: #64bfe9!important;
     }
-    .auth-info-area .role-info .role-tag-area .bgcolor-7 {
-        background: #4bc701;
+    .user_right .bgcolor-7 {
+        background: #4bc701!important;
     }
     .auth-info-area .role-info .submit-area span {
         font-size: 12px;
@@ -424,6 +424,79 @@
     .auth-info-area .record-line {
         margin-right: 22px;
     }
+    .role-manage {
+        padding: 0 14px;
+    }
+    .role-manage p {
+        font-size: 14px;
+        font-weight: bold;
+    }
+    .role-manage >p {
+        margin: 20px 9px;
+    }
+    .role-manage >p.self-header {
+        margin-top: 30px;
+    }
+    .role-manage .default-role-area {
+        padding: 0 9px 10px 9px;
+        border-bottom: 2px solid #fde7bd;
+    }
+    .role-manage .default-role-box {
+        width: 190px;
+        height: 114px;
+        display: inline-block;
+        background: #89aefa;
+        color: #fff;
+        padding: 12px 10px;
+        vertical-align: middle;
+        margin-right: 50px;
+        margin-bottom: 20px;
+    }
+    .role-manage .default-role-box p {
+        text-align: center;
+        margin-bottom: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .role-manage .default-role-box span {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre-wrap;
+        word-break: normal;
+        height: 55px;
+        width: 100%;
+        display: block;
+    }
+    .role-manage .define-role-area {
+        padding: 0 9px;
+        margin-bottom: 28px;
+    }
+    .role-manage .define-role-area .add-role-box {
+        background: #f4fff9;
+        color: #4aca80;
+        border: 2px dashed #4aca80;
+        cursor: pointer;
+    }
+    .role-manage .define-role-area .add-role-box i {
+        font-size: 40px;
+        color: #fff;
+        background: #4aca80;
+        border-radius: 100%;
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        line-height: 37px;
+        text-align: center;
+        position: relative;
+        top: -20px;
+        left: -5px;
+    }
+    .role-manage .define-role-area .add-role-box >div {
+        display: inline-block;
+        width: 121px;
+    }
 </style>
 <!--右侧主体部分-->
 <div class="count user_right fr">
@@ -806,17 +879,79 @@
                 </div>
             </div>
             <!-- 角色管理 -->
-            <div class="count01 clearfix" ng-if="tab=='role'">
+            <div class="count01 clearfix role-manage" ng-if="tab=='role'">
                 <p>默认角色</p>
                 <div class="default-role-area">
-                    <div class="default-role-box">
+                    <div class="default-role-box bgcolor-1">
                         <p>管理员</p>
-                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到</span>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-2">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-3">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-4">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-5">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-6">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-7">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
                     </div>
                 </div>
-                <p>自定义角色</p>
+                <p class="self-header">自定义角色</p>
                 <div class="define-role-area">
-
+                    <div class="default-role-box bgcolor-1">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-2">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-3">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-4">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-5">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-6">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-7">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="default-role-box bgcolor-1">
+                        <p>管理员</p>
+                        <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到阿打算发阿打算发按时发发是发发发按时发发发是是是是是是所是是是是是是所谁谁谁少时诵诗书所所所所所所所所撒</span>
+                    </div>
+                    <div class="add-role-box default-role-box" ng-click="editRole()">
+                        <i>+</i>
+                        <div>
+                            <p>管理员</p>
+                            <span>暗示的健康拉萨的骄傲链接的库拉索恐龙当家昂克赛拉的吉安市考虑到按时大大的多多多多多多多多多多多多啊实打实大大所大所多是是是是是是所是是是是是是所是是是是是是所</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

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

@@ -0,0 +1,71 @@
+<div class="modal-header">
+	<h3 class="modal-title">
+		<i class="fa fa-user fa-fw text-default"></i><span
+			ng-bind="role.id?'编辑角色':'添加自定义角色'"></span>
+	</h3>
+</div>
+<form name="roleForm" novalidate ng-submit="save()">
+	<div class="modal-body">
+		<div class="form-group">
+			<label>角色名称</label> <input type="text" name="desc"
+				ng-model="role.desc" class="form-control" placeholder="输入3-8个中文字描述"
+				required autofocus ng-readonly="role.isdefault">
+			<div class="tooltip in left control-tooltip"
+				ng-show="roleForm.desc.$dirty && roleForm.desc.$invalid">
+				<div class="tooltip-arrow"></div>
+				<span class="tooltip-inner">请输入3-8个中文字描述一下自定义角色</span>
+			</div>
+		</div>
+		<div class="form-group">
+			<label>职责范围</label>
+			<textarea class="form-control" name="duty" ng-model="role.duty"
+				placeholder="角色的具体职责(50个中文字以内)" required
+				ng-readonly="role.isdefault"></textarea>
+			<div class="tooltip in left control-tooltip"
+				ng-show="roleForm.duty.$dirty && roleForm.duty.$invalid">
+				<div class="tooltip-arrow"></div>
+				<span class="tooltip-inner">请描述一下角色的具体职责，内容保持在50个中文字以内</span>
+			</div>
+		</div>
+		<div class="form-group role-resources" ng-if="role.issys != 1">
+			<label>权限分配</label>
+			<p class="help-block">
+				给角色分配允许操作的资源<span class="pull-right"><input type="checkbox"
+					checked="checked" disabled>勾选表示允许操作</span>
+			</p>
+			<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)"><input id="check_{{resource.id}}" type="checkbox"
+								ng-model="resource.$checked"
+								ng-change="onResourceChange(resource)"/><a>{{::resource.name}}<span
+									class="caret"></span></a></li>
+						</ul>
+					</div>
+					<div class="item">
+						<ul class="list-unstyled">
+							<li ng-repeat="item in resourceItems"><input type="checkbox"
+								ng-model="item.$checked" ng-change="onItemChange()" />{{::item.name}}</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer" ng-if="role.issys != 1">
+		<p class="pull-left text-muted" ng-show="role.isdefault == 1">
+			<i class="fa fa-fw fa-warning"></i>默认角色不允许删除，只能修改权限分配
+		</p>
+		<button class="btn btn-primary" type="submit"
+			ng-disabled="roleForm.$invalid || !isChanged(role)">确认</button>
+		<button class="btn btn-default" type="button"
+			ng-show="role.id && role.isdefault == 0" ng-click="del()">删除角色</button>
+		<button class="btn btn-default" ng-click="cancel()" type="button">取消</button>
+	</div>
+	<div class="modal-footer" ng-if="role.issys == 1">
+		<button class="btn btn-default" ng-click="cancel()" type="button">关闭</button>
+	</div>
+</form>