<!--权限设置-选择员工-->
<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>

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';});}}}

<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>

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.departmentNamethis.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);}