airport-chengdu-web/src/app/pages/system-management/department-management/department-management.component.ts

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,NzModalRef, NzModalService  } from 'ng-zorro-antd';
import { Observable } from 'rxjs';

import 'ztree';
declare var $: any; 
declare var jQuery: any

@Component({
  selector: 'app-department-management',
  templateUrl: './department-management.component.html',
  styleUrls: ['./department-management.component.scss']
})
export class DepartmentManagementComponent implements OnInit {
	collectionSize:any ; 
	treeSelected:any;		//树模型-当前选中项
	treeSelectedChild:any; //上级机构选择树
	statusParamsTree:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
		status:1,
	}
	statusParamsUsers:any={	//接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
		status:1,
	}
	public TreeData:any;
	public canDel:any=false;
	public canEdit:any=false;
	public search:any={
		page_index:'1',
		page_size:'10',
		real_name:'',	 
	}
	public orgDetail:any='';	//左侧机构目录当前选中项机构的详情信息
	public orgSeleted:any=''; //新增或者修改时，当前选中的所属机构的机构详情信息
	public modifyType:any='3'; //操作状态 1新增 2修改 3详情
	public parentName:any='';
	public parentNode:any='';	//当前选中机构的父级节点
	public userList:any='';		//机构负责人列表-详情时展示用户列表
	public userSelecteds:any=[]; 	//机构负责人已选用户-新增、修改时 
	public userData:any=[];		//用户列表数据
	saveCheck:any=false; //保存检查，保存验证表单 false 还未验证  true 触发了验证
	public visible:any=false;
	public orgSeletedBtn:any=true; //控制机构选择按钮
	validateForm: FormGroup;
	visibleUsers:any=false;
	isLoadingSave:any=false;
	nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
	oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
	checkNameStatus:any=''; //检测账号唯一性的图标状态
	orgList:any=[];
	confirmModal:NzModalRef;
	constructor(
		private fb: FormBuilder,
		private http:HttpClientService,
		private router:Router,
		private message: NzMessageService,
		private modal: NzModalService,
	) { 
	}

	ngOnInit() {
		$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
		$('.main-content').css('height',(document.documentElement.clientHeight-106+'px'));
		$(window).resize(function(){
			$('.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:[ '' ],
		     address:[ '' ],

		    });
		this.initTree();
		this.queryTable();
	}
	//新增、修改  type 1新增  2修改
	addModify(type){
		//数据清空重置
		this.modifyType=type;
		this.validateForm.reset();
		this.userSelecteds=[];
		this.orgSeleted='';
		this.checkNameStatus='';
		this.nameOnly=true;
		this.validateForm.patchValue({organization_type:1,});
		if(type==1){

		}else if(type==2){
			let item=this.orgDetail;
			this.validateForm.patchValue({
				organization:item.organization,
				shortName:item.shortName,
				code:item.code,
				contact_person:item.contact_person,
				contact_method:item.contact_method,
				organization_type:item.organization_type,
				address:item.address,
			});
			this.orgSeleted=this.parentNode;
			this.userList.forEach(option=>{
				option.checked=true;
				option.disabled=false;
				this.userSelecteds.push(option)
			})
			
		}
		
	}
	//删除
	delete(){
		this.confirmModal = this.modal.confirm({
		      nzTitle: '删除',
		      nzContent: '确定删除【'+this.orgDetail.organization+'】?',
		      nzOnOk: () => new Promise((resolve, reject) => {
		      			this.http.delete('/sysapi/setting/organization/delOrgByid/'+this.orgDetail.id).subscribe((json)=>{
		      				if(json.is_success){
		      					resolve();
		      					this.message.success(`删除成功!`);
		      					this.initTree();
		      				}else{
		      					reject();
		      					this.message.error(`删除失败!`);
		      				}
		      			})
		              
		            }).catch(() => console.log('Oops errors!'))
		    });
	}
	//保存
	submitForm(){
		let pid='';
		let userList=[];
		this.orgSeleted?pid=this.orgSeleted.id:pid='';
		if(this.userSelecteds&&this.userSelecteds.length>0){
			this.userSelecteds.forEach(item=>{
				userList.push({uid:item.uid})
			})
		}
		let params=Object.assign({},this.validateForm.value,{pid:pid},{userList:userList})
		if(this.modifyType==1){
			this.http.post('/sysapi/setting/organization/add/',params).subscribe((json)=>{
			   if(json.is_success){
			       this.message.success(`新增成功!`);
			       this.initTree();
			     }else{
			       this.message.error(`新增失败!`);
			     }
			})
		}else if(this.modifyType==2){
			this.http.put('/sysapi/setting/organization/updateById/'+this.orgDetail.id,params).subscribe((json)=>{
			   if(json.is_success){
			       this.message.success(`修改成功!`);
			       this.initTree();
			     }else{
			       this.message.error(`修改失败!`);
			     }
			})
		}
	}
	//取消	
	cancel(){
		this.modifyType=3;
	}
	//保存机构负责人
	userSave(){
		this.userData.forEach(item=>{
			if(item.checked&&!item.disabled){
				// 增加数据
				this.userSelecteds = [ ...this.userSelecteds, item];
			}
		})
		this.visibleUsers = false;
	}
	//保存选择机构
	treeSave(){
		if(this.treeSelectedChild){
			this.orgSeleted=this.treeSelectedChild;
			// this.visible = false;
			// this.orgSeletedBtn=false;
		}else{
			//如果没有选择机构,提示请选择机构
			this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
		}
	}
	//打开机构负责人抽屉
	openUsers(){
		this.visibleUsers = true;
		this.queryTable();
	}
	//处理机构负责人选择和数据回填
	userSelect(){
		if(this.userData){
			this.userData.forEach(item=>{
				this.userSelecteds.forEach(option=>{
					if(item.uid==option.uid){
						item.checked=true;
						item.disabled=true;
					}
				})
			})
		}
	}
	//关闭用户选择抽屉
	closeUser(){
		this.visibleUsers = false;
	}
	//打开机构树抽屉
	open(): void {
		this.treeSelectedChild='';
		// this.visible = true;
	}
	//关闭机构选择页面
	close(): void {
		// this.visible = false;
	}
	//删除机构标签
	tagClose(event){
		// this.orgSeletedBtn=true;
		this.orgSeleted='';
	}
	//删除机构负责人
	delectConfirm(item){
		this.userSelecteds=this.userSelecteds.filter(function(option){
			return item.uid!==option.uid
		})
	}
	//取消删除
	delectCancel(){

	}
	
	//获取用户列表
	queryTable():void{
		this.statusParamsUsers.status=1;
		this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
			if(json.is_success){
				this.userData=json.body.list;
				this.collectionSize=json.body.total;
				if(json.body.list&&json.body.list.length>0){
					this.statusParamsUsers.status=3;
					this.userData.forEach(item=>{
						if(this.userSelecteds.length>0){
							this.userSelecteds.forEach(option=>{
								if(item.uid==option.uid){
									item.checked=true;
									item.disabled=true;
								}
							})
						}else{
							item.checked=false;
							item.disabled=false;
						}
					})
				}else{
					this.statusParamsUsers.status=4;
				}
			}else{
				this.statusParamsUsers.status=0;
			}
		})
	}
	//翻页
	pageChange(event){
		this.search.page_index=event;
		this.queryTable();
	}
	//修改时查询该系统下的所有用户
	queryUserById():void{
	  this.http.get('/sysapi/setting/organization/queryUserById/'+this.orgDetail.id).subscribe((json)=>{
	    if(json.is_success){
	       this.userList=json.body
	    }else{

	    }
	  })
	}
	//检验编码的唯一性
	checkName(){
		//处理修改的时候，修改的值为原来的值，这时候直接显示验证成功
		if(this.modifyType==2&&this.validateForm.value.code.trim()==this.oldLoginName){
			this.nameOnly = true;
			this.checkNameStatus='success';
			return false;
		}
		//拿用户输入的机构编码跟机构列表的编码对比，判断编码是否已经存在
		let status='true';
		this.orgList.forEach(item=>{
			if(this.validateForm.value.code.trim()==item.code){
				this.checkNameStatus='error';
				this.nameOnly = false;
				status='false';
				return false;
			}
		});
		if(status=='true'&&this.validateForm.value.code.trim()){
			this.checkNameStatus='success';
			this.nameOnly = true;
		}
	}
	//获取机构列表，树模型数据处理
	initTree(){
   		//获取目录列表
   		this.statusParamsTree.status=1;
   		this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
   			if(json.is_success){
   				if(json.body.length>0){
   					this.statusParamsTree.status=3;
   					this.orgList=json.body;
   					let children=[];
   					json.body.forEach(option=>{
   						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;
   			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){
	        	zTree.selectNode(node[0].children[0])
	        	zTree.setting.callback.onClick(null,zTree.setting.treeId,node[0].children[0])
	        }
	   	})
	}
	//树模型参数设置-左侧机构树
	public zNodes: any[];
	setting = {
	    data: {
	    	simpleData: {
	        	enable: true
	      	}
	    },
	    view: {
	    	showLine: true,
	      	dblClickExpand: false,
	      	showIcon:true
	    },
	    callback: {
	     	//节点点击事件
	    	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 为顶级节点
	            if(isTopNode){	//子节点
	            	this.orgDetail=treeNode;
	            	this.oldLoginName=this.orgDetail.code;
	            	this.queryUserById();
	            	this.canDel=true;
	            	this.canEdit=true;
	            	if(isTopNode.id=='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc'){
	            		//除去全部机构这层的第一层 也就是实际意义的顶层
	            	}else{
	            		this.parentName=isTopNode.name;
	            		this.parentNode=isTopNode;
	            	}
	            }else{	//顶级节点
	            	this.orgDetail=''; 
	            	this.canDel=false;
	            	this.canEdit=false;
	            }
	        },
	    },
  	};
  	//树模型参数设置-右侧机构树
	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;
	        },
	    },
  	};

}