import {Component, OnInit, ViewContainerRef} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-plan',
templateUrl: './plan.component.html',
styleUrls: ['./plan.component.css']
})
export class PlanComponent implements OnInit {
// 控制对话框是否可见
isUpdateModalVisible = false;
// 控制对话框
isOkUpdateModalLoading = false;
// 对话框和父组件之间的桥梁，用于传递数据
waitingUpdatedData: any;
validateForm!: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit(): void {
this.validateForm = this.fb.group({
name: [null, [Validators.required]],
expectedValue: [null, [Validators.required]],
rangePicker: [[]],
description: [null, [Validators.required]],
});
...
}
/**
* 显示对话框
*/
showUpdateModal(id: string, data: any): void {
// 初始化对话框所需的数据
const dateRange: Date[] = [new Date(data.startTime), new Date(data.expireTime)];
data['dateRange'] = dateRange;
this.waitingUpdatedData = data;
console.log(this.waitingUpdatedData)
// 手动设置对话框可见
this.isUpdateModalVisible = true;
}
/**
* 表单提交
*/
submitUpdateForm(): void {
this.waitingUpdatedData.startTime = this.waitingUpdatedData.dateRange[0];
this.waitingUpdatedData.expireTime = this.waitingUpdatedData.dateRange[1];
this.updatePlan(this.waitingUpdatedData.id, this.waitingUpdatedData);
}
/**
* 重置表单
*/
resetForm(): void {
this.validateForm.reset();
for (const key in this.validateForm.controls) {
this.validateForm.controls[key].markAsPristine();
this.validateForm.controls[key].updateValueAndValidity();
}
}
/**
* 处理ok时间
*/
handleUpdateOk(): void {
// 显示加载中
this.isOkUpdateModalLoading = true;
// 等待1秒，用于模拟请求api所需时间。 1秒后，提交表单数据，手动隐藏对话框，并重置表单
setTimeout(() => {
this.submitUpdateForm();
this.isUpdateModalVisible = false;
this.isOkUpdateModalLoading = false;
this.resetForm();
}, 1000);
}
/**
* 处理取消事件
*/
handleUpdateCancel(): void {
// 设置对话框不可见，并重置表单
this.isUpdateModalVisible = false;
this.resetForm();
}
}