10 changed files with 544 additions and 486 deletions
@ -1,63 +1,59 @@
|
||||
<!-- <p>演练记录</p> --> |
||||
<div class="box"> |
||||
<div class="header"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<div class="queryBox"> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">演练对象:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请输入演练对象" name="companyName" [(ngModel)]="name" autocomplete="off"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">演练时间:</label> |
||||
<mat-form-field class="example-full-width"> |
||||
<input matInput placeholder="请选择演练时间" name="companyName" [(ngModel)]="time" autocomplete="off"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="queryField"> |
||||
<button mat-raised-button color="primary">查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button> |
||||
</div> |
||||
<form class="queryBox" (ngSubmit)="onSubmit()"> |
||||
<div class="queryField"> |
||||
<span style="width: 108px;">单位名称:</span> |
||||
<input name="name" nz-input placeholder="请输入单位名称" [(ngModel)]="name" /> |
||||
</div> |
||||
<div class="queryField" style="margin-right: 35px;"> |
||||
<span>组织机构:</span> |
||||
<nz-tree-select [nzDropdownClassName]="'maxHeightTreeSelect'" style="width: 250px" |
||||
[nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch nzPlaceHolder="请选择组织机构" name="orId" |
||||
[(ngModel)]="orId"> |
||||
</nz-tree-select> |
||||
</div> |
||||
<div class="queryField"> |
||||
<span>熟悉时间:</span> |
||||
<nz-range-picker name="time" [(ngModel)]="time"></nz-range-picker> |
||||
</div> |
||||
<div class="queryField btnbox"> |
||||
<button nz-button nzType="primary">查询</button> |
||||
<button nz-button type="button" nzType="default" (click)="reset()">重置</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
<div class="body"> |
||||
<div class="tablebox"> |
||||
|
||||
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>演练对象</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="time1"> |
||||
<th mat-header-cell *matHeaderCellDef>演练时间</th> |
||||
<td mat-cell *matCellDef="let element">{{element.time1}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="time2"> |
||||
<th mat-header-cell *matHeaderCellDef>演练时段</th> |
||||
<td mat-cell *matCellDef="let element">{{element.time2}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="type"> |
||||
<th mat-header-cell *matHeaderCellDef>演练形式</th> |
||||
<td mat-cell *matCellDef="let element">{{element.type}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operate"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element" class="operate"> |
||||
<span>查看</span> |
||||
<span>详情</span> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
<div class="tablebox"> |
||||
<table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8"> |
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>演练对象</th> |
||||
<td mat-cell *matCellDef="let element">{{element.company.name}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="or"> |
||||
<th mat-header-cell *matHeaderCellDef>组织机构</th> |
||||
<td mat-cell *matCellDef="let element">{{element.company.organizationName}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="people"> |
||||
<th mat-header-cell *matHeaderCellDef>带队人员</th> |
||||
<td mat-cell *matCellDef="let element">{{element.teamLeader}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="time"> |
||||
<th mat-header-cell *matHeaderCellDef>演练时间</th> |
||||
<td mat-cell *matCellDef="let element">{{element.startTime | date:'yyyy-MM-dd HH:mm'}} - |
||||
{{element.endTime | date:'yyyy-MM-dd HH:mm'}}</td> |
||||
</ng-container> |
||||
<ng-container matColumnDef="operate"> |
||||
<th mat-header-cell *matHeaderCellDef style="width: 200px;">操作</th> |
||||
<td mat-cell *matCellDef="let element" class="operate"> |
||||
<span (click)="look(element)">查看</span> |
||||
<!-- <span (click)="delete(element)">删除</span> --> |
||||
</td> |
||||
</ng-container> |
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" [pageSize]="pageSize" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
</div> |
||||
</div> |
||||
@ -1,114 +1,141 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from "@angular/core"; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { |
||||
MatTreeFlatDataSource, |
||||
MatTreeFlattener, |
||||
} from "@angular/material/tree"; |
||||
import { MatPaginator } from "@angular/material/paginator"; |
||||
import { FlatTreeControl } from "@angular/cdk/tree"; |
||||
import { FormControl } from "@angular/forms"; |
||||
import { Router, ActivatedRoute } from "@angular/router"; |
||||
import { PageEvent } from "@angular/material/paginator"; |
||||
import { MatDialog } from "@angular/material/dialog"; |
||||
import { MatSnackBar } from "@angular/material/snack-bar"; |
||||
import { TreeService } from "../../http-interceptors/tree.service"; |
||||
import { DatePipe } from "@angular/common"; |
||||
import { UploadDrillComponent } from "@src/app/key-unit/key-unit-management/upload-drill/upload-drill.component"; |
||||
@Component({ |
||||
selector: "app-drill-record", |
||||
templateUrl: "./drill-record.component.html", |
||||
styleUrls: ["./drill-record.component.scss"], |
||||
providers: [DatePipe], |
||||
}) |
||||
export class DrillRecordComponent implements OnInit { |
||||
constructor( |
||||
private http: HttpClient, |
||||
private router: Router, |
||||
private route: ActivatedRoute, |
||||
private tree: TreeService, |
||||
public dialog: MatDialog, |
||||
public snackBar: MatSnackBar |
||||
public snackBar: MatSnackBar, |
||||
private datePipe: DatePipe |
||||
) {} |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
//初始化tree
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children: node.children, |
||||
}; |
||||
}; |
||||
treeControl = new FlatTreeControl<any>( |
||||
(node) => node.level, |
||||
(node) => node.expandable |
||||
); |
||||
treeFlattener = new MatTreeFlattener( |
||||
this._transformer, |
||||
(node) => node.level, |
||||
(node) => node.expandable, |
||||
(node) => node.children |
||||
); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
//分页
|
||||
@ViewChild(MatPaginator, { static: true }) |
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length: any = 4; //共多少条数据
|
||||
pageSize: any = 10; //每页条数
|
||||
pageSizeOptions: number[] = [10]; //设置每页条数
|
||||
PageNumber: any = 1; //第几页
|
||||
|
||||
displayedColumns: string[] = ["name", "time1", "time2", "type", "operate"]; |
||||
allorganizations: any; //所有组织机构
|
||||
allunittype: any; //所有单位类型
|
||||
displayedColumns: string[] = ["name", "or", "people", "time", "operate"]; |
||||
tabledataSource: any; //表格数据
|
||||
IsNewData = ""; //维护更新活新增
|
||||
|
||||
preparelevels: any; |
||||
ngOnInit(): void { |
||||
this.tabledataSource = [ |
||||
{ |
||||
name: "中保大厦有限公司", |
||||
time1: "2023-5-18 07:19", |
||||
time2: "2023.5.18-2023.5.19", |
||||
type: "二维预案演练", |
||||
}, |
||||
{ |
||||
name: "上海通高制造有限公司", |
||||
time1: "2023-5-19 09:09", |
||||
time2: "2023.5.19-2023.5.19", |
||||
type: "二维预案演练", |
||||
}, |
||||
{ |
||||
name: "怡莲超市", |
||||
time1: "2023-5-20 08:23", |
||||
time2: "2023.5.20-2023.5.21", |
||||
type: "二维预案演练", |
||||
}, |
||||
{ |
||||
name: "永兴商务广场", |
||||
time1: "2023-5-25 12:50", |
||||
time2: "2023.5.25-2023.5.26", |
||||
type: "二维预案演练", |
||||
}, |
||||
]; |
||||
this.getOrganizations(); |
||||
} |
||||
|
||||
//获得所有组织机构
|
||||
allorganizations: any; //所有组织机构
|
||||
getOrganizations() { |
||||
this.http.get("/api/Organizations").subscribe((data: any) => { |
||||
this.allorganizations = data; |
||||
this.getpresentOrganization(); |
||||
}); |
||||
} |
||||
|
||||
//得到当前单位所在组织机构的tree型数据
|
||||
expandKeys = []; |
||||
nodes = []; |
||||
organizationId; |
||||
getpresentOrganization() { |
||||
this.allorganizations.forEach((item) => { |
||||
item.key = item.id; |
||||
item.title = item.name; |
||||
item.children = []; |
||||
this.allorganizations.forEach((element) => { |
||||
if (element.parentId == item.id) { |
||||
item.children.push(element); |
||||
} |
||||
if (item.children.length === 0) { |
||||
item.isLeaf = true; |
||||
} else { |
||||
item.isLeaf = false; |
||||
} |
||||
}); |
||||
}); |
||||
this.http.get("/api/Account/Profiles").subscribe((data: any) => { |
||||
this.allorganizations.forEach((item) => { |
||||
if (item.name == data.organizationName) { |
||||
this.expandKeys = [item.id]; |
||||
this.organizationId = item.id; |
||||
this.orId = item.id; |
||||
this.nodes = [...[item]]; |
||||
this.getTabledataSource(); |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
length: any; //共多少条数据
|
||||
pageSize: any = 10; //每页条数
|
||||
PageNumber: any = 1; //第几页
|
||||
getTabledataSource() { |
||||
let params = { |
||||
OrganizationId: this.orId, |
||||
CompanyName: this.name || "", |
||||
StartTime: this.time |
||||
? this.datePipe.transform(this.time[0], "yyyy-MM-ddT00:00:00") |
||||
: "2020-01-01T00:00:00", |
||||
EndTime: this.time |
||||
? this.datePipe.transform(this.time[1], "yyyy-MM-ddT23:59:59") |
||||
: "2030-01-01T00:00:00", |
||||
PageNumber: this.PageNumber, |
||||
PageSize: this.pageSize, |
||||
}; |
||||
this.http |
||||
.get("/api/DrillRecords", { params: params }) |
||||
.subscribe((data: any) => { |
||||
this.tabledataSource = data.items; |
||||
this.length = data.totalCount; |
||||
}); |
||||
} |
||||
|
||||
//分页事件
|
||||
chagePage(e) { |
||||
this.PageNumber = e.pageIndex + 1; |
||||
this.getTabledataSource(); |
||||
} |
||||
|
||||
name; |
||||
orId; |
||||
time; |
||||
//查询
|
||||
onSubmit(e) { |
||||
onSubmit() { |
||||
this.PageNumber = 1; |
||||
this.pageEvent.pageIndex = 0; |
||||
this.getTabledataSource(); |
||||
} |
||||
|
||||
//重置
|
||||
reset() {} |
||||
reset() { |
||||
this.name = ""; |
||||
this.orId = this.organizationId; |
||||
this.time = null; |
||||
this.onSubmit(); |
||||
} |
||||
look(element) { |
||||
this.dialog.open(UploadDrillComponent, { |
||||
width: "700px", |
||||
data: { unitInfo: element.company, isEditMode: false }, |
||||
}); |
||||
} |
||||
delete(element) { |
||||
if (confirm("确认删除此记录吗")) { |
||||
this.http |
||||
.delete(`/api/DrillRecords/${element.id}`) |
||||
.subscribe((data: any) => { |
||||
alert('删除成功') |
||||
this.getTabledataSource(); |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue