部门管理-新增

src/app/components/pipe/no-value.component.ts

@@ -9,5 +9,5 @@ export class NoValue implements PipeTransform {
     }else{
       return '无'
     }
-	
+	}
 }

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

@@ -11,12 +11,13 @@
 				<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 -->
 			<form class="org-detail" *ngIf="modifyType==3&&orgDetail"  nz-form [nzLayout]="'inline'">
 				<div nz-row nzGutter="24">
 					<div nz-col nzSpan="24">
 						<nz-form-item>
 							<nz-form-label>机构名称</nz-form-label>
-							<span class="detail-item-text">{{orgDetail.name|null}}</span>
+							<span class="detail-item-text">{{orgDetail.organization|null}}</span>
 						</nz-form-item>
 					</div>
 					<div nz-col nzSpan="24">
@@ -59,7 +60,7 @@
 					</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">{{parentName|null}}</span>
 						</nz-form-item>
 					</div>
@@ -70,8 +71,115 @@
 							<img *ngIf='orgDetail.logo' class="org-detail-logo" [src]="orgDetail.logo" alt="">
 						</nz-form-item>
 					</div>
+					<div nz-col nzSpan="24">
+						<nz-form-item>
+							<nz-form-label>机构负责人</nz-form-label>
+							<span class="detail-item-text"></span>
+						</nz-form-item>
+					</div>
+					<div class="user-table">
+						<nz-table [nzShowPagination]='false'  #dataSet [nzData]="userList">
+							<thead>
+								<tr>
+									<th>姓名</th>
+									<th>用户名</th>
+									<th>电话</th>
+									<th>邮箱</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let item of dataSet.data">
+									<td>{{item.real_name}}</td>
+									<td>{{item.login_name}}</td>
+									<td>{{item.mobile}}</td>
+									<td>{{item.email}}</td>
+								</tr>
+							</tbody>
+						</nz-table>
+					</div>
 				</div>
 			</form>
+			<!-- 详情 end -->
+			<!-- 新增、修改 begin -->
+			<form class="form-modify" nz-form [formGroup]="validateForm" *ngIf="modifyType==1||modifyType==2">
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization" nzRequired>机构名称</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<input nz-input id="organization" formControlName="organization" placeholder="请输入姓名">
+						<nz-form-explain *ngIf="validateForm.get('organization').dirty && validateForm.get('organization').errors">请输入机构名称</nz-form-explain>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="shortName">机构简称</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<input nz-input id="shortName" formControlName="shortName" placeholder="请输入姓名">
+						<nz-form-explain *ngIf="validateForm.get('shortName').dirty && validateForm.get('shortName').errors">请输入机构简称</nz-form-explain>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="code" nzRequired>机构编码</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<input nz-input id="code" formControlName="code" placeholder="请输入姓名">
+						<nz-form-explain *ngIf="validateForm.get('code').dirty && validateForm.get('code').errors">请输入机构编码</nz-form-explain>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_person" >联系人</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<input nz-input id="contact_person" formControlName="contact_person" placeholder="请输入姓名">
+						<nz-form-explain *ngIf="validateForm.get('contact_person').dirty && validateForm.get('contact_person').errors">请输入联系人</nz-form-explain>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_method" >联系方式</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<input nz-input id="contact_method" formControlName="contact_method" placeholder="请输入姓名">
+						<nz-form-explain *ngIf="validateForm.get('contact_method').dirty && validateForm.get('contact_method').errors">请输入联系方式</nz-form-explain>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="address" >机构地址</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<textarea rows="3" id="address" nz-input formControlName="address" placeholder="请输入机构地址" ></textarea>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization_type" >机构类型</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<nz-radio-group formControlName="organization_type">
+						  <label nz-radio nzValue="1">机构</label>
+						  <label nz-radio nzValue="2">部门</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]="18" [nzXs]="24">
+					<span *ngIf="orgSeleted">
+					<nz-tag nzMode="closeable"  (nzOnClose)="tagClose($event)" >{{orgSeleted.organization}}</nz-tag>
+					</span>
+					<a href="javascript:;"  (click)="open()"><span *ngIf="orgSeleted">修改</span><span *ngIf="!orgSeleted">选择</span></a>
+					<nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain>
+				</nz-form-control>
+			</nz-form-item>
+			</form>
+			<!-- 新增、修改 end -->
 		</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]="visible" nzTitle="选择机构" (nzOnClose)="close()">
