用户管理新增、列表修改

src/app/pages/main.scss

@@ -3,7 +3,7 @@
 	margin-right: 10px;
 }
 .red{
-	color: red;
+	color: #f5222d;
 }
 .orange{
 	color: orange;

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

@@ -1,6 +1,6 @@
 <div class="system-main-container">
 	<div class="user-modify-box card">
-		<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+		<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">
@@ -9,14 +9,14 @@
 				</nz-form-control>
 			</nz-form-item>
 			<nz-form-item>
-				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="loginId" nzRequired>统一身份认证账号</nz-form-label>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="login_name" nzRequired>系统账号</nz-form-label>
 				<nz-form-control [nzSm]="14" [nzXs]="24">
-					<input nz-input id="loginId" formControlName="loginId" placeholder="请输入统一身份认证账号">
+					<input nz-input (ngBlur)='checkName()' id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号">
-					<nz-form-explain *ngIf="validateForm.get('loginId').dirty && validateForm.get('loginId').errors">请输入统一身份认证账号</nz-form-explain>
+					<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-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>
@@ -25,8 +25,23 @@
 			<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="请选择所属机构">
+					<span *ngIf="orgDetail">
-					<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请选择所属机构</nz-form-explain>
+					<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>
@@ -47,12 +62,48 @@
 					<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 nz-button nzType="primary">保存</button>
+					<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.ts

@@ -1,5 +1,12 @@
 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',
@@ -7,40 +14,225 @@ import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
   styleUrls: ['./user-management-modify.component.scss','../../../main.scss']
 })
 export class UserManagementModifyComponent implements OnInit {
-	 validateForm: FormGroup;
+	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 fb: FormBuilder,
+		private http:HttpClientService,
+		private route:ActivatedRoute,
+		private router:Router,
+		private message: NzMessageService,
 	) { }
 
 	ngOnInit() {
+		this.queryRole();
 		this.validateForm = this.fb.group({
-		     real_name:[ null, [ Validators.required ] ],
+		     real_name:[ '', [ Validators.required ] ],
-		     loginId:[ null, [ Validators.required ] ],
+		     login_name:[ '', [ Validators.required ] ],
-		     password:[ null, [ Validators.required ] ],
+		     password:[ '', [ Validators.required ] ],
-		     identify_num:[ null],
+		     identify_num:[ ''],
-		     email:[ null],
+		     email:[ ''],
-		     mobile:[ null],
+		     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){
-	updateConfirmValidator(): void {
+			let item=this.validateForm.value;
-	    /** wait for refresh value */
+			let params={
-	    Promise.resolve().then(() => this.validateForm.controls.checkPassword.updateValueAndValidity());
+				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(`新增失败`)
+				}
+			})
+		}
 
-	  confirmationValidator = (control: FormControl): { [ s: string ]: boolean } => {
+
-	    if (!control.value) {
+	}
-	      return { required: true };
+	//取消 返回列表页
-	    } else if (control.value !== this.validateForm.controls.password.value) {
+	cancel(){
-	      return { confirm: true, error: true };
+		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

@@ -62,7 +62,7 @@
 							<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 class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
+								<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>
@@ -90,16 +90,16 @@
 		  </div>
 		   <div nz-col nzSpan="24">
 		    <nz-form-item>
-		      <nz-form-label>统一身份认证账号</nz-form-label>
+		      <nz-form-label>系统账号</nz-form-label>
-				<span class="detail-item-text">{{userDetail.loginId}}</span>
+				<span class="detail-item-text">{{userDetail.login_name}}</span>
-				<span *ngIf='!userDetail.loginId'>无</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>
+		      <nz-form-label>系统密码</nz-form-label>
 				<span class="detail-item-text">{{userDetail.password}}</span>
 				<span *ngIf='!userDetail.password'>无</span>
 		    </nz-form-item>

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

@@ -1,6 +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;
@@ -38,19 +39,34 @@ export class UserManagementComponent implements OnInit {
 	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){
-			console.log(222)
 			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}})
 		}
 	}
 	//打开详情页面