angular2+ 中封装调用递归tree

子组件  given-person.html

<!--权限设置-选择员工-->
<li [class.noborder]="!dir.shierarchy" *ngFor="let dir of directories" [ngStyle]="{'margin-left': 5+(dir.shierarchy*.5)+'px'}">
  <span *ngIf="dir.employee.length && dir[files.filename]">
    <i (click)="toggle(dir)"
       [ngClass]="{
       'file-open': files.icon==='file' && dir.toggle,
       'file-close': files.icon==='file' && !dir.toggle
       }"></i>
    <input (click)="onAllChecked(dir)"  type="checkbox" [(ngModel)]="dir.isChecked">
    <em class="filename">{{dir[files.filename]}}</em>
  </span>

  <ng-container *ngIf="dir.toggle">
    <ng-container *ngIf="dir.employee.length">

      <label class="emname" [ngStyle]="{'margin-left': 5+(dir.shierarchy*.5)+'px'}" *ngFor="let em of dir.employee">
        <!-- 当部门选中之后，下面的员工都被选中，并禁用掉不让取消勾选 -->
        <input (click)="callback(em)" type="checkbox" [(ngModel)]="em.isChecked" [disabled]="dir.isChecked">
      {{em.emName}}</label>
    </ng-container>
    <ng-container *ngIf="dir[files.child]">
      <app-given-person [directories]="dir[files.child]" [files]='files' (callbackEvent)="files.callback($event,files.that)"></app-given-person>
     
    </ng-container>
  </ng-container>
</li>

子组件 given-person.ts

import {Component, OnInit, Input, Output, EventEmitter, OnChanges} from '@angular/core';

@Component({
  selector: 'app-given-person',
  templateUrl: './given-person.component.html',
  styleUrls: ['./given-person.component.scss']
})
export class GivenPersonComponent implements OnChanges, OnInit {
  @Input() directories;
  @Input() files;
  @Output() callbackEvent = new EventEmitter();

  constructor() {
  }

  ngOnInit() {

  }

  ngOnChanges() {
    this.setOrganizsTree(this.directories, 0);
    console.log(this.directories)
    console.log(this.files)
  }

  // 设置层级
  setOrganizsTree(data, shierarchy) {
    data.forEach(item => {
      if (!item.isChecked) {
        item.isChecked = false;
      }
      if (!item.shierarchy) {
        item.shierarchy = shierarchy;
      }
      if (!item.toggle) {
        item.toggle = true;
      }
      if (item.departs.length !== 0) {
        console.log(item.shierarchy);
        const shierarchy1 = item.shierarchy + 1;
        this.setOrganizsTree(item.departs, shierarchy1); // 递归
      }
    });
  }

  toggle(dir) {
    dir.toggle = !dir.toggle;
  }

  callback(dir) {
    // console.log(dir)
    this.callbackEvent.emit(dir);
  }

  // 全选
  onAllChecked(dir) {
    dir.touch = 'touch';
     this.callbackEvent.emit(dir);
    this.checkedAll(dir, !dir.isChecked);

  }
  // 全选
  checkedAll(dir, bools) {
    // 点击部门把部门下的所有人选中
    if (dir.departs && dir.departs.length !== 0) {
      dir.departs.forEach(item => {
        item.isChecked = bools;
      });
      dir.departs.forEach(item => {
        this.checkedAll(item, bools);
        item.touch = 'no';
      });
    }

    if (dir.employee && dir.employee.length !== 0) {
       dir.employee.forEach(item => {
        item.isChecked = bools;
      });
      dir.employee.forEach(item => {
        this.checkedAll(item, bools);
        item.touch = 'no';
      });
    }

  }

}

页面中调用 demo.component.ts

<button (click)="showAddSuperAdmin=true"></button>

<!-- 选择发送对象，部门或个人，选择部门时意味着选的是部门下所有人 -->
<div class="mask" *ngIf="showAddSuperAdmin">
  <div class="alert-content">
    <div class="title">选择发送对象<span class="close-btn" (click)="showAddSuperAdmin=false">×</span></div>
        <div class="container clearFix">
           <div class="pull-left">
             <div class="tit">选择：</div>
             <div class="structure">
                 <form [formGroup]="departsForm" class="search" *ngIf="departsForm">
                   <input type="text" placeholder="搜索" formControlName="departsNameSearch">
                   <span class="sear-close" *ngIf="departsForm.get('departsNameSearch').value" (click)="searchTreeClose()">×</span>
                   <img src="../assets/icon/ser.png">
                 </form>
                  <i style="opacity: 0;height: 1px;overflow: hidden;1px;display: inline-block">{{filteredStates | async}}</i>
                <!-- <orangize-tree [treelist]="menu"></orangize-tree> -->
                <div class="organiz">
                    <label class="all" *ngIf="departsFormResult.show"><input type="checkbox" [(ngModel)]="allCheckOrganizsEmployee" (change)="allCheckOrganizsEmployeeEvent()"> 全选 </label>
                    <app-given-person *ngIf="departsFormResult.show" [directories]="organizsTreeOriginal" (callbackEvent)="callbackEvent($event,this)" [files]="filesTree"></app-given-person>
                    <div *ngIf="organizsFilterStaff.length===0">{{departsFormResult.msg}}</div>
                    <ng-container *ngIf="!departsFormResult.show">
                      <label class="emname" *ngFor="let em of organizsFilterStaff"><input [disabled]="allCheckOrganizsEmployee" (click)="callbackEvent(em,this)" type="checkbox" [(ngModel)]="em.isChecked">{{em.emName}}------{{em.parent}}</label>
                    </ng-container>
                  </div>
             </div>
           </div>
       </div>
    <div class="btn-wrap"><button class="btn bgblue submit" (click)="onSave()">确定</button></div>
  </div>
</div>

ts

showAddSuperAdmin = false;
  departsForm: FormGroup; // 部门搜索
  departsFormResult = {show: false, msg: '查询中...'};
  filteredStates: Observable<string>;
  organizsTreeOriginal = []; // 左侧树结构原始数据
  organizsFilterStaff = []; // 模糊查询显示员工
  selectedStaffs = [];
  filesTree = {
    'titleshow': false,
    'child': 'departs',
    'filename': 'departmentName',
    'icon': 'file',
    'callback': null, // 在初始函数里面讲callback初始化  this.filesTree.callback = this.callbackEvent;
    'that': this
  };

ngOnInit() {
 this.filesTree.callback = this.callbackEvent;
}

selectedDeparts = []; // 部门或人
 onSave(){ // 保存发送对象
    this.showAddSuperAdmin = false;
    this.selectedDeparts = [];
    this._addGiven(this.organizsTreeOriginal);
    console.log(this.selectedDeparts)
    this.params.sendTarget = this.selectedDeparts;
    const arr = [];
    this.params.sendTarget.forEach(i=>{
     arr.push(i.sendName)
    })
    this.addsendName = arr.join(',')
    

 }

// 在给后台传参的时候，如果是选择部门就只传部门，相当于会发给部门下所有人，如果是选择的是部门下面的某个或某几个人，就传这几个人和和对应的id，selectedDeparts是要传给后台的参数
 _addGiven(data) {
    data.forEach(item => {
      if (item.isChecked) {
        
        const option = {sendName:item.departmentName, sendEmId:''}
        this.selectedDeparts.push(option);
      }
      if (item.departs.length !== 0 && !item.isChecked) {
        this._addGiven(item.departs);
      }
      if (item.employee.length !== 0&& !item.isChecked) {
        
        this._addEmployee(item.employee);
      }
    });
  }

  _addEmployee(data){
    data.forEach(item=>{
       if(item.isChecked){
         const option = {sendName:item.emName, sendEmId:item.emId}
         this.selectedDeparts.push(option)
       }
    })
  }

private allCheckOrganizsEmployee = false;
  allCheckOrganizsEmployeeEvent() {
    this._allCheckOrganizsEmployee(this.organizsTreeOriginal, this.allCheckOrganizsEmployee)
  }

  _allCheckOrganizsEmployee(data, b) {
    data.forEach(item => {
        item.isChecked = b;
      if (item.employee !== 0) { // 如果有员工
        item.employee.forEach(em => {
            em.isChecked = b;
        });
      }
      if (item.departs.length !== 0) { // 如果还有部门
        this._allCheckOrganizsEmployee(item.departs, b)
      }
    })
  }

  // 点击叉叉清空value;
  searchTreeClose (){
    this.departsForm.patchValue({departsNameSearch: ''});
  }
  // 订阅搜索部门
  departsNameSearchInit() {
    this.departsForm = this.fb.group({
      departsNameSearch: ['']
    })
    this.filteredStates = this.departsForm.get('departsNameSearch').valueChanges.pipe(
      startWith(''),
      debounceTime(300),
      map(state => {
        // // console.log(state)
        if (state === '') {
          this.departsFormResult.show = true;
        } else {
          this.departsFormResult.show = false;
        }
        this.organizsFilterStaff = [];
        this.setPageOrganizsTree(state, this.organizsTreeOriginal)

        if (this.organizsFilterStaff.length === 0) {
          this.departsFormResult.msg = `没有查询到 "${state}"`;
        }
        return state;
      })
    );
  }

// 选择发送对象
  selectedStaffsEvent(data, type, user?) {
    data.forEach(item => {
      if (item.employee !== 0) { // 如果有员工
        item.employee.forEach(em => {
          if (em.isChecked) {
            this.selectedStaffs.push(em);
          }
        });
      }
      if (item.departs.length !== 0) { // 如果还有部门
        if (type === 'select' || type === 'reset') { // 选择 或者重置
          this.selectedStaffsEvent(item.departs, type); // 递归
        }
        if (type === 'delete') { // 移除
          this.selectedStaffsEvent(item.departs, type, user); // 递归
        }

      }
    });
  }

  // 筛选层级
  setPageOrganizsTree(key, data) {
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      // 如果有员工
      if (item.employee.length !== 0) {
        for (let j = 0; j < item.employee.length; j++) {
          const staff = item.employee[j];
          if (staff.emName.indexOf(key) !== -1) {// 匹配到
            staff.parent = item.departmentName
            this.organizsFilterStaff.push(staff);
            // break;
          }
        }
      }
      // 如果有部门
      if (item.departs.length !== 0) {
        this.setPageOrganizsTree(key, item.departs);
      }
    }
  }

  // tree callback;
  callbackEvent(v, that) {
    console.log(v)
   
    that.selectedStaffs = [];
    setTimeout(() => {
      that.selectedStaffsEvent(that.organizsTreeOriginal, 'select');
    }, 0);

  }