用户管理-用户详情、新增用户

src/app/pages/main.scss

@@ -56,7 +56,21 @@
 .table-operation-box{
 	margin-bottom: 16px;
 }
-
+/* 表格样式 */
+.table-box {
+	.table-operation-btn {
+		padding-left: 2px;
+		padding-right: 2px; 
+		cursor: pointer;
+		font-size: 20px;
+	}
+	.edit{
+		color: #40a9ff;
+	}
+	.danger{
+		color: #f86c6b;
+	}
+}
 
 /* 目录树样式 */
 :host /deep/ ul.tree{

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

@@ -8,6 +8,7 @@ import { UserManagementComponent } from './user-management/user-management.compo
 import { DepartmentManagementComponent } from './department-management/department-management.component';
 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';
 
 const systemManagementRoutes: Routes = [
     {
@@ -29,7 +30,7 @@ const systemManagementRoutes: Routes = [
             },
             {
                 path: 'users',
-                component: UserManagementComponent
+                component: UserManagementComponent,
             },
             {
                 path: 'departments',
@@ -42,6 +43,10 @@ const systemManagementRoutes: Routes = [
             {
                 path: 'synchronization',
                 component: DataSynchronizeComponent
+            },
+            {
+                path: 'users/modify',
+                component: UserManagementModifyComponent
             }
         ]
     }

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

@@ -21,6 +21,7 @@ import { ColorSettingsComponent } from './personal-settings/color-settings/color
 import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/msg-alert-warning.component';
 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';
 @NgModule({
     imports: [
         CommonModule,
@@ -42,6 +43,7 @@ import { ComponentsModule } from '../../components/components.module';
         ColorSettingsComponent,
         MsgAlertWarningComponent,
         FlightAgencyComponent,
+        UserManagementModifyComponent,
         
       ],
       providers   : [ { provide: NZ_I18N, useValue: zh_CN } ],

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

@@ -0,0 +1,58 @@
+<div class="system-main-container">
+	<div class="user-modify-box card">
+		<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="real_name" formControlName="real_name" placeholder="请输入姓名">
+					<nz-form-explain *ngIf="validateForm.get('real_name').dirty && validateForm.get('real_name').errors">请输入姓名</nz-form-explain>
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="loginId" nzRequired>统一身份认证账号</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="loginId" formControlName="loginId" placeholder="请输入统一身份认证账号">
+					<nz-form-explain *ngIf="validateForm.get('loginId').dirty && validateForm.get('loginId').errors">请输入统一身份认证账号</nz-form-explain>
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>本系统密码</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="password" formControlName="password" placeholder="请输入密码">
+					<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码</nz-form-explain>
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>所属机构</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="password" formControlName="password" placeholder="请选择所属机构">
+					<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请选择所属机构</nz-form-explain>
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="identify_num" formControlName="identify_num" placeholder="请输入身份证号">
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="email" formControlName="email" placeholder="请输入邮箱地址">
+				</nz-form-control>
+			</nz-form-item>
+			<nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="mobile">电话</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input id="mobile" formControlName="mobile" placeholder="请输入电话号码">
+				</nz-form-control>
+			</nz-form-item>
+
+			<nz-form-item nz-row style="margin-bottom:8px;">
+				<nz-form-control [nzSpan]="14" [nzOffset]="6">
+					<button nz-button nzType="primary">保存</button>
+				</nz-form-control>
+			</nz-form-item>
+		</form>
+	</div>	
+</div>

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

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

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

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-user-management-modify',
+  templateUrl: './user-management-modify.component.html',
+  styleUrls: ['./user-management-modify.component.scss','../../../main.scss']
+})
+export class UserManagementModifyComponent implements OnInit {
+	 validateForm: FormGroup;
+
+	constructor(
+		private fb: FormBuilder
+	) { }
+
+	ngOnInit() {
+		this.validateForm = this.fb.group({
+		     real_name:[ null, [ Validators.required ] ],
+		     loginId:[ null, [ Validators.required ] ],
+		     password:[ null, [ Validators.required ] ],
+		     identify_num:[ null],
+		     email:[ null],
+		     mobile:[ null],
+		    });
+	}
+	submitForm(): void {
+		for (const i in this.validateForm.controls) {
+		  this.validateForm.controls[ i ].markAsDirty();
+		  this.validateForm.controls[ i ].updateValueAndValidity();
+		}
+	}
+	updateConfirmValidator(): void {
+	    /** wait for refresh value */
+	    Promise.resolve().then(() => this.validateForm.controls.checkPassword.updateValueAndValidity());
+	  }
+
+	  confirmationValidator = (control: FormControl): { [ s: string ]: boolean } => {
+	    if (!control.value) {
+	      return { required: true };
+	    } else if (control.value !== this.validateForm.controls.password.value) {
+	      return { confirm: true, error: true };
+	    }
+	  };
+
+
+}

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

@@ -11,7 +11,7 @@
 						<nz-form-item >
 							<nz-form-label nzSpan="6">姓名</nz-form-label>
 							<nz-form-control nzSpan="17">
-							  <input nz-input   placeholder="请输入姓名">
+							  <input nz-input [(ngModel)]='search.real_name'  placeholder="请输入姓名">
 							</nz-form-control>
 						</nz-form-item>
 					</div>
@@ -19,57 +19,151 @@
 						<nz-form-item >
 							<nz-form-label nzSpan="8">用户名</nz-form-label>
 							<nz-form-control nzSpan="15">
-							  <input nz-input   placeholder="请输入用户名">
+							  <input nz-input [(ngModel)]='search.login_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" [nzLoading]="isLoading" (click)="isLoading=(!isLoading)"><i nz-icon type="search"></i>查询</button>
+								<button class="mr10" nz-button nzType="primary"  (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
-								<button nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></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 nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
+					<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
 				</div>
 			</div>
-			<div class="table-box">
+			<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
-				<app-request-status [statusParams]='statusParamsTable'></app-request-status>
+			<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
-				<nz-table [nzShowPagination]='false' *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0' #dataSet [nzData]="tableData">
+				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="tableData">
-				  <thead>
+					<thead>
-				    <tr>
+						<tr>
-					       <th>姓名</th>
+							<th>姓名</th>
-					       <!-- <th>所属机构</th> -->
+							<th>性别</th>
-					       <th>性别</th>
+							<th>用户名</th>
-					       <th>用户名</th>
+							<th>邮箱</th>
-					       <th>邮箱</th>
+							<th>电话</th>
-					       <th>电话</th>
+							<th>操作</th>
-					       <th>操作</th>
+						</tr>
-					    </tr>
+					</thead>
-				  </thead>
+					<tbody>
-				  <tbody>
+						<tr *ngFor="let item of dataSet.data">
-				    <tr *ngFor="let item of dataSet.data">
+							<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
-				      <td>{{item.real_name}}</td>
+							<td>
-				      <td>
+								<span *ngIf="item.sex=='m'">男</span>
-				      	<span *ngIf="item.sex=='m'">男</span>
+								<span *ngIf="item.sex=='f'">女</span>
-				      	<span *ngIf="item.sex=='f'">女</span>
+							</td>
-				      </td>
+							<td>{{item.login_name}}</td>
-				      <td>{{item.login_name}}</td>
+							<td>{{item.email}}</td>
-				      <td>{{item.email}}</td>
+							<td>{{item.mobile}}</td>
-				      <td>{{item.mobile}}</td>
+							<td>
-				      <td></td>
+								<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
-				    </tr>
+								<nz-divider nzType="vertical"></nz-divider>
-				  </tbody>
+								<i 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 class="page-box">
-				<nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination>
-			</div>
 		</div>
 	</div>
 </div>
-  
+<!-- 详情 -->
+<div class="user-detail-box">
+	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"[nzMaskClosable]="true" [nzWidth]="500" [nzVisible]="visible" nzTitle="用户详情" (nzOnClose)="close()">
+		<app-request-status  [statusParams]='statusParamsDetail'></app-request-status>
+		<form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'">
+		<div nz-row nzGutter="8">
+		  <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>姓名</nz-form-label>
+				<span class="detail-item-text">{{userDetail.real_name}}</span>
+				<span *ngIf='!userDetail.real_name'>无</span>
+		    </nz-form-item>
+		  </div>
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>统一身份认证账号</nz-form-label>
+				<span class="detail-item-text">{{userDetail.loginId}}</span>
+				<span *ngIf='!userDetail.loginId'>无</span>
+		    </nz-form-item>
+		  </div>
+		</div>
+		<div nz-row nzGutter="8">
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>本系统密码</nz-form-label>
+				<span class="detail-item-text">{{userDetail.password}}</span>
+				<span *ngIf='!userDetail.password'>无</span>
+		    </nz-form-item>
+		  </div>
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>所属机构</nz-form-label>
+				<span *ngFor="let option of userDetail.orgList" class="detail-item-text">{{option.organization}}</span>
+				<span *ngIf="userDetail.orgList.length<=0">无</span>
+		    </nz-form-item>
+		  </div>
+		</div>
+		<div nz-row nzGutter="8">
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>身份证号</nz-form-label>
+				<span class="detail-item-text">{{userDetail.identify_num}}</span>
+				<span *ngIf='!userDetail.identify_num'>无</span>
+		    </nz-form-item>
+		  </div>
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>邮箱</nz-form-label>
+				<span class="detail-item-text">{{userDetail.email}}</span>
+				<span *ngIf='!userDetail.email'>无</span>
+		    </nz-form-item>
+		  </div>
+		</div>
+		<div nz-row nzGutter="8">
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>电话</nz-form-label>
+				<span class="detail-item-text">{{userDetail.mobile}}</span>
+				<span *ngIf='!userDetail.mobile'>无</span>
+		    </nz-form-item>
+		  </div>
+		  <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>所属角色</nz-form-label>
+				<ng-container *ngFor="let option of userDetail.roleList;let i=index">
+					<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
+				</ng-container>
+				<span *ngIf="userDetail.roleList.length<=0">无</span>
+		    </nz-form-item>
+		  </div>
+		</div>
+		<div nz-row nzGutter="8">
+		   <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>状态</nz-form-label>
+				<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
+				<span class="detail-item-text" *ngIf='userDetail.status==0'>未激活</span>
+				<span *ngIf='!userDetail.status'>无</span>
+		    </nz-form-item>
+		  </div>
+		  <div nz-col nzSpan="24">
+		    <nz-form-item>
+		      <nz-form-label>性别</nz-form-label>
+				<span class="detail-item-text" *ngIf='userDetail.sex=="m"'>男</span>
+				<span class="detail-item-text" *ngIf='userDetail.sex=="f"'>女</span>
+				<span *ngIf='!userDetail.sex'>无</span>
+		    </nz-form-item>
+		  </div>
+		</div>
+		</form>
+	</nz-drawer>
+</div>

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

@@ -3,3 +3,8 @@
 		
 	}
 } 
+.user-detail{
+	.detail-item-text{
+		color: #1890ff;
+	}
+}

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClientService } from '../../../services/http-client.service';
+import { Router } from '@angular/router';
 
 import 'ztree';
 declare var $: any;
@@ -13,12 +14,16 @@ declare var jQuery: any;
 export class UserManagementComponent implements OnInit {
 	treeSelected:any;		//树模型-当前选中项
 	collectionSize:any ; 
+	public tableData:any=[];
 	statusParamsTable:any={	//获取目录树接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
 		status:1,
 	}
 	statusParamsTree:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
 		status:1,
 	}
+	statusParamsDetail:any={	//获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
 	public search:any={
 		page_index:'1',
 		page_size:'10',
@@ -26,30 +31,80 @@ export class UserManagementComponent implements OnInit {
 		login_name:'',
 		orgId:'',	 
 	}
-	isLoading:false;
+	visible = false;
-	public tableData:any=[];
+	userDetail:any={}; 	//用户详情
+
 
 	constructor(
 		private http:HttpClientService,
+		private router:Router,
 		) { }
 
 	ngOnInit() {
 		this.initTree();
 		this.queryTable();
 	}
+	//新增、修改  1新增 2修改
+	addModify(type,item?){
+		if(type==1){
+			console.log(222)
+			this.router.navigate(['app/system/users/modify'],{queryParams:{operateType:1}})
+		}else if(type==2){
+
+		}
+	}
+	//打开详情页面
+	open(item): void {
+		this.statusParamsDetail.status=1;
+		this.visible = true;
+		this.userDetail={};
+		this.http.get('/sysapi/setting/user/detail/list', { uid: item.uid }).subscribe((json)=>{
+			if(json.is_success){
+				if(json.body){
+					this.statusParamsDetail.status=3;
+					this.userDetail=json.body;
+				}else{
+					this.statusParamsDetail.status=4;
+				}
+			}else{
+				this.statusParamsDetail.status=0;
+			}
+		})
+	}
+	//关闭详情页面
+	close(): void {
+		this.visible = false;
+	}
+	//重置，重置搜索条件
+	reset(){
+		this.search.page_index=1;
+		this.search.page_size=10;
+		this.search.real_name='';
+		this.search.login_name='';
+		this.queryTable();
+	}
 	//获取列表
 	queryTable():void{
 		this.statusParamsTable.status=1;
 		this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
 			if(json.is_success){
 				this.tableData=json.body.list;
-				this.statusParamsTable.status=3;
 				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();
+	}
 	//树模型参数设置
 	public zNodes: any[];
 	setting = {
@@ -78,7 +133,7 @@ export class UserManagementComponent implements OnInit {
 	        },
 	    },
   	};
-	//新树模型
+	//获取机构列表，树模型数据处理
 	initTree(){
    		//获取目录列表
    		this.statusParamsTree.status=1;