pad-Sixfamiliar/src/app/ui/organization/organization.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree';
import { HttpClient } from '@angular/common/http';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {FormControl} from '@angular/forms';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { TreeService } from '../../http-interceptors/tree.service'
@Component({
  selector: 'app-organization',
  templateUrl: './organization.component.html',
  styleUrls: ['./organization.component.scss']
})
export class OrganizationComponent implements OnInit {
  data:any =[] //存储所有组织机构
  newdata = [];

  private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      enabled:node.enabled,
      order:node.order,
      children:node.children,
      isTop:node.isTop,
      isBottom:node.isBottom,
      code:node.code,
      division:node.division
    };
  }
  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor(private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private tree: TreeService) {
  }
  isloading:any = false //loading效果
  //重新获取列表并且展开到上次位置的方法
  getlist = ():void=>{
    this.http.get('/api/Organizations').subscribe(
      (data:any)=>{
        this.data = data;
        this.newdata = this.tree.toTree(data)

        const nodes = this.treeControl.dataNodes;
        const expandNodes = [];
        nodes.forEach((item) => {
          if(item.expandable && this.treeControl.isExpanded(item)){
            expandNodes.push(item.id);
          }
        });
        
        
        this.dataSource.data = this.newdata;
        let newNodes = this.treeControl.dataNodes;
        newNodes = newNodes.filter(n => {
          return expandNodes.indexOf(n.id) >= 0;
        });
        newNodes.forEach(item => {
          this.treeControl.expand(item);
        });
        this.isloading = false

      }
    )
  }
  //初始化视图
  ngOnInit() {
    this.http.get('/api/Organizations').subscribe(
      (data:any)=>{
        this.data = data;
        this.dataSource.data = this.tree.toTree(data);
        this.treeControl.expand(this.treeControl.dataNodes[0]);
      }
    )
  }
  hasChild = (_: number, node: any) => node.expandable;

  //创建组织按钮
  create(value){
    const dialogRef = this.dialog.open(CreateOrganization, {//调用open方法打开对话框并且携带参数过去
      width: '260px',
      data: {id:value.id,childlength:value.children,level:value.level}
    });
    dialogRef.afterClosed().subscribe(
      data=>{
        if(data){
          this.getlist()
        }  
      }
    );
  }
  //编辑组织按钮
  edit(node){
    const dialogRef = this.dialog.open(EditOrganization, {//调用open方法打开对话框并且携带参数过去
      data: node
    });
    dialogRef.afterClosed().subscribe(
      data=>{
          this.getlist()
      }
    );
  }
  //删除组织按钮
  delete(value){
    var isdeleted = confirm("确定要删除此组织？")
    if(isdeleted){
      //请求删除接口
      this.isloading = true
      this.http.delete(`/api/Organizations/${value.id}`).subscribe( data=>{ 
        this.getlist()
        
      })
    }
  }
  //禁用按钮
  disable(value){
    this.isloading = true
    if(!value.enabled){
        this.http.put(
          `/api/Organizations/${value.id}`, 
          {
            id:value.id,
            code:value.code,
            name: value.name,
            level:value.level,
            order: value.order,
            location: null,
            enabled: true,
            parentId: value.parentId
          }
        ).subscribe(
          data=>{
            const config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('启用成功','确定',config);
            this.getlist()
            
          },
          err=>{
            const config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('操作无效','确定',config);
            this.isloading = false
          }
        )
      
    }else{
      // var isdeleted = confirm("确定要禁用此组织？")
      // if(isdeleted){
        this.http.put(
          `/api/Organizations/${value.id}`, 
          {
            id:value.id,
            code:value.code,
            name: value.name,
            level:value.level,
            order: value.order,
            location: null,
            enabled: false,
            parentId: value.parentId
          }
        ).subscribe(
          data=>{
            const config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('禁用成功','确定',config);
            this.getlist()
            
          },
          err=>{
            const config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('操作无效','确定',config);
            this.isloading = false
          }
        )
      // }
    }
    
    
  }


  //向上箭头
  updata = []
  up(node){
    this.isloading = true
    var olddata = this.data;
    // console.log(1,olddata)
    // console.log(2,node)
    this.updata = []
    olddata.forEach(item => {
      if(item.id == node.parentId){
        this.updata = item.children
      }
    });
    // console.log(this.updata)
    this.updata.forEach((item,index)=>{
      if(item.name == node.name){
        this.http.put(//更改点击的节点为上一节点的order
          `/api/Organizations/${this.updata[index].id}`, 
          {
            id:this.updata[index].id,
            code:this.updata[index].code,
            name: this.updata[index].name,
            level: this.updata[index].level,
            order:  this.updata[index - 1].order,
            location: null,
            enabled: true,
            parentId:  this.updata[index].parentId,
          }
        ).subscribe(
          data=>{    
            // this.getlist()     
            this.http.put(//更改上一节点为点击节点的order
              `/api/Organizations/${this.updata[index - 1].id}`, 
              {
                id:this.updata[index - 1].id,
                code:this.updata[index - 1].code,
                name: this.updata[index - 1].name,
                level: this.updata[index - 1].level,
                order:  this.updata[index].order,
                location: null,
                enabled: true,
                parentId:  this.updata[index].parentId,
              }
            ).subscribe(
              data=>{
                this.getlist()
                
              },
              err=>{
                const config = new MatSnackBarConfig();
                config.verticalPosition = 'top';
                config.duration = 3000
                this.snackBar.open('更改order失败','确定',config);
                this.isloading = false
              }
            )
          },
          err=>{
            const config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('更改order失败','确定',config);
            this.isloading = false
          }
        )

        
      }


    
    })
   
  }



  //向下箭头
  downdata = []
  down(node){
    this.isloading = true
    var olddata = this.data;
    this.downdata = []
    olddata.forEach(item => {
      if(item.id == node.parentId){
        this.downdata = item.children
      }
    });
    // console.log(this.downdata)
    this.downdata.forEach((item,index)=>{
      if(item.name == node.name){
        this.http.put(//更改点击的节点为下一节点的order
          `/api/Organizations/${this.downdata[index].id}`, 
          {
            id:this.downdata[index].id,
            code:this.downdata[index].code,
            name: this.downdata[index].name,
            level: this.downdata[index].level,
            order:  this.downdata[index + 1].order,
            location: null,
            enabled: true,
            parentId:  this.downdata[index].parentId,
          }
        ).subscribe(
          data=>{    
            // this.getlist() 
            this.http.put(//更改上一节点为点击节点的order
              `/api/Organizations/${this.downdata[index + 1].id}`, 
              {
                id:this.downdata[index + 1].id,
                code:this.downdata[index + 1].code,
                name: this.downdata[index + 1].name,
                level: this.downdata[index + 1].level,
                order:  this.downdata[index].order,
                location: null,
                enabled: true,
                parentId:  this.downdata[index].parentId,
              }
            ).subscribe(
              data=>{
                this.getlist()
               
              },
              err=>{
                const config = new MatSnackBarConfig();
                config.verticalPosition = 'top';
                config.duration = 3000
                this.snackBar.open('更改order失败','确定',config);
                this.isloading = false
              }
            )    
          },
          err=>{
            const config = new MatSnackBarConfig();
            config.verticalPosition = 'top';
            config.duration = 3000
            this.snackBar.open('更改order失败','确定',config);
            this.isloading = false
          }
        )

        
      }


    
    })
  }
}





