用户管理-列表开发

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

@@ -10580,6 +10580,14 @@
       "version": "0.8.26",
       "resolved": "http://registry.npm.taobao.org/zone.js/download/zone.js-0.8.26.tgz",
       "integrity": "sha1-e91y92aMWnrWsRgUi06jnFnQjS0="
+    },
+    "ztree": {
+      "version": "3.5.24",
+      "resolved": "https://registry.npmjs.org/ztree/-/ztree-3.5.24.tgz",
+      "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: red;
+}
+.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,15 @@
 	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;
+}
+
 
 /* 目录树样式 */
 :host /deep/ ul.tree{

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,7 @@ 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';
 @NgModule({
     imports: [
         CommonModule,
@@ -28,7 +28,8 @@ import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-
         NgZorroAntdModule,
         ColorPickerModule,
         ReactiveFormsModule,
-        FormsModule
+        FormsModule,
+        ComponentsModule
     ],
     declarations: [
         SystemManagementComponent,

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

@@ -1,10 +1,75 @@
 <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="card">
+		<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   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   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 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>
+				</div>
+			</div>
+			<div class="table-box">
+				<app-request-status [statusParams]='statusParamsTable'></app-request-status>
+				<nz-table [nzShowPagination]='false' *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0' #dataSet [nzData]="tableData">
+				  <thead>
+				    <tr>
+					       <th>姓名</th>
+					       <!-- <th>所属机构</th> -->
+					       <th>性别</th>
+					       <th>用户名</th>
+					       <th>邮箱</th>
+					       <th>电话</th>
+					       <th>操作</th>
+					    </tr>
+				  </thead>
+				  <tbody>
+				    <tr *ngFor="let item of dataSet.data">
+				      <td>{{item.real_name}}</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></td>
+				    </tr>
+				  </tbody>
+				</nz-table>
+				
+			</div>	
+			<div class="page-box">
+				<nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination>
+			</div>
 		</div>
 	</div>
 </div>
+  

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

@@ -2,4 +2,4 @@
 	.card{
 		
 	}
-}
+} 

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

@@ -12,16 +12,22 @@ declare var jQuery: any;
 })
 export class UserManagementComponent implements OnInit {
 	treeSelected:any;		//树模型-当前选中项
+	collectionSize:any ; 
+	statusParamsTable:any={	//获取目录树接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
+	statusParamsTree:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
 	public search:any={
 		page_index:'1',
 		page_size:'10',
 		real_name:'',
 		login_name:'',
-		orgId:'',	
+		orgId:'',	 
 	}
-	parentNode:any;
+	isLoading:false;
-	parentName:any;
+	public tableData:any=[];
-	isTreeTop:any=false;	//判断是否为树最顶层
 
 	constructor(
 		private http:HttpClientService,
@@ -29,17 +35,31 @@ export class UserManagementComponent implements OnInit {
 
 	ngOnInit() {
 		this.initTree();
+		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;
+			}else{
+				this.statusParamsTable.status=0;
+			}
+		})
 	}
 	//树模型参数设置
 	public zNodes: any[];
 	setting = {
 	    data: {
 	    	simpleData: {
-	        enable: true
+	        	enable: true
 	      	}
 	    },
 	    view: {
-	    	showLine: false,
+	    	showLine: true,
 	      	dblClickExpand: false,
 	      	showIcon:true
 	    },
@@ -47,47 +67,50 @@ export class UserManagementComponent implements OnInit {
 	     	//节点点击事件
 	    	onClick: (event, treeId, treeNode, clickFlag) => {
 	        	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
-	        	zTree.expandNode(treeNode);
 	            this.treeSelected=treeNode;
-	            this.search.orgId=this.treeSelected.id;
+	            let isTopNode=this.treeSelected.getParentNode();	//是否为顶级节点 true不是顶级节点 false 为顶级节点
-	            this.parentNode=this.treeSelected.getParentNode();
+	            if(isTopNode){	//子节点
-	            if(!this.parentNode){
+	            	this.search.orgId=this.treeSelected.id;
-	            	this.isTreeTop=true;
+	            }else{	//顶级节点
-	            }else{
+	            	this.search.orgId='';
-	            	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){
-   				let children=[];
+   				if(json.body.length>0){
-   				for(var i=0;i<json.body.length;i++){
+   					this.statusParamsTree.status=3;
-   					let option=json.body[i];
+   					let children=[];
-   					option.name=option.organization;
+   					for(var i=0;i<json.body.length;i++){
-   					if(option.pid){
+   						let option=json.body[i];
-   						option.pId=option.pid;
+   						option.name=option.organization;
-   					}else{
+   						if(option.pid){
-   						option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
+   							option.pId=option.pid;
+   						}else{
+   							option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
+   						}
+   						
    					}
-   					
+   					json.body.push({
+   						name:"全部机构",
+   						isParent:true,
+   						open:true,
+   						id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
+   					})
+   				}else{
+   					//数据为空
+   					this.statusParamsTree.status=4;
    				}
-   				json.body.push({
+   			}else{
-   					name:"全部机构",
+   				//请求失败
-   					isParent:true,
+   				this.statusParamsTree.status=0;
-   					open:true,
-   					id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
-   				})
-   				
    			}
-
    			this.zNodes=json.body;
 	   		 $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
 	          var zTree = $.fn.zTree.getZTreeObj("treeDemo");