417 lines
12 KiB
TypeScript
417 lines
12 KiB
TypeScript
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;
|
|
},
|
|
},
|
|
};
|
|
|
|
}
|