kkerwin
2 years ago
24 changed files with 848 additions and 161 deletions
@ -1,53 +1,198 @@ |
|||||
<app-page> |
<app-page> |
||||
<form nz-form [formGroup]="formGroup" nzLayout="vertical"> |
<div nz-form nzLayout="vertical"> |
||||
|
|
||||
<nz-card nzTitle="食物种类及数量标准设置"> |
<nz-card nzTitle="食物种类及数量标准设置"> |
||||
<div nz-row [nzGutter]="12"> |
<div nz-row [nzGutter]="12"> |
||||
<div nz-col nzSpan="12"> |
<div nz-col nzSpan="24"> |
||||
<ng-template #dayBtnTpl> |
<ng-template #dayBtnTpl> |
||||
<button nz-button nzType="link"> |
<button nz-button nzType="link" (click)="addFoodType('day')"> |
||||
添加食物种类 |
添加食物种类 |
||||
</button> |
</button> |
||||
</ng-template> |
</ng-template> |
||||
<nz-card nzType="inner" nzTitle="食物种类及数量标准（日）" [nzExtra]="dayBtnTpl"> |
<nz-card nzType="inner" nzTitle="食物种类及数量标准（日）" [nzExtra]="dayBtnTpl"> |
||||
<div class=" overflow-y-auto h-80"> |
<nz-empty *ngIf="foodCategoryDay.length === 0"></nz-empty> |
||||
add |
<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> |
</div> |
||||
</nz-card> |
</nz-card> |
||||
</div> |
</div> |
||||
<div nz-col nzSpan="12"> |
<div nz-col nzSpan="24" class="mt-4"> |
||||
<ng-template #weekBtnTpl> |
<ng-template #weekBtnTpl> |
||||
<button nz-button nzType="link"> |
<button nz-button nzType="link" (click)="addFoodType('week')"> |
||||
添加食物种类 |
添加食物种类 |
||||
</button> |
</button> |
||||
</ng-template> |
</ng-template> |
||||
<nz-card nzType="inner" nzTitle="食物种类及数量标准（周）" [nzExtra]="weekBtnTpl"> |
<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> |
</div> |
||||
</nz-card> |
</nz-card> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</nz-card> |
</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> |
<ng-template #formControlErrorTpl let-control> |
||||
<form-error-tips [control]="control"></form-error-tips> |
<form-error-tips [control]="control"></form-error-tips> |
||||
</ng-template> |
</ng-template> |
||||
|
|
||||
<div class="fixed-footter left-[218px] fixed bottom-0 right-0 bg-white z-10 pl-8 py-2"> |
<div class="fixed-footter left-[218px] fixed bottom-0 right-0 bg-white z-10 py-2 "> |
||||
<nz-space> |
<div class="flex justify-center"> |
||||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
<nz-space> |
||||
确定 |
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
||||
</button> |
确定 |
||||
<button *nzSpaceItem nz-button> |
</button> |
||||
取消 |
<button *nzSpaceItem nz-button> |
||||
</button> |
取消 |
||||
</nz-space> |
</button> |
||||
|
</nz-space> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</app-page> |
</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