diet-web-ui/projects/client/src/app/pages/dish/dish.component.ts

import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { AnyObject, TableListOption } from "@cdk/public-api";
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer";
import { NzModalService } from "ng-zorro-antd/modal";
import { Subject, takeUntil } from "rxjs";
import { ApiService } from "@cdk/services";

@Component({
	selector: "app-dish",
	templateUrl: "./dish.component.html",
	styleUrls: ["./dish.component.less"],
})
export class DishComponent implements OnInit, OnDestroy {
	constructor(private drawer: NzDrawerService, private api: ApiService, private modal: NzModalService) {}

	@ViewChild("foofFormFooterTpl") foofFormFooterTpl!: TemplateRef<{}>;

	tempImg = "https://cdn.pixabay.com/photo/2023/08/08/18/01/butterfly-8177925_1280.jpg";

	public tableList = new TableListOption(this.fetchData.bind(this), {
		selectable: true,
	});

	public queryForm = new FormGroup({
		type: new FormControl({ value: "A", disabled: false }),
		name: new FormControl("addd"),
	});

	private destroy$ = new Subject<void>();

	public selectedIds: string[] = [];

	temp = Array.from({ length: 50 }, (_, i) => i);

	ngOnInit(): void {
		this.initTableList();
		this.tableList.getState$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
			this.selectedIds = res.selectedKeys as Array<string>;
		});
	}

	ngOnDestroy(): void {
		this.destroy$.next();
		this.destroy$.complete();
	}

	initTableList() {
		this.tableList.scroll = { x: null };
		this.tableList = this.tableList.setColumns([
			{ key: "img", title: "菜品图片", width: "66px" },
			{ key: "name", title: "菜品名称" },
			{ key: "name", title: "菜品标签" },
			{ key: "name", title: "食材及含量", width: "30%" },
			{ key: "name", title: "单位" },
		]);

		this.tableList = this.tableList.setOptions([
			{
				title: "打印营养标签",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "编辑",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "删除",
				premissions: [],
				onClick: this.deleteItem.bind(this),
			},
		]);
	}

	fetchData(pager: AnyObject, query: AnyObject) {
		return this.api.page(pager, query);
	}

	deleteItem(v?: any) {
		const ids = v ? [v.id] : this.selectedIds;
		this.modal.confirm({
			nzTitle: "警告",
			nzContent: "是否要删除该食材？",
			nzOkDanger: true,
			nzOnOk: () => {},
		});
	}

	showFoodForm(food?: any) {
		// this.drawerRef = this.drawer.create({
		// 	nzTitle: food ? "编辑菜品" : "新增菜品",
		// 	nzWidth: 700,
		// 	nzContent: DishFormComponent,
		// 	nzFooter: this.formFooterTpl,
		// });
	}
}