angular2+ 中封装调用递归tree

时间:2021-04-05 21:55:47

子组件  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;width: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); }