nothing

angular.json

@@ -36,7 +36,7 @@
                             "node_modules/font-awesome/scss/font-awesome.scss",
                             "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
                             "src/styles.scss",
-                            "node_modules/ztree/css/zTreeStyle/zTreeStyle.css"
+                            "node_modules/ztree/css/metroStyle/metroStyle.css"
                         ],
                         "scripts": [
                             "node_modules/jquery/dist/jquery.min.js",

package-lock.json

@@ -10051,7 +10051,11 @@
     },
     "ztree": {
       "version": "3.5.24",
+<<<<<<< HEAD
       "resolved": "http://registry.npm.taobao.org/ztree/download/ztree-3.5.24.tgz",
+=======
+      "resolved": "https://registry.npmjs.org/ztree/-/ztree-3.5.24.tgz",
+>>>>>>> develop-2
       "integrity": "sha1-tj/lKYH98sMpZ1z9J3Lw0UdSH/E=",
       "requires": {
         "jquery": "3.3.1"

src/app/components/components.module.ts

@@ -1,9 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { PageTopModule } from './page-top/page-top.module'  //头部
+import { PageTopModule } from './page-top/page-top.module';  //头部
-import { ToastModule } from './toast/toast.module'    //消息提示
+import { ToastModule } from './toast/toast.module';    //消息提示
-import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module'
+import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module';
+import { RequestStatusComponent } from './request-status/request-status.component';
+import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
+
+import { registerLocaleData } from '@angular/common';
+import zh from '@angular/common/locales/zh';
+registerLocaleData(zh);
 
 @NgModule({
     imports: [
@@ -11,12 +17,17 @@ import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module'
         PageTopModule,
         ToastModule,
         SidebarMenuModule,
+        NgZorroAntdModule
     ],
-    declarations: [],
+    declarations: [
+        RequestStatusComponent,
+    ],
+    providers   : [ { provide: NZ_I18N, useValue: zh_CN } ],
     exports: [
         PageTopModule,
         ToastModule,
         SidebarMenuModule,
+        RequestStatusComponent,
     ]
 })
 export class ComponentsModule { }

src/app/components/request-status/request-status.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="statusParams.status!=3" class="position-center-box">
+	<div class="loading-icon" *ngIf="statusParams.status==1">
+		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+	</div>
+	<div class="warning-icon" *ngIf="statusParams.status==0">
+		<i nz-icon type="disconnect" theme="outline"></i>
+		<span class="result-text">请求失败</span>
+	</div>
+	<div class="data-null" *ngIf="statusParams.status==4">
+		<span class="result-text">暂无数据</span>
+	</div>
+</div>
+

src/app/components/request-status/request-status.component.scss

@@ -0,0 +1,23 @@
+.position-center-box{
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	text-align: center;
+	.loading-icon{
+		color: #1890ff;
+	}
+	.warning-icon{
+		color: orange
+	}
+	.data-null{
+
+	}
+	i{
+		font-size: 40px;
+	}
+	.result-text{
+		display: block;
+		padding-top: 10px;
+	}
+}

src/app/components/request-status/request-status.component.spec.ts

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

src/app/components/request-status/request-status.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit,Input } from '@angular/core';
+
+@Component({
+  selector: 'app-request-status',
+  templateUrl: './request-status.component.html',
+  styleUrls: ['./request-status.component.scss']
+})
+export class RequestStatusComponent implements OnInit {
+	//该组件使用，要求父级标签position：relative。
+	@Input() statusParams={		
+		status:1,	  //接口的状态，0请求失败 1请求前loading 2请求中 3请求成功，有数据  4请求成功，无数据 
+	}
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

src/app/pages/main.scss

@@ -1,12 +1,31 @@
+/* 基础样式 */
+.mr10{
+	margin-right: 10px;
+}
+.red{
+	color: #f5222d;
+}
+.orange{
+	color: orange;
+}
+
 .system-main-container {
+	position: relative;
 	padding: 20px 20px;
 	width: 100%;
 	height: 100%;
 	min-height: 300px;
 	background-color: #f0f0f0;
-	.system-main-body{
+	overflow-y: scroll;
+	.system-main-content{
 		height: 100%;
-		width: 100%;
+		min-height: 600px;
+		.search-box{
+
+		}
+		.table-box{
+
+		}
 	}
 }
 .card{
@@ -14,9 +33,14 @@
 	background: #fff;
 	padding: 20px;
 	box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
+	border-radius: 0;
 }
 
 .tree-box{
+	position: relative;
+	min-width: 300px;
+	min-height: 600px;
+	margin-right: 10px;
 	float: left;
 	padding: 20px;
 	height: 100%;
@@ -24,6 +48,29 @@
 	box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
 
 }
+.page-box{
+	text-align: center;
+	margin-top: 30px;
+	margin-bottom: 10px;
+}
+.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

@@ -11,7 +11,7 @@ import { OperationLogsComponent } from './operation-logs/operation-logs.componen
 import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
 
 
-import { SystemManagementRouting } from './system-management-routing.module'
+import { SystemManagementRouting } from './system-management-routing.module';
 import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
 
 import { registerLocaleData } from '@angular/common';
@@ -20,7 +20,8 @@ registerLocaleData(zh);
 import { ColorSettingsComponent } from './personal-settings/color-settings/color-settings.component';
 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,
@@ -28,7 +29,8 @@ import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-
         NgZorroAntdModule,
         ColorPickerModule,
         ReactiveFormsModule,
-        FormsModule
+        FormsModule,
+        ComponentsModule
     ],
     declarations: [
         SystemManagementComponent,
@@ -41,6 +43,7 @@ import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-
         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,109 @@
+<div class="system-main-container">
+	<div class="user-modify-box card">
+		<form nz-form [formGroup]="validateForm">
+			<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="login_name" nzRequired>系统账号</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<input nz-input (ngBlur)='checkName()' id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号">
+					<nz-form-explain *ngIf="validateForm.get('login_name').dirty && validateForm.get('login_name').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">
+					<span *ngIf="orgDetail">
+					<nz-tag nzMode="closeable"  (nzOnClose)="tagClose($event)" >{{orgDetail.organization}}</nz-tag>
+					</span>
+					<a href="javascript:;"  (click)="open()"><span *ngIf="orgDetail">修改</span><span *ngIf="!orgDetail">选择</span></a>
+					<nz-form-explain *ngIf="!orgDetail&&saveCheck" class="red">请选择所属机构</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">
+					<div class="relative" *ngIf="statusParamsRole.status!=3">
+						<app-request-status [statusParams]='statusParamsRole'></app-request-status>
+					</div>
+					<nz-select formControlName="role" *ngIf="statusParamsRole.status==3"   nzMode="multiple" nzPlaceHolder="请选择所属角色" [(ngModel)]="roleList">
+						<nz-option *ngFor="let option of listOfRole" [nzLabel]="option.role_name" [nzValue]="option.rid"></nz-option>
+					</nz-select>
+					<nz-form-explain *ngIf="(roleList.length<=0)&&saveCheck" class="red">请选择所属角色</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-form-label [nzSm]="4" [nzXs]="24" >性别</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<nz-radio-group formControlName="sex">
+					  <label nz-radio nzValue="m">男</label>
+					  <label nz-radio nzValue="f">女</label>
+					</nz-radio-group>
+				</nz-form-control>
+			</nz-form-item>
+			<!-- <nz-form-item>
+				<nz-form-label [nzSm]="4" [nzXs]="24" >状态</nz-form-label>
+				<nz-form-control [nzSm]="14" [nzXs]="24">
+					<nz-radio-group formControlName="status">
+					  <label nz-radio nzValue="1">已激活</label>
+					  <label nz-radio nzValue="0">未激活</label>
+					</nz-radio-group>
+				</nz-form-control>
+			</nz-form-item> -->
+			
+			<nz-form-item nz-row style="margin-bottom:8px;">
+				<nz-form-control [nzSpan]="14" [nzOffset]="6">
+					<button (click)='submitForm()'  nz-button nzType="primary"  class="mr10">保存</button>
+					<button (click)='cancel()' nz-button nzType="default">取消</button>
+				</nz-form-control>
+			</nz-form-item>
+		</form>
+	</div>	
+</div>
+<!-- 选择所属机构 -->
+<div class="org-selete-box">
+	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"[nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visible" nzTitle="选择机构" (nzOnClose)="close()">
+		<app-request-status [statusParams]='statusParamsTree'></app-request-status>
+		<div class="org-tree-box" [hidden]='statusParamsTree.status!=3'>
+			<div class="search-box">
+				<input nz-input style="width: 180px !important;margin-left: 8px;margin-right: 6px;" id="key" />
+				<button nz-button nzType="primary" nzShape="circle" (click)="searchNode()"><i nz-icon type="search"></i></button>
+			</div>
+			<ul id="treeDemo" class="ztree"></ul>
+			<div class="drawer-footer">
+				<button (click)='treeSave()'  nz-button nzType="primary" class="mr10">保存</button>
+				<button (click)=close() nz-button nzType="default">取消</button>
+			</div>
+		</div>
+	</nz-drawer>
+</div>

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

@@ -0,0 +1,16 @@
+.ztree{
+	padding-bottom: 40px;
+	padding-right: 16px;
+}
+.drawer-footer{
+	display: inline-block;
+	position: relative;
+	left: 50%;
+	bottom: 20px;
+	transform: translate(-50%)
+}
+.relative{
+	position: relative;
+	width: 120px;
+	height: 40px;
+}

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,238 @@
+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 'ztree';
+declare var $: any;
+declare var jQuery: any;
+
+@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;
+	statusParamsTree:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
+	statusParamsRole:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
+	visible = false;  //控制抽屉显示
+	treeSelected:any;
+	orgDetail:any='';	//所选机构详情
+	orgList:any=[]; //机构列表
+	orgSeletedBtn:any=true; //控制机构选择按钮
+	nodeList:any=[];
+	saveCheck:any=false; //保存检查，保存验证表单 false 还未验证  true 触发了验证
+	roleList:any=[]; //保存所选角色
+	listOfRole:any=[]; //角色列表
+	constructor(	
+		private fb: FormBuilder,
+		private http:HttpClientService,
+		private route:ActivatedRoute,
+		private router:Router,
+		private message: NzMessageService,
+	) { }
+
+	ngOnInit() {
+		this.queryRole();
+		this.validateForm = this.fb.group({
+		     real_name:[ '', [ Validators.required ] ],
+		     login_name:[ '', [ Validators.required ] ],
+		     password:[ '', [ Validators.required ] ],
+		     identify_num:[ ''],
+		     email:[ ''],
+		     mobile:[ ''],
+		     sex:['m'],
+		     status:['1'],
+		     role:['']
+		    });
+		//取路由参数
+		this.route.queryParams.subscribe(routeParams=>{
+			//routeParams 1新增 2修改
+			if(routeParams.operateType==2){
+
+				
+			}
+		})
+	}
+	checkName(){
+		console.log(334343)
+	}
+	//机构树，搜索功能
+	searchNode() { 
+	    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+	    zTree.cancelSelectedNode()
+
+	    var key = $("#key");
+	    var value = $.trim(key.get(0).value);
+	    var keyType = "name";
+	    this.nodeList = zTree.getNodesByParamFuzzy(keyType, value);
+	    if (value) {
+	        for (var i = this.nodeList.length - 1; i >= 0; i--) {
+	            zTree.selectNode(this.nodeList[i], true, false);
+	        }
+	    }
+
+	}
+	//删除机构标签
+	tagClose(event){
+		this.orgSeletedBtn=true;
+		this.orgDetail='';
+	}
+	//保存选择机构
+	treeSave(){
+		if(this.treeSelected){
+			this.orgDetail=this.treeSelected;
+			this.visible = false;
+			this.orgSeletedBtn=false;
+		}else{
+			//如果没有选择机构,提示请选择机构
+			this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
+		}
+	}
+	//打开机构树抽屉
+	open(): void {
+		this.treeSelected='';
+		this.statusParamsTree.status=1;
+		this.visible = true;
+		this.initTree();
+
+	}
+	//关闭机构选择页面
+	close(): void {
+		this.visible = false;
+
+	}
+	submitForm(): void {
+		this.saveCheck=true;
+		for (const i in this.validateForm.controls) {
+		  this.validateForm.controls[ i ].markAsDirty();
+		  this.validateForm.controls[ i ].updateValueAndValidity();
+		}
+		if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0){
+			let item=this.validateForm.value;
+			let params={
+				real_name: item.real_name,
+				login_name: item.login_name,
+				password: item.password,
+				mobile: item.mobile,
+				sex: item.sex,
+				identify_num: item.identify_num,
+				email: item.email,
+				status: item.status,
+				orgList: [],
+				roleList: [],
+			};
+			this.roleList.forEach(option=>{
+				params.roleList.push({
+					rid:option
+				})
+			})
+			this.orgList.forEach(option=>{
+				if(option.id==this.orgDetail.id){
+					params.orgList.push(option)
+				}
+			})
+			console.log(params)
+			this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
+				if (json.is_success) {
+					this.message.success(`新增成功`);
+					this.router.navigate(['app/system/users'])
+				} else {
+					this.message.error(`新增失败`)
+				}
+			})
+		}
+
+
+	}
+	//取消 返回列表页
+	cancel(){
+		this.router.navigate(['app/system/users'])
+	}
+	//获取角色列表
+	queryRole(): void {
+		this.statusParamsRole.status=1;
+		this.http.get('/sysapi/setting/role/list', {page_index: '1',page_size: '100',}).subscribe((json) => {
+			if (json.is_success) {
+				this.listOfRole = json.body.list;
+				if(json.body.list&&json.body.list.length>0){
+					this.statusParamsRole.status=3;
+				}else{
+					this.statusParamsRole.status=4;
+				}
+			} else {
+				this.statusParamsRole.status=0;
+			}
+		})
+	}
+	//树模型参数设置
+	public zNodes: any[];
+	setting = {
+	    data: {
+	    	simpleData: {
+	        	enable: true
+	      	}
+	    },
+	    view: {
+	    	showLine: true,
+	      	dblClickExpand: false,
+	      	showIcon:true
+	    },		
+	    callback: {
+	     	//节点点击事件
+	    	onClick: (event, treeId, treeNode, clickFlag) => {
+	        	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+	            this.treeSelected=treeNode;
+	        },
+	    },
+  	};
+	//获取机构列表，树模型数据处理
+	initTree(){
+   		//获取目录列表
+   		this.statusParamsTree.status=1;
+   		this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
+   			if(json.is_success){
+   				if(json.body.length>0){
+   					this.orgList=json.body;
+   					this.statusParamsTree.status=3;
+   					let children=[];
+   					for(var i=0;i<json.body.length;i++){
+   						let option=json.body[i];
+   						option.name=option.organization;
+   						if(option.pid){
+   							option.pId=option.pid;
+   						}else{
+   							option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
+   						}
+   						
+   					}
+   					json.body.push({
+   						name:"全部机构",
+   						isParent:true,
+   						open:true,
+   						id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
+   					})
+   				}else{
+   					//数据为空
+   					this.statusParamsTree.status=4;
+   				}
+   			}else{
+   				//请求失败
+   				this.statusParamsTree.status=0;
+   			}
+   			this.zNodes=json.body;
+	   		 $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
+	          var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+	          let node =  zTree.getNodes();
+	   	})
+
+	}
+
+
+}

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