+		<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="treeDemoChild" 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/department-management/department-management.component.scss

@@ -13,6 +13,14 @@
 			.org-detail-logo{
 				width: 40px;
 			}
+			.form-modify{
+				margin-top: 20px;
+			}
+			.user-table{
+				width: 80%;
+				margin: 0 auto;
+				margin-bottom: 30px;
+			}
 		}
 		.tree-box{
 			overflow-y:scroll; 

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

@@ -1,7 +1,9 @@
 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 { Observable } from 'rxjs';
 
 import 'ztree';
 declare var $: any; 
@@ -14,18 +16,28 @@ declare var jQuery: any
 })
 export class DepartmentManagementComponent implements OnInit {
 	treeSelected:any;		//树模型-当前选中项
+	treeSelectedChild:any; //上级机构选择树
 	statusParamsTree:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
 		status:1,
 	}
+	public TreeData:any;
 	public canDel:any=false;
 	public canEdit:any=false;
 	public search:any={
 		orgId:'',	 
 	}
 	public orgDetail:any='';
+	public orgSeleted:any=''; //所选机构详情
 	public modifyType:any='3'; //操作状态 1新增 2修改 3详情
+	public parentName:any='';
+	public parentNode:any='';	//当前选中机构的父级节点
+	public userList:any='';		//机构负责人列表
+	saveCheck:any=false; //保存检查，保存验证表单 false 还未验证  true 触发了验证
+	
+	validateForm: FormGroup;
 
 	constructor(
+		private fb: FormBuilder,
 		private http:HttpClientService,
 		private router:Router,
 		private message: NzMessageService,
@@ -38,6 +50,17 @@ export class DepartmentManagementComponent implements OnInit {
 			$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
 			$('.main-content').css('height',(document.documentElement.clientHeight-106+'px'));
 		})
+		//表单实例化
+		this.validateForm = this.fb.group({
+		     organization:[ '', [ Validators.required ] ],
+		     shortName:[ '' ],
+		     code:[ '', [ Validators.required ] ],
+		     contact_person:[ '' ],
+		     contact_method:[ '' ],
+		     organization_type:[ '1' ],
+		     address:[ '' ],
+
+		    });
 		this.initTree();
 	}
 	//新增、修改
@@ -45,9 +68,43 @@ export class DepartmentManagementComponent implements OnInit {
 		this.modifyType=type;
 	}
 
-	//获取机构详情
-	queryDetail(){
+	submitForm(){
+		this.saveCheck=true;
+	}
+	//保存选择机构
+	treeSave(){
+		if(this.treeSelectedChild){
+			this.orgSeleted=this.treeSelectedChild;
+			this.visible = false;
+			this.orgSeletedBtn=false;
+		}else{
+			//如果没有选择机构,提示请选择机构
+			this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
+		}
+	}
+	//打开机构树抽屉
+	open(): void {
+		this.treeSelectedChild='';
+		this.visible = true;
+	}
+	//关闭机构选择页面
+	close(): void {
+		this.visible = false;
+	}
+	//删除机构标签
+	tagClose(event){
+		this.orgSeletedBtn=true;
+		this.orgSeleted='';
+	}
+	//修改时查询该系统下的所有用户
+	queryUserById():void{
+	  this.http.get('/sysapi/setting/organization/queryUserById/'+this.orgDetail.id).subscribe((json)=>{
+	    if(json.is_success){
+	       this.userList=json.body
+	    }else{
 
+	    }
+	  })
 	}
 	//获取机构列表，树模型数据处理
 	initTree(){
@@ -81,7 +138,9 @@ export class DepartmentManagementComponent implements OnInit {
    				this.statusParamsTree.status=0;
    			}
    			this.zNodes=json.body;
+   			this.zNodesChild=json.body;
 	   		$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
+	   		$.fn.zTree.init($("#treeDemoChild"), this.settingChild, this.zNodesChild);
 	        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 	        let node =  zTree.getNodes();
 	        if(json.body.length>0){
@@ -90,7 +149,7 @@ export class DepartmentManagementComponent implements OnInit {
 	        }
 	   	})
 	}
