|
|
|
@ -1,9 +1,10 @@ |
|
|
|
import { Component, OnInit } from "@angular/core"; |
|
|
|
import { Component, Input, OnInit } from "@angular/core"; |
|
|
|
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"; |
|
|
|
import { ApiService } from "@cdk/services"; |
|
|
|
import { Utils } from "@cdk/utils"; |
|
|
|
import { FormValidators } from "@cdk/validators"; |
|
|
|
import { NzMessageService } from "ng-zorro-antd/message"; |
|
|
|
import { finalize } from "rxjs"; |
|
|
|
import { Subject, debounceTime, distinctUntilChanged, filter, finalize, switchMap, throttleTime } from "rxjs"; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
selector: "app-dish-form", |
|
|
|
@ -13,29 +14,47 @@ import { finalize } from "rxjs"; |
|
|
|
export class DishFormComponent { |
|
|
|
constructor(private fb: FormBuilder, private msg: NzMessageService, private api: ApiService) {} |
|
|
|
|
|
|
|
@Input() data: any; |
|
|
|
|
|
|
|
@Input() orgs: any[] = []; |
|
|
|
|
|
|
|
@Input() foods: any[] = []; |
|
|
|
|
|
|
|
private orgSearch$ = new Subject<Record<string, string>>(); |
|
|
|
|
|
|
|
private foodSearch$ = new Subject<Record<string, string>>(); |
|
|
|
|
|
|
|
formGroup!: FormGroup; |
|
|
|
|
|
|
|
selectedValue = null; |
|
|
|
|
|
|
|
listOfOption: Array<{ value: string; text: string }> = []; |
|
|
|
orgListOfOption: Array<{ value: string; text: string }> = []; |
|
|
|
|
|
|
|
foodListOfOption: Array<{ value: string; text: string }> = []; |
|
|
|
|
|
|
|
searchedFood: Array<{ value: string; text: string }> = []; |
|
|
|
|
|
|
|
foodSelected: string[] = []; |
|
|
|
|
|
|
|
foodItemSelected: any[] = []; |
|
|
|
|
|
|
|
nzFilterOption = (): boolean => true; |
|
|
|
|
|
|
|
globalEnum = this.api.globalEnum; |
|
|
|
|
|
|
|
allMonth = [ |
|
|
|
{ value: "1", label: "一月", checked: false }, |
|
|
|
{ value: "2", label: "二月", checked: false }, |
|
|
|
{ value: "3", label: "三月", checked: false }, |
|
|
|
{ value: "4", label: "四月", checked: false }, |
|
|
|
{ value: "5", label: "五月", checked: false }, |
|
|
|
{ value: "6", label: "六月", checked: false }, |
|
|
|
{ value: "7", label: "七月", checked: false }, |
|
|
|
{ value: "8", label: "八月", checked: false }, |
|
|
|
{ value: "9", label: "九月", checked: false }, |
|
|
|
{ value: "10", label: "十月", checked: false }, |
|
|
|
{ value: "11", label: "十一月", checked: false }, |
|
|
|
{ value: "12", label: "十二月", checked: false }, |
|
|
|
{ value: 1, label: "一月", checked: false }, |
|
|
|
{ value: 2, label: "二月", checked: false }, |
|
|
|
{ value: 3, label: "三月", checked: false }, |
|
|
|
{ value: 4, label: "四月", checked: false }, |
|
|
|
{ value: 5, label: "五月", checked: false }, |
|
|
|
{ value: 6, label: "六月", checked: false }, |
|
|
|
{ value: 7, label: "七月", checked: false }, |
|
|
|
{ value: 8, label: "八月", checked: false }, |
|
|
|
{ value: 9, label: "九月", checked: false }, |
|
|
|
{ value: 10, label: "十月", checked: false }, |
|
|
|
{ value: 11, label: "十一月", checked: false }, |
|
|
|
{ value: 12, label: "十二月", checked: false }, |
|
|
|
]; |
|
|
|
|
|
|
|
allMonthChecked = false; |
|
|
|
@ -47,7 +66,7 @@ export class DishFormComponent { |
|
|
|
addFoodVisible = false; |
|
|
|
|
|
|
|
get food(): FormArray { |
|
|
|
return this.formGroup.get("food") as FormArray; |
|
|
|
return this.formGroup.get("ingredient") as FormArray; |
|
|
|
} |
|
|
|
|
|
|
|
get icon() { |
|
|
|
@ -56,30 +75,116 @@ export class DishFormComponent { |
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
this.formGroup = this.fb.group({ |
|
|
|
id: this.fb.control("", [FormValidators.required()]), |
|
|
|
id: this.fb.control("", []), |
|
|
|
vendors: this.fb.control([], [FormValidators.required()]), |
|
|
|
name: this.fb.control("", [FormValidators.required()]), |
|
|
|
icon: this.fb.control("", []), |
|
|
|
mark: this.fb.control([], []), |
|
|
|
food: this.fb.array([], [FormValidators.required()]), |
|
|
|
mark: this.fb.control("", [FormValidators.required()]), |
|
|
|
month: this.fb.control([], []), |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
search(value: string): void { |
|
|
|
this.api |
|
|
|
.getOrgList({ keyword: value }) |
|
|
|
|
|
|
|
this.orgSearch$ |
|
|
|
.pipe( |
|
|
|
debounceTime(500), |
|
|
|
distinctUntilChanged(), |
|
|
|
switchMap((q) => this.api.getOrgList(q)) |
|
|
|
) |
|
|
|
.subscribe((data) => { |
|
|
|
const listOfOption: Array<{ value: string; text: string }> = []; |
|
|
|
data.body.forEach((item) => { |
|
|
|
listOfOption.push({ |
|
|
|
value: item.id.toString(), |
|
|
|
text: item.account, |
|
|
|
text: item.name, |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.orgListOfOption = listOfOption; |
|
|
|
}); |
|
|
|
this.foodSearch$ |
|
|
|
.pipe( |
|
|
|
filter((f) => !!f), |
|
|
|
debounceTime(500), |
|
|
|
distinctUntilChanged(), |
|
|
|
switchMap((q) => this.api.getFoodList(q)) |
|
|
|
) |
|
|
|
.subscribe((data) => { |
|
|
|
const listOfOption: Array<{ value: string; text: string }> = []; |
|
|
|
data.body.forEach((item) => { |
|
|
|
listOfOption.push({ |
|
|
|
value: item.key, |
|
|
|
text: item.name, |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.listOfOption = listOfOption; |
|
|
|
this.searchedFood = this.searchedFood.concat(listOfOption); |
|
|
|
this.foodListOfOption = listOfOption; |
|
|
|
}); |
|
|
|
this.setValues(); |
|
|
|
} |
|
|
|
|
|
|
|
setValues() { |
|
|
|
console.log("this.orgs", this.orgs, this.data); |
|
|
|
this.orgListOfOption = this.orgs.map((i) => ({ text: i.name, value: i.id })); |
|
|
|
if (this.data) { |
|
|
|
this.allMonth = this.allMonth.map((i) => |
|
|
|
(this.data.month ?? []).includes(i.value) ? { ...i, checked: true } : i |
|
|
|
); |
|
|
|
this.monthCheckEffect(); |
|
|
|
// console.log("allMonth", allMonth);
|
|
|
|
this.formGroup.patchValue({ |
|
|
|
...this.data, |
|
|
|
vendors: [this.data.vender], |
|
|
|
mark: this.data.marks, |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
public getValues() { |
|
|
|
let values = null; |
|
|
|
console.log("this.formGroup.getRawValue()", this.formGroup.getRawValue()); |
|
|
|
if (Utils.validateFormGroup(this.formGroup)) { |
|
|
|
const value = this.formGroup.getRawValue(); |
|
|
|
// const { _nutrition, key, name, type } = this.formGroup.getRawValue();
|
|
|
|
let ingredient = Object.create(null); |
|
|
|
for (const f of this.foodItemSelected) { |
|
|
|
let num = Number(f.num); |
|
|
|
if (!num) { |
|
|
|
this.msg.error(`请输入${f.value}-${f.text}的重量`); |
|
|
|
return; |
|
|
|
} |
|
|
|
ingredient[f.value] = num; |
|
|
|
} |
|
|
|
const month = this.allMonth |
|
|
|
.reduce((a: any, c: any) => { |
|
|
|
if (c.checked) { |
|
|
|
return a.concat(Number(c.value)); |
|
|
|
} |
|
|
|
return a; |
|
|
|
}, [] as number[]) |
|
|
|
.join(","); |
|
|
|
const vendors = value.vendors?.join(",") ?? ""; |
|
|
|
values = { |
|
|
|
...value, |
|
|
|
vendors, |
|
|
|
month, |
|
|
|
ingredient, |
|
|
|
}; |
|
|
|
} |
|
|
|
return values; |
|
|
|
} |
|
|
|
|
|
|
|
searchOrg(value: string): void { |
|
|
|
if (value) { |
|
|
|
this.orgSearch$.next({ keyword: value }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
searchFood(value: string): void { |
|
|
|
if (value) { |
|
|
|
this.foodSearch$.next({ keyword: value }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
onFoodSelected(v: string[]) { |
|
|
|
this.foodItemSelected = this.searchedFood.filter((f) => v.includes(f.value)); |
|
|
|
} |
|
|
|
|
|
|
|
addFood() { |
|
|
|
@ -111,7 +216,12 @@ export class DishFormComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
monthChecked() { |
|
|
|
monthChecked(checked: boolean, value: number) { |
|
|
|
this.allMonth = this.allMonth.map((i) => (i.value === value ? { ...i, checked } : i)); |
|
|
|
this.monthCheckEffect(); |
|
|
|
} |
|
|
|
|
|
|
|
monthCheckEffect() { |
|
|
|
if (this.allMonth.every((item) => !item.checked)) { |
|
|
|
this.allMonthChecked = false; |
|
|
|
this.indeterminate = false; |
|
|
|
|
kkerwin
2 years ago