diet-web-ui/projects/admin/src/app/components/ingredient-status-list/ingredient-status-list.component.ts

import { Component, Input, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer";
import { AnyObject, TableListOption } from "@cdk/public-api";
import { DishFormComponent } from "@admin/app/components";
import { ApiService } from "@cdk/services";
import { NzModalService } from "ng-zorro-antd/modal";
import { lastValueFrom } from "rxjs";
import { NzMessageService } from "ng-zorro-antd/message";

@Component({
	selector: "app-ingredient-status-list",
	templateUrl: "./ingredient-status-list.component.html",
	styleUrls: ["./ingredient-status-list.component.less"],
})
export class IngredientStatusListComponent {
	constructor(
		private drawer: NzDrawerService,
		private api: ApiService,
		private modal: NzModalService,
		private msg: NzMessageService
	) {}

	@Input() status!: number;

	reason = "";

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

	private drawerRef?: NzDrawerRef;

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

	public queryForm = new FormGroup({
		name: new FormControl(""),
	});

	monthText = {
		1: "一月",
		2: "二月",
		3: "三月",
		4: "四月",
		5: "五月",
		6: "六月",
		7: "七月",
		8: "八月",
		9: "九月",
		10: "十月",
		11: "十一月",
		12: "十二月",
	} as any;

	ngOnInit(): void {
		this.initTableList();
	}

	initTableList() {
		this.tableList.scroll = { x: null };
		this.tableList = this.tableList.setColumns([
			{ key: "name", title: "食谱名称" },
			{ key: "vender", title: "单位" },

			{ key: "modify", title: "提交审核时间" },
			{ key: "modify", title: "提交人" },
		]);

		this.tableList = this.tableList.setOptions([
			{
				title: "详情",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "导出",
				premissions: [],
				onClick: this.showFoodForm.bind(this),
			},
			{
				title: "通过",
				premissions: [],
				onClick: this.reviewSuccessMenu.bind(this),
				visible: () => {
					return this.status === 1;
				},
			},
			{
				title: "驳回",
				premissions: [],
				onClick: this.reviewFailMenu.bind(this),
				visible: () => {
					return this.status === 1;
				},
			},
		]);
	}

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

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

	cancelFoodForm() {
		this.drawerRef?.close();
	}

	reviewSuccessMenu({ id }: any) {
		this.modal.confirm({
			nzTitle: "警告",
			nzContent: `是否要通过审核该食谱？`,
			nzOkDanger: true,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.reviewMenu(id, true));
				this.msg.success(res.desc);
				this.tableList.run();
			},
		});
	}

	reviewFailMenu({ id }: any) {
		this.modal.create({
			nzTitle: "审核驳回",
			nzContent: this.reviewFailMenuTpl,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.reviewMenu(id, false, this.reason));
				this.msg.success(res.desc);
				this.tableList.run();
			},
		});
	}
}