diet-web-ui/projects/admin/src/app/pages/dish/dish.component.html

<app-page>
    <ng-template #pageExtraTpl>
        <nz-space>
            <button *nzSpaceItem nz-button [disabled]="!selectedIds.length" (click)="deleteItem()">批量删除</button>
            <button *nzSpaceItem nz-button>批量打印营养标签</button>
            <button *nzSpaceItem nz-button nzType="primary" (click)="showFoodForm()">
                <i nz-icon nzType="plus"></i>
                新增菜品
            </button>
        </nz-space>
    </ng-template>
    <div class="h-full overflow-hidden bg-white rounded-lg">

        <nz-card [nzBordered]="false" nzTitle="菜品管理">
            <table-list [props]="tableList" [search]="searchTpl" [action]="pageExtraTpl" [formGroup]="queryForm"
                        [renderColumns]="renderColumnsTpl">


                <ng-template #searchTpl>
                    <nz-form-item class="w-60">
                        <nz-form-control>
                            <nz-select
                                       nzShowSearch
                                       nzServerSearch
                                       nzPlaceHolder="请选择单位"
                                       [nzShowArrow]="false"
                                       formControlName="vendors"
                                       [nzFilterOption]="nzFilterOption"
                                       (nzOnSearch)="searchOrg($event)">
                                <nz-option *ngFor="let o of listOfOption" [nzLabel]="o.text"
                                           [nzValue]="o.value"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item class="w-40">
                        <nz-form-control>
                            <nz-select nzPlaceHolder="菜品标签" formControlName="mark" nzAllowClear>
                                <nz-option *ngFor="let item of globalEnum.mark" [nzLabel]="item.key"
                                           [nzValue]="item.key">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-control>
                            <input nz-input placeholder="请输入菜品名称" formControlName="keyword" />
                        </nz-form-control>
                    </nz-form-item>
                </ng-template>
                <ng-template #renderColumnsTpl let-data let-key="key" let-row="row">
                    <ng-container [ngSwitch]="key">
                        <ng-container *ngSwitchCase="'icon'">
                            <div class="dish-img overflow-auto"
                                 *ngIf="data"
                                 [ngStyle]="{'background-image':'url(' + data +  ')'}">
                            </div>
                        </ng-container>
                        <ng-container *ngSwitchCase="'vender'">
                            {{ tableOrg[data] ? tableOrg[data].name : '-'}}
                        </ng-container>
                        <ng-container *ngSwitchCase="'foodArr'">
                            <div class=" flex flex-wrap">
                                <ng-container *ngFor="let item of data">
                                    <nz-tag *ngIf="tableFoods[item.key]" class="m-1">
                                        {{tableFoods[item.key]['name']}}：{{item.value}} g
                                    </nz-tag>
                                </ng-container>
                            </div>
                        </ng-container>
                        <ng-container *ngSwitchDefault>
                            {{data}}
                        </ng-container>
                    </ng-container>
                </ng-template>
            </table-list>
        </nz-card>
    </div>
</app-page>


<ng-template #formFooterTpl>
    <nz-space>
        <button *nzSpaceItem nz-button (click)="cancelForm()" type="button">
            取消
        </button>
        <button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()">
            保存
        </button>
    </nz-space>
</ng-template>