@@ -1,10 +1,169 @@
 <div class="system-main-container">
 	<div class="user-manage">
 		<div class="tree-box">
-			<ul id="treeDemo" class="ztree"></ul>
+			<app-request-status [statusParams]='statusParamsTree'></app-request-status>
+			<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
+		</div>
+		<div class="system-main-content card">
+			<div class="search-box">
+				<div nz-row>
+					<div nz-col nzSpan="8">
+						<nz-form-item >
+							<nz-form-label nzSpan="6">姓名</nz-form-label>
+							<nz-form-control nzSpan="17">
+							  <input nz-input [(ngModel)]='search.real_name'  placeholder="请输入姓名">
+							</nz-form-control>
+						</nz-form-item>
+					</div>
+					<div nz-col nzSpan="8">
+						<nz-form-item >
+							<nz-form-label nzSpan="8">用户名</nz-form-label>
+							<nz-form-control nzSpan="15">
+							  <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"  (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>
+							<th>操作</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr *ngFor="let item of dataSet.data">
+							<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
+							<td>
+								<span *ngIf="item.sex=='m'">男</span>
+								<span *ngIf="item.sex=='f'">女</span>
+							</td>
+							<td>{{item.login_name}}</td>
+							<td>{{item.email}}</td>
+							<td>{{item.mobile}}</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 class="card">
 			
 		</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.login_name}}</span>
