|
|
@ -1,203 +1,203 @@ |
|
|
import { Component, Input, OnInit } from "@angular/core"; |
|
|
import { Component, Input, OnInit } from '@angular/core' |
|
|
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"; |
|
|
import { FormArray, FormBuilder, FormGroup } from '@angular/forms' |
|
|
import { ApiService } from "@cdk/services"; |
|
|
import { ApiService } from '@cdk/services' |
|
|
import { Utils } from "@cdk/utils"; |
|
|
import { Utils } from '@cdk/utils' |
|
|
import { FormValidators } from "@cdk/validators"; |
|
|
import { FormValidators } from '@cdk/validators' |
|
|
import { NzMessageService } from "ng-zorro-antd/message"; |
|
|
import { NzMessageService } from 'ng-zorro-antd/message' |
|
|
import { Subject, debounceTime, distinctUntilChanged, filter, finalize, switchMap, throttleTime } from "rxjs"; |
|
|
import { Subject, debounceTime, distinctUntilChanged, filter, finalize, switchMap, throttleTime } from 'rxjs' |
|
|
|
|
|
|
|
|
@Component({ |
|
|
@Component({ |
|
|
selector: "app-dish-form", |
|
|
selector: 'app-dish-form', |
|
|
templateUrl: "./dish-form.component.html", |
|
|
templateUrl: './dish-form.component.html', |
|
|
styleUrls: ["./dish-form.component.less"], |
|
|
styleUrls: ['./dish-form.component.less'], |
|
|
}) |
|
|
}) |
|
|
export class DishFormComponent { |
|
|
export class DishFormComponent { |
|
|
constructor(private fb: FormBuilder, private msg: NzMessageService, private api: ApiService) {} |
|
|
constructor(private fb: FormBuilder, private msg: NzMessageService, private api: ApiService) {} |
|
|
|
|
|
|
|
|
@Input() data: any; |
|
|
@Input() data: any |
|
|
|
|
|
|
|
|
@Input() orgs: any[] = []; |
|
|
@Input() orgs: any[] = [] |
|
|
|
|
|
|
|
|
@Input() foods: any[] = []; |
|
|
@Input() foods: any[] = [] |
|
|
|
|
|
|
|
|
private orgSearch$ = new Subject<Record<string, string>>(); |
|
|
private orgSearch$ = new Subject<Record<string, string>>() |
|
|
|
|
|
|
|
|
private foodSearch$ = new Subject<Record<string, string>>(); |
|
|
private foodSearch$ = new Subject<Record<string, string>>() |
|
|
|
|
|
|
|
|
formGroup!: FormGroup; |
|
|
formGroup!: FormGroup |
|
|
|
|
|
|
|
|
selectedValue = null; |
|
|
selectedValue = null |
|
|
|
|
|
|
|
|
orgListOfOption: Array<{ value: string; text: string }> = []; |
|
|
orgListOfOption: Array<{ value: string; text: string }> = [] |
|
|
|
|
|
|
|
|
foodListOfOption: Array<{ value: string; text: string }> = []; |
|
|
foodListOfOption: Array<{ value: string; text: string }> = [] |
|
|
|
|
|
|
|
|
searchedFood: Array<{ value: string; text: string }> = []; |
|
|
searchedFood: Array<{ value: string; text: string }> = [] |
|
|
|
|
|
|
|
|
foodSelected: string[] = []; |
|
|
foodSelected: string[] = [] |
|
|
|
|
|
|
|
|
foodItemSelected: any[] = []; |
|
|
foodItemSelected: any[] = [] |
|
|
|
|
|
|
|
|
nzFilterOption = (): boolean => true; |
|
|
nzFilterOption = (): boolean => true |
|
|
|
|
|
|
|
|
globalEnum = this.api.globalEnum; |
|
|
globalEnum = this.api.globalEnum |
|
|
|
|
|
|
|
|
uploadLoading = false; |
|
|
uploadLoading = false |
|
|
|
|
|
|
|
|
addFoodVisible = false; |
|
|
addFoodVisible = false |
|
|
|
|
|
|
|
|
iconPreview = ""; |
|
|
iconPreview = '' |
|
|
|
|
|
|
|
|
get food(): FormArray { |
|
|
get food(): FormArray { |
|
|
return this.formGroup.get("ingredient") as FormArray; |
|
|
return this.formGroup.get('ingredient') as FormArray |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
get icon() { |
|
|
get icon() { |
|
|
return this.formGroup.get("icon")?.value; |
|
|
return this.formGroup.get('icon')?.value |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
ngOnInit(): void { |
|
|
this.formGroup = this.fb.group({ |
|
|
this.formGroup = this.fb.group({ |
|
|
id: this.fb.control("", []), |
|
|
id: this.fb.control('', []), |
|
|
name: this.fb.control("", [FormValidators.required()]), |
|
|
name: this.fb.control('', [FormValidators.required()]), |
|
|
icon: this.fb.control("", []), |
|
|
icon: this.fb.control('', []), |
|
|
mark: this.fb.control("", [FormValidators.required()]), |
|
|
mark: this.fb.control('', [FormValidators.required()]), |
|
|
poly: this.fb.control("", [FormValidators.required()]), |
|
|
poly: this.fb.control('', [FormValidators.required()]), |
|
|
month: this.fb.control([], []), |
|
|
month: this.fb.control([], []), |
|
|
}); |
|
|
}) |
|
|
|
|
|
|
|
|
this.orgSearch$ |
|
|
this.orgSearch$ |
|
|
.pipe( |
|
|
.pipe( |
|
|
debounceTime(500), |
|
|
debounceTime(500), |
|
|
distinctUntilChanged(), |
|
|
distinctUntilChanged(), |
|
|
switchMap((q) => this.api.getOrgList(q)) |
|
|
switchMap((q) => this.api.getOrgList(q)), |
|
|
) |
|
|
) |
|
|
.subscribe((data) => { |
|
|
.subscribe((data) => { |
|
|
const listOfOption: Array<{ value: string; text: string }> = []; |
|
|
const listOfOption: Array<{ value: string; text: string }> = [] |
|
|
data.forEach((item) => { |
|
|
data.forEach((item) => { |
|
|
listOfOption.push({ |
|
|
listOfOption.push({ |
|
|
value: item.id.toString(), |
|
|
value: item.id.toString(), |
|
|
text: item.name, |
|
|
text: item.name, |
|
|
}); |
|
|
}) |
|
|
}); |
|
|
}) |
|
|
this.orgListOfOption = listOfOption; |
|
|
this.orgListOfOption = listOfOption |
|
|
}); |
|
|
}) |
|
|
this.foodSearch$ |
|
|
this.foodSearch$ |
|
|
.pipe( |
|
|
.pipe( |
|
|
filter((f) => !!f), |
|
|
filter((f) => !!f), |
|
|
debounceTime(500), |
|
|
debounceTime(500), |
|
|
distinctUntilChanged(), |
|
|
distinctUntilChanged(), |
|
|
switchMap((q) => this.api.getFoodList(q)) |
|
|
switchMap((q) => this.api.getFoodList(q)), |
|
|
) |
|
|
) |
|
|
.subscribe((data) => { |
|
|
.subscribe((data) => { |
|
|
const listOfOption: Array<{ value: string; text: string }> = []; |
|
|
const listOfOption: Array<{ value: string; text: string }> = [] |
|
|
data.body.forEach((item) => { |
|
|
data.body.forEach((item) => { |
|
|
listOfOption.push({ |
|
|
listOfOption.push({ |
|
|
value: item.key, |
|
|
value: item.key, |
|
|
text: item.name, |
|
|
text: item.name, |
|
|
}); |
|
|
}) |
|
|
}); |
|
|
}) |
|
|
this.searchedFood = this.searchedFood.concat(listOfOption); |
|
|
this.searchedFood = this.searchedFood.concat(listOfOption) |
|
|
this.foodListOfOption = listOfOption; |
|
|
this.foodListOfOption = listOfOption |
|
|
}); |
|
|
}) |
|
|
this.setValues(); |
|
|
this.setValues() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setValues() { |
|
|
setValues() { |
|
|
this.orgListOfOption = this.orgs.map((i) => ({ text: i.name, value: i.id })); |
|
|
this.orgListOfOption = this.orgs.map((i) => ({ text: i.name, value: i.id })) |
|
|
|
|
|
|
|
|
if (this.data) { |
|
|
if (this.data) { |
|
|
// this.allMonth = this.allMonth.map((i) =>
|
|
|
// this.allMonth = this.allMonth.map((i) =>
|
|
|
// (this.data.month ?? []).includes(i.value) ? { ...i, checked: true } : i
|
|
|
// (this.data.month ?? []).includes(i.value) ? { ...i, checked: true } : i
|
|
|
// );
|
|
|
// );
|
|
|
this.foods.forEach((f) => { |
|
|
this.foods.forEach((f) => { |
|
|
const item = { text: f.name, value: f.key }; |
|
|
const item = { text: f.name, value: f.key } |
|
|
this.foodListOfOption.push(item); |
|
|
this.foodListOfOption.push(item) |
|
|
this.searchedFood.push(item); |
|
|
this.searchedFood.push(item) |
|
|
const num = this.data.ingredient.find((i: any) => i.key === f.key); |
|
|
const num = this.data.ingredient.find((i: any) => i.key === f.key) |
|
|
if (num) { |
|
|
if (num) { |
|
|
this.foodItemSelected.push({ num: num.value, ...item, isMain: num.isMain }); |
|
|
this.foodItemSelected.push({ num: num.value, ...item, isMain: num.isMain }) |
|
|
this.foodSelected.push(f.key); |
|
|
this.foodSelected.push(f.key) |
|
|
} |
|
|
} |
|
|
}); |
|
|
}) |
|
|
this.formGroup.patchValue({ |
|
|
this.formGroup.patchValue({ |
|
|
...this.data, |
|
|
...this.data, |
|
|
mark: this.data.marks, |
|
|
mark: this.data.marks, |
|
|
}); |
|
|
}) |
|
|
if (this.data["icon"]) { |
|
|
if (this.data['icon']) { |
|
|
this.iconPreview = "/api/icon/" + this.data["icon"]; |
|
|
this.iconPreview = '/api/icon/' + this.data['icon'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public getValues() { |
|
|
public getValues() { |
|
|
let values = null; |
|
|
let values = null |
|
|
console.log("this.formGroup.getRawValue()", this.formGroup.getRawValue(), this.foodItemSelected); |
|
|
// console.log("this.formGroup.getRawValue()", this.formGroup.getRawValue(), this.foodItemSelected);
|
|
|
if (Utils.validateFormGroup(this.formGroup)) { |
|
|
if (Utils.validateFormGroup(this.formGroup)) { |
|
|
const value = this.formGroup.getRawValue(); |
|
|
const value = this.formGroup.getRawValue() |
|
|
// const { _nutrition, key, name, type } = this.formGroup.getRawValue();
|
|
|
// const { _nutrition, key, name, type } = this.formGroup.getRawValue();
|
|
|
let ingredient: any[] = []; |
|
|
let ingredient: any[] = [] |
|
|
for (const f of this.foodItemSelected) { |
|
|
for (const f of this.foodItemSelected) { |
|
|
let num = Number(f.num); |
|
|
let num = Number(f.num) |
|
|
if (!num) { |
|
|
if (!num) { |
|
|
this.msg.error(`请输入${f.value}-${f.text}的重量`); |
|
|
this.msg.error(`请输入${f.value}-${f.text}的重量`) |
|
|
return; |
|
|
return |
|
|
} |
|
|
} |
|
|
ingredient.push({ |
|
|
ingredient.push({ |
|
|
isMain: f.isMain, |
|
|
isMain: f.isMain, |
|
|
key: f.value, |
|
|
key: f.value, |
|
|
value: num, |
|
|
value: num, |
|
|
}); |
|
|
}) |
|
|
} |
|
|
} |
|
|
const month = value.month.join(","); |
|
|
const month = value.month.join(',') |
|
|
|
|
|
|
|
|
values = { |
|
|
values = { |
|
|
...value, |
|
|
...value, |
|
|
|
|
|
|
|
|
month, |
|
|
month, |
|
|
ingredient, |
|
|
ingredient, |
|
|
}; |
|
|
} |
|
|
} |
|
|
} |
|
|
return values; |
|
|
return values |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onMainChange(e: boolean, key: string) { |
|
|
onMainChange(e: boolean, key: string) { |
|
|
this.foodItemSelected.forEach((i) => { |
|
|
this.foodItemSelected.forEach((i) => { |
|
|
if (e) { |
|
|
if (e) { |
|
|
i.isMain = false; |
|
|
i.isMain = false |
|
|
if (i.value === key) { |
|
|
if (i.value === key) { |
|
|
i.isMain = true; |
|
|
i.isMain = true |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
if (i.value === key) { |
|
|
if (i.value === key) { |
|
|
i.isMain = false; |
|
|
i.isMain = false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
searchOrg(value: string): void { |
|
|
searchOrg(value: string): void { |
|
|
if (value) { |
|
|
if (value) { |
|
|
this.orgSearch$.next({ keyword: value }); |
|
|
this.orgSearch$.next({ keyword: value }) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
searchFood(value: string): void { |
|
|
searchFood(value: string): void { |
|
|
if (value) { |
|
|
if (value) { |
|
|
this.foodSearch$.next({ keyword: value }); |
|
|
this.foodSearch$.next({ keyword: value }) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onFoodSelected(v: string[]) { |
|
|
onFoodSelected(v: string[]) { |
|
|
this.foodItemSelected = []; |
|
|
this.foodItemSelected = [] |
|
|
this.searchedFood.forEach((item) => { |
|
|
this.searchedFood.forEach((item) => { |
|
|
if (this.foodItemSelected.some((s) => s.value === item.value)) { |
|
|
if (this.foodItemSelected.some((s) => s.value === item.value)) { |
|
|
return; |
|
|
return |
|
|
} |
|
|
} |
|
|
if (v.includes(item.value)) { |
|
|
if (v.includes(item.value)) { |
|
|
this.foodItemSelected.push(item); |
|
|
this.foodItemSelected.push(item) |
|
|
} |
|
|
} |
|
|
}); |
|
|
}) |
|
|
|
|
|
|
|
|
// this.foodItemSelected = this.searchedFood.filter((f) => {
|
|
|
// this.foodItemSelected = this.searchedFood.filter((f) => {
|
|
|
// return v.includes(f.value)
|
|
|
// return v.includes(f.value)
|
|
|
@ -207,36 +207,36 @@ export class DishFormComponent { |
|
|
addFood() { |
|
|
addFood() { |
|
|
this.food.push( |
|
|
this.food.push( |
|
|
this.fb.group({ |
|
|
this.fb.group({ |
|
|
name: this.fb.control("", [FormValidators.required()]), |
|
|
name: this.fb.control('', [FormValidators.required()]), |
|
|
tag: this.fb.control(0, [FormValidators.required()]), |
|
|
tag: this.fb.control(0, [FormValidators.required()]), |
|
|
weight: this.fb.control(0, [FormValidators.required()]), |
|
|
weight: this.fb.control(0, [FormValidators.required()]), |
|
|
}) |
|
|
}), |
|
|
); |
|
|
) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
removeFood(idx: number) { |
|
|
removeFood(idx: number) { |
|
|
this.food.removeAt(idx); |
|
|
this.food.removeAt(idx) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onFileChange(e: Event) { |
|
|
onFileChange(e: Event) { |
|
|
const target = e.target as HTMLInputElement; |
|
|
const target = e.target as HTMLInputElement |
|
|
const file = target.files![0]; |
|
|
const file = target.files![0] |
|
|
target.value = ""; |
|
|
target.value = '' |
|
|
if (file.size / 1024 / 1024 >= 2) { |
|
|
if (file.size / 1024 / 1024 >= 2) { |
|
|
this.msg.error("图片大小不能超过2M"); |
|
|
this.msg.error('图片大小不能超过2M') |
|
|
return; |
|
|
return |
|
|
} |
|
|
} |
|
|
const fileReader = new FileReader(); |
|
|
const fileReader = new FileReader() |
|
|
fileReader.onload = () => { |
|
|
fileReader.onload = () => { |
|
|
const base64 = fileReader.result as string; |
|
|
const base64 = fileReader.result as string |
|
|
this.iconPreview = base64; |
|
|
this.iconPreview = base64 |
|
|
// this.formGroup.get("icon")?.setValue(base64);
|
|
|
// this.formGroup.get("icon")?.setValue(base64);
|
|
|
}; |
|
|
} |
|
|
fileReader.readAsDataURL(file); |
|
|
fileReader.readAsDataURL(file) |
|
|
const formdata = new FormData(); |
|
|
const formdata = new FormData() |
|
|
formdata.append("file", file); |
|
|
formdata.append('file', file) |
|
|
this.api.upload(formdata).subscribe((res) => { |
|
|
this.api.upload(formdata).subscribe((res) => { |
|
|
this.formGroup.get("icon")?.setValue(res.body); |
|
|
this.formGroup.get('icon')?.setValue(res.body) |
|
|
}); |
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
kkerwin
2 years ago