20 changed files with 1036 additions and 356 deletions
@ -0,0 +1,69 @@
|
||||
<div class="box" id="disposeequipment"> |
||||
<div class="title"> |
||||
<div class="titlecontent"> |
||||
处置消防器材 |
||||
</div> |
||||
<i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i> |
||||
</div> |
||||
|
||||
<nz-radio-group *ngIf="!data2.handleTime" class="radiobox" [(ngModel)]="radioValue" |
||||
(ngModelChange)="ngModelChange($event)"> |
||||
<label nz-radio nzValue="A">维保</label> |
||||
<label nz-radio nzValue="B">报废</label> |
||||
</nz-radio-group> |
||||
<p *ngIf="data2.handleTime && !data2.violatedItemSnapshotObj.isScrap" |
||||
style="color: green;text-align: center;margin-top: 12px;">已处置成功（维保）</p> |
||||
<p *ngIf="data2.handleTime && data2.violatedItemSnapshotObj.isScrap" |
||||
style="color: red;text-align: center;margin-top: 12px;">已处置成功（报废）</p> |
||||
<form nz-form [formGroup]="validateForm" class="form"> |
||||
<div *ngIf="!isScrap && !data2.handleTime"> |
||||
<p>消防器材名称</p> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="data2.violatedItemSnapshotObj.name" nz-input type="text" |
||||
formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<p>规格</p> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="data2.violatedItemSnapshotObj.specification" nz-input type="text" |
||||
formControlName="specification" placeholder="请输入规格" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<p>购入日期</p> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-date-picker [nzAllowClear]="false" [(ngModel)]="data2.violatedItemSnapshotObj.purchaseDate" formControlName="buytime" |
||||
nzPlaceHolder="请输入购入日期"> |
||||
</nz-date-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<p>生产日期</p> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-date-picker [nzAllowClear]="false" [(ngModel)]="data2.violatedItemSnapshotObj.productionDate" |
||||
formControlName="prodtime" nzPlaceHolder="请输入生产日期"> |
||||
</nz-date-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<p>有效期至</p> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-date-picker [nzAllowClear]="false" [(ngModel)]="data2.violatedItemSnapshotObj.validityEndTime" |
||||
formControlName="validitytime" nzPlaceHolder="有效期至"> |
||||
</nz-date-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</div> |
||||
|
||||
<div class="btnbox" *ngIf="!data2.handleTime"> |
||||
<button nz-button type="submit" class="ok" (click)="ok()">确定</button> |
||||
<button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,89 @@
|
||||
#disposeequipment { |
||||
.title { |
||||
font-family: sybold; |
||||
width: 100%; |
||||
height: 48px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
.titlecontent { |
||||
width: 100%; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%); |
||||
text-align: center; |
||||
color: #91CCFF; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
i { |
||||
position: absolute; |
||||
right: 12px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.radiobox{ |
||||
label{ |
||||
color: white; |
||||
} |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 12px; |
||||
} |
||||
.form { |
||||
box-sizing: border-box; |
||||
padding: 0 17px; |
||||
|
||||
p { |
||||
margin-bottom: 0; |
||||
color: #C4E2FC; |
||||
margin: 16px 0; |
||||
} |
||||
|
||||
nz-form-item { |
||||
margin-bottom: 0; |
||||
|
||||
input { |
||||
color: rgba(145, 204, 255, 0.95) !important; |
||||
} |
||||
} |
||||
|
||||
nz-date-picker { |
||||
background-color: #143c61; |
||||
width: 100%; |
||||
} |
||||
|
||||
.btnbox { |
||||
width: 100%; |
||||
margin-top: 24px; |
||||
margin-bottom: 17px; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
button { |
||||
border-radius: 0px; |
||||
color: #91CCFF; |
||||
} |
||||
|
||||
button:nth-child(2) { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
.ok { |
||||
background: rgba(0, 129, 255, 0.4); |
||||
} |
||||
|
||||
.cancel { |
||||
border: 1px solid #C4E2FC; |
||||
background: #0c1e38; |
||||
color: rgba(99, 102, 105, 0.6); |
||||
box-shadow: 0 0 3px 0 #fff inset; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,46 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-disposeequipment', |
||||
templateUrl: './disposeequipment.component.html', |
||||
styleUrls: ['./disposeequipment.component.scss'] |
||||
}) |
||||
export class DisposeequipmentComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
|
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
radioValue = "A" |
||||
data2 |
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
specification: [null, [Validators.required]], |
||||
buytime: [null, [Validators.required]], |
||||
prodtime: [null, [Validators.required]], |
||||
validitytime: [null, [Validators.required]] |
||||
}); |
||||
this.data2 = JSON.parse(JSON.stringify(this.data)) |
||||
} |
||||
|
||||
destroyModal() { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
ok() { |
||||
this.modal.triggerOk() |
||||
} |
||||
//是否报废
|
||||
isScrap = false |
||||
ngModelChange(e) { |
||||
console.log(e) |
||||
if (e == 'A') { |
||||
this.isScrap = false |
||||
} else { |
||||
this.isScrap = true |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue