kkerwin
2 years ago
24 changed files with 848 additions and 161 deletions
@ -1,53 +1,198 @@ |
|||
<app-page> |
|||
<form nz-form [formGroup]="formGroup" nzLayout="vertical"> |
|||
<div nz-form nzLayout="vertical"> |
|||
|
|||
<nz-card nzTitle="食物种类及数量标准设置"> |
|||
<div nz-row [nzGutter]="12"> |
|||
<div nz-col nzSpan="12"> |
|||
<div nz-col nzSpan="24"> |
|||
<ng-template #dayBtnTpl> |
|||
<button nz-button nzType="link"> |
|||
<button nz-button nzType="link" (click)="addFoodType('day')"> |
|||
添加食物种类 |
|||
</button> |
|||
</ng-template> |
|||
<nz-card nzType="inner" nzTitle="食物种类及数量标准（日）" [nzExtra]="dayBtnTpl"> |
|||
<div class=" overflow-y-auto h-80"> |
|||
add |
|||
<nz-empty *ngIf="foodCategoryDay.length === 0"></nz-empty> |
|||
<div *ngIf="foodCategoryDay.length > 0"> |
|||
<div class=""> |
|||
<div nz-row [nzGutter]="[48,12]"> |
|||
<div nz-col nzSpan="12" *ngFor="let d of foodCategoryDay"> |
|||
<div class="flex items-center"> |
|||
<div class="w-60"> |
|||
<nz-select nzPlaceHolder="请选择" class="w-full" [(ngModel)]="d.type"> |
|||
<nz-option *ngFor="let cate of globalEnum.category" |
|||
[nzLabel]="cate.key" |
|||
[nzValue]="cate.value"> |
|||
</nz-option> |
|||
</nz-select> |
|||
</div> |
|||
<div class="flex-1 mx-3"> |
|||
<nz-input-group nzAddOnBefore="大于等于" nzAddOnAfter="种"> |
|||
<input type="number" min="0" nz-input [(ngModel)]="d.value" /> |
|||
</nz-input-group> |
|||
</div> |
|||
<div> |
|||
<button nz-button nzType="link" (click)="removeFoodType('day',d.type)"> |
|||
<i nz-icon nzType="delete"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</nz-card> |
|||
</div> |
|||
<div nz-col nzSpan="12"> |
|||
<div nz-col nzSpan="24" class="mt-4"> |
|||
<ng-template #weekBtnTpl> |
|||
<button nz-button nzType="link"> |
|||
<button nz-button nzType="link" (click)="addFoodType('week')"> |
|||
添加食物种类 |
|||
</button> |
|||
</ng-template> |
|||
<nz-card nzType="inner" nzTitle="食物种类及数量标准（周）" [nzExtra]="weekBtnTpl"> |
|||
<div class=" overflow-y-auto h-80"> |
|||
<nz-empty *ngIf="foodCategoryWeek.length === 0"></nz-empty> |
|||
<div *ngIf="foodCategoryWeek.length > 0"> |
|||
<div class=""> |
|||
<div nz-row [nzGutter]="[48,12]"> |
|||
<div nz-col nzSpan="12" *ngFor="let w of foodCategoryWeek"> |
|||
<div class="flex items-center"> |
|||
<div class="w-60"> |
|||
<nz-select nzPlaceHolder="请选择" class="w-full" [(ngModel)]="w.type"> |
|||
<nz-option *ngFor="let cate of globalEnum.category" |
|||
[nzLabel]="cate.key" |
|||
[nzValue]="cate.value"> |
|||
</nz-option> |
|||
</nz-select> |
|||
</div> |
|||
<div class="flex-1 mx-3"> |
|||
<nz-input-group nzAddOnBefore="大于等于" nzAddOnAfter="种"> |
|||
<input type="number" nz-input [(ngModel)]="w.value" /> |
|||
</nz-input-group> |
|||
</div> |
|||
<div> |
|||
<button nz-button nzType="link" (click)="removeFoodType('week',w.type)"> |
|||
<i nz-icon nzType="delete"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</nz-card> |
|||
</div> |
|||
</div> |
|||
</nz-card> |
|||
|
|||
<nz-card nzTitle="人群名称1" class="mt-4"></nz-card> |
|||
<nz-card nzTitle="营养标准人群设置" class="mt-4 mb-20" [nzExtra]="peopleExtraTpl"> |
|||
<nz-empty *ngIf="ingredient.length === 0"></nz-empty> |
|||
<ng-container *ngIf="ingredient.length > 0"> |
|||
<nz-card |
|||
nzType="inner" |
|||
[nzTitle]="peopleGroupNamTpl" |
|||
[nzExtra]="peopleActionTpl" |
|||
*ngFor="let p of ingredient;let i = index" |
|||
class="mt-4"> |
|||
<ng-template #peopleGroupNamTpl> |
|||
<div class="flex items-center"> |
|||
<span class="mr-2"> |
|||
人群名称： |
|||
</span> |
|||
<div class=" w-80"> |
|||
<input nz-input placeholder="请输入人群名称" [(ngModel)]="p.name" /> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
<ng-template #peopleActionTpl> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="link" (click)="addNutrition(i)"> |
|||
添加营养素 |
|||
</button> |
|||
<button *nzSpaceItem nz-button nzType="link" (click)="removePeopleGroup(i)" nzDanger> |
|||
删除人群 |
|||
</button> |
|||
</nz-space> |
|||
</ng-template> |
|||
<nz-empty *ngIf="p.nutritions.length === 0"></nz-empty> |
|||
<ng-container *ngIf="p.nutritions.length > 0"> |
|||
<h3 class="mb-2">每人每天能量和营养素供给量标准</h3> |
|||
<div nz-row [nzGutter]="[48,12]"> |
|||
<div nz-col nzSpan="12" *ngFor="let n of p.nutritions"> |
|||
<div class="flex items-center"> |
|||
<div class="w-40"> |
|||
<nz-select nzPlaceHolder="请选择" class="w-full" [(ngModel)]="n.nutrition"> |
|||
<nz-option *ngFor="let cate of globalEnum.nutrient " |
|||
[nzLabel]="cate.value + '(' + cate.measurement + ')'" |
|||
[nzValue]="cate.key"> |
|||
</nz-option> |
|||
</nz-select> |
|||
</div> |
|||
<div class="flex-1 ml-2"> |
|||
<nz-space nzAlign="center"> |
|||
<input *nzSpaceItem nz-input placeholder="最小值" type="number" |
|||
[(ngModel)]="n.min" /> |
|||
<div class="px-2" *nzSpaceItem> |
|||
~ |
|||
</div> |
|||
<input *nzSpaceItem nz-input placeholder="最大值" type="number" |
|||
[(ngModel)]="n.max" /> |
|||
</nz-space> |
|||
</div> |
|||
<div class="ml-2"> |
|||
<nz-space nzAlign="center"> |
|||
<div class="pr-3" *nzSpaceItem> |
|||
<label nz-checkbox [(ngModel)]="n.hasUl" |
|||
(ngModelChange)="ulChange(i,n.nutrition,$event)"> |
|||
ul值 |
|||
</label> |
|||
</div> |
|||
<div *nzSpaceItem class="w-20"> |
|||
<ng-container> |
|||
<input [disabled]="!n.hasUl" |
|||
nz-input |
|||
placeholder=" ul值" |
|||
type="number" |
|||
[(ngModel)]="n.ul" /> |
|||
</ng-container> |
|||
</div> |
|||
</nz-space> |
|||
</div> |
|||
<div class="ml-2"> |
|||
<button nz-button nzType="link" (click)="removeNutrition(i,n.nutrition)"> |
|||
<i nz-icon nzType="delete"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</ng-container> |
|||
</nz-card> |
|||
</ng-container> |
|||
</nz-card> |
|||
|
|||
|
|||
<ng-template #peopleExtraTpl> |
|||
<button nz-button (click)="addPeopleGroup()"> |
|||
添加人群 |
|||
</button> |
|||
</ng-template> |
|||
|
|||
</form> |
|||
</div> |
|||
<ng-template #formControlErrorTpl let-control> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</ng-template> |
|||
|
|||
<div class="fixed-footter left-[218px] fixed bottom-0 right-0 bg-white z-10 pl-8 py-2"> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
|||
确定 |
|||
</button> |
|||
<button *nzSpaceItem nz-button> |
|||
取消 |
|||
</button> |
|||
</nz-space> |
|||
<div class="fixed-footter left-[218px] fixed bottom-0 right-0 bg-white z-10 py-2 "> |
|||
<div class="flex justify-center"> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
|||
确定 |
|||
</button> |
|||
<button *nzSpaceItem nz-button> |
|||
取消 |
|||
</button> |
|||
</nz-space> |
|||
</div> |
|||
</div> |
|||
</app-page> |
|||
@ -0,0 +1 @@ |
|||
export * from "./search-and-select/search-and-select.component"; |
|||
@ -0,0 +1,47 @@ |
|||
<div class="search-select flex flex-col"> |
|||
<ng-template #suffixIconSearch> |
|||
<span nz-icon nzType="search"></span> |
|||
</ng-template> |
|||
<div class="flex"> |
|||
<nz-input-group [nzSuffix]="suffixIconSearch" class="flex-1"> |
|||
<input |
|||
class="w-full" |
|||
nz-input |
|||
nzShowSearch |
|||
nzServerSearch |
|||
[placeholder]="placeHolder" |
|||
[(ngModel)]="searchValue" |
|||
(ngModelChange)="search($event)" /> |
|||
</nz-input-group> |
|||
<button nz-button nzType="primary" (click)="onSubmit()" class="ml-2"> |
|||
确定 |
|||
</button> |
|||
</div> |
|||
<div class="flex-1 select pt-2"> |
|||
<nz-card nzSize="small"> |
|||
<nz-empty *ngIf="listOfOption.length === 0"></nz-empty> |
|||
<ul |
|||
*ngIf="listOfOption.length > 0" |
|||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-light ant-dropdown-menu-vertical shadow-none"> |
|||
<li |
|||
*ngFor="let o of listOfOption" |
|||
class="ant-dropdown-menu-item" |
|||
[ngClass]="{'ant-dropdown-menu-item-selected':selected.has(o.value)}" |
|||
(click)="handleSelect(o.value)"> |
|||
{{o.label}} |
|||
</li> |
|||
</ul> |
|||
</nz-card> |
|||
</div> |
|||
|
|||
<!-- <div class="flex items-center justify-end mt-2"> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="text"> |
|||
取消 |
|||
</button> |
|||
<button *nzSpaceItem nz-button nzType="primary"> |
|||
确定 |
|||
</button> |
|||
</nz-space> |
|||
</div> --> |
|||
</div> |
|||
@ -0,0 +1,17 @@ |
|||
:host { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
.search-select { |
|||
width: 100%; |
|||
|
|||
min-height: 200px; |
|||
max-height: 400px; |
|||
|
|||
.select { |
|||
|
|||
overflow-y: auto; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
import { Component, EventEmitter, Input, Output } from "@angular/core"; |
|||
import { OptionItemInterface } from "@cdk/types"; |
|||
import { NzSelectModeType } from "ng-zorro-antd/select"; |
|||
import { Observable, debounceTime } from "rxjs"; |
|||
|
|||
@Component({ |
|||
selector: "search-and-select", |
|||
templateUrl: "./search-and-select.component.html", |
|||
styleUrls: ["./search-and-select.component.less"], |
|||
}) |
|||
export class SearchAndSelectComponent { |
|||
constructor() {} |
|||
|
|||
@Input() handleSearh!: (keyword: string) => Observable<OptionItemInterface[]>; |
|||
|
|||
@Input() placeHolder: string = "输入关键字搜索然后选择"; |
|||
|
|||
@Input() mode: NzSelectModeType = "multiple"; |
|||
|
|||
@Output() onSelect = new EventEmitter<Array<OptionItemInterface>>(); |
|||
|
|||
listOfOption: Array<OptionItemInterface> = []; |
|||
|
|||
searchValue = ""; |
|||
|
|||
selected = new Set<string>(); |
|||
|
|||
nzFilterOption = (): boolean => true; |
|||
|
|||
search(value: string) { |
|||
if (!value) { |
|||
return; |
|||
} |
|||
this.handleSearh |
|||
.call(this, value) |
|||
.pipe(debounceTime(500)) |
|||
.subscribe((data) => { |
|||
this.listOfOption = data; |
|||
// this.listOfOption = Array.from({ length: 2 }, (_, i) => ({ label: "dd" + i, value: i.toString() }));
|
|||
}); |
|||
} |
|||
|
|||
handleSelect(v: string) { |
|||
if (this.selected.has(v)) { |
|||
this.selected.delete(v); |
|||
} else { |
|||
this.selected.add(v); |
|||
} |
|||
} |
|||
|
|||
onSubmit() { |
|||
const selects: OptionItemInterface[] = []; |
|||
this.selected.forEach((i) => { |
|||
selects.push(this.listOfOption.find((f) => f.value === i)!); |
|||
}); |
|||
this.onSelect.emit(selects); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue