airport-chengdu-web/src/app/pages/system-management/user-management/user-management-modify/user-management-modify.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,ActivatedRoute } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';

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=[]; //角色列表
	nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
	oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
	checkNameStatus:any=''; //检测账号唯一性的图标状态
	modifyType:any=1; //当前页面操作类型  1 新增用户  2 编辑用户
	userId:any='';	//用户ID 修改的用户ID
	userDetail:any={}; 	//用户详情
	statusParamsDetail:any={	//获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
		status:1,
	}
	isLoadingSave:any=false;
	constructor(	
		private fb: FormBuilder,
		private http:HttpClientService,
		private route:ActivatedRoute,
		private router:Router,
		private message: NzMessageService,
	) { }

	ngOnInit() {
		// // 页面监听 动态改变表单高度
		// $('#main-container').height('height',(document.documentElement.clientHeight-106+'px'));
		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:[''],
		     remark: ['']
		    });
		//取路由参数
		this.route.queryParams.subscribe(routeParams=>{
			this.modifyType=routeParams.operateType;
			//routeParams 1新增 2修改
			if(routeParams.operateType==2){
				this.userId=routeParams.id;
				this.queryUserDetail();
			}else{
				this.statusParamsDetail.status=3;
			}
		})
	}
	//获取用户详情
	queryUserDetail(){
		this.http.get('/sysapi/setting/user/detail/list', { uid:this.userId  }).subscribe((json)=>{
			if(json.is_success){
				if(json.body){
					this.statusParamsDetail.status=3;
					this.userDetail=json.body;
					let detail=json.body;
					this.validateForm.setValue({
						real_name:detail.real_name,
						login_name:detail.login_name,
						password:detail.password,
						identify_num:detail.identify_num,
						email:detail.email,
						mobile:detail.mobile,
						sex:detail.sex,
						status:detail.status,
						role:'',
						remark:detail.remark,
					})
					this.oldLoginName=detail.login_name;
					if(detail.orgList&&detail.orgList.length>0){
						this.orgDetail=detail.orgList[0];
					}
					if(detail.roleList&&detail.roleList.length>0){
						detail.roleList.forEach(item=>{
							this.roleList.push(item.rid)
						})
					}
				}else{
					this.statusParamsDetail.status=4;
				}
			}else{
				this.statusParamsDetail.status=0;
			}
		})
	}
	//检验系统账号的唯一性
	checkName(){
		if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
			this.nameOnly = true;
			this.checkNameStatus='success';
			return false;
		}
		this.checkNameStatus='validating';
		this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
			if (json.is_success) {
				if(json.body){
					this.checkNameStatus='success';
					this.nameOnly = true;
				}else{
					this.checkNameStatus='error';
					this.nameOnly = false;
				}				
			} else {
				this.message.error(`账号验证接口错误`)
			}

		})
	}
	//机构树，搜索功能
	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(){
		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&&this.nameOnly){
		//再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
			if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
				this.nameOnly = true;
				this.checkNameStatus='success';
				this.submitConfirm(2);
				return false;
			}
			this.checkNameStatus='validating';
			//再次验证用户名唯一性
			this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
				if (json.is_success) {
					if(json.body){
						this.checkNameStatus='success';
						this.nameOnly = true;
						//表单处理
						this.submitConfirm(this.modifyType);
					}else{
						this.checkNameStatus='error';
						this.nameOnly = false;
						return false;
					}				
				} else {
					this.message.error(`账号验证接口错误`)
				}
			})
		}
	}
	//确认提交表单 type 1 新增  2修改
	submitConfirm(type){
		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,
			remark: item.remark,
			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)
			}
		})
		this.isLoadingSave=true;
		if(type==1){
			this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
				this.isLoadingSave=false;
				if (json.is_success) {
					this.message.success(`新增成功`);
					this.router.navigate(['app/system/users'])
				} else {
					this.message.error(`新增失败`)
				}
			})
		}else if(type==2){
			this.http.put('/sysapi/setting/user/updateById/'+this.userId, params).subscribe((json) => {
				this.isLoadingSave=false;
				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();
	   	})

	}


}