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 [disabled]="!selectedIds.length"
                    (click)="printTag()">批量打印营养标签</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="'ingredient'">
                            <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" [nzLoading]="submitLoading" (click)="onSubmit()">
            保存
        </button>
    </nz-space>
</ng-template>


<app-print #print
           [content]="printContent">
</app-print>


<ng-template #printContent>

    <div class="printContent"
         *ngFor="let item of printData">

        <table class="print-table">
            <tbody>
                <tr>
                    <th colspan="3">
                        {{item.name}}
                    </th>
                </tr>
                <tr>
                    <th colspan="3">
                        营养成分表
                    </th>
                </tr>
                <tr>
                    <th>
                        名称
                    </th>
                    <th class="text-center">
                        每100克（g）
                    </th>
                    <th class="text-center">
                        营养参考值%（NVR%）
                    </th>
                </tr>
            </tbody>
            <tbody>
                <tr *ngFor="let th of item.component">
                    <td [width]="'38.2%'">{{ th.name }}</td>
                    <td class="text-center">{{ th.nutrition }}</td>
                    <td class="text-center">{{ th.nvr }}</td>
                </tr>

            </tbody>
        </table>
        <div>
            主要原料：{{item.ingredients.join('，')}}
        </div>
        <div>
            1毫克（mg）钠相当于2.5毫克食盐
        </div>
    </div>
</ng-template>