import { Component } from '@angular/core'; import {MerService} from "../../../servies/merchant/mer.service"; import {NzModalModule, NzModalService} from "ng-zorro-antd/modal"; import {FormGroup, FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; import {NgForOf, NgIf} from "@angular/common"; import {NzButtonComponent} from "ng-zorro-antd/button"; import {NzColDirective} from "ng-zorro-antd/grid"; import {NzFlexDirective} from "ng-zorro-antd/flex"; import { NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzFormModule } from "ng-zorro-antd/form"; import {NzInputDirective} from "ng-zorro-antd/input"; import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select"; import {NzUploadFile, NzUploadModule} from "ng-zorro-antd/upload"; import {NzIconDirective} from "ng-zorro-antd/icon"; import {Observable, Observer} from "rxjs"; import {NzMessageService} from "ng-zorro-antd/message"; import {RoleService} from "../../../servies/role/role.service"; import {environment} from "../../../../environments/environment"; @Component({ selector: 'app-mer-add', standalone: true, imports: [ FormsModule, NgForOf, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, ReactiveFormsModule, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzSelectComponent, NzOptionComponent, NzModalModule, NzFormModule, NzUploadModule, NzIconDirective, NgIf ], templateUrl: './mer-add.component.html', styleUrl: './mer-add.component.less' }) export class MerAddComponent { BASE_URL = environment.baseUrl; loading = false; logoUrl?: string; form: FormGroup; // 角色数据 roleData: any = []; constructor(private fb: NonNullableFormBuilder, private merService: MerService, private roleService: RoleService, private message: NzMessageService, private modal: NzModalService) { // 初始化表单 this.form = this.fb.group({ loginName: ['', [Validators.required]], roleId: ['', [Validators.required]], merLogo: [''], merName: [''], directorName: [''], directorTel: [''], customerServiceTel: [''], address: [''], }); // 获取角色数据 this.roleService.queryAllRole((data: any) => { this.roleData = data['return_data']; }); } submitForm() { console.log(this.logoUrl); if (this.form.valid) { this.merService.create(this.form.value, (data: any) => { if (data['return_code'] == '000000') { this.message.create('success', '操作成功'); // 清空表单 this.form.reset(); this.logoUrl = ''; } else { this.message.create('error', data['return_msg']); } }); } else { Object.values(this.form.controls).forEach(control => { if (control.invalid) { control.markAsDirty(); control.updateValueAndValidity({ onlySelf: true }); } }); } } private getBase64(img: File, callback: (img: string) => void): void { const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result!.toString())); reader.readAsDataURL(img); } handleChange(info: { file: NzUploadFile }): void { switch (info.file.status) { case 'uploading': this.loading = true; break; case 'done': // Get this url from response in real world. this.getBase64(info.file!.originFileObj!, (img: string) => { this.loading = false; this.logoUrl = img; }); this.form.patchValue({ merLogo: info.file.response['return_data'][0]}); break; case 'error': this.message.error('网络错误!'); this.loading = false; break; } } beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => { return new Observable((observer: Observer) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { this.message.error('只能上传JPG文件!'); observer.complete(); return; } const isLt2M = file.size! / 1024 / 1024 < 2; if (!isLt2M) { this.message.error('图片必须小于2MB!'); observer.complete(); return; } observer.next(isJpgOrPng && isLt2M); observer.complete(); }); }; }