kely
2 years ago
37 changed files with 935 additions and 530 deletions
@ -1,8 +1,63 @@ |
|||||
import { Component } from "@angular/core"; |
import { Component, Input, OnInit } from "@angular/core"; |
||||
|
import { ApiService } from "@cdk/services"; |
||||
|
|
||||
|
export interface FoodInDishInterface { |
||||
|
foodName: string; |
||||
|
key: string; |
||||
|
isMain: boolean; |
||||
|
groupValues: Array<{ |
||||
|
peopleName: string; |
||||
|
value: number; |
||||
|
}>; |
||||
|
value: Record<string, number>; |
||||
|
} |
||||
|
|
||||
@Component({ |
@Component({ |
||||
selector: "lib-add-dish-to-ingredient", |
selector: "app-add-dish-to-ingredient", |
||||
templateUrl: "./add-dish-to-ingredient.component.html", |
templateUrl: "./add-dish-to-ingredient.component.html", |
||||
styleUrls: ["./add-dish-to-ingredient.component.less"], |
styleUrls: ["./add-dish-to-ingredient.component.less"], |
||||
}) |
}) |
||||
export class AddDishToIngredientComponent {} |
export class AddDishToIngredientComponent implements OnInit { |
||||
|
constructor(private api: ApiService) {} |
||||
|
|
||||
|
@Input() peopleGroups: string[] = []; |
||||
|
|
||||
|
globalEnum = this.api.globalEnum; |
||||
|
|
||||
|
dish: any = null; |
||||
|
|
||||
|
mark: string = ""; |
||||
|
|
||||
|
foods: FoodInDishInterface[] = []; |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
console.log("this.peopleGroups", this.peopleGroups); |
||||
|
} |
||||
|
|
||||
|
onDishChange(dish: any) { |
||||
|
if (dish) { |
||||
|
this.mark = dish.marks; |
||||
|
this.getFoodNameByKeys(dish.ingredient); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
getFoodNameByKeys(foods: any[]) { |
||||
|
const keys = foods.map((i) => i.key); |
||||
|
this.api.getFoodList({ keys }).subscribe((res) => { |
||||
|
this.foods = res.body.map((i) => { |
||||
|
return { |
||||
|
foodName: i.name, |
||||
|
key: i.key, |
||||
|
isMain: foods.find((f) => f.key === i.key)?.isMain ?? false, |
||||
|
groupValues: this.peopleGroups.map((p) => { |
||||
|
return { |
||||
|
peopleName: p, |
||||
|
value: 0, |
||||
|
}; |
||||
|
}), |
||||
|
value: {}, |
||||
|
}; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|||||
@ -0,0 +1,60 @@ |
|||||
|
<nz-spin [nzSpinning]="!menu"> |
||||
|
<ng-container> |
||||
|
<!-- {{ menuObject | json }} --> |
||||
|
<nz-card |
||||
|
*ngFor="let day of days" |
||||
|
[nzTitle]="dayTitleTpl" |
||||
|
class="day-item mb-4" |
||||
|
[ngClass]="{'expanded':expanded.has(day)}" |
||||
|
[nzExtra]="dayExtraTpl" |
||||
|
[nzBodyStyle]="{padding:0}"> |
||||
|
<ng-template #dayTitleTpl> |
||||
|
<div class=" relative -left-4 z-10"> |
||||
|
<button nz-button nzType="text" (click)="expandChange(day)"> |
||||
|
<span class="expanded-icon" nz-icon nzType="caret-right" nzTheme="outline"></span> |
||||
|
</button> |
||||
|
<span> |
||||
|
第 {{day + 1}} 天 |
||||
|
</span> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
<ng-template #dayExtraTpl> |
||||
|
<nz-space> |
||||
|
<button *nzSpaceItem nz-button nzType="link" (click)="reuse(day + 1, selectDayTpl)"> |
||||
|
本天菜品应用到其他天 |
||||
|
</button> |
||||
|
<button *nzSpaceItem nz-button nzType="link"> |
||||
|
本日营养分析 |
||||
|
</button> |
||||
|
</nz-space> |
||||
|
</ng-template> |
||||
|
<ng-container *ngIf="expanded.has(day)"> |
||||
|
<nz-card-tab> |
||||
|
<nz-tabset nzSize="large" [(nzSelectedIndex)]="mealCurrentIndex[day]"> |
||||
|
<nz-tab [nzTitle]="meal" *ngFor="let meal of menu.meals; let idx = index"> |
||||
|
</nz-tab> |
||||
|
</nz-tabset> |
||||
|
</nz-card-tab> |
||||
|
<div class="p-4"> |
||||
|
<ng-container *ngFor="let meal of menu.meals; let mealIndex = index "> |
||||
|
<app-ingredient-meals *ngIf="mealCurrentIndex[day] === mealIndex" |
||||
|
[day]="day + 1" |
||||
|
[mealIndex]="mealIndex" |
||||
|
[peopleGroups]="menu.crows" |
||||
|
[mealDishs]="mealDishList" |
||||
|
(onSaveDish)="onSaveDish($event,day+1,mealIndex)"> |
||||
|
<!-- (onSaveDish)="onSaveDish($event,day+1,mealIndex)" --> |
||||
|
</app-ingredient-meals> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</nz-card> |
||||
|
</ng-container> |
||||
|
</nz-spin> |
||||
|
|
||||
|
<ng-template #selectDayTpl> |
||||
|
<nz-alert nzType="warning" nzMessage="请注意，如果其它天已经存在菜品，新应用的菜品将会追加在其中，不影响已经存在的菜品" nzShowIcon> |
||||
|
|
||||
|
</nz-alert> |
||||
|
<nz-checkbox-group [(ngModel)]="selectDay" class="select-day mt-4"></nz-checkbox-group> |
||||
|
</ng-template> |
||||
@ -0,0 +1,25 @@ |
|||||
|
.day-item { |
||||
|
::ng-deep { |
||||
|
.ant-card-head-title { |
||||
|
overflow: visible; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.expanded { |
||||
|
.expanded-icon { |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.select-day { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
::ng-deep { |
||||
|
>label { |
||||
|
margin: 0 0 12px 0; |
||||
|
flex-basis: 25%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,119 @@ |
|||||
|
import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from "@angular/core"; |
||||
|
// import { MealDishInterface } from "../ingredient-meals/ingredient-meals.component";
|
||||
|
import { NzModalService } from "ng-zorro-antd/modal"; |
||||
|
import { Augmented, OptionItemInterface } from "@cdk/types"; |
||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||
|
|
||||
|
// export interface MenuObjectInterface {
|
||||
|
// [Day: number]: {
|
||||
|
// [MealIndex: number]: MealDishInterface[];
|
||||
|
// };
|
||||
|
// }
|
||||
|
|
||||
|
export type DishInterface = Augmented<{ |
||||
|
dishId: number; |
||||
|
day: number; |
||||
|
meal: string; |
||||
|
mark: string; |
||||
|
items: Array< |
||||
|
Augmented<{ |
||||
|
key: string; |
||||
|
isMain: boolean; |
||||
|
value: Record<string, number>; |
||||
|
}> |
||||
|
>; |
||||
|
}>; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: "app-ingredient-dish", |
||||
|
templateUrl: "./ingredient-dish.component.html", |
||||
|
styleUrls: ["./ingredient-dish.component.less"], |
||||
|
}) |
||||
|
export class IngredientDishComponent implements OnChanges { |
||||
|
constructor(private modal: NzModalService, private msg: NzMessageService) {} |
||||
|
|
||||
|
@Input() menu: any | null; |
||||
|
|
||||
|
expanded = new Set<number>(); |
||||
|
|
||||
|
days: number[] = []; |
||||
|
|
||||
|
selectDay: OptionItemInterface[] = []; |
||||
|
|
||||
|
mealCurrentIndex: Record<number, number> = {}; |
||||
|
|
||||
|
// d = {
|
||||
|
// 1:{
|
||||
|
// zaocan:[
|
||||
|
// {dishId:1...}
|
||||
|
// ]
|
||||
|
// }
|
||||
|
// }
|
||||
|
// menuObject!: MenuObjectInterface;
|
||||
|
|
||||
|
mealDishList: DishInterface[] = []; |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
if (changes["menu"]?.currentValue) { |
||||
|
this.initMenu(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
initMenu() { |
||||
|
if (this.menu) { |
||||
|
const meals = this.menu.meals as string[]; |
||||
|
const day = this.menu.day as number; |
||||
|
this.days = Array.from({ length: day }, (_, i) => { |
||||
|
this.selectDay.push({ |
||||
|
label: `第${i + 1}天`, |
||||
|
value: String(i + 1), |
||||
|
}); |
||||
|
this.mealCurrentIndex[i] = 0; |
||||
|
// if (!this.menuObject) {
|
||||
|
// this.menuObject = {};
|
||||
|
// }
|
||||
|
// this.menuObject[i + 1] = meals.reduce((a, c, idx) => {
|
||||
|
// return {
|
||||
|
// ...a,
|
||||
|
// [idx]: [],
|
||||
|
// };
|
||||
|
// }, {} as Record<number, MealDishInterface[]>);
|
||||
|
return i; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
expandChange(i: number) { |
||||
|
if (this.expanded.has(i)) { |
||||
|
this.expanded.delete(i); |
||||
|
} else { |
||||
|
this.expanded.add(i); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onSaveDish(v: DishInterface[], day: number, mealIndex: number) { |
||||
|
this.mealDishList = JSON.parse(JSON.stringify(v)); |
||||
|
// this.menuObject[day][mealIndex] = JSON.parse(JSON.stringify(v));
|
||||
|
} |
||||
|
|
||||
|
reuse(day: number, nzContent: TemplateRef<{}>) { |
||||
|
const thisDayDishs = this.mealDishList.filter((f) => f.day === day); |
||||
|
console.log("dayDishs", day, this.mealDishList, thisDayDishs); |
||||
|
this.modal.create({ |
||||
|
nzTitle: "请选择应用到的日期", |
||||
|
nzContent, |
||||
|
nzOnOk: () => { |
||||
|
this.selectDay.forEach((i) => { |
||||
|
if (i["checked"]) { |
||||
|
thisDayDishs.forEach((reused) => { |
||||
|
this.mealDishList.push(JSON.parse(JSON.stringify({ ...reused, day: Number(i.value) }))); |
||||
|
}); |
||||
|
} |
||||
|
i["checked"] = false; |
||||
|
}); |
||||
|
this.mealDishList = JSON.parse(JSON.stringify(this.mealDishList)); |
||||
|
this.msg.success("操作成功"); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
.empty { |
||||
|
margin: 0; |
||||
|
padding: 24px; |
||||
|
border: 1px solid #f0f0f0; |
||||
|
border-top: none; |
||||
|
} |
||||
@ -1,21 +1,130 @@ |
|||||
import { Component } from "@angular/core"; |
import { |
||||
|
Component, |
||||
|
EventEmitter, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
OnInit, |
||||
|
Output, |
||||
|
SimpleChanges, |
||||
|
TemplateRef, |
||||
|
ViewChild, |
||||
|
} from "@angular/core"; |
||||
import { NzModalService } from "ng-zorro-antd/modal"; |
import { NzModalService } from "ng-zorro-antd/modal"; |
||||
import { AddDishToIngredientComponent } from "../add-dish-to-ingredient/add-dish-to-ingredient.component"; |
import { |
||||
import { NzDrawerService } from "ng-zorro-antd/drawer"; |
AddDishToIngredientComponent, |
||||
|
FoodInDishInterface, |
||||
|
} from "../add-dish-to-ingredient/add-dish-to-ingredient.component"; |
||||
|
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer"; |
||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||
|
import { Augmented } from "@cdk/types"; |
||||
|
import { DishInterface } from "../ingredient-dish/ingredient-dish.component"; |
||||
|
|
||||
|
export type MealDishInterface = Augmented<{ |
||||
|
dishId: number; |
||||
|
dishName: string; |
||||
|
mark: string; |
||||
|
foods: FoodInDishInterface[]; |
||||
|
}>; |
||||
|
|
||||
@Component({ |
@Component({ |
||||
selector: "lib-ingredient-meals", |
selector: "app-ingredient-meals", |
||||
templateUrl: "./ingredient-meals.component.html", |
templateUrl: "./ingredient-meals.component.html", |
||||
styleUrls: ["./ingredient-meals.component.less"], |
styleUrls: ["./ingredient-meals.component.less"], |
||||
}) |
}) |
||||
export class IngredientMealsComponent { |
export class IngredientMealsComponent implements OnChanges, OnInit { |
||||
constructor(private modal: NzModalService, private drawer: NzDrawerService) {} |
constructor(private modal: NzModalService, private msg: NzMessageService, private drawer: NzDrawerService) {} |
||||
|
|
||||
|
@Input() day!: number; |
||||
|
|
||||
|
@Input() mealIndex!: number; |
||||
|
|
||||
|
@Input() peopleGroups: string[] = []; |
||||
|
|
||||
|
@Input() mealDishs: DishInterface[] = []; |
||||
|
|
||||
|
@Output() onSaveDish = new EventEmitter<DishInterface[]>(); |
||||
|
|
||||
|
@ViewChild("addDishFooter") addDishFooter!: TemplateRef<{}>; |
||||
|
|
||||
|
drawerRef?: NzDrawerRef; |
||||
|
|
||||
|
submitLoading = false; |
||||
|
|
||||
|
currentDishs: DishInterface[] = []; |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.init(); |
||||
|
} |
||||
|
|
||||
|
ngOnChanges(changes: SimpleChanges): void { |
||||
|
if (changes["mealDishs"]?.currentValue) { |
||||
|
this.init(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
init() { |
||||
|
console.log(" ", this.mealDishs, this.day, this.mealIndex); |
||||
|
this.currentDishs = this.mealDishs.filter((f) => f.day === this.day && this.mealIndex === f["mealIndex"]); |
||||
|
} |
||||
shopDishForm() { |
shopDishForm() { |
||||
this.drawer.create({ |
this.drawerRef = this.drawer.create({ |
||||
nzTitle: "添加菜品", |
nzTitle: "添加菜品", |
||||
nzWidth: 1000, |
nzWidth: 1200, |
||||
nzContent: AddDishToIngredientComponent, |
nzContent: AddDishToIngredientComponent, |
||||
|
nzFooter: this.addDishFooter, |
||||
|
nzContentParams: { |
||||
|
peopleGroups: this.peopleGroups, |
||||
|
}, |
||||
}); |
}); |
||||
} |
} |
||||
|
|
||||
|
clearThisMeal() { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: "警告", |
||||
|
nzContent: "是否要清空本餐？", |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: () => { |
||||
|
this.mealDishs = this.mealDishs.filter((f) => !(f.day === this.day && f["mealIndex"] === this.mealIndex)); |
||||
|
this.onSaveDish.emit(this.mealDishs); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
cancelForm() { |
||||
|
this.drawerRef?.close(); |
||||
|
} |
||||
|
|
||||
|
onSubmit() { |
||||
|
if (this.drawerRef) { |
||||
|
const { dish, foods } = this.drawerRef.getContentComponent() as AddDishToIngredientComponent; |
||||
|
|
||||
|
this.mealDishs.push({ |
||||
|
day: this.day, |
||||
|
mealIndex: this.mealIndex, |
||||
|
meal: "", |
||||
|
dishId: dish.id, |
||||
|
dishName: dish.name, |
||||
|
mark: dish.marks, |
||||
|
items: foods.map((f) => ({ |
||||
|
...f, |
||||
|
value: f.groupValues.reduce((a, c) => { |
||||
|
return { |
||||
|
...a, |
||||
|
[c.peopleName]: c.value, |
||||
|
}; |
||||
|
}, {} as Record<string, number>), |
||||
|
})), |
||||
|
}); |
||||
|
|
||||
|
this.onSaveDish.emit(this.mealDishs); |
||||
|
} |
||||
|
this.cancelForm(); |
||||
|
} |
||||
|
|
||||
|
onRemoveDish(d: DishInterface) { |
||||
|
this.mealDishs = this.mealDishs.filter( |
||||
|
(f) => !(f.dishId === d.dishId && f.day === this.day && f["mealIndex"] === this.mealIndex) |
||||
|
); |
||||
|
this.onSaveDish.emit(this.mealDishs); |
||||
|
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,22 @@ |
|||||
|
<nz-select |
||||
|
nzShowSearch |
||||
|
nzServerSearch |
||||
|
|
||||
|
nzPlaceHolder="请输入菜品名称搜索" |
||||
|
[nzShowArrow]="false" |
||||
|
[nzFilterOption]="nzFilterOption" |
||||
|
[(ngModel)]="value" |
||||
|
(ngModelChange)="onSelectChange($event)" |
||||
|
(nzOnSearch)="search($event)"> |
||||
|
|
||||
|
<ng-container *ngIf="!loading"> |
||||
|
<nz-option *ngFor="let o of listOfOption" [nzLabel]="o.label" |
||||
|
[nzValue]="o.value"> |
||||
|
</nz-option> |
||||
|
</ng-container> |
||||
|
<nz-option *ngIf="loading" nzDisabled nzCustomContent> |
||||
|
<span nz-icon nzType="loading" class="loading-icon"></span> |
||||
|
数据加载中... |
||||
|
</nz-option> |
||||
|
|
||||
|
</nz-select> |
||||
@ -0,0 +1,97 @@ |
|||||
|
import { Component, OnInit } from "@angular/core"; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; |
||||
|
import { ApiService } from "@cdk/services"; |
||||
|
import { OptionItemInterface } from "@cdk/types"; |
||||
|
import { Subject, debounceTime, distinctUntilChanged, filter, finalize, switchMap, takeUntil, tap } from "rxjs"; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: "app-dish-select", |
||||
|
templateUrl: "./dish-select.component.html", |
||||
|
styleUrls: ["./dish-select.component.less"], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
multi: true, |
||||
|
useExisting: DishSelectComponent, |
||||
|
}, |
||||
|
], |
||||
|
}) |
||||
|
export class DishSelectComponent implements OnInit, ControlValueAccessor { |
||||
|
constructor(private api: ApiService) {} |
||||
|
|
||||
|
private destroy$ = new Subject<void>(); |
||||
|
|
||||
|
private dishSearch$ = new Subject<string>(); |
||||
|
|
||||
|
nzFilterOption = (): boolean => true; |
||||
|
|
||||
|
value?: string | string[]; |
||||
|
|
||||
|
listOfOption: OptionItemInterface[] = []; |
||||
|
|
||||
|
loading = false; |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.dishSearch$ |
||||
|
.pipe( |
||||
|
filter((f) => !!f), |
||||
|
debounceTime(500), |
||||
|
distinctUntilChanged(), |
||||
|
takeUntil(this.destroy$), |
||||
|
tap(() => { |
||||
|
this.loading = true; |
||||
|
}), |
||||
|
switchMap((term: string) => |
||||
|
this.api.getDishPage({ pageNo: 0, pageSize: 5 }, { keyword: term }).pipe( |
||||
|
finalize(() => { |
||||
|
this.loading = false; |
||||
|
}) |
||||
|
) |
||||
|
) |
||||
|
) |
||||
|
.subscribe((data) => { |
||||
|
const listOfOption: Array<OptionItemInterface> = []; |
||||
|
data.body.content.forEach((item) => { |
||||
|
listOfOption.push({ |
||||
|
...item, |
||||
|
value: String(item.id), |
||||
|
label: item.name, |
||||
|
}); |
||||
|
}); |
||||
|
this.listOfOption = listOfOption; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
onSelectChange(v: any) { |
||||
|
const item = this.listOfOption.find((f) => f.value === v); |
||||
|
// console.log("v", item);
|
||||
|
if (item) { |
||||
|
this.onChange(item); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
search = (k: string) => { |
||||
|
this.dishSearch$.next(k); |
||||
|
}; |
||||
|
|
||||
|
onChange(v: OptionItemInterface) {} |
||||
|
|
||||
|
ontouch(v: any) {} |
||||
|
|
||||
|
writeValue(v?: string[] | string): void { |
||||
|
this.value = v; |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
this.ontouch = fn; |
||||
|
} |
||||
|
} |
||||
@ -1,2 +1,4 @@ |
|||||
export * from "./search-and-select/search-and-select.component"; |
export * from "./search-and-select/search-and-select.component"; |
||||
export * from "./month-select/month-select.component"; |
export * from "./month-select/month-select.component"; |
||||
|
export * from "./org-select/org-select.component"; |
||||
|
export * from "./dish-select/dish-select.component"; |
||||
|
|||||
@ -0,0 +1,13 @@ |
|||||
|
<nz-select |
||||
|
nzShowSearch |
||||
|
nzServerSearch |
||||
|
nzPlaceHolder="请选择单位" |
||||
|
[nzShowArrow]="false" |
||||
|
[nzFilterOption]="nzFilterOption" |
||||
|
[(ngModel)]="value" |
||||
|
(ngModelChange)="onSelectChange($event)" |
||||
|
(nzOnSearch)="searchOrg($event)"> |
||||
|
<nz-option *ngFor="let o of listOfOption" [nzLabel]="o.label" |
||||
|
[nzValue]="o.value"> |
||||
|
</nz-option> |
||||
|
</nz-select> |
||||
@ -0,0 +1,81 @@ |
|||||
|
import { Component, OnInit } from "@angular/core"; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; |
||||
|
import { ApiService } from "@cdk/services"; |
||||
|
import { OptionItemInterface } from "@cdk/types"; |
||||
|
import { Subject, debounceTime, distinctUntilChanged, filter, switchMap, takeUntil } from "rxjs"; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: "app-org-select", |
||||
|
templateUrl: "./org-select.component.html", |
||||
|
styleUrls: ["./org-select.component.less"], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
multi: true, |
||||
|
useExisting: OrgSelectComponent, |
||||
|
}, |
||||
|
], |
||||
|
}) |
||||
|
export class OrgSelectComponent implements OnInit, ControlValueAccessor { |
||||
|
constructor(private api: ApiService) {} |
||||
|
|
||||
|
private destroy$ = new Subject<void>(); |
||||
|
|
||||
|
private orgSearch$ = new Subject<string>(); |
||||
|
|
||||
|
nzFilterOption = (): boolean => true; |
||||
|
|
||||
|
value?: string | string[]; |
||||
|
|
||||
|
listOfOption: OptionItemInterface[] = []; |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.orgSearch$ |
||||
|
.pipe( |
||||
|
filter((f) => !!f), |
||||
|
debounceTime(500), |
||||
|
distinctUntilChanged(), |
||||
|
takeUntil(this.destroy$), |
||||
|
switchMap((term: string) => this.api.getOrgList({ keyword: term })) |
||||
|
) |
||||
|
.subscribe((data) => { |
||||
|
const listOfOption: Array<OptionItemInterface> = []; |
||||
|
data.body.forEach((item) => { |
||||
|
listOfOption.push({ |
||||
|
value: String(item.id), |
||||
|
label: item.name, |
||||
|
}); |
||||
|
}); |
||||
|
this.listOfOption = listOfOption; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
onSelectChange(v: any) { |
||||
|
this.onChange(v); |
||||
|
} |
||||
|
|
||||
|
searchOrg = (k: string) => { |
||||
|
this.orgSearch$.next(k); |
||||
|
}; |
||||
|
|
||||
|
onChange(v: number[]) {} |
||||
|
|
||||
|
ontouch(v: any) {} |
||||
|
|
||||
|
writeValue(v?: string[] | string): void { |
||||
|
this.value = v; |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
this.ontouch = fn; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue