bolt2-ui/projects/client/src/app/feature/detection/components/device-table/device-table.component.ts

import { Component, Input, OnInit } from "@angular/core";
import { AnyObject } from "@cdk/types";
import { DetectionApiService } from "@client/app/core/services";
import { PointDTO, PointGroupDTO, DeviceDTO } from "@client/dtos";
import { NzMessageService } from "ng-zorro-antd/message";

@Component({
	selector: "app-device-table",
	templateUrl: "./device-table.component.html",
	styleUrls: ["./device-table.component.less"],
})
export class DeviceTableComponent implements OnInit {
	constructor(private api: DetectionApiService, private msg: NzMessageService) {}

	@Input() currentSelected: { id: string; name: string }[] = [];

	@Input() otherSelected: { id: string; name: string }[] = [];

	checked = false;

	loading = false;

	indeterminate = false;

	groups: PointGroupDTO[] = [];

	gid: string = "";

	pid: string = "";

	points: PointDTO[] = [];

	currentPointList: PointDTO[] = [];

	listOfData: DeviceDTO[] = [];

	listOfCurrentPageData: readonly any[] = [];

	setOfCheckedId = new Set<string>();

	setOfDataFromServer: AnyObject[] = [];

	public get selectedDevice(): AnyObject[] {
		return this.setOfDataFromServer.filter((f) => this.setOfCheckedId.has(f["id"]));
	}

	public get currentSelectedGroupName(): string {
		return this.groups.find((f) => f.motorGroupId === this.gid)?.name ?? "";
	}

	public get currentSelectedPoint(): PointDTO | undefined {
		return this.points.find((f) => f.pointId === this.pid);
	}

	ngOnInit(): void {
		this.currentSelected?.forEach((p) => {
			this.updateCheckedSet(p.id, true);
		});
		this.api.getFlatPoints().subscribe(({ points, groups }) => {
			this.groups = groups;
			this.points = points;
		});
	}

	onReset() {
		this.gid = "";
		this.onSearch();
	}

	onSearch() {
		if (!this.pid) {
			this.msg.error("请选择检测点");
			return;
		}

		this.api.getDeviceListByPointId(this.pid).subscribe((res) => {
			console.log("this.otherSelected", this.otherSelected);
			if (Array.isArray(res.body)) {
				this.listOfData = res.body.map((i) => {
					return {
						...i,
						id: i.deviceId,
						disabled: !!this.otherSelected.find((f) => f.id === i.deviceId),
					};
				});
			} else {
				this.listOfData = [];
			}
			this.listOfData.forEach((i) => {
				if (!this.setOfDataFromServer.some((s) => s["id"] === i["id"])) {
					this.setOfDataFromServer.push(i);
				}
			});
			this.refreshCheckedStatus();
		});
	}

	onGroupChange(gid: string) {
		this.currentPointList = this.groups.find((f) => f.motorGroupId === gid)?.pointList ?? [];
		this.pid = "";
	}

	updateCheckedSet(id: string, checked: boolean): void {
		if (checked) {
			this.setOfCheckedId.add(id);
		} else {
			this.setOfCheckedId.delete(id);
		}
	}

	onCurrentPageDataChange(listOfCurrentPageData: readonly any[]): void {
		this.listOfCurrentPageData = listOfCurrentPageData;
		this.refreshCheckedStatus();
	}

	refreshCheckedStatus(): void {
		const listOfEnabledData = this.listOfCurrentPageData.filter(({ disabled }) => !disabled);
		this.checked = listOfEnabledData.length > 0 && listOfEnabledData.every(({ id }) => this.setOfCheckedId.has(id));
		this.indeterminate = listOfEnabledData.some(({ id }) => this.setOfCheckedId.has(id)) && !this.checked;
	}

	onItemChecked(id: string, checked: boolean): void {
		this.updateCheckedSet(id, checked);
		this.refreshCheckedStatus();
	}

	onAllChecked(checked: boolean): void {
		this.listOfCurrentPageData
			.filter(({ disabled }) => !disabled)
			.forEach(({ id }) => this.updateCheckedSet(id, checked));
		this.refreshCheckedStatus();
	}
}