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; }, }, }; }