+				<span *ngIf='!userDetail.login_name'>无</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,7 @@
 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;
@@ -12,6 +14,17 @@ 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',
@@ -19,16 +32,94 @@ export class UserManagementComponent implements OnInit {
 		login_name:'',
 		orgId:'',	 
 	}
-	parentNode:any;
+	visible = false;
-	parentName:any;
+	userDetail:any={}; 	//用户详情
-	isTreeTop:any=false;	//判断是否为树最顶层
+
 
 	constructor(
 		private http:HttpClientService,
+		private router:Router,
+		private message: NzMessageService,
 		) { }
 
 	ngOnInit() {
 		this.initTree();
+		this.queryTable();
+	}
+	//删除
+	delectConfirm(item){
+		this.http.delete('/sysapi/setting/user/deleteById/'+item.uid).subscribe((json)=>{
+			if(json.is_success){
+				this.message.success(`删除成功!`);
+				this.queryTable();
+			}else{
+				this.message.error(`删除失败`)
+			}
+		})
+	}
+	//取消删除
+	delectCancel(){
+
+	}
+	//新增、修改  1新增 2修改
+	addModify(type,item?){
+		if(type==1){
+			this.router.navigate(['app/system/users/modify'],{queryParams:{operateType:1}})
+		}else if(type==2){
+			this.router.navigate(['app/system/users/modify'],{queryParams:{operateType:2,id:item.uid}})
+		}
+	}
+	//打开详情页面
+	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.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[];
@@ -39,7 +130,7 @@ export class UserManagementComponent implements OnInit {
 	      	}
 	    },
 	    view: {
-	    	showLine: false,
+	    	showLine: true,
 	      	dblClickExpand: false,
 	      	showIcon:true
 	    },
