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