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-40">
                        <nz-form-control>
                            <nz-select nzPlaceHolder="单位" [nzOptions]="[]"></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="name" />
                        </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"
                                 [ngStyle]="{'background-image':'url(' + data +  ')'}">
                            </div>
                        </ng-container>
                        <ng-container *ngSwitchCase="'vender'">
                            {{tableOrg[data] || '-'}}
                        </ng-container>
                        <ng-container *ngSwitchCase="'foodArr'">
                            <a nz-popover
                               [nzPopoverContent]="popoverTpl"
                               nzPopoverTitle="食材及含量">
                                共<b>{{data.length}}</b>中营养素
                            </a>
                            <ng-template #popoverTpl>
                                <div class=" max-w-sm max-h-60 overflow-auto">
                                    <nz-tag *ngFor="let item of data" class="m-1">
                                        {{item.label}}：{{item.value}}{{item.measurement}}
                                    </nz-tag>
                                </div>
                            </ng-template>
                        </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)="cancelFoodForm()">
            取消
        </button>
        <button *nzSpaceItem nz-button nzType="primary">
            保存
        </button>
    </nz-space>
</ng-template>