//创建组织
@Component({
  selector: 'createorganization',
  templateUrl: './createorganization.component.html',
  styleUrls: ['./organization.component.scss']
})
export class CreateOrganization {
  myControl = new FormControl();
  ishttp: boolean =false
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateOrganization>,@Inject(MAT_DIALOG_DATA) public data,
  public snackBar: MatSnackBar) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  onSubmit(value){
    if(this.data.childlength){//如果点击节点存在children
      this.http.post(
        '/api/Organizations', 
        {
          id:"",
          code:value.number,
          division:value.division,
          name: value.name,
          level:this.data.level + 1,
          order: this.data.childlength[this.data.childlength.length -1].order + 1,
          location: null,
          enabled: true,
          parentId: this.data.id,
        }
      ).subscribe(
        data=>{
          this.dialogRef.close(data); 
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('创建组织成功','确定',config);
        },
        err=>{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请填写正确格式','确定',config);
        }
      )
    }else{
      this.http.post(
        '/api/Organizations', 
        {
          id:"",
          code:value.number,
          division:value.division,
          name: value.name,
          level:this.data.level + 1,
          order:0,
          location: null,
          enabled: true,
          parentId: this.data.id,
        }
      ).subscribe(
        data=>{
          this.dialogRef.close(data);
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('创建组织成功','确定',config);
        },
        err=>{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请填写正确格式','确定',config);
        }
      )
    }
    
  }
}

