eam-web-ui/web-admin-app/src/app/components/asset-select/asset-select.component.ts

import {
	ChangeDetectorRef,
	Component,
	EventEmitter,
	Input,
	OnInit,
	Output,
	TemplateRef,
	ViewChild,
	forwardRef,
} from '@angular/core'
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'

import { NzSafeAny } from 'ng-zorro-antd/core/types'

import { NzModalService } from 'ng-zorro-antd/modal'

import { ApiService } from 'app/services'
import { NzMessageService } from 'ng-zorro-antd/message'

import { SharedModule } from 'app/shared/shared.module'
import { Utils } from 'app/utils'
import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd/tree'
import { NzTreeSelectComponent } from 'ng-zorro-antd/tree-select'
import { ASSET_SOURCE_MAP, ASSET_STATUS_MAP, MAX_PAGE_SIZE } from 'app/constants'
import { AnyObject, TableOption } from 'app/shared/components/server-paginated-table'
import { PositionSelectComponent } from '../position-select/position-select.component'
import { ManufacturerSelectComponent } from '../manufacturer-select/manufacturer-select.component'
import { tap } from 'rxjs'

@Component({
	selector: 'app-asset-select',
	standalone: true,
	imports: [SharedModule, PositionSelectComponent, ManufacturerSelectComponent],
	templateUrl: './asset-select.component.html',
	styleUrl: './asset-select.component.less',
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			multi: true,
			useExisting: forwardRef(() => AssetSelectComponent),
		},
	],
})
export class AssetSelectComponent {
	constructor(
		private api: ApiService,
		private modal: NzModalService,
		private msg: NzMessageService,
	) {}

	@Input() radio: boolean = false

	@Output() onSelected = new EventEmitter<NzSafeAny>()

	allGetedDataMap = new Map<number, NzSafeAny>()

	originData: NzSafeAny[] = []

	value?: string

	disabled = false

	selectedDataList: NzSafeAny[] = []

	checkedAll = false

	loading = false

	indeterminate = false

	setOfCheckedId = new Set<number>()

	ASSET_SOURCE_MAP = ASSET_SOURCE_MAP

	ASSET_STATUS_MAP = ASSET_STATUS_MAP()

	table = new TableOption(this.fetchData.bind(this))

	queryForm = new FormGroup({
		name: new FormControl(),
		model: new FormControl(),
		status: new FormControl(),
		assetCode: new FormControl(),
		serialNumber: new FormControl(),
		sourceId: new FormControl(),
		positionId: new FormControl(),
		manufacturersVendorId: new FormControl(),
	})

	ngOnInit(): void {
		this.api.getBasicSupplierVendorPage({ pageSize: MAX_PAGE_SIZE, pageNum: 1 }).subscribe((res) => {
			this.originData = res.body.rows
		})
		this.table
			.setConfig({
				selectable: true,
				rowKey: 'assetId',
			})
			.setColumn([
				{ key: 'assetCode', title: '资产编号', visible: true },
				{ key: 'name', title: '资产名称', visible: true },
				{ key: '_category', title: '资产分类', visible: true },
				{ key: 'status', title: '资产状态', visible: true },
				{ key: '_ownCompany', title: '所属公司', visible: true },
				{ key: '_useOrganization', title: '使用组织', visible: true },
				{ key: '_position', title: '存放位置', visible: true },
			])
	}

	fetchData(p: {}, q: AnyObject) {
		return this.api.getAssetPage({ ...p, ...q }).pipe(
			tap((res) => {
				res.body.rows.forEach((item: NzSafeAny) => {
					this.allGetedDataMap.set(item.assetId, item)
				})
			}),
		)
	}

	onTrigger(nzContent: TemplateRef<{}>) {
		this.modal.create({
			nzTitle: '选择资产',
			nzContent,
			nzWidth: '80vw',
			nzWrapClassName: 'modal-lg',
			nzOnOk: () => {
				this.allGetedDataMap.forEach((i: NzSafeAny) => {
					if (this.table.ref.selected.has(String(i.assetId))) {
						if (!this.selectedDataList.some((s) => s.assetId === i.assetId)) {
							this.selectedDataList.push(i)
						}
					}
				})
				this.selectedDataList = this.selectedDataList.slice()
				this.refreshCheckedStatus()
				this.onChange(this.selectedDataList.map((i) => i.assetId))
			},
		})
	}

	onRemove() {
		this.selectedDataList = this.selectedDataList.filter((i) => !this.setOfCheckedId.has(i.assetId))
		this.refreshCheckedStatus()
	}

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

	refreshCheckedStatus(): void {
		const listOfEnabledData = this.selectedDataList.filter(({ disabled }) => !disabled)
		this.checkedAll = listOfEnabledData.every(({ assetId }) => this.setOfCheckedId.has(assetId))
		this.indeterminate =
			listOfEnabledData.some(({ assetId }) => this.setOfCheckedId.has(assetId)) && !this.checkedAll
	}

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

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

	onTouched = () => {}

	onChange(v: NzSafeAny[]) {}

	writeValue(v: NzSafeAny): void {
		this.selectedDataList = []
	}

	registerOnChange(fn: any): void {
		this.onChange = fn
	}

	registerOnTouched(fn: any): void {
		this.onTouched = fn
	}

	setDisabledState?(isDisabled: boolean): void {
		this.disabled = isDisabled
	}
}