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 nzPlaceHolder="请选择单位" formControlName="vendors">
								<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(/api/icon/' + data + ')' }"
							></div>
						</ng-container>
						<ng-container *ngSwitchCase="'vender'">
							{{ tableOrg[data] ? tableOrg[data].name : '-' }}
						</ng-container>
						<ng-container *ngSwitchCase="'label'">
							<nz-tag *ngFor="let item of data ?? []">
								{{ item }}
							</nz-tag>
						</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 class="text-left">名称</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>