eam-web-ui/web-admin-app/src/app/components/plan-task/task-form/task-form.component.ts

import { Component, Input, OnInit, inject } from '@angular/core'
import { FormBuilder, FormGroup } from '@angular/forms'
import { ApiService } from 'app/services'
import { SharedModule } from 'app/shared/shared.module'
import { FormValidators, Utils } from 'app/utils'
import { NzMessageService } from 'ng-zorro-antd/message'

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

import { ActivatedRoute } from '@angular/router'
import { STOCKTAKING_JOB_STATUS_MAP, taskTypeTitle } from 'app/constants'
import {
	AssetSelectComponent,
	OrgSelectComponent,
	PositionSelectComponent,
	SelectUserByOrgComponent,
	SupplierSelectComponent,
} from 'app/components'
import { UploadComponent } from '../../../shared/components/upload/upload.component'

@Component({
	selector: 'app-stocktaking-detail-form',
	standalone: true,
	imports: [
		SharedModule,
		SelectUserByOrgComponent,
		SupplierSelectComponent,
		AssetSelectComponent,
		OrgSelectComponent,
		PositionSelectComponent,
		UploadComponent,
	],
	templateUrl: './task-form.component.html',
	styleUrl: './task-form.component.less',
})
export class TaskFormComponent {
	constructor(
		private fb: FormBuilder,
		private api: ApiService,
		private msg: NzMessageService,
		private route: ActivatedRoute,
	) {}

	readonly data: NzSafeAny = inject(NZ_MODAL_DATA)

	STOCKTAKING_JOB_STATUS_MAP = STOCKTAKING_JOB_STATUS_MAP

	formGroup!: FormGroup

	groupIndex = 0

	uploadLoading = false

	uploadImgLoading = false

	iconPreview = ''

	flowForms: NzSafeAny[] = []

	teamList: NzSafeAny[] = []
	ngOnInit(): void {
		this.api.getAssetTeamAll().subscribe((res) => {
			this.teamList = res.body
		})
		this.api.getFlowFormList().subscribe((res) => {
			this.flowForms = res.body
		})

		this.formGroup = this.fb.group({
			name: this.fb.control(null, [FormValidators.required('请输入')]),
			remark: this.fb.control(null, []),

			plannedDate: this.fb.control(null, [FormValidators.required('请选择')]),

			businessId: this.fb.control(null, []),
			attachment: this.fb.control(null, []),
			img: this.fb.control(null, []),

			assetIdList: this.fb.control([], []),
		})

		this.patchValues()
	}

	title?: string

	patchValues() {
		const { value: data, preview, type } = this.data
		this.title = taskTypeTitle.get(type)
		if (data) {
			this.formGroup.patchValue({
				...data,
			})
		}
		if (preview) {
			this.formGroup.disable()
		}
	}

	public getValues() {
		let values = null
		console.log('this.formGroup', this.formGroup)
		if (FormValidators.validateFormGroup(this.formGroup)) {
			const v = this.formGroup.value
			values = {
				...v,
				assetIdList: v.assetIdList.map((i: NzSafeAny) => {
					return {
						...i,
						// assetId: i,
					}
				}),
				// assetId
			}
		}
		return values
	}

	onFileChange(e: Event) {
		const target = e.target as HTMLInputElement
		const file = target.files![0]
		target.value = ''

		const formdata = new FormData()
		formdata.append('file', file)
		this.api.upload(formdata).subscribe((res) => {
			this.formGroup.get('attachment')?.setValue(res.body.fileName)
		})
	}

	onImgChange(e: Event) {
		const target = e.target as HTMLInputElement
		const file = target.files![0]
		target.value = ''
		if (file.size / 1024 / 1024 >= 2) {
			this.msg.error('图片大小不能超过2M')
			return
		}
		const fileReader = new FileReader()
		fileReader.onload = () => {
			const base64 = fileReader.result as string
			this.iconPreview = base64
		}
		fileReader.readAsDataURL(file)
		const formdata = new FormData()
		formdata.append('file', file)
		this.api.upload(formdata).subscribe((res) => {
			this.formGroup.get('img')?.setValue(res.body.fileName)
		})
	}
}