src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.html
@@ -1,39 +1,55 @@ <div class="modal-header"> <div class="modal-title">配置传感器</div> <div class="modal-title">配置传感器</div> </div> <nz-table #nzTable [nzDataSource]="grid.data" [nzPageSize]="8" [nzLoading]="grid.loading" [nzShowTotal]="true"> <thead nz-thead> <tr> <th nz-th [nzCheckbox]="true"> <label nz-checkbox [(ngModel)]="grid.allChecked" [nzIndeterminate]="grid.indeterminate" (ngModelChange)="grid.checkAll($event)"></label> </th> <th nz-th *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}"> <span>{{ col.text }}</span> <nz-table-sort *ngIf="col.isSort" [(nzValue)]="col.sort" (nzValueChange)="sort(col.name,$event)"></nz-table-sort> </th> </tr> </thead> <tbody nz-tbody> <tr nz-tbody-tr *ngFor="let row of nzTable.data"> <td nz-td [nzCheckbox]="true"> <label nz-checkbox [(ngModel)]="row.checked" (ngModelChange)="grid.refreshStatus($event)"></label> </td> <td nz-td *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}"> <span [ngSwitch]="col.type"> <!-- 要使用管道，无法自动生成 --> <span *ngSwitchDefault> {{ row[col.name]|tyepHandle:col:row }} </span> <!-- 要使用管道，无法自动生成 --> </span> </td> </tr> </tbody> </nz-table> <nz-row nzGutter="0"> <nz-col nzSpan="24" style="height: 520px;"> <nz-table #nzTable [nzDataSource]="gridDataImage" [nzPageSize]="8" [nzLoading]="grid.loading" [nzShowTotal]="true"> <thead nz-thead> <tr> <th nz-th> </th> <th nz-th *ngFor="let col of grid.columns;let i = index;" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}"> <span>{{ col.text }}</span> <ng-container *ngIf="i === 0"> <span> {{ '('+selectedCount+'/'+grid.data.length+')' }} </span> <nz-table-sort [(nzValue)]="col.sort" (nzValueChange)="sort(col.name,$event)"></nz-table-sort> <nz-dropdown [nzTrigger]="'click'" [nzClickHide]="false"> <i class="anticon anticon-search ant-table-filter-icon" nz-dropdown></i> <div nz-dropdown-custom class="custom-filter-dropdown"> <nz-input [nzPlaceHolder]="'输入名称'" [ngModel]="searchValue" (ngModelChange)="setSearchValue($event)"></nz-input> </div> </nz-dropdown> </ng-container> </th> </tr> </thead> <tbody nz-tbody> <ng-container *ngFor="let row of nzTable.data"> <tr nz-tbody-tr> <td nz-td [nzCheckbox]="true"> <label nz-checkbox [(ngModel)]="row.checked" (ngModelChange)="grid.refreshStatus($event)"></label> </td> <td nz-td *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}"> <span [ngSwitch]="col.type"> <!-- 要使用管道，无法自动生成 --> <span *ngSwitchDefault> {{ row[col.name]|tyepHandle:col:row }} </span> <!-- 要使用管道，无法自动生成 --> </span> </td> </tr> </ng-container> </tbody> </nz-table> </nz-col> </nz-row> <div class="modal-footer"> <button nz-button type="button" (click)="close()">关闭</button> <button nz-button [nzType]="'primary'" (click)="save($event,null,null)" [nzLoading]="isSaving"> <span > 保存<span *ngIf="isSaving" >中</span> </span> </button> <button nz-button type="button" (click)="close()">关闭</button> <button nz-button [nzType]="'primary'" (click)="save($event,null,null)" [nzLoading]="isSaving"> <span> 保存 <span *ngIf="isSaving">中</span> </span> </button> </div> src/app/routes/devices/version/version-sensor-config/version-sensor-config.component.ts
@@ -4,6 +4,8 @@ import { PageBean, Grid } from '@business/entity/grid'; import { Sensor } from '@business/entity/data'; import { Subject } from 'rxjs/Subject'; import { count } from 'rxjs/operator/count'; import { debounce } from 'rxjs/operators'; @Component({ selector: 'app-version-sensor-config', @@ -13,8 +15,10 @@ export class VersionSensorConfigComponent implements OnInit { deviceVersionId: number; selectedSensorIds: number[]; originalOrder: { [key: string]: number} = {}; isSaving = false; grid: Grid<Sensor> = new Grid(null); public searchValue = ''; private initPage() { const sensor: Sensor = { name: { @@ -44,6 +48,24 @@ this.grid.title = '传感器'; this.grid.setColumns(sensor); this.grid.pageSize = 0; this.subjectStream.debounceTime(500).distinctUntilChanged().subscribe( name => { if (!name || !name.trim()) { this.gridDataImage = this.grid.data; } else { this.gridDataImage = this.grid.data.filter( item => { name = name.trim().toLowerCase(); if (!!item.name.toLowerCase().match(name)) { return true; } else { return false; } } ); } } ); } constructor( private subject: NzModalSubject, @@ -54,6 +76,7 @@ this.initPage(); this.load(); } public gridDataImage = []; load() { // 延时加载避免ExpressionChangedAfterItHasBeenCheckedError setTimeout(() => { @@ -64,6 +87,7 @@ this.grid.loading = true; if (res != null && res.data != null) { this.grid.initData(res); this.gridDataImage = this.grid.data; this.grid.data.map( (row: any) => { row['checked'] = this.selectedSensorIds.filter( @@ -77,6 +101,9 @@ setTimeout(() => { this.grid.loading = false; }, 1); this.grid.data.forEach((item, index) => { this.originalOrder[item.id] = index; }); } } ); @@ -88,18 +115,53 @@ $event.preventDefault(); this.subject.next( this ); } sort(field: string, value: string) { // 删除当前field this.grid.sorts = this.grid.sorts.filter( (fn: string) => { return fn !== field; } ); // 如果value不为null，在排序数组最后加上filed if (value != null) { this.grid.sorts.push(field); } this.load(); public get selectedCount(): number { let selectedCount = 0; this.grid.data.forEach( item => { if (item['checked']) { selectedCount++; } } ); return selectedCount; } sort(field: string, value: string) { const data = this.grid.data.sort( (a, b) => { let aWeight = 0; let bWeight = 0; // debugger; if (!!value) { if (value === 'ascend') { aWeight = a['checked'] ? 1 : 0; bWeight = b['checked'] ? 1 : 0; } else { aWeight = a['checked'] ? 0 : 1; bWeight = b['checked'] ? 0 : 1; } } else { const idMap = this.originalOrder; aWeight = idMap[a.id]; bWeight = idMap[b.id]; } return aWeight - bWeight; } ); this.grid.data = data; this.gridDataImage = []; setTimeout(() => { this.gridDataImage = data; }, 1); // this.subjectStream.next(null); // setTimeout(() => { // this.grid.data = data; // this.grid.refreshStatus(); // }, 1); } private subjectStream: Subject<string> = new Subject<string> (); public setSearchValue(name) { this.searchValue = name; this.subjectStream.next(name); } }
