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