角色管理-新增、修改

src/app/pages/system-management/department-management/department-management.component.html

@@ -8,7 +8,7 @@
 			<div class="operation-box">
 				<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
 				<button *ngIf="canEdit" (click)="addModify(2)" nz-button nzType="default"><i nz-icon type="edit" theme="outline"></i>修改</button>
-				<button *ngIf="canDel" (click)="delete" nz-button nzType="danger"><i nz-icon type="delete" theme="outline"></i>删除</button>
+				<button *ngIf="canDel" (click)="delete()" nz-button nzType="danger"><i nz-icon type="delete" theme="outline"></i>删除</button>
 			</div>
 			<nz-skeleton [nzActive]="true"  [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==3&&!orgDetail'></nz-skeleton>
 			<!-- 详情 begin -->
@@ -194,7 +194,7 @@
 
 			</form>
 			<div class="user-footer" *ngIf="modifyType!=3">
-				<button (click)='submitForm()' [nzLoading]="isLoadingSave"  nz-button nzType="primary"  class="mr10" [disabled]='!this.validateForm.valid||!this.nameOnly'>保存</button>
+				<button (click)='submitForm()' [nzLoading]="isLoadingSave"  nz-button nzType="primary"  class="mr10" [disabled]='!validateForm.valid||!nameOnly'>保存</button>
 				<button (click)='cancel()' nz-button nzType="default">取消</button>
 			</div>
 			<!-- 新增、修改 end -->
@@ -219,9 +219,8 @@
 </div>
 
 <!-- 机构负责人选择 -->
-<!-- 选择所属机构 -->
 <div class="org-selete-box">
-	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="选择机构" (nzOnClose)="closeUser()">
+	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="机构负责人" (nzOnClose)="closeUser()">
 		<div class="users-box" [hidden]='statusParamsUsers.status!=3'>
 			<div class="user-table-box">
 				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="userData">

src/app/pages/system-management/department-management/department-management.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';	
 import { HttpClientService } from '../../../services/http-client.service';
 import { Router } from '@angular/router';
-import { NzMessageService } from 'ng-zorro-antd';
+import { NzMessageService,NzModalRef, NzModalService  } from 'ng-zorro-antd';
 import { Observable } from 'rxjs';
 
 import 'ztree';
@@ -50,12 +50,15 @@ export class DepartmentManagementComponent implements OnInit {
 	oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
 	checkNameStatus:any=''; //检测账号唯一性的图标状态
 	orgList:any=[];
+	confirmModal:NzModalRef;
 	constructor(
 		private fb: FormBuilder,
 		private http:HttpClientService,
 		private router:Router,
 		private message: NzMessageService,
-	) { }
+		private modal: NzModalService,
+	) { 
+	}
 
 	ngOnInit() {
 		$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
@@ -111,6 +114,26 @@ export class DepartmentManagementComponent implements OnInit {
 		}
 		
 	}
+	//删除
+	delete(){
+		this.confirmModal = this.modal.confirm({
+		      nzTitle: '删除',
+		      nzContent: '确定删除【'+this.orgDetail.organization+'】?',
+		      nzOnOk: () => new Promise((resolve, reject) => {
+		      			this.http.delete('/sysapi/setting/organization/delOrgByid/'+this.orgDetail.id).subscribe((json)=>{
+		      				if(json.is_success){
+		      					resolve();
+		      					this.message.success(`删除成功!`);
+		      					this.initTree();
+		      				}else{
+		      					reject();
+		      					this.message.error(`删除失败!`);
+		      				}
+		      			})
+		              
+		            }).catch(() => console.log('Oops errors!'))
+		    });
+	}
 	//保存
 	submitForm(){
 		let pid='';
@@ -129,7 +152,7 @@ export class DepartmentManagementComponent implements OnInit {
 			       this.message.success(`新增成功!`);
 			       this.initTree();
 			     }else{
-			       this.message.success(`新增失败!`);
+			       this.message.error(`新增失败!`);
 			     }
 			})
 		}else if(this.modifyType==2){
@@ -138,7 +161,7 @@ export class DepartmentManagementComponent implements OnInit {
 			       this.message.success(`修改成功!`);
 			       this.initTree();
 			     }else{
-			       this.message.success(`修改失败!`);
+			       this.message.error(`修改失败!`);
 			     }
 			})
 		}

src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html

@@ -0,0 +1,98 @@
+<div class="system-main-container">
+	<div class="user-modify-box card" id="main-container">
+		<app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status>
+		<nz-skeleton [nzActive]="true"  [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton>
+		<form nz-form [formGroup]="validateForm" >
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="role_name" nzRequired>角色名称</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="role_name" formControlName="role_name" placeholder="请输入角色名称">
+					<nz-form-explain *ngIf="validateForm.get('role_name').dirty && validateForm.get('role_name').errors">请输入角色名称</nz-form-explain>
+				</nz-form-control>
+			</nz-form-item> 
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色类型</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<nz-radio-group formControlName="role_type">
+					  <label nz-radio [nzValue]=0>系统内置</label>
+					  <label nz-radio [nzValue]=1>用户定义</label>
+					</nz-radio-group>
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色用户</nz-form-label>
+				<nz-form-control [nzSm]="18" [nzXs]="24">
+					<a href="javascript:;"  (click)="openUsers()">选择</a>
+				</nz-form-control>
+			</nz-form-item>
+			<div class="user-table table-box">
+				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="userSelecteds">
+					<thead>
+						<tr>
+							<th>姓名</th>
+							<th>用户名</th>
+							<th>电话</th>
+							<th>操作</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr *ngFor="let item of dataSet.data;let i=index">
+							<td>{{item.real_name}}</td>
+							<td>{{item.login_name}}</td>
+							<td>{{item.mobile}}</td>
+							<td>
+								<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
+							</td>
+						</tr>
+					</tbody>
+				</nz-table>
+			</div>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24">功能权限</nz-form-label>
+				<nz-form-control [nzSm]="18" [nzXs]="24">
+					<div class="tree-box ml10">
+					  <ul id="treeDemo" class="ztree"></ul>
+					</div>
+				</nz-form-control>
+			</nz-form-item>
+		</form>
+		<div class="user-footer">
+			<button (click)='submitForm()' [nzLoading]="isLoadingSave"  nz-button nzType="primary"  class="mr10" [disabled]='!validateForm.valid||!(userSelecteds.length>0)'>保存</button>
+			<button (click)='cancel()' nz-button nzType="default">取消</button>
+		</div>
+	</div>	
+</div>
+<!-- 机构负责人选择 -->
+<div class="org-selete-box">
+	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="角色用户" (nzOnClose)="closeUser()">
+		<div class="users-box" [hidden]='statusParamsUsers.status!=3'>
+			<div class="user-table-box">
+				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="userData">
+					<thead>
+						<tr>
+							<th></th>
+							<th>姓名</th>
+							<th>用户名</th>
+							<th>电话</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr *ngFor="let item of dataSet.data">
+							<td nzShowCheckbox [(nzChecked)]="item.checked" [nzDisabled]="item.disabled"></td>
+							<td>{{item.real_name}}</td>
+							<td>{{item.login_name}}</td>
+							<td>{{item.mobile}}</td>
+						</tr>
+					</tbody>
+				</nz-table>
+				<div class="page-box" *ngIf="statusParamsUsers.status==3">
+					<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
+				</div>
+			</div>
+			<div class="drawer-footer">
+				<button (click)='userSave()'  nz-button nzType="primary" class="mr10">保存</button>
+				<button (click)=closeUser() nz-button nzType="default">取消</button>
+			</div>
+		</div>
+	</nz-drawer>
+</div>

src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss

@@ -0,0 +1,43 @@
+ @import "../../../main.scss";
+ .user-modify-box{
+	position: relative;
+	overflow-y:scroll;
+	.user-footer{
+		text-align: center;
+		margin-top: -20px;
+		
+	}
+}
+.ztree{
+	padding-bottom: 40px;
+	padding-right: 16px;
+}
+.relative{
+	position: relative;
+	width: 120px;
+	height: 40px;
+}
+.user-table{
+	width: 80%;
+	margin: 0 auto;
+	margin-bottom: 30px;
+}
+.drawer-footer{
+	display: inline-block;
+	position: relative;
+	left: 50%;
+	transform: translate(-50%)
+}
+.users-box{
+	padding-bottom: 30px;
+}
+.tree-box{
+	margin-bottom: 40px;
+}
+//火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题
+@-moz-document url-prefix(){
+	.user-footer{
+		padding-bottom: 20px; 
+	}
+}
+ 

src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoleManagementModifyComponent } from './role-management-modify.component';
+
+describe('RoleManagementModifyComponent', () => {
+  let component: RoleManagementModifyComponent;
+  let fixture: ComponentFixture<RoleManagementModifyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoleManagementModifyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoleManagementModifyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts

@@ -0,0 +1,275 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
+import { HttpClientService } from '../../../../services/http-client.service';
+import { Router,ActivatedRoute } from '@angular/router';
+import { NzMessageService } from 'ng-zorro-antd';
+import { Observable } from 'rxjs';
+import 'ztree';
+declare var $: any;
+declare var jQuery: any;
+
+@Component({
+  selector: 'app-role-management-modify',
+  templateUrl: './role-management-modify.component.html',
+  styleUrls: ['./role-management-modify.component.scss']
+})
+export class RoleManagementModifyComponent implements OnInit {
+	/* 新树形组件参数 begin*/
+	parentNode:any;
+	parentName:any;
+	treeSelected:any;
+	isTreeTop:any;
+	/* 新树形组件参数 bed */
+	validateForm: FormGroup;
+	visibleUsers = false;  //控制抽屉显示
+	statusParamsDetail:any={	//获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
+	statusParamsUsers:any={	//接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
+	modifyType:any=1; //当前页面操作类型  1 新增  2 编辑
+	public roleId:any='';
+	public userSelecteds:any=[]; 	//机构负责人已选用户-新增、修改时 
+	public userData:any=[];		//用户列表数据
+	public search:any={
+		page_index:'1',
+		page_size:'10',
+		real_name:'',	 
+	}
+	collectionSize:any ; 
+
+
+	constructor(
+		private fb: FormBuilder,
+		private http:HttpClientService,
+		private route:ActivatedRoute,
+		private router:Router,
+		private message: NzMessageService,
+	) { }
+
+	ngOnInit() {
+		this.validateForm = this.fb.group({
+	     role_name:[ '', [ Validators.required ] ],
+	     role_type:[ 1, [ Validators.required ] ],	//0=系统内置(不可删除)  ，1=用户定义
+	     description:[ ''],
+	     role_code:[ ''],
+	     status:[''],
+	     user:[],
+	     permission:[],
+	    });
+		//取路由参数
+		this.route.queryParams.subscribe(routeParams=>{
+			this.modifyType=routeParams.operateType;
+			//routeParams 1新增 2修改
+			if(routeParams.operateType==2){
+				this.roleId=routeParams.id;
+				this.queryUserById();
+        		this.queryDetail();
+			}else{
+				this.initTree();
+				this.statusParamsDetail.status=3;
+			}
+		})
+	}
+	submitForm(){
+		let permission:any=[];
+		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+		var checkList=zTree.getCheckedNodes(true);
+		if(checkList.length>0){
+		  for(var i=0;i<checkList.length;i++){
+		    if(checkList[i].checked&&checkList[i].level!=0&&checkList[i].level!=1){
+		      permission.push({
+		        pid:checkList[i].id,
+		      })
+		    }
+		  }
+		}
+		let users:any=[];
+		if(this.userSelecteds&&this.userSelecteds.length>0){
+			this.userSelecteds.forEach(item=>{
+				users.push({
+					uid:item.uid,
+					real_name:item.real_name,
+					mobile:item.mobile,
+					email:item.email,
+					sex:item.sex,
+				})
+			})
+		}
+		this.validateForm.patchValue({
+			permission:permission,
+			user:users,
+		})
+		console.log(this.validateForm.value)
+		this.http.post('/sysapi/setting/role/add/',this.validateForm.value).subscribe((json)=>{
+          if(json.is_success){
+              this.message.success(`新增成功!`);
+              this.router.navigate(['app/system/roles'])
+            }else{
+              this.message.error(`新增失败!`);
+            }
+       })
+	}
+	//修改时查询该角色下的所有用户
+	queryUserById():void{
+		this.http.get('/sysapi/setting/role/users/'+this.roleId).subscribe((json)=>{
+			  if(json.is_success){
+			     if(json.body&&json.body.length>0){
+			     	json.body.forEach(item=>{
+			     		console.log()
+			     		this.userSelecteds = [ ...this.userSelecteds, item];
+			     	})
+			     }
+			  }else{
+
+			  }
+		})
+	}
+  	//根据id查询角色详情
+	queryDetail():void{
+		this.http.get('/sysapi/setting/role/detail/find',{rid:this.roleId}).subscribe((json)=>{
+			if(json.is_success){
+				if(json.body){
+					this.statusParamsDetail=3;
+					//数据回填
+					let item=json.body;
+					this.validateForm.patchValue({
+						role_name:item.role_name,
+						role_type:item.role_type,	//0=系统内置(不可删除)  ，1=用户定义
+						description:item.description,
+						role_code:item.role_code,
+						status:item.status,
+					})
+
+				}else{
+					this.statusParamsDetail=4;
+				}
+			}else{
+				this.statusParamsDetail=0;
+			}
+
+		 
+		})
+	}
+	//保存机构负责人
+	userSave(){
+		console.log(this.userData);
+		this.userData.forEach(item=>{
+			if(item.checked&&!item.disabled){
+				// 增加数据
+				this.userSelecteds = [ ...this.userSelecteds, item];
+			}
+		})
+		this.visibleUsers = false;
+		console.log(this.userSelecteds)
+	}
+	//删除机构负责人
+	delectConfirm(item){
+		this.userSelecteds=this.userSelecteds.filter(function(option){
+			return item.uid!==option.uid
+		})
+	}
+	//打开机构负责人抽屉
+	openUsers(){
+		this.visibleUsers = true;
+		this.queryTable();
+	}
+	//关闭机构选择页面
+	close(): void {
+		this.visibleUsers = false;
+	}
+	//翻页
+	pageChange(event){
+		this.search.page_index=event;
+		this.queryTable();
+	}
+	//获取用户列表
+	queryTable():void{
+		this.statusParamsUsers.status=1;
+		this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
+			if(json.is_success){
+				this.userData=json.body.list;
+				this.collectionSize=json.body.total;
+				if(json.body.list&&json.body.list.length>0){
+					this.statusParamsUsers.status=3;
+					this.userData.forEach(item=>{
+						if(this.userSelecteds.length>0){
+							this.userSelecteds.forEach(option=>{
+								if(item.uid==option.uid){
+									item.checked=true;
+									item.disabled=true;
+								}
+							})
+						}else{
+							item.checked=false;
+							item.disabled=false;
+						}
+					})
+				}else{
+					this.statusParamsUsers.status=4;
+				}
+			}else{
+				this.statusParamsUsers.status=0;
+			}
+		})
+	}
+
+	//新树模型参数设置
+    public zNodes: any[];
+    setting = {
+        data: {
+          simpleData: {
+            enable: true
+            }
+        },
+        view: {
+          showLine: true,
+            dblClickExpand: false,
+            showIcon:true
+        },
+        check:{
+          autoCheckTrigger:true,
+          chkboxType:{"Y":"ps","N":"ps"},
+          enable: true,
+          chkStyle: "checkbox",
+        },
+        callback: {
+           //节点点击事件
+          onClick: (event, treeId, treeNode, clickFlag) => {
+              var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+              zTree.expandNode(treeNode);
+              this.treeSelected=treeNode;
+              this.parentNode=this.treeSelected.getParentNode();
+              if(!this.parentNode){
+                this.isTreeTop=true;
+              }else{
+                this.isTreeTop=false;
+              }
+            },
+          //节点展开事件
+          onExpand: (event, treeId, treeNode) => {
+             
+          }
+        },
+      };
+      //新树模型
+      initTree(){
+        this.http.get('/sysapi/setting/permission/menu/list').subscribe(json=>{
+          
+          let treeList=[];
+          treeList.push({  //一层目录
+            name:"全部权限",
+            isParent:true,
+            open:true,
+            id:'',
+            children:json.body
+          });
+          this.zNodes=treeList;
+          $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
+          var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+          let node =  zTree.getNodes();
+        })
+      }
+
+} 

src/app/pages/system-management/role-management/role-management.component.html

@@ -1,3 +1,60 @@
-<p>
-  role-management works!
-</p>
+<div class="system-main-container"> 
+	<div class="user-manage">
+		<div class="system-main-content card" id="main-box">
+			<div class="search-box">
+				<div nz-row>
+					<div nz-col nzSpan="8">
+						<nz-form-item >
+							<nz-form-label class="left">角色名称</nz-form-label>
+							<nz-form-control nzSpan="17">
+							  <input nz-input [(ngModel)]='search.role_name'  placeholder="请输入角色名称">
+							</nz-form-control>
+						</nz-form-item>
+					</div>
+					<div nz-col nzSpan="8">
+						<nz-form-item >
+							<nz-form-control nzSpan="24">
+								<button class="mr10" nz-button nzType="primary"  (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
+								<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
+							</nz-form-control>
+						</nz-form-item>
+					</div>
+				</div>
+				<div class="table-operation-box">
+					<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
+				</div>
+			</div>
+			<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
+			<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
+				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="tableData">
+					<thead>
+						<tr>
+							<th>角色名称</th>
+							<th>角色类型</th>
+							<th>创建人</th>
+							<th>创建日期</th>
+							<th>操作</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr *ngFor="let item of dataSet.data">
+							<td>{{item.role_name}}</td>
+							<td><span *ngIf="item.role_type==0">系统内置</span><span *ngIf="item.role_type==1">用户定义</span></td>
+							<td>{{item.create_by}}</td>
+							<td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td>
+							<td>
+								<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
+								<nz-divider nzType="vertical"></nz-divider>
+								<i nz-popconfirm nzTitle="确定删除该角色?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
+							</td>
+						</tr>
+					</tbody>
+				</nz-table>
+				<div class="page-box" *ngIf="statusParamsTable.status==3">
+					<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
+				</div>
+			</div>	
+			
+		</div>
+	</div>
+</div>

src/app/pages/system-management/role-management/role-management.component.scss

@@ -0,0 +1,20 @@
+@import "../../main.scss";
+.system-main-container{
+	.user-manage{ 
+		.system-main-content{
+			overflow-y:scroll;
+		}
+		.card{
+			
+		}
+		.tree-box{
+			overflow-y:scroll; 
+		}
+	} 
+}
+ 
+.user-detail{
+	.detail-item-text{
+		color: #1890ff;
+	}
+}

src/app/pages/system-management/role-management/role-management.component.ts

@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpClientService } from '../../../services/http-client.service';
+import { Router } from '@angular/router';
+import { NzMessageService } from 'ng-zorro-antd';
+
+import 'ztree';
+declare var $: any; 
+declare var jQuery: any;
 
 @Component({
   selector: 'app-role-management',
@@ -6,10 +13,84 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./role-management.component.scss']
 })
 export class RoleManagementComponent implements OnInit {
+	collectionSize:any ; 
+	public tableData:any=[];
+	statusParamsTable:any={	//获取用户列表接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
 
-  constructor() { }
+	statusParamsDetail:any={	//获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
+	public search:any={
+		page_index:'1',
+		page_size:'10',
+		role_name:'',	 
+	}
+	visible = false;	//用户详情抽屉框显示隐藏
+	userDetail:any={}; 	//用户详情
+
+	constructor(
+		private http:HttpClientService,
+		private router:Router,
+		private message: NzMessageService,
+	) { }
 
 	ngOnInit() {
+		// 页面监听 动态改变表单高度
+		$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
+		$(window).resize(function(){
+			$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
+		})
+		this.queryTable();
+	}
+	//新增、修改  1新增 2修改
+	addModify(type,item?){
+		if(type==1){
+			this.router.navigate(['app/system/roles/modify'],{queryParams:{operateType:1}})
+		}else if(type==2){
+			this.router.navigate(['app/system/roles/modify'],{queryParams:{operateType:2,id:item.rid}})
+		}
+	}
+	//删除
+	delectConfirm(item){
+		this.http.delete('/sysapi/setting/role/delete/'+item.rid).subscribe((json)=>{
+			if(json.is_success){
+				this.message.success(`删除成功!`);
+				this.queryTable();
+			}else{
+				this.message.error(`删除失败`)
+			}
+		})
+	}
+	//重置，重置搜索条件
+	reset(){
+		this.search.page_index=1;
+		this.search.page_size=10;
+		this.search.role_name='';
+		this.queryTable();
+	}
+	//获取列表
+	queryTable():void{
+		this.statusParamsTable.status=1;
+		this.http.get('/sysapi/setting/role/list',this.search).subscribe((json)=>{
+			if(json.is_success){
+				this.tableData=json.body.list;
+				this.collectionSize=json.body.total;
+				if(json.body.list&&json.body.list.length>0){
+					this.statusParamsTable.status=3;
+				}else{
+					this.statusParamsTable.status=4;
+				}
+			}else{
+				this.statusParamsTable.status=0;
+			}
+		})
+	}
+	//翻页
+	pageChange(event){
+		this.search.page_index=event;
+		this.queryTable();
 	}
 
 }

src/app/pages/system-management/system-management-routing.module.ts

@@ -9,6 +9,7 @@ import { DepartmentManagementComponent } from './department-management/departmen
 import { OperationLogsComponent } from './operation-logs/operation-logs.component';
 import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
 import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component';
+import { RoleManagementModifyComponent } from './role-management/role-management-modify/role-management-modify.component';
 
 const systemManagementRoutes: Routes = [
     {
@@ -30,6 +31,11 @@ const systemManagementRoutes: Routes = [
                 component: RoleManagementComponent,
                 data: { preload: true, reuse: false }
             },
+            {
+                path: 'roles/modify',
+                component: RoleManagementModifyComponent,
+                data: { preload: true, reuse: false }
+            },
             {
                 path: 'users',
                 component: UserManagementComponent,

src/app/pages/system-management/system-management.module.ts

@@ -22,6 +22,7 @@ import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/
 import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component';
 import { ComponentsModule } from '../../components/components.module';
 import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component';
+import { RoleManagementModifyComponent } from './role-management/role-management-modify/role-management-modify.component';
 @NgModule({
     imports: [
         CommonModule,
@@ -44,6 +45,7 @@ import { UserManagementModifyComponent } from './user-management/user-management
         MsgAlertWarningComponent,
         FlightAgencyComponent,
         UserManagementModifyComponent,
+        RoleManagementModifyComponent,
         
       ],
       providers   : [ { provide: NZ_I18N, useValue: zh_CN } ],