@@ -47,27 +138,25 @@ export class UserManagementComponent implements OnInit {
 	     	//节点点击事件
 	    	onClick: (event, treeId, treeNode, clickFlag) => {
 	        	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
-	        	zTree.expandNode(treeNode);
 	            this.treeSelected=treeNode;
+	            let isTopNode=this.treeSelected.getParentNode();	//是否为顶级节点 true不是顶级节点 false 为顶级节点
+	            if(isTopNode){	//子节点
 	            	this.search.orgId=this.treeSelected.id;
-	            this.parentNode=this.treeSelected.getParentNode();
+	            }else{	//顶级节点
-	            if(!this.parentNode){
+	            	this.search.orgId='';
-	            	this.isTreeTop=true;
-	            }else{
-	            	this.isTreeTop=false;
 	            }
+	            this.queryTable();
 	        },
-		    //节点展开事件
-		    onExpand: (event, treeId, treeNode) => {
-		        
-		    }
 	    },
   	};
-	//新树模型
+	//获取机构列表，树模型数据处理
 	initTree(){
    		//获取目录列表
+   		this.statusParamsTree.status=1;
    		this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
-   			if(json.is_success&&json.body){
+   			if(json.is_success){
+   				if(json.body.length>0){
+   					this.statusParamsTree.status=3;
    					let children=[];
    					for(var i=0;i<json.body.length;i++){
    						let option=json.body[i];
@@ -85,9 +174,14 @@ export class UserManagementComponent implements OnInit {
    						open:true,
    						id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
    					})
-   				
+   				}else{
+   					//数据为空
+   					this.statusParamsTree.status=4;
+   				}
+   			}else{
+   				//请求失败
+   				this.statusParamsTree.status=0;
    			}
-
    			this.zNodes=json.body;
 	   		 $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
 	          var zTree = $.fn.zTree.getZTreeObj("treeDemo");