eam-web-ui/web-admin-app/src/app/shared/components/server-paginated-table/server-paginated-table.component.html

<div>
	@if (formGroup) {
		<form nz-form [nzLayout]="'horizontal'" [formGroup]="formGroup" (ngSubmit)="onSubmit($event)">
			<ng-template [ngTemplateOutlet]="topTpl"></ng-template>
		</form>
	} @else {
		<form nz-form [nzLayout]="'horizontal'" (ngSubmit)="onSubmit($event)">
			<ng-template [ngTemplateOutlet]="topTpl"></ng-template>
		</form>
	}
</div>
<ng-template #topTpl>
	@if (formContentChild) {
		<div class="formgroup-container">
			<div class="form-items">
				<div class="inline-flex flex-wrap query-wrapper">
					<ng-template [ngTemplateOutlet]="formContentChild"></ng-template>
					<nz-space class="inline-flex">
						<button *nzSpaceItem nz-button nzType="primary">查询</button>
						<button *nzSpaceItem nz-button type="button" (click)="reset()">重置</button>
					</nz-space>
				</div>
			</div>
		</div>
	}

	<!-- @if (actionContentChild) {
		<div class="action-container pb-3">
			<ng-template [ngTemplateOutlet]="actionContentChild"> </ng-template>
		</div>
	} -->
</ng-template>

<ng-template #columnsSettingTpl>
	<ul>
		@for (c of options.columns; track $index) {
			<li>
				<label nz-checkbox [(nzChecked)]="c.visible" (nzCheckedChange)="onColumnsChange()">
					{{ c.title }}
				</label>
			</li>
		}
	</ul>
</ng-template>

<nz-card [nzBordered]="false" [nzSize]="'small'" class="shadow">
	@if (tableAction) {
		<div class="mb-2">
			<ng-container [ngTemplateOutlet]="tableAction"> </ng-container>
		</div>
	}

	<nz-table
		#tableRef
		class="server-paginated-table"
		nzShowSizeChanger
		[nzScroll]="{ x: '600px' }"
		[nzShowTotal]="totalTpl"
		[nzData]="pagination.data"
		[nzFrontPagination]="options.config.frontPagination"
		[nzLoading]="pagination.loading"
		[nzTotal]="pagination.total"
		[(nzPageSize)]="pagination.pageSize"
		[(nzPageIndex)]="pagination.pageIndex"
		(nzPageIndexChange)="onPageChange()"
		(nzPageSizeChange)="onPageChange()"
	>
		@if (actionContentChild && selected.size > 0) {
			<div class="table-selected-action flex items-center">
				<span>已选择 ({{ selected.size }}) 项目</span>
				<ng-template [ngTemplateOutlet]="actionContentChild"></ng-template>
			</div>
		}

		<thead>
			<tr>
				@if (options.config.selectable) {
					<th
						nzWidth="60px"
						nzLabel="Select all"
						[nzChecked]="selected.size > 0 && tableRef.data.length > 0"
						[nzIndeterminate]="indeterminate"
						(nzCheckedChange)="onAllChecked($event)"
					></th>
				}
				@for (th of options.columns; track th.key) {
					@if (th.visible) {
						<th [nzColumnKey]="th.key" [nzWidth]="th.width ?? '200px'">{{ th.title }}</th>
					}
				}
				@if (options.operate.length > 0) {
					<th nzWidth="70px" nzRight>操作</th>
				}
				@if (options.columns.length > 3) {
					<th nzWidth="60px" nzRight>
						<div
							class="columns-setting w-full cursor-pointer"
							(click)="handleColumnsSetting(columnsSettingTpl)"
						>
							<i nz-icon nzType="setting" class=""></i>
						</div>
					</th>
				}
			</tr>
		</thead>
		<tbody>
			@for (data of tableRef.data; track $index) {
				<tr>
					@if (options.config.selectable) {
						<td
							[nzChecked]="selected.has(String(data[options.config.rowKey!]))"
							(nzCheckedChange)="onRowSelected($event, data)"
						></td>
					}
					@for (td of options.columns; track td.key) {
						<ng-container>
							@if (td.visible) {
								<td nzEllipsis [attr.title]="renderTitle(data[td.key])">
									<ng-container [ngSwitch]="td.key">
										<ng-container *ngSwitchDefault>
											@if (renderColumn) {
												<ng-container
													[ngTemplateOutlet]="renderColumn"
													[ngTemplateOutletContext]="{
														$implicit: data[td.key],
														key: td.key,
														row: data,
														column: td
													}"
												>
												</ng-container>
											} @else {
												{{ data[td.key] }}
											}
										</ng-container>
									</ng-container>
								</td>
							} @else {}
						</ng-container>
					}

					@if (options.operate.length > 0) {
						<td nzRight>
							<button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menu">
								<span nz-icon nzType="more" nzTheme="outline" class="more-icon"></span>
							</button>
							<nz-dropdown-menu #menu="nzDropdownMenu">
								<ul nz-menu class="operate-list">
									@for (operate of options.operate; track operate.title) {
										@if (operate?.visible(data)) {
											<li
												nz-menu-item
												(click)="onOperateClick(operate, data)"
												[routerLink]="operate.link"
												[nzDanger]="operate.danger"
												[nzDisabled]="operate.disabled"
											>
												{{ operate.title }}
											</li>
										}
									}
								</ul>
							</nz-dropdown-menu>
						</td>
					}
					@if (options.columns.length > 3) {
						<td nzRight></td>
					}
				</tr>
			}
		</tbody>
	</nz-table>
</nz-card>

<ng-template #totalTpl let-total> 共{{ total }}条 </ng-template>