-	//树模型参数设置
+	//树模型参数设置-左侧机构树
 	public zNodes: any[];
 	setting = {
 	    data: {
@@ -107,26 +166,49 @@ export class DepartmentManagementComponent implements OnInit {
 	     	//节点点击事件
 	    	onClick: (event, treeId, treeNode, clickFlag) => {
 	    		this.modifyType=3;
+	    		this.parentName='';
+	    		this.parentNode='';
 	        	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 	            this.treeSelected=treeNode;
 	            let isTopNode=this.treeSelected.getParentNode();	//是否为顶级节点 true不是顶级节点 false 为顶级节点
 	            console.log(isTopNode)
 	            if(isTopNode){	//子节点
 	            	this.orgDetail=treeNode;
+	            	this.queryUserById();
 	            	this.canDel=true;
 	            	this.canEdit=true;
-	            	if(isTopNode.pId=='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc'){
+	            	if(isTopNode.id=='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc'){
 	            		//除去全部机构这层的第一层 也就是实际意义的顶层
-
 	            	}else{
-
+	            		this.parentName=isTopNode.name;
+	            		this.parentNode=isTopNode;
 	            	}
 	            }else{	//顶级节点
 	            	this.orgDetail='';
 	            	this.canDel=false;
 	            	this.canEdit=false;
 	            }
-	            this.queryDetail();
+	        },
+	    },
+  	};
+  	//树模型参数设置-右侧机构树
+	public zNodesChild: any[];
+	settingChild = {
+	    data: {
+	    	simpleData: {
+	        	enable: true
+	      	}
+	    },
+	    view: {
+	    	showLine: true,
+	      	dblClickExpand: false,
+	      	showIcon:true
+	    },
+	    callback: {
+	     	//节点点击事件
+	    	onClick: (event, treeId, treeNode, clickFlag) => {
+	    		var zTree = $.fn.zTree.getZTreeObj("treeDemoChild");
+	            this.treeSelectedChild=treeNode;
 	        },
 	    },
   	};

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

@@ -72,8 +72,6 @@ export class UserManagementModifyComponent implements OnInit {
 			if(routeParams.operateType==2){
 				this.userId=routeParams.id;
 				this.queryUserDetail();
-				
-				
 			}else{
 				this.statusParamsDetail.status=3;
 			}
@@ -145,7 +143,6 @@ export class UserManagementModifyComponent implements OnInit {
 	searchNode() { 
 	    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 	    zTree.cancelSelectedNode()
-
 	    var key = $("#key");
 	    var value = $.trim(key.get(0).value);
 	    var keyType = "name";
@@ -155,7 +152,6 @@ export class UserManagementModifyComponent implements OnInit {
 	            zTree.selectNode(this.nodeList[i], true, false);
 	        }
 	    }
-
 	}
 	//删除机构标签
 	tagClose(event){
@@ -184,7 +180,6 @@ export class UserManagementModifyComponent implements OnInit {
 	//关闭机构选择页面
 	close(): void {
 		this.visible = false;
-
 	}
 	submitForm(){
 		this.saveCheck=true;
@@ -269,7 +264,6 @@ export class UserManagementModifyComponent implements OnInit {
 				}
 			})
 		}
-		
 	}
 	//取消 返回列表页
 	cancel(){
@@ -330,7 +324,6 @@ export class UserManagementModifyComponent implements OnInit {
    						}else{
    							option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
    						}
-   						
    					}
    					json.body.push({
    						name:"全部机构",