diet-web-ui/projects/client/src/app/components/dish-form/dish-form.component.html

<form nz-form [formGroup]="formGroup" nzLayout="vertical">

    <nz-form-item>
        <nz-form-label nzRequired>
            菜品名称
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">
            <input placeholder="请输入菜品名称" nz-input formControlName="name" />
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label nzRequired>
            菜品标签
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">
            <nz-select
                       formControlName="mark"
                       nzPlaceHolder="请选择菜品标签">
                <nz-option *ngFor="let item of globalEnum.mark" [nzValue]="item.value" [nzLabel]="item.key"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label nzRequired>
            烹饪方式
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">
            <nz-select nzPlaceHolder="请选择烹饪方式" formControlName="poly" nzAllowClear>
                <nz-option *ngFor="let item of globalEnum.poly" [nzLabel]="item.key"
                           [nzValue]="item.value">
                </nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label nzRequired>
            适用月份
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">
            <app-month-select formControlName="month"></app-month-select>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label>
            菜品图片
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">
            <input type="hidden" formControlName="icon" />
            <div class="mb-2" *ngIf="icon">
                <img [src]="icon" class="h-20 w-20" />
            </div>
            <button class="upload-btn " nz-button [nzLoading]="uploadLoading">
                <i nz-icon nzType="upload"></i>
                上传图片
                <input type="file" (change)="onFileChange($event)" />
            </button>
        </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item>
        <nz-form-label nzRequired>
            食材名称
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">
            <input placeholder="请输入食材名称/编号检索" nz-input formControlName="food" />
        </nz-form-control>
    </nz-form-item> -->

    <nz-form-item>
        <nz-form-label nzRequired class="block-label">
            <div class="flex justify-between items-center flex-1">
                <span class="flex-1">
                    食材名称
                </span>
                <!-- <a nz-button nzType="link" (click)="addFoodVisible = true">
                    <span nz-icon nzType="plus"></span>
                    <span>
                        添加食材
                    </span>
                </a> -->
            </div>
        </nz-form-label>
        <nz-form-control [nzErrorTip]="formControlErrorTpl">

            <nz-select
                       [nzMode]="'multiple'"
                       nzShowSearch
                       nzServerSearch
                       nzPlaceHolder="请输入食材名称检索"
                       [nzShowArrow]="false"
                       [nzFilterOption]="nzFilterOption"
                       [(ngModel)]="foodSelected"
                       (ngModelChange)="onFoodSelected($event)"
                       (nzOnSearch)="searchFood($event)"
                       [ngModelOptions]="{standalone: true}">
                <nz-option *ngFor="let o of foodListOfOption" [nzLabel]="o.text" [nzValue]="o.value"></nz-option>
            </nz-select>
            <!-- <div *ngIf="addFoodVisible">
                <nz-select nzSize="large" nzShowSearch nzPlaceHolder="请输入食材名称/编号检索">

                </nz-select>
                <div class="flex justify-end my-2">
                    <nz-space>
                        <button *nzSpaceItem nz-button nzType="text" (click)="addFoodVisible = false">取消</button>
                        <button *nzSpaceItem nz-button nzType="primary" (click)="addFood()">确定</button>
                    </nz-space>
                </div>
            </div> -->
            <ul class="mt-4">
                <li class="mb-2" *ngFor="let f of foodItemSelected;let i = index">
                    <div class="flex items-center">
                        <!-- <div class="w-1/2 pr-2">
                            <button nz-button nzBlock>
                                {{f.value}}-{{f.text}}：
                            </button>
                        </div> -->

                        <div class="flex-1 pr-2">
                            <nz-input-group nzAddOnBefore="{{f.value}}-{{f.text}}：" [nzAddOnAfter]="'g'" class="w-full">
                                <input
                                       nz-input
                                       type="number"
                                       [(ngModel)]="f.num"
                                       [ngModelOptions]="{standalone: true}"
                                       placeholder="请输入{{f.value}}-{{f.text}}重量" />
                            </nz-input-group>
                        </div>
                        <div class="pl-2">
                            <nz-switch [ngModel]="f.isMain" (ngModelChange)="onMainChange($event,f.value)"
                                       [ngModelOptions]="{standalone: true}">
                            </nz-switch>
                            是否主料
                        </div>
                        <!-- <div>
                            <button nz-button (click)="removeFood(i)">
                                <span nz-icon nzType="delete"></span>
                            </button>
                        </div> -->
                    </div>
                </li>
            </ul>
        </nz-form-control>
    </nz-form-item>
</form>
<ng-template #formControlErrorTpl let-control>
    <form-error-tips [control]="control"></form-error-tips>
</ng-template>