diet-web-ui/projects/cdk/src/ingredient/ingredient-meals/ingredient-meals.component.html

<div>
	<div class="mb-3">
		<nz-space>
			<button *nzSpaceItem nz-button nzType="primary" (click)="shopDishForm()">添加菜品</button>
			<button *nzSpaceItem nz-button (click)="clearThisMeal()">清空本餐</button>
		</nz-space>
	</div>
	<nz-table nzTemplateMode [nzBordered]="true" nzSize="small" [nzScroll]="{ x: '1200px' }" class="relative">
		<thead>
			<!-- <tr>
                <th nzWidth="300px"></th>
                <th nzWidth="200px"></th>

                <th [colSpan]="8">

                </th>

            </tr> -->
			<tr>
				<th nzWidth="300px" class="placeholder-th">&nbsp;</th>
				<th nzWidth="200px">
					<span class="absolute top-2 left-[500px] z-10 w-[150px] h-[40px]">重量/克</span>
				</th>

				<th
					*ngFor="let p of peopleGroups; let last = last"
					[ngClass]="{ 'placeholder-th': !last }"
					nzWidth="150px"
				></th>
			</tr>
			<tr>
				<th nzWidth="300px">菜品</th>
				<th nzWidth="200px">食材</th>
				<th *ngFor="let p of peopleGroups">
					{{ p }}
				</th>
			</tr>
		</thead>
		<tbody>
			<ng-container *ngFor="let dish of mealDishs; let dishIndex = index">
				<ng-container *ngIf="dish['mealIndex'] === mealIndex && dish['day'] === day">
					<ng-container *ngFor="let food of dish['items']; let first = first">
						<tr>
							<td *ngIf="first" [rowSpan]="dish['items'].length">
								<div class="flex justify-between">
									<div class="flex-1">
										<div>
											{{ dish['dishName'] }}
										</div>
										<div>
											<nz-tag nzColor="blue" *ngFor="let lb of dish['dishLabel'] ?? []">
												{{ lb }}
											</nz-tag>
										</div>
									</div>
									<button nz-button nzType="text" (click)="onRemoveDish(dish, dishIndex)">
										<i nz-icon nzType="delete"></i>
									</button>
									<!-- nz-dropdown [nzDropdownMenu]="dishOptions" -->
									<!-- <nz-dropdown-menu #dishOptions="nzDropdownMenu">
                                    <ul nz-menu nzSelectable class=" w-20">
                                        <li nz-menu-item>编辑</li>
                                        <li nz-menu-item nzDanger>删除</li>
                                    </ul>
                                </nz-dropdown-menu> -->
								</div>
							</td>
							<td>
								<div class="flex justify-between">
									<span>
										{{ food['foodName'] }}
									</span>
									<!-- <button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="foodOptions">
                                    <i nz-icon nzType="more"></i>
                                </button>
                                <nz-dropdown-menu #foodOptions="nzDropdownMenu">
                                    <ul nz-menu nzSelectable class="w-100">
                                        <li nz-menu-item>设置价格</li>
                                        <li nz-menu-item nzDanger>删除</li>
                                    </ul>
                                </nz-dropdown-menu> -->
								</div>
							</td>
							<td *ngFor="let g of food['groupValues']">
								<input nz-input type="number" [(ngModel)]="g.value" (ngModelChange)="onValueChange()" />
							</td>
						</tr>
					</ng-container>
				</ng-container>
			</ng-container>
			<tr class="total">
				<td colSpan="2" class="text-center">本餐生重总量</td>
				<td *ngFor="let p of peopleGroups">
					{{ $any(totalObj[p])?.toFixed(2) }}
				</td>
			</tr>
		</tbody>
	</nz-table>

	<!-- <nz-empty *ngIf="currentDishs.length === 0" class="empty"></nz-empty> -->
</div>

<ng-template #addDishFooter>
	<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>