//编辑组件
@Component({
  selector: 'editorganization',
  templateUrl: './editorganization.component.html',
  styleUrls: ['./organization.component.scss']
})
export class EditOrganization {
  newdata = [];
  private _transformer = (node, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      children:node.children,
      division:node.division
    };
  }
  treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
  treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  myControl = new FormControl();
  organizationname:string=""//自己组织的名字
  organizationcode:any//自己组织的编号
  organizationName:any =''//上级组织的名字
  organizationId:any =''//上级组织的id
  organizationLevel:number =null//上级组织的层级
  organizationchildlength:number = null
  allOrganizations:any //所有组织机构
  division:any //区划
  constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditOrganization>,@Inject(MAT_DIALOG_DATA) public data,
  private tree:TreeService,public snackBar: MatSnackBar) {}

  //获取所有组织机构
  getMechanism () {
    this.http.get('/api/Organizations').subscribe(
      (data:any)=>{
        this.allOrganizations = data
        this.dataSource.data = this.tree.toTree(data);
        data.forEach(item=>{
          if(item.id == this.data.parentId){
            this.organizationName = item.name
          }
        })
      }
    )
  }
  
  ngOnInit() {
    // console.log(this.data)
    this.getMechanism()
    this.organizationname = this.data.name
    this.organizationcode = this.data.code
    this.division = this.data.division
  }
  hasChild = (_: number, node: any) => node.expandable;
  onNoClick(): void {
    this.dialogRef.close();
  }
  add(e){
    this.organizationName=e.name
    this.organizationId=e.id
    this.organizationLevel=e.level
    if(e.children){//如果点击的父组织有子节点
      this.organizationchildlength = e.children.length
    }else{
      this.organizationchildlength = 0
    }
  }
  onSubmit(value){
    if(this.organizationLevel){//如果点击了右边的树
      this.http.put(
        `/api/Organizations/${this.data.id}`, 
        {
          id:this.data.id,
          code:value.number,
          division:value.division,
          name: value.name,
          level:this.organizationLevel + 1,
          order:  this.organizationchildlength,
          location: null,
          enabled: true,
          parentId: this.organizationId,
        }
      ).subscribe(
        data=>{
          this.dialogRef.close();
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('修改成功','确定',config);
        },
        err=>{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请填写正确格式','确定',config);
        }
      )
    }else{                      //如果只改了姓名
      this.http.put(
        `/api/Organizations/${this.data.id}`, 
        {
          id:this.data.id,
          code: value.number,
          division:value.division,
          name: value.name,
          level:this.data.level,
          order: this.data.order,
          location: null,
          enabled: true,
          parentId: this.data.parentId,
        }
      ).subscribe(
        data=>{
          this.dialogRef.close();
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('修改成功','确定',config);
        },
        err=>{
          const config = new MatSnackBarConfig();
          config.verticalPosition = 'top';
          config.duration = 3000
          this.snackBar.open('请填写正确格式','确定',config);
        }
      )
    }
    
  }
}